文章目录 css图层 图层创建的条件 重绘(Repaint) 回流 触发重绘的属性 触发回流的属性 常见的触发回流的操作 优化方案 requestAnimationFrame—-请求动画帧 写在最后 学习目标...： 了解前端Dom代码、css样式、js逻辑代码到浏览器展现过程 了解什么是图层 了解重绘与回流 了解前端层面针对重绘、回流如何优化 css图层 浏览器在渲染一个页面时，会将页面分为很多个图层，图层有大有小...重绘不会带来重新布局，所以并不一定伴随回流。 需要注意的是：重绘是以图层为单位，如果图层中某个元素需要重绘，那么整个图层都需要重绘。...计算这些值的过程称为布局或回流 “重绘”不一定需要”回流”，比如改变某个网页元素的颜色，就只会触发”重绘”，不会触发”回流”，因为布局没有改变。...“回流”大多数情况下会导致”重绘”，比如改变一个网页元素的位置，就会同时触发”回流”和”重绘”，因为布局改变了。
HTML默认是流式布局，css与js会打破这种布局，改变DOM的几何属性与外观属性。在绘制时根据渲染树布局，再根据布局绘制，这就是回流重绘。 回流：改变几何属性的渲染。又称重排。...这时只会回流重绘或只有重绘，因此引出一个定向法则：回流必定引发重绘，重绘不一定引发回流。 用户的交互操作引发了网页的重渲染。...避免回流重绘 1.使用visibility:hidden替换display:none 2.使用transform代替top top是几何属性，操作top会改变节点位置引发回流，使用transform:translate3d...4.避免规则层级过多 浏览器的CSS解析器解析css文件时，对CSS规则是从右到左匹配查找，样式层级过多会影响回流重绘效率，建议保持CSS规则在3层左右。...7.将频繁回流重绘的节点设置为图层。 在浏览器中设置频繁回流或重绘的节点为一张新图层，那新图层就能够阻止节点的渲染行为影响别的节点，这张图层中如何变化都无法影响到其他图层。
repaint: 当元素的一部分属性发生变化，如外观背景色不会引起布局变化而需要重新渲染的过程叫做重绘 回流一定会引发重绘 但是 重绘不一定引发回流 引发回流的情况 ： 首当其冲自然是dom...浏览器窗口发生变化-resize事件发生时 var s = document.body.style; s.padding = "2px"; // 回流+重绘 s.border = "1px solid...red"; // 再一次 回流+重绘 s.color = "blue"; // 再一次重绘 s.backgroundColor = "#ccc"; // 再一次 重绘 s.fontSize =..."14px"; // 再一次 回流+重绘 // 添加node，再一次 回流+重绘 document.body.appendChild(document.createTextNode('abc!'))...; 说到这里大家都知道回流比重绘的代价要更高，回流的花销跟render tree有多少节点需要重新构建有关系，假设你直接操作body，比如在body最前面插入1个元素，会导致整个render tree
一、写在前面 页面优化在面试的过程中经常遇到的问题，今天就来总计一下重绘和回流的问题。...二、重绘和回流是什么 我们都知道一个页面从加载到完成，首先是构建DOM树，然后根据DOM节点进行几何布局形成render树(渲染树)，当渲染树构建完成后，页面就根据DOM树开始布局，渲染树也根据设置的样式渲染这些节点...在比如说，我们给一个元素修改颜色，这样的行为是不会影响页面的布局的，DOM树不会发生改变，但是颜色变了，渲染树得重新绘制，这就是重绘。 所以说回流一定会触发重绘，重绘不一定触发回流。...三、怎么样减少回流 回流会重构DOM树，渲染树也得重新渲染，比较麻烦，哪些行为可以引发回流，如何去避免呢？ 1、DOM的删除行为 比如删除某个节点，或者给父元素插入子节点，这类操作都会触发回流。...5、页面初次渲染触发回流 页面的初次渲染触发回流这样无法避免。 6、浏览器窗口尺寸的改变 resize事件的发生也会触发回流。 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。
在认识重绘和回流之前，我们先认识一下一个页面加载的时候，会发生什么？ 页面加载时，生成一个DOM树，DOM Tree里包含了构成页面所有的标签。...每个页面至少发生一次回流／重排，就是页面第一次被加载时。当页面中的元素只是外观或风格被改变不影响布局，比如更换背景色background-color，这个过程就是重绘。...比如改变某个元素的背景色、文字颜色、边框颜色等等 影响回流（reflow）／重排（relayout）的因素 影响重绘(replaint)的因素 元素的布局和几何属性改变时就会触发reflow。...（比如颜色的改变），重排必然导致重绘（比如改变网页位置）。...这样多次重排，重绘变成一次重排重绘 减少 reflow/repaint： （1）不要一条一条地修改 DOM 的样式。
——《高性能 JavaScript》 浏览器内核中的JS 引擎和渲染引擎是独立存在的，当我们用JS去操作DOM时，本质上是JS引擎和渲染引擎之间进行的“跨界交流”。...#回流和重绘 JS操作DOM很慢，而且修改DOM还会引发它的外观、样式、大小、位置的改变，就会触发重流或重绘。...这个过程就是回流（也叫重排）。...重绘：当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性（比如修改了颜色或背景色）时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式（跳过了上图所示的回流环节）。...这个过程叫做重绘。 由此可以看出，重绘不一定导致回流，但是回流一定会导致重绘。 优化的关键，就是把重绘和回流的次数最小化。 #如何优化 知道了DOM慢的原因，我就可以逐步优化了。
一、回流与重绘的概念在 HTML 中，每个元素都可以理解成一个盒子，在浏览器解析过程中，会涉及到回流与重绘：回流（reflow）：当DOM的结构发生改变或者某个元素的样式发生变化时，浏览器需要重新计算并重新布局...重绘的性能开销较小，因只是简单地更新元素的样式。回流和重绘都会带来性能消耗，因此在前端开发中，要尽可能减少回流和重绘的次数，以提高页面的渲染性能。...注意：当触发回流时，一定会触发重绘，但是重绘不一定会引发回流三、如何减少回流与重绘浏览器优化机制浏览器针对回流和重绘，本身也具备一定的优化机制，但是仅是最基础的。...减少回流与重绘的措施了解了回流与重绘的触发条件，我们可以尽量避免不该有的操作，减少回流与重绘，提高浏览器渲染性能使用CSS动画代替JavaScript动画：CSS动画是利用浏览器的硬件加速，性能更高效。...我们学习到了回流和重绘的定义和区别，以及触发回流和重绘的常见操作。同时，我们提供了一些减少回流和重绘的优化措施，如使用transform属性进行动画、使用position属性进行定位、缓存布局信息等。
回流一定会发生重绘，重绘不一定会引发回流 4.浏览器优化 现代浏览器大多都通过队列机制来批量更新布局，浏览器会把修改操作放在队列中，至少一个浏览器刷新（16.6ms）才清空队列，但当你获取布局信息时，队列中可能存在影响这写属性和方法返回值的操作...，即使没有，浏览器也会强制清空队列，触发重绘和回流来保证返回正确的值 主要有一下方法和属性 offsetTop、offsetLeft、offsetWidth、offsetHeight scrollTop...5.减少重绘与回流 1.css ....减少重绘与回流 1.CSS 使用 transform 替代 top 使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发回流（改变了布局) 避免使用...避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。 对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。
前言 回流和重绘是前端开发的高频词汇之一，你可以在各种面经，性能优化相关文章可以看到，但是很多都是草草带过。本文带你从浏览器渲染流程中了解回流与重绘的原理。...按照渲染流水线的顺序可知，回流一定会触发重绘，而重绘不一定发生回流 如果想知道更改任何指定 CSS 属性将触发上述三个版本中的哪一个，请查看 CSS 触发器 (https://csstriggers.com...如何减少回流与重绘 上面我们已经介绍了像素管道相关内容，知道回流和重绘的代价是非常昂贵的，如果我们不停的在改变页面的布局，就会造成浏览器耗费大量的开销在进行页面的计算，对用户体验非常的不友好。...减少回流与重绘前端性能优化重要手段之一。 减少强制同步布局 避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。...，浏览器会维护一个队列，把所有引起回流和重绘的操作放入队列中，如果队列中的任务数量或者时间间隔达到一个阈值的，浏览器就会将队列清空，进行一次批处理，这样可以把多次回流和重绘变成一次。
浏览器的渲染过程 本文先从浏览器的渲染过程来从头到尾的讲解一下回流重绘，如果大家想直接看如何减少回流和重绘，优化性能，可以跳到后面。...既然知道了浏览器的渲染过程后，我们就来探讨下，何时会发生回流重绘。 何时发生回流重绘 我们前面知道了，回流这一阶段主要是计算节点的位置和几何信息，那么当页面布局和几何信息发生变化的时候，就需要回流。...减少回流和重绘 好了，到了我们今天的重头戏，前面说了这么多背景和理论知识，接下来让我们谈谈如何减少回流和重绘。 最小化重绘和重排 由于重绘和重排可能代价比较昂贵，因此最好就是可以减少它的发生次数。...css3硬件加速（GPU加速） 比起考虑如何减少回流重绘，我们更期望的是，根本不要回流重绘。这个时候，css3硬件加速就闪亮登场啦！！ 划重点： 1....我通过使用chrome的Performance捕获了动画一段时间里的回流重绘情况，实际结果如下图： 添加描述 从图中我们可以看出，在动画进行的时候，没有发生任何的回流重绘。
浏览器的渲染过程 本文先从浏览器的渲染过程来从头到尾的讲解一下回流重绘，如果大家想直接看如何减少回流和重绘，可以跳到后面。（这个渲染过程来自MDN） ?...既然知道了浏览器的渲染过程后，我们就来探讨下，何时会发生回流重绘。 何时发生回流重绘 我们前面知道了，回流这一阶段主要是计算节点的位置和几何信息，那么当页面布局和几何信息发生变化的时候，就需要回流。...页面一开始渲染的时候（这肯定避免不了） 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的） 注意：回流一定会触发重绘，而重绘不一定会回流 根据改变的范围和程度，渲染树中或大或小的部分需要重新计算...减少回流和重绘 好了，到了我们今天的重头戏，前面说了这么多背景和理论知识，接下来让我们谈谈如何减少回流和重绘。 最小化重绘和重排 由于重绘和重排可能代价比较昂贵，因此最好就是可以减少它的发生次数。...css3硬件加速（GPU加速） 比起考虑如何减少回流重绘，我们更期望的是，根本不要回流重绘。这个时候，css3硬件加速就闪亮登场啦！！
Contents 1 写在前面 2 回流（Reflow） 3 重绘（Repaint） 4 影响 5 避免重绘与回流 6 总结 写在前面 在讨论今天的主角之前，我们要先了解一下浏览器的渲染机制。...现代浏览器会对频繁的回流或重绘操作进行优化，浏览器会维护一个队列，当我们页面发生回流或重绘时，有时候并不是立即执行，而是先放入维护的队列中，到达一定时间后统一去进行绘制 当你访问以下属性或方法时，浏览器会立刻清空队列...因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。 避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。...总结 我们把页面文档比作一个积木的话，我们抽离中间或者底部的一个积木块，我们的积木会重新找到重心并且稳固下来，我们把这个过程称之为回流 我们在某个积木上涂上颜色，这并不会造成整个积木的稳定，我们把这个过程叫做重绘...或者说，我们简单理解会引起元素位置变化的就会reflow,会引起位置变化的，只是在以前的位置进行改变背景颜色等，只会repaint 本文首发于什么是回流与重绘 (Reflow & Repaint)
； 5、页面渲染初始化； 6、浏览器窗口尺寸改变——resize事件发生时； 注意：回流必将引起重绘，而重绘不一定会引起回流。...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) 使用
因此回流必将引起重绘，而重绘不一定会引起回流。 Reflow 的成本比 Repaint 高得多的多。...var s = document.body.style s.padding = "2px" // 回流+重绘 s.border = "1px solid red" // 回流+重绘 s.color =..."blue" // 重绘 s.backgroundColor = "#ccc" // 重绘 s.fontSize = "14px" // 再一次 回流+重绘 document.body.appendChild...// 回流+重绘 浏览器 如果向上述代码中那样，浏览器不停地回流+重绘，很可能性能开销非常大，实际上浏览器会优化这些操作，将所有引起回流和重绘的操作放入一个队列中，等待队列达到一定的数量或者时间间隔，就...flush 这个队列，一次性处理所有的回流和重绘。
作者：腰花 原文链接：https://juejin.im/post/5a9923e9518825558251c96a 写在前面 在讨论回流与重绘之前，我们要知道： 浏览器使用流布局模型 (Flow Based...一句话：回流必将引起重绘，重绘不一定会引起回流。 回流 (Reflow) 当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。...性能影响 回流比重绘的代价要更高。 有时即使仅仅回流一个单一的元素，它的父元素以及任何跟随它的元素也会产生回流。...现代浏览器会对频繁的回流或重绘操作进行优化： 浏览器会维护一个队列，把所有引起回流和重绘的操作放入队列中，如果队列中的任务数量或者时间间隔达到一个阈值的，浏览器就会将队列清空，进行一次批处理，这样可以把多次回流和重绘变成一次...因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。 避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。
JavaScript如何减少重绘和回流 方法说明 1、用transform代替top。 2、用visibility换display。 none，前者只引起重绘，后者引起回流。...5、动画实现的动画速度越快，回流次数越多。 也可以使用requestAnimationFrame。 6、将频繁重绘或回流的节点设置为图层。...var body = document.getElementsByTagName('body')[0] var h = body.offsetHeight; } 以上就是JavaScript减少重绘和回流的方法
客户端渲染页面 浏览器渲染页面的步骤 解析HTML，生成DOM树，解析CSS，生成CSSOM树 将DOM树和CSSOM树结合，生成渲染树(Render Tree) Layout(回流):根据生成的染树...，计算它们在设备视口(viewport)内的确切位置和大小，这个阶段是回流 Painting(重绘): 根据潼染树以及回流得到的几何信息，得到节点的绝对像素 Display:将像素发送给GPU，展示在页面上...DOM重绘和回流 重绘:元素样式的改变（但宽高、大小、位置等不变） 回流:元素的大小或者位置发生了变化（当页面布局和几何信息发生变化的时候），触发了重新布局，导致渲染树重新计算布局和渲染 **注意...:**回流一定会触发重绘，而重绘不一定会回流 前端性能优化之 : 避免DOM的回流 放弃传统操作dom的时代，基于vue/react开始数据影响视图模式 分离读写操作(现代的浏览器都有渲染队列的机制
回流 当 Render Tree 中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。...重绘 当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility 等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。...如何避免回流 CSS 避免使用 table 布局。 尽可能在 DOM 树的最末端改变 class。 避免设置多层内联样式。...因为在 display 属性为 none 的元素上进行的 DOM 操作不会引发回流和重绘。 避免频繁读取会引发回流/重绘的属性,如果确实需要多次使用,就用一个变量缓存起来。
浏览器的渲染过程 本文先从浏览器的渲染过程来从头到尾的讲解一下回流重绘，如果大家想直接看如何减少回流和重绘，可以跳到后面。...既然知道了浏览器的渲染过程后，我们就来探讨下，何时会发生回流重绘。 何时发生回流重绘 我们前面知道了，回流这一阶段主要是计算节点的位置和几何信息，那么当页面布局和几何信息发生变化的时候，就需要回流。...减少回流和重绘 好了，到了我们今天的重头戏，前面说了这么多背景和理论知识，接下来让我们谈谈如何减少回流和重绘。 最小化重绘和重排 由于重绘和重排可能代价比较昂贵，因此最好就是可以减少它的发生次数。...css3硬件加速（GPU加速） 比起考虑如何减少回流重绘，我们更期望的是，根本不要回流重绘。这个时候，css3硬件加速就闪亮登场啦！！...总结 本文主要讲了浏览器的渲染过程、浏览器的优化机制以及如何减少甚至避免回流和重绘，希望可以帮助大家更好的理解回流重绘。
则就叫称为重绘。注意：回流必将引起重绘，而重绘不一定会引起回流。回流何时发生：当页面布局和几何属性改变时就需要回流。...+重绘s.border = "1px solid red"; // 再一次 回流+重绘s.color = "blue"; // 再一次重绘s.backgroundColor = "#ccc"; // 再一次... 重绘s.fontSize = "14px"; // 再一次 回流+重绘// 添加node，再一次 回流+重绘document.body.appendChild(document.createTextNode...因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。...参看文章：回流与重绘：CSS性能让JavaScript变慢？
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
