减少样式计算的范围和复杂度

文章预览

本文翻译自 Reduce the scope and complexity of style calculations 作者：Jeremy Wagner， 略有删改。 译者：南城 JavaScript通常用来改变页面的视觉效果。比如通过改变style样式或者通过计算后改变页面布局，比如搜索或排序数据。长时间运行的JavaScript可能是导致性能问题的常见原因，应该尽可能地减少它的影响。 样式计算 通过添加和移除元素、更改属性、类或播放动画来改变 DOM 会导致浏览器重新计算元素样式，并在许多情况下重新布局页面的部分或全部内容。这个过程称为计算样式计算。 浏览器开始计算样式，通过创建一组匹配选择器来确定哪些类、伪类和 ID 适用于任何给定元素。然后，它处理匹配选择器的样式规则，并确定元素具有哪些最终样式。 样式重新计算时间和交互延迟 Interaction to Next Paint (INP) 是一个以用户为中心的运行时性能指标，评估页面对用 ………………………………