概念

重排:当渲染树的一部分必须更新并且节点的尺寸发生了变化，浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。

重绘:是在一个元素的外观被改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观

什么时候会发生

重排(又叫回流)
这一阶段主要是计算节点的位置和几何信息，当页面布局和几何信息发生变化时，就需要重排。
引起重排的几种情况：

页面初始化的时候
DOM结构数的变化：添加或者删除可见的DOM元素
DOM元素的几何属性发生变化：外边距、内边距、边框厚度、宽高等
内容发生变化：文本的增加或减少、更换不同尺寸的图片
浏览器窗口尺寸改变(重排是根据视口的大小来计算元素的位置和大小的)
窗口属性的获取和尺寸改变：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、 clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)

重绘
DOM元素的字体颜色、改变visibility、outline、背景色等

区别

重绘不会带来DOM元素的重新计算，所以重绘并不一定伴随重排（回流）
重排一定会引起浏览器的重绘

浏览器的性能优化方案

由于每次重排都会造成额外的计算消耗，因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程。浏览器会将修改操作放入到队列里，直到过了一段时间或者操作达到了一个阈值，才清空队列。但是！当你获取布局信息的操作的时候，会强制队列刷新，比如当你访问以下属性或者使用以下方法：
offsetTop、offsetLeft、offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle()、getBoundingClientRect()
以上属性和方法都需要返回最新的布局信息，因此浏览器不得不清空队列，触发回流重绘来返回正确的值。这也是为什么在获取这些值时会引起重排（回流）、重绘的原因，因此，我们在修改样式的时候，最好避免使用上面列出的属性，他们都会刷新渲染队列。如果要使用它们，最好将值先保存起来。

如何解决

分离读和写的操作（避免触发同步布局事件）

let ulDom = document.getElementById("box");
var curLeft=ulDom .offsetLeft;
var curTop=ulDom .offsetTop;
ulDom .style.left=curLeft+1+'px';
ulDom .style.top=curTop+1+'px';
//不要写成这样
let ulDom = document.getElementById("box");
var curLeft=ulDom .offsetLeft;
ulDom .style.left=curLeft+1+'px';
var curTop=ulDom .offsetTop;
ulDom .style.top=curTop+1+'px';

获取offsetLeft和offsetTop会导致浏览器强制清空队列，进行强制同步布局
2. 样式集中改变，而不要一个一个的改变（减少重绘重排）

let ulDom = document.getElementById("box");
ulDom.style.left = '100px';
ulDom.style.top = '200px';// 改成let ulDom = document.getElementById("box");
ulDom.style.cssText ='left :100px;top:200px;'//或者使用class名也可以
ulDom.className ='boxcls';

批量修改DOM

如果可以的话，在重排时，可以使用absolute脱离文档流，这样，元素的尺寸改变时，就不会影响其它元素了。先让元素absolute。然后给元素中放入若干个dom，再把元素的absolute去掉
使用createDocumentFragment或拼接html字符串的方式进行DOM的增加

参考文章：
知乎：重绘和重排的区别
CSDN:页面的重排和回流（提升移动端网页性能）

什么是重排、重绘,如何优化相关推荐

android 重新绘制界面,基于Android Q：华为最新EMUI10界面曝光，图标重绘继续优化...
原标题:基于Android Q:华为最新EMUI10界面曝光,图标重绘继续优化在手机的深度定制系统里,华为EMUI应该是知名度非常高的一个.重新设计的外观和强化的功能让华为手机的使用体验得到增强,很 ...
javascript --- [读书笔记] 回流与重绘前端优化小结
1. 浏览器渲染原理请说出: 从用户在浏览器地址输入网址,到看整个页面,中间都发生了哪些事情? HTTP请求阶段 HTTP响应阶段浏览器渲染阶段 1.1 可能用到的知识 1.1.1 进程 Proc ...
前端性能优化之重排和重绘
前言,最近利用碎片时间拜读了一下尼古拉斯的另一巨作<高性能JavaScript>,今天写的文章从"老生常谈"的页面重绘和重排入手,去探究这两个概念在页面性能提升上的作用 ...
android 重绘如何能不闪一下屏幕_前端性能优化之重绘和重排
性能优化中,减少重绘重排应该是一种很好的优化方式,我们具体看一下什么情况下会造成重绘重排,为什么减少重绘重排可以做到优化,怎么样减少重绘重排. 浏览器渲染过程我们先看看当浏览器拿到服务端返回的资源时 ...
浏览器渲染页面的原理及流程---------重绘与重排（回流）--优化
浏览器渲染页面的原理及流程浏览器将域名通过网络通信从服务器拿到html文件后,如何渲染页面呢? 1.根据html文件构建DOM树和CSSOM树.构建DOM树期间,如果遇到JS,阻塞DOM树及CSSO ...
android 重绘如何能不闪一下屏幕_浏览器渲染机制——重绘重排
性能优化中,减少重绘重排应该是一种很好的优化方式,我们具体看一下什么情况下会造成重绘重排,为什么减少重绘重排可以做到优化,怎么样减少重绘重排. 浏览器渲染过程我们先看看当浏览器拿到服务端返回的资源时 ...
重绘、重排区别如何避免
重排(Reflow):当渲染树的一部分必须更新并且节点的尺寸发生了变化,浏览器会使渲染树中受到影响的部分失效,并重新构造渲染树. 重绘(Repaint):是在一个元素的外观被改变所触发的浏览器行为,浏 ...
css什么是重绘重排，哪些操作会造成重绘重排
一.重绘.重排 1.1 什么是重绘重排当我们改变了一个元素的尺寸位置属性时,会重新进行样式计算(computed style)和布局(layout) 绘制(paint)以及后面的所有流程,这种行为称 ...
重排(reflow) 重绘(repaint)
在页面的生命周期中:至少会发生一次渲染,在用户访问的过程中,还会不断的触发重排(reflow)重绘(repaint) 重绘和重排都会影响性能,尤其是重排,会使我们付出高昂的性能代价. 页面生成的过程( ...

什么是重排、重绘,如何优化

概念

什么时候会发生

区别

浏览器的性能优化方案

如何解决

什么是重排、重绘,如何优化相关推荐

最新文章

热门文章