浏览器工作原理回顾

之前已经提到了浏览器的工作原理 (抽象的来描述即“加载-解析解释-渲染(布局与绘制)”)，和前端性能度量与优化的部分工具
image.png
image.png

抛开 JS 代码和 HTML 结构优化的技术处理，从浏览器渲染原理来看看以用户体验(UED)为中心，编写 CSS 文件的差异对性能的影响——回流(重排) “layout”、重绘”painting”

每一个呈现器都代表了一个矩形的区域，通常对应于相关节点的 CSS 框，这一点在 CSS2 规范中有所描述。它包含诸如宽度、高度和位置等几何信息。

CSS 的特异性涉及到了样式匹配算法，算法最终决定了哪些样式声明应用于元素。 而在 WebKit 中没有规则树，因此会对匹配的声明遍历N次。首先应用非重要高优先级的属性（由于作为其他属性的依据而应首先应用的属性，例如 display），接着是高优先级重要规则，然后是普通优先级非重要规则，最后是普通优先级重要规则。这意味着多次出现的属性会根据正确的层叠顺序进行解析。最后出现的最终生效。 对于此，我们可以通过 开发者工具-元素-已计算属性 发现最终有效的样式属性

image.png

布局/回流(重排)

呈现器在创建完成并添加到呈现树时，并不包含位置和大小信息。计算这些值的过程称为布局或重排 回流一定会触发重绘，而重绘不一定会回流

image.png
回流阶段既然主要是计算节点的位置和几何信息，那么当页面布局和几何信息发生变化的时候，就需要回流。

改变这些属性会触发回流：

  • 盒模型相关的属性: width，height，margin，display，border等
  • 定位属性及浮动相关的属性: top, position, float等
  • 改变节点内部文字结构也会触发回流:text-align, overflow, font-size, line-height, vertival-align等

以及进行以下流程或操作：

  • 页面一开始渲染的时候
  • 添加或删除可见的DOM元素，进行DOM操作等
  • 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代
  • 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）
  • css伪类激活
  • 进行获取布局信息的操作，比如offsetWidth、offsetHeight、clientWidth、clientHeight、width、height、scrollTop、scrollHeight,getComputedStyle, getBoundingClientRect等

    绘制

    在计算出节点可见性、它们的计算样式以及几何信息后，我们还需要将渲染树中的每个节点，转换成屏幕上的实际像素。这一步通常称为“重绘”。 重绘是填充像素的过程。它涉及绘出文本、颜色、图像、边框和阴影，基本上包括元素的每个可视部分。在重绘阶段，系统会遍历渲染树，并调用渲染对象的paint方法，将渲染对象的内容显示在屏幕上。 浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。重绘不会带来重新布局，并不一定伴随回流。 绘制流程顺序的规范见 https://www.w3.org/TR/CSS21/zindex.html

渲染性能优化

尽可能减少Layout回流和Paint重绘发生的次数，将回流和重绘的影响范围限制在单独的图层之内

具体内容请见