本文作者：IMWeb 存勖闲 原文出处：IMWeb社区 未经同意，禁止转载 原文地址：http://www.cun-xu.cn/index.php/2018/12/25/重排与重绘/ 在页面的生命周期中...，一些效果的交互都有可能发生重排（Layout）和重绘（Painting），这些都会使我们付出高额的性能代价。...浏览器从下载文件至本地到显示页面是个复杂的过程，这里包含了重绘和重排。通常来说，渲染引擎会解析HTML文档来构建DOM树，与此同时，渲染引擎也会用CSS解析器解析CSS文档构建CSSOM树。...其中重排和重绘是最耗时的部分，一旦触发重排，我们对DOM的修改引发了DOM几何元素的变化，渲染树需要重新计算， 而重绘只会改变vidibility、outline、背景色等属性导致样式的变化，使浏览器需要根据新的属性进行绘制...触发重绘的操作主要有： vidibility、outline、背景色等属性的改变 我们应当注意的是：重绘不一定导致重排，但重排一定会导致重绘。
加深认识 “重绘” 和 “重排” 1.重绘 重绘是指一个元素外观改变所触发的浏览器行为，大概就是外观属性的改变，像，背景颜色，等 2，重排 重排是指渲染树中因为元素的尺寸或规模改变，需要重新构建的这个过程...3，触发重排的条件 页面第一次加载时 添加或删除可见的dom元素时 元素的位置改变，或使用动画时 元素尺寸改变时 浏览器的窗口尺寸改变时 填充的内容改变时 4，重绘和重排的关系 重排一定回引发重绘，但重绘不一定回重排...生成渲染树 （这个时候已经走到render tree 啦） 然后就是layout(这就是回流) ，可以得到几何信息 再然后就是重绘啦，可以得到节点的绝对像素， 最后就是将像素发给GPU，展示在页面上
console.timeEnd(3); 结果 1: 318.88ms 2: 1.80ms 3: 0.97ms 方式1 最糟糕，每次循环都修改节点内容，引发重绘重排...方式2 只修改一次节点内容，比方式1好太多 方式3 也是修改一次节点内容，与方式2的时间差距是在获取节点操作上 可以看到，糟糕的JS代码代价很高，所以开发时一定要注意代码写法的不同对性能的影响 最基本的原则...尽量减少对节点几何元素的改变（例如宽和高），因为浏览器需要重新计算元素的几何属性，同样其他元素的几何属性和位置也会因此受到影响，引发重排，重排后比如会引发重绘
样式或节点的更改，以及对布局信息的访问等，都有可能导致重排和重绘。而重排和重绘的过程在主线程中进行，这意味着不合理的重排重绘会导致渲染卡顿，用户交互滞后等性能问题。 知识点深入 1....什么是重排重绘 Layout（布局） 指浏览器计算各元素的几何信息，确定元素的大小以及在页面中的位置等信息的过程。...重排和重绘，本质上指的就是分别重新触发 Layout 和 Paint 的过程，且重排必定导致重绘。 引起重排/重绘的常见操作 外观有变化时，会导致重绘。...在交互阶段，页面更新（一般是通过执行 JavaScript 来触发）通常会触发重排和重绘。为了提升浏览器渲染效率，应当尽可能减少重绘重排，降低浏览器渲染耗费的时间，尽快将内容渲染到屏幕上。...另外，可以借助 DevTools Performance 面板来查看产生重排重绘任务占用主线程的情况和调用代码。
而重绘不一定会引起回流。...var s = document.body.style; s.padding = "2px"; // 回流+重绘 s.border = "1px solid red"; // 再一次 回流+重绘 s.color...= "blue"; // 再一次重绘 s.backgroundColor = "#ccc"; // 再一次 重绘 s.fontSize = "14px"; // 再一次 回流+重绘 // 添加node...; 如何减少回流、重绘 减少回流、重绘其实就是需要减少对render tree的操作（合并多次多DOM和样式的修改），并减少对一些style信息的请求，尽量利用好浏览器的优化策略。具体方法有： 1....让要操作的元素进行”离线处理”，处理完后一起更新 a) 使用DocumentFragment进行缓存操作,引发一次回流和重绘； b) 使用display:none技术，只引发两次回流和重绘； c) 使用
DOM 树里包含了所有 HTML 标签，包括 display:none 隐藏的标签，还有用 JS 动态添加的元素等。...因此回流必将引起重绘，而重绘不一定会引起回流。 Reflow 的成本比 Repaint 高得多的多。..."blue" // 重绘 s.backgroundColor = "#ccc" // 重绘 s.fontSize = "14px" // 再一次 回流+重绘 document.body.appendChild...// 回流+重绘 浏览器 如果向上述代码中那样，浏览器不停地回流+重绘，很可能性能开销非常大，实际上浏览器会优化这些操作，将所有引起回流和重绘的操作放入一个队列中，等待队列达到一定的数量或者时间间隔，就...flush 这个队列，一次性处理所有的回流和重绘。
三、重绘 定义： 如果修改了元素的背景颜色，并没有引起几何位置的变换，所以就直接进入了绘制阶段，然后执行之后的一系列子阶段，这个过程就叫重绘。...相较于重排操作，重绘省去了布局和分层阶段，所以执行效率会比重排操作要高一些。...触发时机和影响范围： 每一次的dom更改或者css几何属性更改，都会引起一次浏览器的重排/重绘过程，而如果是css的非几何属性更改，则只会引起重绘过程。...(200)' 七、总结 重排一定会引起重绘，而重绘不一定会引起重排，重绘的开销较小，重排的代价较高。...在日常开发过程中应该尽量减少重排和重绘操作。
错误示范 一般的面试过程就是这样的： 面试官：如何理解重排和重绘? 候选人：重排就是当页面的结构发生变化了，就会重排，比如改变变字体的大小，增删 DOM 元素这样的。...重绘就是页面结构没有变化，只是外观变了，比如改了一下字体颜色、背景颜色这样的。就只会发生重绘。 “当然他说的也没错，我也不能直接说他错，就继续引导” 面试官：那重排和重绘有什么关系吗？...候选人：重排一定会导致重绘，重绘不一定会导致重排。 面试官：为什么呢？ 候选人：因为重排结构发生变化了嘛，肯定会导致重绘。...绘制是一个非常快的过程，所以聚焦在提升性能时这大概不是最有效的部分 重排(Reflow)和重绘(Repaint) 了解完上面的关键路径渲染之后，再来了解重排和重绘简直就是小 case。...如果元素位置没有发生变动，仅仅只是样式发生变动，这个时候浏览器重新渲染的时候会跳过布局步骤，直接进入绘制步骤，这就是重绘，所以重绘不一定会导致重排。”
重绘与重排是浏览器渲染的重要动作，对前端性能影响非常大，所以值得多了解一下 什么是重绘与重排？...重绘是一个改变元素外观的行为，例如改变visibility、背景色等属性 重排是浏览器重新计算各个元素的排列位置，需要重新进行布局计算，例如改变元素的宽高、元素内的内容 重绘不会带来重新布局，并不一定伴随重排...，但重排一定会导至重绘 哪些操作会引起重排？...某元素的几何属性发生变化时，会触发子节点、兄弟节点、祖先节点重新计算，也就是所有元素都得重新计算大小、位置，整个页面重新渲染，代价非常大 （2）DOM树的结构变化 例如节点的增减、移动等，也会触发重排...scrollLeft、scrollWidth、scrollHeight clientTop、clientLeft、clientWidth、clientHeight getComputedStyle() 如何减小重绘重排的性能代价
在介绍新的 CSS 属性 contain 之前，读者首先需要了解什么是页面的重绘与重排。 之前已经描述过很多次了，还不太了解的可以先看看这个提高 CSS 动画性能的正确姿势。...目的是能够让浏览器有能力只对部分元素进行重绘、重排，而不必每次都针对整个页面。
面试中，经常会问到： “重排与重绘的概念，什么情况触发，如何优化等” 本文就来解答下，上面的问题 01 渲染过程 首先，我们来了解下浏览器的渲染过程 浏览器生成渲染树的过程 02 重排与重绘概念 重排...重绘不一定需要重排，重排必然会导致重绘 03 什么情况会触发 触发重排的条件：任何页面布局和几何属性的改变都会触发重排。...： 重绘发生在元素的可见的外观被改变，但并没有影响到布局的时候。...比如，仅修改DOM元素的字体颜色（只有Repaint，因为不需要调整布局） 04 优化 重绘重排的代价：耗时，导致浏览器卡慢。 所以，需要优化来减少重绘重排的发生 css 优化 1....使用css3硬件加速，可以让transform、opacity、filters等动画效果不会引起回流重绘 js 优化 1.
： 了解前端Dom代码、css样式、js逻辑代码到浏览器展现过程 了解什么是图层 了解重绘与回流 了解前端层面针对重绘、回流如何优化 css图层 浏览器在渲染一个页面时，会将页面分为很多个图层，图层有大有小...为每个节点生成图形和位置 （Layout–布局，重排,回流） 4. 将每个节点绘制填充到图层位图中 （Paint–重绘） 5. 图层作为纹理上传至GPU 6....重绘不会带来重新布局，所以并不一定伴随回流。 需要注意的是：重绘是以图层为单位，如果图层中某个元素需要重绘，那么整个图层都需要重绘。...“回流”大多数情况下会导致”重绘”，比如改变一个网页元素的位置，就会同时触发”回流”和”重绘”，因为布局改变了。...为每个节点生成图形和位置（Layout–重排或回流） 3. 将每个节点填充到图层中（Paint–重绘） 4.
HTML默认是流式布局，css与js会打破这种布局，改变DOM的几何属性与外观属性。在绘制时根据渲染树布局，再根据布局绘制，这就是回流重绘。 回流：改变几何属性的渲染。又称重排。...重绘：改变外观属性而不影响几何属性的渲染。 在生成渲染树之后，至少会渲染一次，但在后续交互时还会不断地重新渲染。...这时只会回流重绘或只有重绘，因此引出一个定向法则：回流必定引发重绘，重绘不一定引发回流。 用户的交互操作引发了网页的重渲染。...(x,0,0)代替top，只会引发图层重绘，还会间接启动GPU加速。...7.将频繁回流重绘的节点设置为图层。 在浏览器中设置频繁回流或重绘的节点为一张新图层，那新图层就能够阻止节点的渲染行为影响别的节点，这张图层中如何变化都无法影响到其他图层。
reflow: 当render树中的一部分或者全部因为大小边距等问题发生改变而需要重建的过程叫做回流 repaint: 当元素的一部分属性发生变化，如外观背景色不会引起布局变化而需要重新渲染的过程叫做重绘...回流一定会引发重绘 但是 重绘不一定引发回流 引发回流的情况 ： 首当其冲自然是dom树结构变化，比如你删除或者添加某个node....虽然浏览器引擎可能会针对重排做了优化，比如Opera，它会等到有足够 数量的变化发生，或者等到一定的时间，或者等一个线程结束，再一起处理，这样就只发生一次重排。...red"; // 再一次 回流+重绘 s.color = "blue"; // 再一次重绘 s.backgroundColor = "#ccc"; // 再一次 重绘 s.fontSize =..."14px"; // 再一次 回流+重绘 // 添加node，再一次 回流+重绘 document.body.appendChild(document.createTextNode('abc!'))
一、写在前面 页面优化在面试的过程中经常遇到的问题，今天就来总计一下重绘和回流的问题。...二、重绘和回流是什么 我们都知道一个页面从加载到完成，首先是构建DOM树，然后根据DOM节点进行几何布局形成render树(渲染树)，当渲染树构建完成后，页面就根据DOM树开始布局，渲染树也根据设置的样式渲染这些节点...在比如说，我们给一个元素修改颜色，这样的行为是不会影响页面的布局的，DOM树不会发生改变，但是颜色变了，渲染树得重新绘制，这就是重绘。 所以说回流一定会触发重绘，重绘不一定触发回流。
每个页面至少发生一次回流／重排，就是页面第一次被加载时。当页面中的元素只是外观或风格被改变不影响布局，比如更换背景色background-color，这个过程就是重绘。...比如改变某个元素的背景色、文字颜色、边框颜色等等 影响回流（reflow）／重排（relayout）的因素 影响重绘(replaint)的因素 元素的布局和几何属性改变时就会触发reflow。...（比如颜色的改变），重排必然导致重绘（比如改变网页位置）。...优化： 重绘和重排对我们的浏览器性能有一定的个影响，浏览器会维护1个队列，把所有会引起重排，重绘的操作放入这个队列，等队列中的操作到一定数量或者到了一定时间间隔，浏览器就会flush队列，进行一批处理，...这样多次重排，重绘变成一次重排重绘 减少 reflow/repaint： （1）不要一条一条地修改 DOM 的样式。
CDocument) END_MESSAGE_MAP(); class MyView : public CView { public: void OnDraw(CDC * aDC)//必须重载的虚函数，重绘函数
重排比重绘大： 大，在这个语境里的意思是：谁能影响谁？ 重绘：某些元素的外观被改变，例如：元素的填充颜色 重排：重新生成布局，重新排列元素。...也就是说："重绘"不一定会出现"重排"，"重排"必然会出现"重绘" 重排(reflow)： 概念： 当DOM的变化影响了元素的几何信息(DOM对象的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置...重绘(Repaints): 概念： 当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。...+重绘，因为每一次都改变了元素的几何属性，实际上最后只触发了一次重排，这都得益于浏览器的渲染队列机制： 当我们修改了元素的几何属性，导致浏览器触发重排或重绘时。...因为队列中，可能会有影响到这些值的操作，为了给我们最精确的值，浏览器会立即重排+重绘。
——《高性能 JavaScript》 浏览器内核中的JS 引擎和渲染引擎是独立存在的，当我们用JS去操作DOM时，本质上是JS引擎和渲染引擎之间进行的“跨界交流”。...#回流和重绘 JS操作DOM很慢，而且修改DOM还会引发它的外观、样式、大小、位置的改变，就会触发重流或重绘。...这个过程就是回流（也叫重排）。...重绘：当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性（比如修改了颜色或背景色）时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式（跳过了上图所示的回流环节）。...这个过程叫做重绘。 由此可以看出，重绘不一定导致回流，但是回流一定会导致重绘。 优化的关键，就是把重绘和回流的次数最小化。 #如何优化 知道了DOM慢的原因，我就可以逐步优化了。
重绘的性能开销较小，因只是简单地更新元素的样式。回流和重绘都会带来性能消耗，因此在前端开发中，要尽可能减少回流和重绘的次数，以提高页面的渲染性能。...修改元素的透明度：当修改元素的透明度（opacity）时，会引发元素的重绘。改元素的文本样式：例如，修改元素的字体、字号、字重等文本样式属性，会触发元素的重绘。...注意：当触发回流时，一定会触发重绘，但是重绘不一定会引发回流三、如何减少回流与重绘浏览器优化机制浏览器针对回流和重绘，本身也具备一定的优化机制，但是仅是最基础的。...减少回流与重绘的措施了解了回流与重绘的触发条件，我们可以尽量避免不该有的操作，减少回流与重绘，提高浏览器渲染性能使用CSS动画代替JavaScript动画：CSS动画是利用浏览器的硬件加速，性能更高效。...我们学习到了回流和重绘的定义和区别，以及触发回流和重绘的常见操作。同时，我们提供了一些减少回流和重绘的优化措施，如使用transform属性进行动画、使用position属性进行定位、缓存布局信息等。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
