发布于 由admin

CSS 浏览器渲染流程深度：`Style`, `Layout`, `Paint`, `Composite` 阶段优化

大家好，我是你们今天的浏览器渲染流程深度解析讲师，咱们今天不搞虚头巴脑的，直奔主题！

今天要聊的是浏览器渲染流程中的四大金刚：Style, Layout, Paint, Composite。这几个阶段，每一个都至关重要，理解它们，并知道如何优化，能让你的网页飞起来。

一、 Style：我是CSS的代言人

Style阶段，简单来说，就是浏览器把CSS规则应用到DOM节点上，生成渲染树(Render Tree)。这个过程包括：

  1. 解析CSS： 浏览器读入CSS（无论是外部链接、<style>标签，还是内联样式），解析成浏览器能理解的结构，通常是CSSOM（CSS Object Model）。

  2. 构建Render Tree：

    • 从DOM树的根节点开始遍历。
    • 对每个DOM节点，找到所有匹配的CSS规则。
    • 根据CSS规则，计算出每个DOM节点的最终样式。
    • 只有需要显示的节点才会被加入到Render Tree中。display: none;的节点以及head标签等不会出现在Render Tree 中。

优化重点：减少CSS计算量

  • 选择器效率： CSS选择器是从右向左匹配的。例如，div p span会先找到所有的span元素，然后向上查找父元素是否是p，再向上查找父元素是否是div。所以，尽量使用高效的选择器，避免过度嵌套和通配符。

    • Bad: div > ul > li > a { color: red; }
    • Good: .nav-link { color: red; } （直接给class）

    避免使用*通配符，尤其是在大型项目中，因为它的开销非常大。

  • 减少样式规则： 减少不必要的CSS规则，删除冗余代码。可以使用CSS压缩工具，例如cssnano或clean-css。

  • 避免使用复杂的选择器: ID选择器虽然快，但过度使用会增加CSS的特异性，导致样式覆盖问题。Class选择器通常更灵活。

  • 避免重复的样式： 避免在多个地方重复定义相同的样式。可以使用CSS变量（Custom Properties）来统一管理。

    :root {
  --primary-color: #007bff;
}

.button {
  background-color: var(--primary-color);
  color: white;
}

.link {
  color: var(--primary-color);
}

  • 利用CSS继承： CSS的继承特性可以减少很多重复的样式声明。例如，如果所有元素都使用相同的字体，可以在body上设置font-family。

二、 Layout：排兵布阵，各就各位

Layout阶段，也叫回流或重排（Reflow）。浏览器会根据Render Tree计算出每个节点在屏幕上的确切位置和大小。

  1. 计算盒模型： 浏览器计算每个元素的盒模型（Box Model），包括margin、border、padding、content的尺寸。

  2. 确定元素位置： 根据盒模型、定位方式（static、relative、absolute、fixed）和浮动（float）等属性，确定每个元素在页面上的位置。

优化重点：减少回流

回流是非常消耗性能的操作，因为它需要重新计算整个或部分页面的布局。以下是一些减少回流的技巧：

  • 批量修改DOM： 避免频繁地修改DOM。如果需要修改多个DOM元素，可以先将它们从文档中移除，修改完成后再重新插入。或者使用DocumentFragment。

    // Bad
for (let i = 0; i < 100; i++) {
  const element = document.createElement('div');
  element.textContent = i;
  document.body.appendChild(element);
}

// Good
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const element = document.createElement('div');
  element.textContent = i;
  fragment.appendChild(element);
}
document.body.appendChild(fragment);

  • 避免频繁访问布局属性： 例如offsetWidth、offsetHeight、offsetTop、offsetLeft等。这些属性会强制浏览器立即进行回流。如果需要多次使用这些值，最好将它们缓存起来。

    // Bad
for (let i = 0; i < 100; i++) {
  console.log(element.offsetWidth); // 每次循环都会触发回流
}

// Good
const width = element.offsetWidth;
for (let i = 0; i < 100; i++) {
  console.log(width); // 只触发一次回流
}

  • 使用transform和opacity： 修改transform和opacity属性通常不会触发回流，而是触发重绘（Repaint）或合成（Composite），性能更高。

  • 使用will-change： will-change属性可以提前告知浏览器，某个元素将要发生变化。浏览器可以提前进行优化。但是不要滥用，否则可能会适得其反。

    .element {
  will-change: transform;
  transition: transform 0.3s ease-in-out;
}

