Javascript 添加流出元件是否会导致回流?
我有以下代码需要确保对性能敏感:Javascript 添加流出元件是否会导致回流?,javascript,jquery,html,css,dom,Javascript,Jquery,Html,Css,Dom,我有以下代码需要确保对性能敏感: 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-the-flow元素之类的异常。如果流中存在o
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-the-flow元素之类的异常。如果流中存在options.els.$slider
,上述代码是否会导致回流 的(或如更新的问题所示)将显示
属性设置为无
:
显示:无;
这将导致元素从正常文档流中删除。如果要求不从正常文档流中删除元素,请改为更改可见性
CSS属性:
$content.css('visibility', 'hidden');
但是,在将display
属性添加到DOM之前设置该属性不应导致回流
但是,请注意,在将元素添加到DOM后更改可见性将导致错误。可以使用许多不同的工具分析绘制事件,包括。每个浏览器都有自己的确定方法,但通常,如果代码没有导致任何其他元素更改,则不会发生回流。仅仅因为您要附加到DOM,并不意味着浏览器应该重新绘制页面。你应该很好。这是jQuery
hide
方法还是其他框架?我已经更新了这个问题,以便更清楚地了解到底发生了什么。@DrewGaynor看看语法,它看起来确实像jQueryConsidence,在插入DOM之前,我将elements display属性设置为none(我的假设正确吗?)它会触发回流吗?这正是我感兴趣的地方。@styke查看我更新的答案。文档流不应该更改,因为在将元素插入DOM之前,该元素已脱离流。不过,重新绘制可能是另一回事-我建议使用我在答案中提到的工具来确定并执行您可能需要的任何分析预计起飞时间。