什么是重绘，重排？如何解决？

一、重绘（repaint/redraw）

某个dom节点的颜色，背景颜色变了，字体大小，只影响自己，不影响其他元素。

注意：table及其内部元素可能需要多次计算才能确定好其在渲染树中节点的属性，比同等元素要多花两倍时间，这就是我们尽量避免使用table布局页面的原因之一。

二、重排（回流/reflow/重构）

某个dom节点的宽高，布局，隐藏等发生改变，不仅自身发生了改变，而且其他元素也会受到影响随之发生改变。每个页面最少一次回流，就是页面第一次加载的时候。

触发重排的原因：

页面初始化渲染（无可避免）
添加或删除可见的DOM元素；
元素尺寸的改变------大小，外边距；边框；
浏览器窗口尺寸的变化；
填充内容的改变，比如文本的改变或图片大小改变而引起的计算值宽度和高度的改变；
读取某些元素属性：（offsetLeft/Top/Height/Width,　clientTop/Left/Width/Height,　scrollTop/Left/Width/Height,　width/height,　getComputedStyle(),　currentStyle(IE)　)

1.重绘不一定重排，但是重排一定会重绘

2.重绘和重排的成本都是非常高的，要尽量减少dom的增删改

如何解决：

不要直接操作样式，先设置好class，然后修改DOM的className;
position:absolute 与flex 不会导致重排
不要把DOM 节点的属性放在一个循环当成循环的变量；
需要动画的元素脱离文档流；
不使用table 布局，
尽量不修改影响范围比较大的DOM;
如果要多次添加DOM,先使用 document.createDocumentFragment() 创建一个盒子，完盒子里面先添加子元素，添加完成在插入元素中；

什么是重绘，重排？如何解决？相关推荐

android 重绘如何能不闪一下屏幕_浏览器渲染机制——重绘重排
性能优化中,减少重绘重排应该是一种很好的优化方式,我们具体看一下什么情况下会造成重绘重排,为什么减少重绘重排可以做到优化,怎么样减少重绘重排. 浏览器渲染过程我们先看看当浏览器拿到服务端返回的资源时 ...
css什么是重绘重排，哪些操作会造成重绘重排
一.重绘.重排 1.1 什么是重绘重排当我们改变了一个元素的尺寸位置属性时,会重新进行样式计算(computed style)和布局(layout) 绘制(paint)以及后面的所有流程,这种行为称 ...
重排和重绘理解及解决方法
一.重排的概念当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小),浏览器需要重新计算元素的几何属性,将其安放在界面中的正确位置,这个过程叫做重排. 重排也叫回流,简单的说就是重新生成布局, ...
【转】css_重绘重排
[转自]Yahoo! 性能工程师 Nicole Sullivan 在最新的文章 <Reflows & Repaints: CSS Performance making your Java ...
TStringGrid - 重绘时RECT解决一块空白区域
CellRect(ACol,ARow) 转载于:https://www.cnblogs.com/masg/p/9852360.html
什么是重排、重绘,如何优化
概念重排:当渲染树的一部分必须更新并且节点的尺寸发生了变化,浏览器会使渲染树中受到影响的部分失效,并重新构造渲染树. 重绘:是在一个元素的外观被改变所触发的浏览器行为,浏览器会根据元素的新属性重新绘 ...
android 重绘如何能不闪一下屏幕_前端性能优化之重绘和重排
性能优化中,减少重绘重排应该是一种很好的优化方式,我们具体看一下什么情况下会造成重绘重排,为什么减少重绘重排可以做到优化,怎么样减少重绘重排. 浏览器渲染过程我们先看看当浏览器拿到服务端返回的资源时 ...
重绘（redraw或repaint）,重排（reflow）
浏览器运行机制图: 浏览器的运行机制:layout:布局: 1.构建DOM树(parse):渲染引擎解析HTML文档,首先将标签转换成DOM树中的DOM node(包括js生成的标签)生成内容树(Co ...
你真的了解重排和重绘吗？
做过前端开发的小伙伴就算不是非常理解重排与重绘,但是肯定都听过这两个词.那为什么这两个东西这么重要?因为他与我们的页面性能息息相关,今天,我们就来好好研究一下这两个东西. 浏览器的渲染流程在讲解重排 ...
重排(reflow) 重绘(repaint)
在页面的生命周期中:至少会发生一次渲染,在用户访问的过程中,还会不断的触发重排(reflow)重绘(repaint) 重绘和重排都会影响性能,尤其是重排,会使我们付出高昂的性能代价. 页面生成的过程( ...

什么是重绘，重排？如何解决？

什么是重绘，重排？如何解决？相关推荐

最新文章

热门文章