添加一个脱离文档流的元素会导致重排吗？

Question

我有下面的代码，需要确保其具有良好的性能：

var $content = $(htmlString);

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

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

我记不清在任何DOM操作时是否会触发reflow，或者是否有例外，例如将一个脱离文档流的元素添加到DOM中。如果options.els.$slider处于文档流中，那么上述代码是否会导致reflow？

- styke

---

这是jQuery的hide方法还是其他框架？ - Drew Gaynor

我已经更新了问题，以更清晰地说明正在发生的事情。 - styke

@DrewGaynor 从语法上看，它确实像是jQuery。 - Tushar

Answer 1

hide方法（或者更新的问题显示的css方法）会将display属性设置为none：

display: none;

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

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

在将其添加到DOM之前设置display属性不会导致重新排版。但是，注意一旦元素被添加到DOM中更改可见性将会导致重绘。可以使用多种不同的工具来分析绘制事件，包括Chrome开发者工具时间轴选项卡。

- Drew Gaynor

---

考虑到我在将元素插入文档对象模型之前将其显示属性设置为 none（我假设这就是发生的事情），那么它会触发重新布局吗？这正是我想知道的。 - styke

@styke 请看我的更新答案。文档流不应该改变，因为元素在插入到DOM之前就已经脱离了流。重新绘制可能会有所不同-我建议使用我在答案中提到的工具进行确认，并进行任何可能需要的分析。 - Drew Gaynor

Answer 2

每个浏览器都有自己的方法来确定这一点，但通常情况下，如果您的代码没有导致其他元素发生变化，那么就不会发生回流。仅仅因为您将内容附加到DOM中，并不意味着浏览器应该重新绘制页面。您应该没问题。

- Mike S.