前端性能优化---样式计算_recalculate style

理论

样式计算
第一步，匹配一系列的样式选择器
第二步，取出所有匹配后的样式规则，构造RenderStyle

步骤

我们的解决思路是

1. 减少样式计算的相互作用，即样式重新计算
   什么是 Recalculate Style？在浏览器每一帧的渲染流程中，由于 DOM 增删改等因素变化，需要重新计算受影响节点的样式，这一过程在 Chrome DevTools 中被称为 Recalculate Style。我们在排查系统页面性能问题时发现，在影响 DOM 节点数过多的情况下，Recalculate Style 通常会花费较长的时间。

2. 使用性能更好的样式选择器
   保持简单，使用class选择器。如果的样式选择器存在逻辑.content:nth-last-child(-n+1) .text ，浏览器就需要花时间去计算你说的是哪个元素。
   edge可以在这里查看选择器的性能

3. 减少样式计算涉及的元素数量
   旧的浏览器就没有这种优化，要注意维护自己的DOM结构树，简单较小的DOM结构是优于复杂而大的DOM结构。
   对于较新的浏览器，比如Chromium blink有一个叫失效集（Invalidation Set）的优化，它主要用来标记页面中哪些元素需要重新计算样式。
   举个例子，如果我们使用.selection *这种 CSS Selectors给元素动态添加新的样式，会让浏览器认为整个后代元素都需要重新计算样式，失去失效集的优化，从而导致整个页面卡顿。user- select的变更可能也会导致整个情况（不确定） 。

chrome可以这里可以查看受影响的节点数量

参考文档

https://web.dev/reduce-the-scope-and-complexity-of-style-calculations/#reduce-the-number-of-elements-being-styled

应用

这是一个很好的排查样式计算拖累性能的样例：https://moderndevtools.com/lessons/11。如果能打开这个网站，可以不看下面的述说。

简述

排查youtube的性能问题。

1. 确定造成性能卡顿的操作；

2. 打开Chrome Performance面板录制该操作造成的结果，开始分析；
   

3. 着眼于有标红的最大这块，可以看Summary显示这块渲染时长占比很大，基本可以确定就是这里的卡顿，只有3FPS；
   
   

4. 在时间轴上点击Recalculate Style，发现这里触发了样式计算，影响了3827个元素，跳转到问题行，在这一行打断点；
   

6. 发现它是在移除这class样式

7. 在Source面板，搜索这个样式，在顶层元素移除这个样式，直接导致其几千个子元素重新计算样式。

解决方法

1. 使用简单路径短的CSS的选择器，删除button的样式。不要通过操作父元素的class去达到影响child Element的效果。
2. 使用js直接操作样式，但可能导致可维护性降低。