javascript - 添加流外元素会导致回流吗？

Question

我有以下代码需要确保对性能敏感:

var $content = $(htmlString);

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

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

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

Answer 1

hide method (或更新问题显示的 css method)将 display 属性设置为 none:

display: none;

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

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

然而，在将其添加到 DOM 之前设置 display 属性不应导致重排。

请注意，将元素添加到 DOM 后更改可见性将导致 repaint ， 然而。可以使用多种不同的工具分析绘制事件，包括 Chrome Developer Tools on the timeline tab .