【JavaScript性能优化】------理解回流和重绘（reflow和repaint）

不念不忘少年蓝@ 2022-05-14 12:58 186阅读 0赞

#### 前言：浏览器的渲染过程 ####

大部分的浏览器渲染过程如下图所示：  
![这里写图片描述][70]

1.  浏览器把HTML源代码解析，并且创建一个DOM树（DOM tree）-每个HTML标签在这个树上都有一个对应的节点。
2.  浏览器解析CSS代码，被css解析器解析成CSSOM Tree。
3.  DOM Tree和CSSOM Tree解析完成后，被附加到一起，形成渲染树（Render Tree）。
4.  一旦 渲染树构造完毕，浏览器就可以显示\*\*（绘制paint）\*\*页面上的元素了。

#### 一句话：回流必将引起重绘，重绘不一定会引起回流。 ####

#### 回流 (Reflow) ####

当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。

会导致回流的操作：

页面首次渲染  
浏览器窗口大小发生改变  
元素尺寸或位置发生改变  
文字数量或图片大小改变  
元素字体大小变化  
添加或者删除可见的DOM元素  
激活CSS伪类（例如：:hover）

#### 重绘 (Repaint) ####

当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。

性能影响  
回流比重绘的代价要更高。

有时即使仅仅回流一个单一的元素，它的父元素以及任何跟随它的元素也会产生回流。

现代浏览器会对频繁的回流或重绘操作进行优化：

浏览器会维护一个队列，把所有引起回流和重绘的操作放入队列中，如果队列中的任务数量或者时间间隔达到一个阈值的，浏览器就会将队列清空，进行一次批处理，这样可以把多次回流和重绘变成一次。

#### 如何避免 ####

##### CSS #####

可以使用transform属性  
将动画效果应用到position属性为absolute或fixed的元素上。

##### JavaScript #####

避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性。  
避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。  
也可以先为元素设置display: none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。  
对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。

[70]: /images/20220514/dd7513f85fea418d8d13b7fbb92d8c53.png

发表评论取消回复

表情：

评论列表（有 0 条评论，186人围观）

还没有评论，来说两句吧...

相关阅读

相关介绍下重绘和回流（Repaint & Reflow），以及如何进行优化

[https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/24][https_github.c

比眉伴天荒/ 2023年08月17日 16:47/ 0 赞/ 71 阅读

相关浏览器重绘（Repaint）和回流（Reflow）

回流必将引起重绘，重绘不一定会引起回流！！！重绘（Repaint）当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-col

悠悠/ 2022年12月07日 15:27/ 0 赞/ 199 阅读

相关 [CSS][JavaScript]介绍下重绘和回流（Repaint & Reflow），以及如何进行优化

介绍下重绘和回流（Repaint & Reflow），以及如何进行优化 1.浏览器渲染机制浏览器采用流式布局模型（Flow Based Layout）浏览器

浅浅的花香味﹌/ 2022年12月01日 01:21/ 0 赞/ 81 阅读

相关【JS】前端性能优化 —— reflow(回流)和repaint(重绘)

[https://www.cnblogs.com/zhutao/p/6551216.html][https_www.cnblogs.com_zhutao_p_6551216.h

朱雀/ 2022年11月22日 00:11/ 0 赞/ 149 阅读

相关回流(reflow)与重绘(repaint)

页面的显示过程分为以下几个阶段： 1、生成DOM树(包括display:none的节点) 2、在DOM树的基础上根据节点的集合属性(margin,padding,width

悠悠/ 2022年06月17日 12:56/ 0 赞/ 210 阅读

相关前端性能优化 —— reflow(回流)和repaint(重绘)

简要：整个在浏览器的渲染过程中（页面初始化，用户行为改变界面样式，动画改变界面样式等）reflow(回流)和repaint(重绘) 会大大影响web性能，尤其是手机页面。因此我

小鱼儿/ 2022年06月04日 01:40/ 0 赞/ 208 阅读

相关【JavaScript性能优化】------理解回流和重绘（reflow和repaint）

前言：浏览器的渲染过程大部分的浏览器渲染过程如下图所示： ![这里写图片描述][70] 1. 浏览器把HTML源代码解析，并且创建一个DOM树（DOM tree

不念不忘少年蓝@/ 2022年05月14日 12:58/ 0 赞/ 187 阅读

相关 reflow（重排/回流）、repaint（重绘）及其优化

原文地址：[https://blog.csdn.net/u013100656/article/details/79888106][https_blog.csdn.net_u01

左手的ㄟ右手/ 2022年01月09日 18:55/ 0 赞/ 267 阅读

相关 Reflow(回流)和Repaint(重绘)

首先我们要明白的是，页面的显示过程分为以下几个阶段： 1、生成DOM树(包括display:none的节点) 2、在DOM树的基础上根据节点的集合属性(margin,pad

不念不忘少年蓝@/ 2021年09月29日 09:24/ 0 赞/ 380 阅读

相关前端性能优化 —— reflow(回流)和repaint(重绘)

随着前端技术的发展，各种技术和框架也不断更新完善，产品也越来越酷炫，动画、交互等没有你想不到，只有你做不到的，随着而来的就是写不完的需求，改不完的bug（当然这只是开玩笑，毕竟

阳光穿透心脏的1/2处/ 2021年09月14日 22:14/ 0 赞/ 448 阅读