【前端工程师手册】学习回流和重绘（reflow和repaint）

fish 发布于2019-08-23 10:36 / 709人阅读

摘要：重绘元素做了一些不影响排版的改变，比如背景色下划线等等，只需要重新绘制的过程，叫做重绘。显然回流带来的代价大于重绘，因为重绘仅仅是重新画一遍元素而已，但是重绘是重新计算重新画。不然这会导致大量地读写这个结点的属性。

浏览器的大概工作流程

以普通的HTML页面为例：

解析HTML文档，生成dom树

解析css产生css规则树

解析JavaScript，通过DOM-API来操作dom树和css规则树

通过dom树和css规则树来构造渲染树（rendering tree）

调用操作系统的GUI接口画页面

回流（reflow）和重绘（repaint）

回流：

元素的大小尺寸、位置发生变化时，会重新计算渲染树，页面要进行重新排版工作，这个过程即是回流。

重绘：

元素做了一些不影响排版的改变，比如背景色、下划线等等，只需要重新绘制的过程，叫做重绘。

显然回流带来的代价大于重绘，因为重绘仅仅是重新画一遍元素而已，但是重绘是重新计算+重新画。

回流的原因：

Initial。网页初始化的时候。

Incremental。一些Javascript在操作DOM Tree时。

Resize。其些元件的尺寸变了

StyleChange。如果CSS的属性发生变化了。

Dirty。几个Incremental的reflow发生在同一个元素的子树上。

更具体的说，就是这些常见的操作会引起回流：

调整窗口大小

字体大小

样式表变动

元素内容变化，尤其是输入控件

CSS伪类激活，在用户交互过程中发生

DOM操作，DOM元素增删、修改

width, clientWidth, scrollTop等布局宽高的计算

ps：但是浏览器并不会在我们一进行上面的操作就进行回流，浏览器会积攒一批reflow然后一起进行回流，不过有的操作会让浏览器立马进行回流，比如resize窗口，改变了页面默认的字体，或者说获取以下这些值：

offsetTop, offsetLeft, offsetWidth, offsetHeight

scrollTop/Left/Width/Height

clientTop/Left/Width/Height

IE中的 getComputedStyle(), 或 currentStyle

如何减少reflow和repaint

避免频繁的修改样式，可以将要修改的多个样式定义为一个class类，然后将类名一次赋值即可

把dom离线操作:

使用documentFragment 对象在内存里操作DOM

先把DOM给display:none(有一次reflow)，然后你想怎么改就怎么改。比如修改100次，然后再把他显示出来。

clone一个DOM结点到内存里，然后想怎么改就怎么改，改完后，和在线的那个的交换一下

不要把DOM结点的属性值放在一个循环里当成循环里的变量。不然这会导致大量地读写这个结点的属性。

为动画的HTML元件使用fixed或absoult的position，那么修改他们的CSS是不会reflow的，因为脱离了文档流

参考

减少重排与重绘

浏览器的渲染原理简介

GPU云服务器云服务器前端工程师学习快照和重装系统前端工程师和后端前端和web工程师

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96499.html

【前端工程师手册】学习回流和重绘（reflow和repaint）

摘要：重绘元素做了一些不影响排版的改变，比如背景色下划线等等，只需要重新绘制的过程，叫做重绘。显然回流带来的代价大于重绘，因为重绘仅仅是重新画一遍元素而已，但是重绘是重新计算重新画。不然这会导致大量地读写这个结点的属性。浏览器的大概工作流程以普通的HTML页面为例：解析HTML文档，生成dom树解析css产生css规则树解析JavaScript，通过DOM-API来操作dom树和...

liuyix 2019-08-29 16:12 评论0 收藏0
性能：深入理解浏览器渲染原理 reflow & repaint

摘要：之后，如果渲染树发生了变动，那么可能会触发回流或重绘中的一个或二者。在书写时要避免不必要的层级，书写时避免嵌套过深规则过于复杂，尤其是后代选择器，匹配选择器也会耗费更多的。刚入行前端的时候是不是经常看到有文章说尽量不要用CSS通配符*，CSS选择器层叠最好不要超过三层，HTML少使用table，结构也要尽量简单一些...这一切说的不无道理，过多的使用确实会造成浏览器渲染的性能降低，当...

WelliJhon 2019-08-29 13:30 评论0 收藏0
DOM操作成本到底高在哪儿？

摘要：刨根问底，这里说的成本，到底高在哪儿呢什么是文档对象模型什么是可能很多人第一反应就是等标签至少我是，但要知道，是，是，对象模型，是为提供的。操作具体的成本，说到底是造成浏览器回流和重绘，从而消耗资源。从我接触前端到现在，一直听到的一句话：操作DOM的成本很高，不要轻易去操作DOM。尤其是React、vue等MV*框架的出现，数据驱动视图的模式越发深入人心，jQuery时代提供的强大便...

yuxue 2019-08-22 15:51 评论0 收藏0
DOM操作成本到底高在哪儿？

摘要：刨根问底，这里说的成本，到底高在哪儿呢什么是文档对象模型什么是可能很多人第一反应就是等标签至少我是，但要知道，是，是，对象模型，是为提供的。操作具体的成本，说到底是造成浏览器回流和重绘，从而消耗资源。从我接触前端到现在，一直听到的一句话：操作DOM的成本很高，不要轻易去操作DOM。尤其是React、vue等MV*框架的出现，数据驱动视图的模式越发深入人心，jQuery时代提供的强大便...

MASAILA 2019-08-02 10:04 评论0 收藏0
回流、重绘及其优化

摘要：回流重绘及其优化渲染过程渲染引擎通过通过网络请求接收渲染内容解析抽象抽象出布局绘画抽象渲染引擎的第一步是解析文档并将解析的元素转换为树中的实际节点。回流、重绘及其优化渲染过程渲染引擎通过通过网络请求接收渲染内容解析HTML抽象DOM tree 抽象出Render tree 布局（layout）render tree 绘画render tree 抽象DOM tree 渲染引擎...

Clect 2019-08-22 16:30 评论0 收藏0