HTML基础

在一次前端性能优化项目中，我们发现仅仅一个 icon font 文件就高达 20MB。这不仅拖慢了首屏加载速度，还极大地浪费了带宽。最终，我们将它压缩到了 10KB，而不影响任何功能表现。 这一过程背

不是我杠。是真的用了一段时间之后，我开始怀疑，我到底是在写样式，还是在拼？？ Inline-style 再丑，好歹直觉。Tailwind，看起来像原子，其实是一坨。 👀背景：Tailwind 被当成“

🔥先说结论：我已经全面弃用 iconfont，只用 SVG 用了 6 年 iconfont，直到一次 icon 闪退 + 一个 retina 模糊问题，我怒转 SVG。现在回看，我只想说：一切都晚了。

说到编程语言，谁的名字最响？ JavaScript？控制一切前端交互； Python？AI 和爬虫首选； Rust？系统级新贵，性能炸裂。 而 CSS 呢？ 不客气地说，CSS 一直在“技术鄙视链”的

我是一个 Vue 使用者，甚至不夸张地说，“Vue 是我入行前端的第一个框架”。 但三个月前，我开始一个内部系统重构项目时，发现： 项目组件越来越多，但状态共享越来越难处理； Vuex 太重，Pini

在如今用户体验越来越“挑剔”的前端世界里，**滚动视差（Parallax Scrolling）**已经成为提升页面沉浸感和高级感的标配。而过去我们实现视差动画时，往往借助于 scroll 事件 + J

前端开发常说“JavaScript 是单线程的”，但如果你正在做动画、数据可视化、图像处理、游戏开发、或任何基于 Canvas 的复杂渲染，你一定体会过——主线程的“卡顿地狱” 。 这种时候，Web

前端开发者常常需要处理“取消任务”的场景：接口请求发出后用户快速切换页面、组件卸载、搜索防抖中断上一次请求等等。这种需求本质上就是**“任务中断”**。 但在过去，JavaScript 没有原生取消异

一、PostCSS 是什么？为什么它值得深入了解？ PostCSS 是一个用 JavaScript 编写的 CSS 转换引擎。它的核心理念并不是像 Sass 或 Less 那样提供新语法，而是提供一个

前端世界里有很多看似“直白”的属性，比如 position: sticky，听起来像是“粘住某个位置”——只要设置好就能吸附在页面某个位置上，滚动时一动不动。 结果实际开发中你可能经历过以下崩溃三连：

现代 Web UI 越来越强调流畅、连贯的用户体验。然而传统的 DOM 操作导致内容切换生硬，缺乏过渡动画。为此，Chrome 团队提出了一项划时代的标准草案 —— View Transitions

随着前端模块化的发展，ES Modules（简称 ES 模块）逐渐成为现代 JavaScript 代码组织的主流方式。浏览器原生支持 ES 模块后，如何高效管理模块依赖路径成为关键挑战。尤其是浏览器默

1. 背景与引言 LCP（Largest Contentful Paint，最大内容绘制）是 Google Web Vitals 指标之一，旨在衡量页面在用户视角中“感知到的主要内容出现时间”。这一指

CSS Houdini Paint API 的位图合成原理，乍看之下像是前端领域的黑科技，其实背后是一套高度工程化的绘图接口与浏览器渲染系统的深度融合。它不是另起炉灶，而是嵌入浏览器的图形渲染流水线之

在现代 CSS 布局体系中，CSS Grid 可以说是网页布局的一场革命。而其中最为迷人（也最容易误解）的，就是 fr 单位了。很多开发者初学时以为 1fr + 2fr 就是按比例瓜分空间，看似简单，

🧠 结论先行 CSS 自定义属性（即 --var 变量）虽然带来极高的模块化和组件化便利性，但在浏览器运行时的计算路径中，并非“零成本”。 当你在全站引入大量 var() 嵌套，或在深层 DOM 结构

一、CSS Containment 是什么？ CSS Containment 是一项现代 CSS 性能优化技术，它允许开发者显式告诉浏览器：某个元素在某些方面（布局、样式、尺寸、内容）是独立的，从而使

HTTP/3 以及其底层传输协议 QUIC 的引入，正在根本性地重塑前端资源加载的拓扑结构和性能瓶颈模型。这不是一次简单的“升级版 HTTP”，而是一种从连接、拥塞、并发、丢包处理等底层传输特性入手的

浏览器中 Cookie 的作用域由 Domain 与 Path 共同决定，这两者的精确匹配算法构成了 Cookie 是否会被携带的基础逻辑，是理解身份验证、用户状态管理、安全策略（如 CSRF 防护）

跨源资源共享（CORS）的预检请求（Preflight Request）机制中，TTL 缓存机制的核心作用是减少不必要的 OPTIONS 请求，从而提高性能、降低服务器压力。 一、CORS 和预检请求