什么是 DOM 回流?
我正在阅读两个 CSS 属性 display:none 和 visibility:hidden 之间的区别，并遇到了 DOM reflow 术语.> 声明是 display: none 会导致 DOM 重排，而 visibility: hidden 不会. 所以我的问题是: 什么是 DOM 回流及其工作原理? 解决方案 reflow 计算页面的布局.元素上的回流会重
..
reflow相关内容
回流和重绘有什么区别?
我有点不清楚回流 + 重绘之间的区别(如果有任何区别的话) 似乎回流可能会改变各种 DOM 元素的位置，其中重绘只是渲染一个新对象.例如.移除元素时会发生回流，更改其颜色时会发生重绘. 这是真的吗? 解决方案 这篇文章似乎涵盖了回流与重绘性能问题 http://www.stubbornella.org/content/2009/03/27/reflows-repaints
..
在 DOM 环境中什么时候会发生回流?
什么样的Activity会触发DOM页面的reflow? 似乎有不同的观点.根据 http://www.nczonline.net/blog/2009/02/03/speed-up-your-javascript-part-4/，它发生了 当您添加或删除 DOM 节点时. 动态应用样式时(例如 element.style.width="10px"). 当您检索必须计算的度量值时，例
..
浏览器重绘/回流性能:使用 CSS3 渐变与 PNG 渐变
我正在开发一个会导致大量浏览器回流的应用.性能是这里的一个关键问题.从性能的角度来看，对于某些 DOM 元素使用 CSS3 渐变还是图像渐变更好?使用 CSS 文本阴影和渐变的页面是否会像使用图像来实现这些视觉效果的页面一样具有较慢的回流?另外，有没有我可以使用的回流测试? 解决方案 对于绘图而言，CSS 渐变和阴影比图像更需要 CPU 处理.性能曾经很糟糕，现在可以接受.如果你有大量的渐
..
是否可以“缓冲”循环中发生的DOM更改（以提高性能）？
为清楚说明我的要求，这是我的示例（小提琴）。 我有一个〜500个随机名称的列表。我在顶部输入了一个实时搜索样式。在每个快捷键上，将使用输入值，并将列表中的每个项目与其匹配。隐藏不匹配的项目。 主观上，表现还不错，但效果不佳。如果您快速键入，则列表更新之前会有明显的暂停。我没有分析代码，但是瓶颈几乎可以肯定是对DOM的更改及其引起的重排。 我想知道是否有可能“排队”这些更改，仅在循
..
强制浏览器立即重新绘制dom元素
我需要在一些dom元素中插入一个巨大的html标记，这将需要一段时间。这就是为什么我要显示一些预加载器指示器的原因。我有两个块：#preloader和#container。某些代码会先显示预加载器，然后再开始粘贴大的html标记。 问题-在浏览器无法完成渲染html标记之前，未真正显示预加载器。我已经尝试了许多解决方案（其中许多描述如下这里），但仍然没有成功。 下面是一个示例： ht
..
样式组件与SASS(SCSS)或LESS
我遇到了一个反应良好的ReactJS Boilerplate，它是由社区推动的. 样式部分将重点放在样式化组件CSS上，但从未停止转而使用常规CSS样式方法.尽管这吸引了我的兴趣，但使Styled-Component CSS脱颖而出的原因以及为什么需要采用它. 我对样式化组件CSS的理解: 组件驱动的思想.现在，您的CSS也是一个组件. -这太酷了！ 加载所需的内容，并在需要时添加一
..
为什么textContent不会触发重排
我正在查看MDN上的textContent和innerText之间的区别，这表明我有些困惑. 1.innerText知道样式，不会返回隐藏元素的文本，而textContent会. (没问题，完全理解) 2.innerText知道CSS样式，它将触发重排，而textContent不会. (为什么?) 解决方案 有人建议我回答这个问题，而不要留下评论.尽管在那之后我做了很多研究.现
..
我如何可视化该读取element.offsetWidth导致重新计算/重排
随处可见，读取element.offsetWidth会导致对元素尺寸的重新计算(甚至是重排?). 但是，我正在努力使这种效果可见. 在chrome中，我希望能够通过3个简单的步骤使其可见: 打开Chrome开发工具 转到“元素"标签，然后选择要在其上进行重新计算/重排的元素 转到时间轴标签并开始录制 转到控制台并键入$0.offsetWidth 现在，如果我转到“时间
..
如何避免使用此内联Javascript?
onLoad="func();" > 在网上阅读文章使我坚信避免使用内联CSS和内联javascipt.因此，我对网站进行了重组，以便现在将样式和脚本包含在外部文件中.除了这一行代码，因为它确实需要
..
在IE7中更改DHTML后如何强制重排？
我有一个页面，用户可以动态添加文件上传框。添加框会改变它们所处的div的高度，但是它下面的div的某些元素保持在同一个位置，因此它们开始与新的DOM元素重叠。 这在IE8，Firefox，Chrome中正常运行。如何强制IE7使用新的DHTML重排页面？ 我得出的最佳解决方案是： window.resizeBy（1,0）; setTimeout（UndoResize，0）;
..
是否可以通过Javascript访问％-width元素的当前缩放因子而不会导致重排？
我正在尝试在缓慢的UI中修复一些性能缓慢的javascript，并且我将主要原因缩小为jQuery .width（）使用的调用在响应式布局中查看 width：100％元素的实际像素大小，在需要经常响应用户操作的过程中。 我添加了基于时间戳的测量结果，他们发现它仅占滞后时间的33％左右，这使得用户界面感觉锐利和UI感觉迟钝。删除这一行，UI感觉很快 - 但是，它把事情放错了地方......
..
为什么需要为CSS转换触发重排？
我正在阅读这篇文章 http://semisignal.com/?p=5298 和作者写道 “在删除不可见类之前需要触发回流，以便转换按预期工作。” 我的问题是： 1）为什么需要触发回流？ 2）我明白我们应该避免使用回流，如果这是真的，为什么作者建议使用回流来使转换工作？ 3）使用reflow，是否有不同的方法使转换工作？ 谢谢。 解决方案 （实际上：“
..
回流和重绘之间有什么区别？
我对reflow + repaint之间的区别有点不清楚（如果有任何差别） 似乎回流可能会改变各种DOM的位置元素，其中重绘只是渲染一个新对象。例如。删除元素时会发生重排，更改颜色时会发生重绘。 这是真的吗？ 解决方案 这篇文章似乎涵盖了重排与重绘性能问题 http://www.stubbornella.org/content/2009/03/27/ reflows-re
..
即使没有任何变化，触摸DOM触发回流和重绘吗？
我正在研究一个小型JavaScript模板引擎，并且我有两种可能的方法来处理模型更改时DOM的更新： 在执行之前检查DOM更新是否真的需要。这有利于避免不必要的更新，但我浪费空间来跟踪旧值。 if（oldValue！ == newValue）{ element.textContent = newValue; } 只要做到这一点。这显然比较简单，但我恐怕会触发重新绘制
..
什么时候在DOM环境中发生回流？
什么样的活动会触发DOM的网页回流？ 似乎有不同的观点。根据 http：// www。 nczonline.net/blog/2009/02/03/speed-up-your-javascript-part-4/ ，它发生 动态应用样式（如element.style.width =“10px”）。 检索必须计算的测量值，例如访问offsetWidth，clientHeight或任何计
..
text-transform：uppercase会导致Chrome上的布局错误
我遇到了一个奇怪的布局错误，似乎是由 text-transform CSS属性触发的。 inline-block 嵌套在块元素中。我在Safari（5.1.2）上也看到了这个问题，但这个最小的测试用例只在Chrome（17.0.963.56）上触发。 打开开发人员工具并将其保留在“元素”选项卡上会触发正确的布局。我最好的猜测是CSS规则和DOM结构的组合导致webkit引擎错过执行页面的回流
..
再流和再涂的替代品
我已阅读SO 和其他地方，油漆和回流对于浏览器来说是昂贵的。 我很好奇CSS / JS替代重新绘制/ display：none visibility：hidden 对浏览器的计算要求不高。 只是要清楚，我如果我错了，一个常见的回流情况是当你设置 display：none 在你想切换显示的元素，例如，下拉菜单。回流意味着浏览器首先将可见内容“流动”，即显示元素和一切，但是必须重新流动它，
..
不能操纵Facebook的按钮宽度
我有一个边栏200px宽，我喜欢的Facebook按钮我放在里面是运行在DIV的边界之外。是否有任何解决方法来获取Like框文本来识别200px标记，并在需要时回流到新行？ 我使用此代码： http://jsfiddle.net/tKkpm/2/
（function（d，s，id）{ var js，fjs
..
为什么在设置属性后显示元素时隐藏元素时发生转移？
这里可以看到一个实例。 红色正方形（显示）位于绿色正方形正上方（隐藏为溢出）。点击正方形，两个彩色正方形立即变得完全透明。此外，红色正方形的高度设置为0; 在再次单击正方形之前，请检查 toggle code>函数。看看JavaScript，我期望红色方块的高度被重置为其原始值，而不触发一个过渡。转移应该被抑制，因为当高度改变时，transition属性暂时设置为 none 。
..