添加外流元素会导致回流吗？答案

【问题标题】：Will adding an out of the flow element cause a reflow?添加外流元素会导致回流吗？
【发布时间】：2015-12-29 20:25:33
【问题描述】：

我需要确保对性能敏感的以下代码：

var $content = $(htmlString);

//Stop new element from triggering reflow? 
$content.css('display', 'none');

//add slide to DOM
$content.appendTo(options.els.$slider);

我不记得是否在任何 DOM 操作上触发了重排，或者是否存在异常，例如向 DOM 添加 out of flow 元素。如果options.els.$slider 在流中，上面的代码会导致回流吗？

【问题讨论】：

这是 jQuery hide 方法还是其他框架？
我已经更新了这个问题，以便更清楚地了解发生了什么。
@DrewGaynor 看语法，确实像 jQuery

标签： javascript jquery html css dom

【解决方案1】：

hide method（或更新后的问题显示的css method）将display 属性设置为none：

display: none;

这会导致元素从正常的文档流中移除。如果要求不从正常文档流中删除元素，请改为更改 visibility CSS 属性：

$content.css('visibility', 'hidden');

但是，在将 display 属性添加到 DOM 之前设置它不会导致重排。

请注意，一旦将元素添加到 DOM 后更改可见性将导致 repaint，但是。可以使用许多不同的工具来分析绘画事件，包括Chrome Developer Tools on the timeline tab。

【讨论】：

考虑到我在插入 DOM 之前将元素显示属性设置为无（我是否正确假设这是正在发生的事情？）它会触发回流吗？这是我感兴趣的。
@styke 查看我的更新答案。文档流不应更改，因为元素在插入 DOM 之前已脱离流。不过，重绘可能是另一回事-我建议使用我在答案中提到的工具来确定并执行您可能需要的任何分析。

【解决方案2】：

每个浏览器都有自己的确定方法，但通常，如果您的代码没有导致任何其他元素发生更改，则不会发生重排。仅仅因为您附加到 DOM，并不意味着浏览器应该重新绘制页面。你应该很好。

【讨论】：