浏览器渲染页面的过程，以及重绘和重排

最新推荐文章于 2025-03-26 15:33:54 发布

霜月枫桥

最新推荐文章于 2025-03-26 15:33:54 发布

阅读量857

点赞数

CC 4.0 BY-SA版权

分类专栏： BS——浏览器和服务器经验之谈

本文链接：https://blog.youkuaiyun.com/MOONCOM/article/details/72649870

BS——浏览器和服务器同时被 2 个专栏收录

18 篇文章

订阅专栏

经验之谈

18 篇文章

订阅专栏

本文详细介绍了浏览器如何解析HTML和CSS代码以创建DOM树和渲染树的过程，并解释了重绘和重排的概念及其对网页性能的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

浏览器的渲染过程

1，浏览器解析html源码，然后创建一个 DOM树。
在DOM树中，每一个HTML标签都有一个对应的节点，并且每一个文本也都会有一个对应的文本节点。
DOM树的根节点就是 <html>。

2，浏览器解析CSS代码，计算出最终的样式数据。
对CSS代码中非法的语法她会直接忽略掉。
解析CSS的时候会按照如下顺序来定义优先级(从低到高)：浏览器默认设置，用户设置，外联样式，内部样式，内联样式。

3，构建出DOM树，并且计算出样式数据后，下一步就是构建一个渲染树（rendering tree）。
渲染树和DOM树有点像，但是是有区别的。DOM树完全和html标签一一对应，但是渲染树会忽略掉不需要渲染的元素，比如head、display:none的元素等。
而且一大段文本中的每一个行在渲染树中都是独立的一个节点。
渲染树中的每一个节点都存储有对应的css属性。

4，一旦渲染树创建好了，浏览器就可以根据渲染树直接把页面绘制到屏幕上。

一个渲染过程的例子

例如有下面这样一段HTML代码：

<html>
<head>
  <title>Beautiful page</title>
</head>
<body>
    
  <p>
    Once upon a time there was 
    a looong paragraph...
  </p>
  
  <div style="display: none">
    Secret message
  </div>
    
  <div><img src="..." /></div>
  ...
 
</body>
</html>

那么DOM树是完全和HTML标签一一对应的，如下所示：

html
    head
        title
    body
        p
            [text node]
                
        div 
            [text node]
                
        div
            img
                
        ...

而渲染树就不同了，她只有哪些需要绘制出来的元素，所以head 以及被隐藏的div都不会出现在渲染树中。

root (RenderView)
    body
        p
            line 1
            line 2
            line 3
            ...
            
        div
            img
            
        ...

重绘和重排（repaints and reflows）

每个页面至少在初始化的时候会有一次重排操作。任何对渲染树的修改都有可能会导致下面两种操作：
1，重排
就是渲染树的一部分必须要更新并且节点的尺寸发生了变化。这就会触发重排操作。

2，重绘
部分节点需要更新，但是没有改变他的集合形状，比如改变了背景颜色，这就会触发重绘。

下面任何操作都会触发重排reflow：

1、增加或删除可见DOM节点

2、元素改变位置

3、元素改变尺寸（元素内外边距、边框、长度、高度的改变）

4、元素内容改变（元素内容被不同尺寸其它内容代替）

5、页面最初呈现

6、浏览器窗口大小改变

设置 display: none;（重排并重绘）或者 visibility: hidden（只有重绘）
看一个例子：

var bstyle = document.body.style; // cache
 
bstyle.padding = "20px"; // reflow, repaint
bstyle.border = "10px solid red"; // another reflow and a repaint
 
bstyle.color = "blue"; // repaint only, no dimensions changed
bstyle.backgroundColor = "#fad"; // repaint
 
bstyle.fontSize = "2em"; // reflow, repaint
 
// new DOM element - reflow, repaint
document.body.appendChild(document.createTextNode('dude!'));

有些重绘操作会比其他操作昂贵很多。比如你把一个body的子元素做了修改，不一定会导致大量的其他节点更新，但是你把一个元素移动到页面顶部去，可能就会导致全部其他节点进行重排操作，这个代价就非常昂贵。

聪明的浏览器

因为渲染树的改变导致的重绘或重排操作都可能代价很高，浏览器会对这个改动做很多优化。
一个策略就是不要立即做操作，而是批量进行。比如把你的脚本对DOM的修改放入一个队列，在队列所有操作结束后只需要进行一次绘制即可。

但是有的时候脚本可能会导致浏览器的批量优化无法进行，可能在清空队列之前就需要重新绘制（绘制意思是重绘或者重排）页面。比如你通过脚本获取这些样式：

clientTop/Left/Width/Height
offsetTop, offsetLeft, offsetWidth, offsetHeight
scrollTop/Left/Width/Height
getComputedStyle() 主流浏览器, or currentStyle in IE

备注：clientHeight,height,offsetHeight,scrollHeight的区别可观看height、clientHeight、scrollHeight、offsetHeight区别

因为浏览器必须给你最新的值，所以当你进行这些取值操作的时候会立刻触发一次页面的绘制。这样本来可以批量修改样式然后一次性绘制的方法就无法使用了。

备注：Chrome和Edge可以调用WebGL.API来使用电脑的GPU进行页面渲染，从而给用户更好的体验。

减少重绘和重排

1，不要对元素属性进行读写交替，最好将写操作写完再读。

// bad
var arr=document.getElementsByClassName("demo");
arr[0].style.backgroundColor="red";
console.log(arr[0].style.backgroundColor);
arr[1].style.backgroundColor="green";
console.log(arr[1].style.backgroundColor);
arr[2].style.backgroundColor="blue";
console.log(arr[2].style.backgroundColor);

// better 
var arr=document.getElementsByClassName("demo");
arr[0].style.backgroundColor="red";
arr[1].style.backgroundColor="green";
arr[2].style.backgroundColor="blue";
console.log(arr[0].style.backgroundColor);
console.log(arr[1].style.backgroundColor);
console.log(arr[2].style.backgroundColor);

2、对元素样式的修改，最好一次完成，而不是分为多次进行。

可以使用js的 cssText 进行样式的修改

selector.style.cssText="color:red;background-color:pink;padding:10px";

改变元素的 class 属性，通过不同的class完成修改该元素样式的目的，addClass() removeClass() toggleClass()。

3、把对节点的大量修改操作放在页面之外

用 createDocumentFragment来做修改，而不是createElement
clone 节点，在clone之后的节点中做修改，然后直接替换掉以前的节点
通过 display: none 来隐藏节点（直接导致一次重排和重绘），做大量的修改，然后显示节点（又一次重排和重绘），总共只会有两次重排。
4、不要频繁获取计算后的样式。如果你需要使用计算后的样式，最好暂存起来而不是直接从DOM上读取。

5、总的来说，总是考虑到渲染树得存在，考虑到你的一次修改会导致多大的绘制操作。

比如绝对定位元素的动画就不会影响其他大部分元素。

总结：

1、尽量少访问DOM，一切都在js里解决

2、使用本地对象保存DOM引用

3、HTML collections要时刻跟DOM保持一致，所以访问的时候性能很差。使用本地变量缓存它们的长度，尽量使用本地对象复制操作。

4、重排和重绘都很耗费开销，所以批量修改CSS，修改DOM的时候让节点先离线（使用display或者visibility），本地缓存显示信息。

5、使用CSS选择器函数（querySelector()或者querySelectorAll()）代替DOM选择器，因为querySelector()不是动态的。（注：querySelector()返回匹配的第一个元素；querySelectorAll()返回匹配的所有元素）

6、动画动作的时候使用绝对定位（position）