什么是重绘和重排，它们的区别是什么?

重绘：当页面元素样式的改变不影响布局时，浏览器重新对元素进行更新的过程叫做重绘。

重排：当页面元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程叫做重排也叫做回流。

一个页面由两部分组成：

DOM：描述该页面的结构

render：描述 DOM 节点 (nodes) 在页面上如何呈现

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

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

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

页面渲染的过程如下：

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

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

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

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

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

下列情况会发生重排

页面初始渲染

添加/删除可见DOM元素

改变元素位置

改变元素尺寸（宽、高、内外边距、边框等）

改变元素内容（文本或图片等）

改变窗口尺寸

如何减少重排和重绘（提高性能）

由于回流和重绘会带来很大的性能开销，所以在开发中我们要尽量避免或减少回流和重绘的次数来提高性能

1.      避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。

2.     对具有复杂动画的元素使用绝对定位，使其脱离文档流，否则会引起父元素及后续元素频繁回流。

3.     要避免频繁的去操作DOM，可以通过创建documentFragment，完成所有所有DOM操作后，最后再把它添加到文档中。

4.     避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性。

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. 重绘的性能开销较低，重排的性能开销较高；

2. 回流（重排）一定会触发重绘，而重绘不一定会回流（重排）

本文标题：什么是重绘和重排，它们的区别是什么?
URL地址：https://www.cdcxhl.com/news/163313.html

成都网站建设公司_创新互联，为您提供网站内链、小程序开发、建站公司、移动网站建设、商城网站、动态网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联