浏览器的渲染过程、回流和重绘及优化

最新推荐文章于 2022-08-02 13:44:29 发布

perwhy_wang

最新推荐文章于 2022-08-02 13:44:29 发布

阅读量546

点赞数

文章标签： css js javascript html html5

本文链接：https://blog.csdn.net/qq_38829069/article/details/108482881

版权

本文详细介绍了浏览器的渲染过程，包括DOM树和CSSOM树的生成，以及回流和重绘的概念。回流是计算元素在页面中的位置和大小，而重绘是根据渲染树和几何信息将节点转换为像素。浏览器优化机制包括队列化修改和批量执行以减少重排。为了减少回流和重绘，可以批量修改DOM、脱离文档流、避免触发同步布局事件，使用CSS3硬件加速等方法。文章提供了实用的优化建议，如使用cssText、修改class、文档片段等来提高性能。

摘要由CSDN通过智能技术生成

回流和重绘可以说是每一个web开发者都经常听到的两个词语，看了一些博客和书籍，整理了一些内容并且结合自己的体会，写了这篇文章，希望可以帮助到大家。

1. 浏览器的渲染过程

1.1 渲染过程

从上面这个图上，我们可以看到，浏览器渲染过程如下：

解析HTML，生成DOM树，解析CSS，生成CSSOM树
将DOM树和CSSOM树结合，生成渲染树(Render Tree)
Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）
Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素 Display:将像素发送给GPU，展示在页面上。

1.2 生成渲染树

渲染过程看起来很简单，让我们来具体了解下每一步具体做了什么。

为了构建渲染树，浏览器主要完成了以下工作：

从DOM树的根节点开始遍历每个可见节点。对于每个可见的节点，找到CSSOM树中对应的规则，并应用它们。
根据每个可见节点以及其对应的样式，组合生成渲染树

什么是不可见节点

一些不会渲染输出的节点，比如script、meta、link等。
一些通过css进行隐藏的节点。比如display:none。注意，利用visibility和opacity隐藏的节点，还是会显示在渲染树上的（因为还占据文档空间）。只有display:none的节点才不会显示在渲染树上。

注意：渲染树只包含可见的节点

2. 回流和重绘

2.1 回流

前面我们通过构造渲染树，我们将可见DOM节点以及它对应的样式结合起来，可是我们还需要计算它们在设备视口(viewport)内的确切位置和大小，这个计算的阶段就是回流。
为了弄清每个对象在网站上的确切大小和位置，浏览器从渲染树的根节点开始遍历，我们可以以下面这个实例来表示：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Critial Path: Hello world!</title>
  </head>
  <body>
    <div style="width: 50%">
      <div style="width: 50%">Hello world!</div>
    </div>
  </body>
</html>