添加流量元素会导致回流吗？

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');

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

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

Answer 2

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