CSS overflow: clip 与 overflow-clip-margin：裁剪边界如何避免滚动容器
很多页面用 overflow: hidden 裁掉装饰元素，却意外得到可被脚本滚动的容器和滚动链。本文解释 overflow: clip 为何不创建滚动容器、overflow-clip-margin 如何扩展裁剪边界，并给出固定定位装饰场景下的取舍与支持边界。
WEB
前端技术
深入解析浏览器运行机制、Web 标准、性能工程与前端架构实践。
40 篇文章
CSS scroll-snap-stop: always 如何强制停留：从滚动惯性到用户意图
图片轮播和分页列表常用 scroll-snap 对齐卡片，但一次快速滑动常会越过多个 snap 点。本文解释 scroll-snap-stop: always 如何在滚动惯性阶段拦截跨越、它与 scroll-snap-type 的交互、对性能与交互体验的影响，并给出适用边界与降级判断。
CSS 相对颜色语法如何从现有颜色派生新颜色：从颜色计算到设计系统
相对颜色语法让浏览器在运行时基于已有颜色通道计算新颜色，无需 Sass 或 JavaScript 预处理。文章以主题色生成悬停态为贯穿场景，解释 from 关键字与通道变量的处理模型，对比 color-mix() 的混合逻辑，说明与 Sass 颜色函数的差异、浏览器支持边界与回退写法。
CSS scrollbar-gutter 如何预留滚动条空间：为什么 overlay 滚动条会导致布局偏移
固定宽度页面在内容变长时，经典滚动条会挤占可用宽度，导致整页内容横向跳动。本文解释 scrollbar-gutter 的 gutter 位置与 stable、both-edges 取值如何提前预留空间，说明 overlay 滚动条下该属性为何失效，并对比 padding 方案、给出诊断信号与适用边界。
CSS overflow-anchor 滚动锚定：内容插入时视口为何不再跳动
本文解析 overflow-anchor 属性如何通过选择锚节点并调整滚动位置来防止视口跳动，以动态加载内容场景为例说明其工作原理、适用边界与禁用场景，帮助前端开发者正确使用滚动锚定。
font-size-adjust 如何保持备用字体的视觉尺寸：从 x 高度到字体回退
当首选字体不可用而回退到备用字体时，文本的视觉大小可能突变。本文以中文网页的多字体回退栈为例，解释 font-size-adjust 如何通过调整字号使备用字体的 x 高度与首选字体一致，并分析其计算机制、对行高与布局的影响以及浏览器支持边界。
CSS 滚动驱动动画的 range：如何精确控制动画的起止进度
本文聚焦 CSS 滚动驱动动画中 animation-range 的机制，解释如何将动画时间线映射到滚动容器的特定区间，并与默认的全区间映射对比。以长页面中多个元素依次进入视口触发动画为例，结合 IntersectionObserver 方案分析 range 的触发时机、性能影响、适用边界与浏览器支持。
CSS color() 与 OKLCH：为什么广色域颜色在 sRGB 屏幕上会失真
本文以设计系统主题色为例，解释 CSS color() 函数与 OKLCH 色彩空间如何定义超出 sRGB 的广色域颜色，以及当显示设备不支持时浏览器如何通过色域映射将颜色转换到 sRGB，导致颜色失真。文中对比 HEX/RGB 的局限，并给出使用 color() 与 @media (color-gamut) 的实践建议。
CSS color-mix() 的颜色插值：为什么混合结果与预期不同
本文以主题色生成悬停态为例，解析 color-mix() 在不同色彩空间（sRGB、OKLab 等）中的插值机制，解释为何混合结果受色彩空间和插值方法影响，并与 Sass 颜色函数对比，说明浏览器支持边界与回退策略。
CSS View Transitions 同文档过渡：快照捕获与动画机制解析
本文以 React 路由切换为例，解析 View Transitions API 在同文档（SPA）中如何捕获新旧状态快照，通过伪元素树与渲染隔离实现平滑动画。对比传统 CSS/JS 动画方案，说明其合成器线程性能优势、适用边界及回退策略。
CSS 滚动驱动动画的 timeline-scope：为什么命名时间线需要作用域提升
本文讨论 CSS scroll-driven animations 中 timeline-scope 属性的作用：它如何将子元素的命名滚动时间线提升到祖先作用域，使非父子关系的元素也能共享同一时间线。以页面级滚动进度条驱动多个区域动画的场景为例，说明命名时间线的查找机制、作用域限制、timeline-scope 的声明方式及其对动画同步的影响，对比传统 JS 滚动监听方案的性能与复杂度，并给出适用边界与浏览器支持。
CSS Typed OM 如何消除字符串解析：从单位换算到性能提升
CSS Typed OM 将样式值表示为类型化对象，替代字符串读写。本文以动画中频繁操作 transform 和 width 为例，对比传统 style 字符串操作与 attributeStyleMap 的差异，说明其性能优势、浏览器支持边界及与 Houdini 的关系。
CSS Custom Highlight API 如何实现文本高亮：从选区样式到性能边界
本文介绍 CSS Custom Highlight API 如何通过 ::highlight() 伪元素为任意文本范围应用样式，并与 ::selection 对比，分析其性能影响（如重绘范围），以代码编辑器语法高亮为例，对比传统 span 包裹方案，说明适用边界。
CSS Nesting 与级联：嵌套规则如何影响选择器权重与层叠顺序
CSS Nesting 让样式表更紧凑，但嵌套规则在浏览器中会被扁平化为等效选择器，其权重计算方式与 :is() 类似，可能引发优先级陷阱。本文以组件库样式覆盖场景为例，对比 BEM 与嵌套写法，分析嵌套层级对层叠的影响及可维护性问题。
CSS text-wrap: pretty 如何优化文本布局：从换行质量到性能开销
本文以博客文章正文排版为例，分析 text-wrap: pretty 如何通过调整段落末尾几行的换行位置来避免孤行、提升排版质量，并解释其与 text-wrap: balance 的差异、对布局计算次数的影响，以及适用场景和性能权衡。
CSS 容器样式查询：为什么 @container style() 不会触发子元素重排
本文以主题切换为例，解释 CSS 容器查询中 @container style() 的机制，分析其与尺寸容器查询的差异，说明样式查询为何不会导致布局重排，并对比传统类名切换方案的适用边界与浏览器支持。
CSS scroll-snap 的 mandatory 与 proximity：为什么强制吸附会引发滚动卡顿
本文以图片轮播场景为例，分析 scroll-snap-type 的 mandatory 与 proximity 值如何影响滚动行为，解释强制吸附导致滚动位置突变和性能问题的机制，并给出减少卡顿的实践建议。
CSS Anchor Positioning 如何实现元素锚定：从 anchor() 到 fallback 机制
本文以弹出菜单定位场景为例，讲解 CSS Anchor Positioning 如何通过 anchor-name、position-anchor、anchor() 函数和 position-area 将元素锚定到其他元素，并重点分析为什么需要 position-try-fallbacks 回退机制，以及与传统 JS 定位方案的权衡和浏览器支持边界。
CSS overscroll-behavior 如何阻止滚动链：从滚动穿透到嵌套滚动容器
本文以模态框内滚动穿透到背景页面为例，解释 overscroll-behavior 的 contain 与 none 值如何控制滚动链和滚动穿透。对比传统 JavaScript 阻止滚动的方案，分析其适用边界、浏览器支持及对可访问性的影响，帮助前端开发者做出更优的滚动行为决策。
CSS :has() 选择器如何影响样式计算与性能：从关系选择到布局重算
本文以表单校验提示场景为例，解析 :has() 关系型选择器的匹配机制，说明它如何让父元素样式依赖子元素状态，并深入样式失效与重算流程，对比传统 JS 类名切换方案，讨论性能开销、适用边界与浏览器支持。
CSS transition-behavior: allow-discrete 如何让 display 参与平滑过渡
手风琴组件展开收起时，display:none 的切换无法产生过渡效果。本文解释 CSS Transitions Level 2 的 transition-behavior 属性如何允许 display 等离散属性参与过渡，分析其翻转时机、与连续属性的差异、浏览器支持及性能影响。
font-display: swap 如何影响文本可见性与布局偏移：从字体加载到 CLS
本文以电商标题字体加载为例，解析 font-display 的 swap 值如何控制字体加载期间的文本渲染，对比 FOIT 与 FOUT 的权衡，并解释字体加载导致 CLS 的机制。通过对比 block、swap、fallback 和 optional 的适用场景，给出减少 CLS 的实践建议。
CSS text-wrap: balance 如何影响排版与性能：从文本平衡到布局计算
本文以标题排版场景为例，分析 text-wrap: balance 如何让浏览器平衡多行文本的宽度，解释其基于最大宽度迭代的布局计算机制，对比手动换行或 JS 测量方案，并说明 balance 的适用边界（短文本）、性能开销（布局次数增加）及与 pretty 的差异。
CSS 动画与合成器提升：为什么 transform 和 opacity 动画不触发重排
本文以首屏轮播图为例，解释浏览器如何将 transform 和 opacity 动画提升到合成器线程，避免主线程的布局与绘制。通过对比修改 width/left 与 transform 的渲染路径，说明合成层的创建条件、层爆炸风险及性能影响，帮助前端开发者做出合理的动画性能优化决策。
CSS View Transitions 如何捕获新旧状态快照：跨文档过渡为何需要隔离
本文以 SPA 路由切换为贯穿场景，剖析 View Transitions API 如何通过伪元素树和静态快照实现平滑过渡，重点解释跨文档过渡时快照隔离的必要性，以及同源限制、渲染阻塞与回退机制，并与 React Transition Group 等方案对比。
OffscreenCanvas 如何将 Canvas 渲染移出主线程：Worker 中的绘制与合成
本文以实时数据可视化场景为例，解析 OffscreenCanvas 如何在 Web Worker 中执行 Canvas 绘制，通过 transferable 对象避免主线程阻塞，并分析其与合成器线程的交互。文章对比主线程 Canvas 与 OffscreenCanvas 的性能差异，讨论浏览器支持、调试限制及适用边界，帮助开发者判断何时值得迁移渲染逻辑。
CSS 滚动驱动动画：时间线如何与滚动进度绑定并影响合成
本文以长页面滚动指示器为例，解析 scroll-timeline 与 view-timeline 如何将动画进度映射到滚动位置，对比其基于合成器更新与主线程更新的差异，并给出适用边界。
CSS Grid 自动布局算法：dense 如何改变项目放置顺序
本文深入解析 CSS Grid 自动布局算法中 dense 关键字的作用机制，对比稀疏与密集填充的差异，并通过商品卡片流式布局场景说明 dense 带来的视觉顺序变化、可访问性影响及适用边界，最后给出何时使用 dense 的决策建议。
CSS @layer 中 !important 为何反转层优先级：组件库样式覆盖的机制与边界
本文以组件库样式覆盖为场景，解析 CSS @layer 中级联层的排序规则，重点说明 !important 声明如何反转层优先级，并给出避免样式冲突的实践建议。
CSS content-visibility 如何跳过离屏渲染：长商品列表滚动不再卡顿的机制与边界
本文以长商品列表为例，解析 content-visibility 如何通过布局、样式、绘制包含与交集观察跳过离屏元素的渲染，从而降低初始渲染与滚动时的布局绘制成本。同时说明它与 contain 的区别、auto 的失效条件、对滚动条和可访问性的影响，以及何时应该使用。
CSS Subgrid 如何让嵌套网格对齐父级轨道：从魔法数字到轨道继承
本文以商品卡片列表为例，说明传统嵌套网格为何需要魔法数字对齐，介绍 subgrid 如何让子网格继承父网格轨道定义，并讨论其适用边界、与 display: contents 的对比及降级方案。
CSS @layer 如何重新定义级联优先级：从选择器权重到层顺序
传统 CSS 依赖选择器权重解决样式冲突，但组件库覆盖场景中权重往往失效。本文以组件库样式覆盖为例，讲解 @layer 如何引入层顺序作为新的优先级维度，说明层内与层间的比较机制、未分层样式与 important 的交互规则，以及浏览器兼容边界与工程实践。
第三方脚本如何阻塞主线程：解析器阻塞与长任务对 Core Web Vitals 的影响
本文以新闻门户页面为例，分析第三方脚本如何通过阻塞 HTML 解析、执行长任务和占用网络带宽，拖慢 LCP 与 TBT。文章将解释 async/defer 的局限，并比较按需加载、iframe 隔离、资源提示等缓解措施的收益与代价，帮助开发者做出有依据的工程决策。
强制同步布局与布局抖动：为什么读取 offsetWidth 会拖慢页面
本文解释浏览器布局的惰性机制，以及脚本在写入样式后立即读取布局属性如何触发强制同步布局（FSL），连续操作导致布局抖动。以长列表交互为例，给出批量读写、避免在循环中读取布局属性的实践，并说明如何通过 DevTools 检测。
流式 SSR 与 Hydration 不一致：为什么分块传输会放大水合错误
流式 SSR 将 HTML 分块发送，客户端 Hydration 却要求服务端与客户端首屏渲染完全一致。本文以动态内容页面为例，分析流式渲染如何因时间戳、随机数等不稳定值加剧水合不一致，并给出 suppressHydrationWarning、客户端重渲染等策略及其权衡。
HTTP 缓存中的 immutable 与 stale-while-revalidate：静态资源更新场景下的新鲜度与性能平衡
本文以静态资源更新场景为例，分析 Cache-Control 的 immutable 与 stale-while-revalidate 指令如何控制浏览器缓存行为，减少重复请求并提升加载速度。你将理解启发式缓存、显式过期与后台重新验证的机制，并获得配置建议与适用边界。
V8 的隐藏类与内联缓存：对象形状如何影响 JavaScript 性能
本文从 V8 引擎的隐藏类与内联缓存机制出发，解释对象形状如何影响属性访问性能，并通过数据处理场景展示动态添加属性、delete 等操作导致的去优化，给出保持形状一致等实践建议。
事件循环中的渲染步骤：微任务过长如何推迟 rAF 与绘制
本文以实时协作界面为贯穿场景，解析浏览器事件循环中任务、微任务、渲染步骤（rAF、样式计算、布局、绘制）的调度顺序，说明微任务过长为何会延迟渲染导致掉帧，并给出避免长微任务、合理使用 rAF 的工程实践。
CSS Containment 如何隔离布局与绘制以提升渲染性能
本文以长列表商品页为贯穿场景，解析 CSS contain 属性中 layout、paint、size 等值的隔离机制，说明它们如何缩小样式、布局与绘制的计算范围，并对比 content-visibility 的异同，帮助你在实际项目中做出正确的性能优化决策。
HTML 解析器与预加载扫描器：为什么脚本会阻塞预加载及如何解除
本文以首屏商品页为例，解释主 HTML 解析器遇到阻塞脚本时为何会暂停，以及预加载扫描器如何提前发现资源。通过对比 async、defer 和 preload 的适用场景，给出减少阻塞的实践与权衡。