.element:hover {
  transform: translateX(10px);
}

  • 避免table布局： table布局的渲染性能通常比div布局差，因为浏览器需要计算整个table的布局才能开始渲染。

  • 固定容器尺寸： 尽量避免容器的尺寸发生变化，因为这会导致子元素的位置和大小也需要重新计算。

三、 Paint：画龙点睛，像素呈现

Paint阶段，也叫重绘（Repaint）。浏览器会遍历Render Tree，将每个节点绘制到屏幕上。这个过程包括：

  1. 构建Display List： 浏览器将Render Tree转换成一个Display List，记录了绘制的顺序和操作。

  2. 执行Paint操作： 浏览器根据Display List，将每个节点绘制成像素。

优化重点：减少重绘区域

重绘的开销相对回流较小，但仍然需要避免不必要的重绘。

  • 避免修改不影响布局的属性： 例如background-color、color、text-shadow等。修改这些属性只会触发重绘，而不会触发回流。

  • 使用transform和opacity： 如前所述，修改transform和opacity属性通常不会触发回流，而是触发重绘或合成。

  • 合理使用visibility: hidden和display: none： visibility: hidden会隐藏元素，但仍然占据空间，会触发重绘。display: none会完全移除元素，会触发回流。根据具体情况选择合适的属性。

  • 利用CSS Sprites： 将多个小图片合并成一张大图，可以减少HTTP请求，也可以减少重绘次数。

  • 避免复杂的CSS效果： 例如box-shadow、border-radius等。这些效果的渲染开销比较大。

四、 Composite：化零为整，最终呈现

Composite阶段，也叫合成。浏览器会将多个图层合并成最终的图像，显示在屏幕上。

  1. 创建图层： 浏览器会将一些元素提升为独立的图层（Layer）。例如，使用了transform、opacity、will-change等属性的元素。

  2. 栅格化（Rasterize）： 将每个图层转换成位图。

  3. 合成图层： 将所有图层按照正确的顺序合并成最终的图像。

优化重点：利用硬件加速，减少合成

Composite阶段的性能通常比Paint阶段要好，因为它可以利用GPU进行硬件加速。

  • 创建合成层： 合理地创建合成层可以提高渲染性能。以下情况可能会创建合成层：

    • 使用了transform或opacity属性。
    • 使用了<video>、<canvas>、<iframe>等元素。
    • 使用了will-change属性。
    • 拥有3D上下文（WebGL）。
    • 被transform或opacity属性影响的元素。

  • 避免过度创建合成层： 过多的合成层会占用大量的内存，也会增加合成的开销。

  • 使用硬件加速： 确保浏览器启用了硬件加速。

  • 避免频繁的图层更新： 尽量减少图层的更新频率，因为每次更新都需要重新栅格化和合成。

总结：

阶段 描述 优化策略
Style 将CSS规则应用到DOM节点，生成渲染树。 减少CSS计算量，使用高效的选择器，减少样式规则，避免重复的样式，利用CSS继承。
Layout 根据Render Tree计算出每个节点在屏幕上的确切位置和大小。 减少回流，批量修改DOM，避免频繁访问布局属性，使用transform和opacity，使用will-change，避免table布局，固定容器尺寸。
Paint 遍历Render Tree，将每个节点绘制到屏幕上。 减少重绘区域，避免修改不影响布局的属性，使用transform和opacity，合理使用visibility: hidden和display: none，利用CSS Sprites，避免复杂的CSS效果。
Composite 将多个图层合并成最终的图像，显示在屏幕上。 利用硬件加速，创建合成层，避免过度创建合成层，避免频繁的图层更新。

一些额外的思考:

  • Performance 分析工具: 善用 Chrome DevTools 的 Performance 面板， 可以清晰的看到每个阶段所花费的时间。找到瓶颈，对症下药。
  • 渲染阻塞: JavaScript 的执行会阻塞渲染，因此尽量减少JavaScript的执行时间，或者将JavaScript代码放在页面底部。
  • 图片优化: 压缩图片大小，使用合适的图片格式（例如，WebP格式）。

今天的分享就到这里了，希望大家有所收获。记住，优化是一个持续的过程，需要不断地学习和实践。实践出真知嘛！下次有机会再和大家深入探讨其他性能优化技巧。 祝大家写出飞一般的网页！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注