性能相关文章

CSS Custom Highlight API 如何实现文本高亮：从选区样式到性能边界

本文介绍 CSS Custom Highlight API 如何通过 ::highlight() 伪元素为任意文本范围应用样式，并与 ::selection 对比，分析其性能影响（如重绘范围），以代码编辑器语法高亮为例，对比传统 span 包裹方案，说明适用边界。

本文以博客文章正文排版为例，分析 text-wrap: pretty 如何通过调整段落末尾几行的换行位置来避免孤行、提升排版质量，并解释其与 text-wrap: balance 的差异、对布局计算次数的影响，以及适用场景和性能权衡。

本文以表单校验提示场景为例，解析 :has() 关系型选择器的匹配机制，说明它如何让父元素样式依赖子元素状态，并深入样式失效与重算流程，对比传统 JS 类名切换方案，讨论性能开销、适用边界与浏览器支持。

本文以标题排版场景为例，分析 text-wrap: balance 如何让浏览器平衡多行文本的宽度，解释其基于最大宽度迭代的布局计算机制，对比手动换行或 JS 测量方案，并说明 balance 的适用边界（短文本）、性能开销（布局次数增加）及与 pretty 的差异。

本文以长页面滚动指示器为例，解析 scroll-timeline 与 view-timeline 如何将动画进度映射到滚动位置，对比其基于合成器更新与主线程更新的差异，并给出适用边界。

本文以实时协作界面为贯穿场景，解析浏览器事件循环中任务、微任务、渲染步骤（rAF、样式计算、布局、绘制）的调度顺序，说明微任务过长为何会延迟渲染导致掉帧，并给出避免长微任务、合理使用 rAF 的工程实践。