重绘和重排是什么？如何减少重绘和重排

蔚落 2022-05-15 04:24 2107阅读 0赞

一个页面由两部分组成：  
DOM：描述该页面的结构  
render：描述 DOM 节点 (nodes) 在页面上如何呈现

当 DOM 元素的属性发生变化 (如 color) 时, 浏览器会通知 render 重新描绘相应的元素, 此过程称为 repaint。

如果该次变化涉及元素布局 (如 width), 浏览器则抛弃原有属性, 重新计算并把结果传递给 render 以重新描绘页面元素, 此过程称为 reflow。

这两个过程是很耗费浏览器性能的, 从 IE 系列和 Chrome 渲染页面速度上的差距即可看出渲染引擎计算对应值和呈现并不一定高效, 而每次对元素的操作都会发生 repaints 或 reflow, 因此编写 DOM 交互时如果不注意就会导致页面性能低下.  
页面渲染的过程如下：

![01.jpg][]

1.解析HTML代码并生成一个 DOM 树。

2.解析CSS文件，顺序为：浏览器默认样式->自定义样式->页面内的样式。

3.生成一个渲染树（render tree）。这个渲染树和DOM树的不同之处在于，它是受样式影响的。它不包括那些不可见的节点。

4.当渲染树生成之后，浏览器就会在屏幕上“画”出所有渲染树中的节点。

不管页面发生了重绘还是重排，它们都会影响性能（最可怕的是重排 ，应尽量避免）

下列情况会发生重排

*  页面初始渲染
 *  添加/删除可见DOM元素
 *  改变元素位置
 *  改变元素尺寸（宽、高、内外边距、边框等）
 *  改变元素内容（文本或图片等）
 *  改变窗口尺寸

**怎么减少重排？说一下我的方法：**

1.分离读写操作

var curLeft=div.offsetLeft;

var curTop=div.offsetTop;

div.style.left=curLeft+1+’px’;

div.style.top=curTop+1+’px’;

2.样式集中改变

可以添加一个类，样式都在类中改变

3.可以使用absolute脱离文档流。

4.使用 display:none ，不使用 visibility，也不要改变 它的 z-index

5.能用css3实现的就用css3实现。

**如何在浏览器中查看页面渲染时间**

1.打开开发者工具：点击TimeLine 左侧有个小圆点 点击刷新页面会录制整个页面加载出来 时间的分配情况。如下图

![Center][]

![Image 1][]

![Image 1][]

下面具体的说一下这几个过程：点击 Event Log ：单独勾选Loading项会显示html 和 css 加载时间。如下图：![Center 1][]

![Image 1][]

![Image 1][]

解析完DOM+css之后会生成一个渲染树 Render Tree，就是 dom 和 css 的一一对应关系。

DOM+css= Render Tree

layout:  重排 ，又叫回流。

paint:重绘 也可以在Event Log里看的到，这里就不附图了。

重排重绘这些步骤都是在cpu中发生的。

最后 到  compostite Layers阶段，cpu 把生成的 BitMap（位图）传输到GPU，渲染到屏幕。 css3就是在GPU发生的：transform  opacity。

在 GPU发生的属性比较高效。所以css3性能比较高。

**小结：**

渲染的三个阶段 Layout ,Paint,Composite Layers。

修改不同的css属性会触发不同阶段。

触发的阶段越前，渲染的代价越高。

[01.jpg]: /images/20220515/8bac38e80ce44c0ab3c22d18af18233a.png
[Center]: /images/20220515/260d0a3248904ad1a765b5fe367d1585.png
[Image 1]: 
[Center 1]: /images/20220515/9c57b2d011fd44629f2983203ed2f9b9.png

发表评论取消回复

表情：

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

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

相关阅读

相关前端开发避免重排和重绘

最近开发一款在阉割版chrome浏览器运行的web页面其中遇到很多流畅性优化的问题？代码中如何优化卡顿问题呢？下面我们输出所有绝密方案： 1. 尽量避免重

青旅半醒/ 2024年04月08日 09:04/ 0 赞/ 202 阅读

相关重排和重绘

浏览器的渲染过程 1.解析HTML，生成DOM树 2.解析CSS，生成CSS规则树(CSSOM) 3.合并DOM和CSSOM，生成渲染树（Render-Tree）

Love The Way You Lie/ 2023年10月02日 10:33/ 0 赞/ 67 阅读

相关浏览器重绘和重排

重排reflow：DOM的变化影响到了元素的宽高，导致浏览器要重新计算元素的宽高（影响到页面布局），甚至影响到渲染数中的某些部分就需要重新渲染。改变窗口大小、文字大小、内容变化

た入场券/ 2023年06月15日 06:49/ 0 赞/ 123 阅读

相关重绘与重排

在项目的交互或视觉评审中，前端同学常常会对一些交互效果质疑，提出这样做不好那样做不好。主要原因是这些效果通常会产生一系列的浏览器重绘 (redraw)和重排(reflow)，需

谁借莪１个温暖的怀抱￠/ 2022年09月25日 05:15/ 0 赞/ 298 阅读

相关重排重绘与GPU加速

重排重绘我们知道在浏览器渲染过程中存在重排和重绘过程重排当出现以下行为时，会引起重排。添加或删除DOM元素元素的位置发生变化元素的尺

傷城~/ 2022年09月08日 12:54/ 0 赞/ 333 阅读

相关浏览器重绘和重排

时间：2017年4月25日12:40:06 [《我的博客地图》][Link 1] 前端开发岗位是一个知识范围比较综合的一个岗位，需要了解和探究的知识很多，因此

我就是我/ 2022年06月16日 20:15/ 0 赞/ 321 阅读

相关高性能JavaScript 重排与重绘

先回顾下前文《[高性能JavaScript DOM编程][JavaScript DOM]》，主要提了两点优化，一是尽量减少DOM的访问，而把运算放在ECMAScript这一端，

不念不忘少年蓝@/ 2022年05月18日 23:12/ 0 赞/ 348 阅读

相关重绘和重排是什么？如何减少重绘和重排

一个页面由两部分组成： DOM：描述该页面的结构 render：描述 DOM 节点 (nodes) 在页面上如何呈现当 DOM 元素的属性发生变化 (如 color

蔚落/ 2022年05月15日 04:24/ 0 赞/ 2108 阅读

相关浏览器重绘与重排

当我们在做前端开发的时候，肯定会碰到操作DOM的情况，在操作DOM的时候，就会引起浏览器的重绘与重排。 ▍重绘 > 如果DOM变化仅仅影响的了visibility、o

怼烎@/ 2022年05月11日 03:14/ 0 赞/ 308 阅读

相关高性能JavaScript之重绘和重排

浏览器下载完页面所需的所有组件后就开始解析并生成两个内部数据结构： DOM树：表示页面结构渲染树：表示 DOM 节点如何展示 DOM 树中的每个需要显示的节点

布满荆棘的人生/ 2021年12月21日 05:27/ 0 赞/ 422 阅读