技术宅-自由看

累计撰写 271 篇文章
累计创建 42 个标签
累计收到 0 条评论

目录CONTENT

以下是技术宅相关的文章

2023-07-28
🌟 新一代样式工具：Tailwind CSS 的原子化理念与工程化实践 <h2>原子化 CSS：实用至上</h2> <p>**Tailwind CSS** 是一款不同于传统 BEM 或 OOCSS 的 **原子化 CSS 框架**。它不提供预先定义的组件样式，而是提供大量的 **实用工具类（Utility Classes）**，例如 `flex`, `pt-4` (padding-top: 1rem), `text-c
- 2023-07-28
- 0
- 0
- 0
- 前端
2023-07-19
🚀 告别漫长等待：Vite 如何利用 ES Modules 实现秒级启动和热更新？ <h2>Vite：下一代前端构建工具</h2> <p>传统的打包工具如 Webpack 在大型项目中启动速度慢、热更新（HMR）耗时久的问题日益突出。Vue 创始人尤雨溪开发的 **Vite** 通过利用浏览器原生的 **ES Modules (ESM)** 特性，彻底改变了开发模式。</p> <h3>Vite 的两大提速秘
- 2023-07-19
- 0
- 0
- 0
- 前端
2023-07-07
✨ Vue 3 的魔法：基于 Proxy 的响应式系统如何实现精准更新？ <h2>Vue 3：从 Getter/Setter 到 Proxy</h2> <p>Vue 3 的响应式系统是其核心亮点之一。与 Vue 2 基于 **`Object.defineProperty`** 的实现不同，Vue 3 全面转向了 **JavaScript Proxy** API。这一转变解决了 Vue 2 中遗留的两个核心痛点：</p>
- 2023-07-07
- 1
- 0
- 0
- 前端
2023-06-20
🖼️ 图片加载优化：使用 Picture 标签和 Srcset 实现最佳响应式图片 <h2>图片：性能的首要瓶颈</h2> <p>图片通常占据网页总下载字节数的 50% 以上。在响应式设计中，给所有设备都加载同一张高分辨率大图是极大的浪费。现代前端应采用 **响应式图片技术** 来提供最适合用户设备尺寸和像素密度的图片。</p> <h3>🚀 响应式图片两大 API：</h3> <u
- 2023-06-20
- 0
- 0
- 0
- 前端
2023-06-12
🗃️ 数据持久化：IndexDB 与 LocalStorage 的选择与最佳实践 <h2>浏览器端的数据存储</h2> <p>前端应用需要将数据持久化到用户设备上，以实现离线访问、减少网络请求或保存用户配置。常见的浏览器存储方案有 LocalStorage 和 IndexDB。</p> <h3>存储方案对比：</h3> <table border="1">
- 2023-06-12
- 1
- 0
- 0
- 前端
2023-06-01
🧩 跨框架组件：Web Components 的 Shadow DOM 隔离与复用机制 <h2>Web Components：原生组件化标准</h2> <p>Web Components 是一套原生的浏览器 API，允许开发者创建可复用的、封装良好的定制元素。它被认为是实现 **跨框架组件复用** 的终极解决方案。其核心机制是 **Shadow DOM**，它解决了困扰前端多年的 **样式污染和 DOM 隔离** 问题。</p>
- 2023-06-01
- 0
- 0
- 0
- 前端
2023-05-20
📦 前端状态管理：从 Redux 到 Zustand/Pinia 的轻量化趋势 <h2>状态管理：应用复杂度的核心</h2> <p>随着单页应用（SPA）的普及，如何管理跨组件共享的状态（State）成为了核心挑战。早期的 **Redux** 通过严格的单向数据流和不可变性，解决了状态的可预测性问题，但也带来了 **大量的模板代码（Boilerplate）**。</p> <h3>🔄 状态管理的新趋势：
- 2023-05-20
- 1
- 0
- 0
- 前端
2023-05-09
🔒 前端防御：内容安全策略（CSP）的配置与 XSS 攻击的防护 <h2>CSP：防范 XSS 的终极武器</h2> <p>在前端安全领域，**跨站脚本攻击 (XSS)** 是最常见且危害最大的漏洞之一。虽然输入过滤是必须的，但更强大的防御机制是 **内容安全策略 (Content Security Policy, CSP)**。</p> <h3>CSP 的工作原理：</h3>
- 2023-05-09
- 0
- 0
- 0
- 前端
2023-05-01
📝 代码质量保障：ESLint 与 Prettier 在前端工程化中的配置与协作 <h2>代码规范：提升团队协作效率</h2> <p>在前端团队协作中，统一的代码风格和质量标准是必不可少的。**ESLint** 和 **Prettier** 是这一目标的两大核心工具，它们虽然目标相似，但职能分工明确：</p> <ul> <li>**ESLint (Quality):** 负
- 2023-05-01
- 2
- 0
- 0
- 前端
2023-04-19
🎨 CSS 动画性能：使用 Will-Change 和 Transform 优化硬件加速 <h2>动画流畅度的秘密</h2> <p>流畅的动画是优秀用户体验的关键。在前端动画中，性能最高的动画应该在浏览器的 **复合层（Compositor Layer）** 上运行，从而利用 **GPU 硬件加速**。以下是两个核心优化技巧：</p> <ol> <li>**`transform`
- 2023-04-19
- 0
- 0
- 0
- 前端

1
...
7
8
9
...
14