Question

因此，就页面的速度而言，我们都知道操纵页面会强制它重绘并且这会对浏览器造成负担。所以，如果我有一个应用此css的div：

div{
    position: static;
}

并将其更改为

div{
    position: fixed;
}

它将刷新页面并更改布局。我的问题是，如果div已经固定应用于它并执行

jQuery('div').css('position', 'fixed');

它是否会导致重绘，或者只是看到它已经设置并且以快乐的方式进行？

感谢您的帮助！

Answer 1

jQuery .css()调用将改变DOM元素，但是由浏览器重新绘制任何内容。

这是Mozilla关于重绘的一篇非常有趣的文章：http://www-archive.mozilla.org/newlayout/doc/reflow.html#reflow-reason（注意我与“回流原因”部分有很深的联系）

<强>更新

在您为已经拥有position : fixed的元素设置position : fixed的情况下，由于重绘而不会有太多开销。具有position : fixed或position : absolute的元素将从DOM的正常流中移除，并且当它们被操纵时，它不会触发DOM的整个重绘。相反，只重绘元素本身和任何重叠元素。

另一方面，如果您要设置任何动画，这很重要，因为动画会导致大量重绘，如果您没有设置position : fixed或position : absolute那么整个DOM都会重新绘制进入动画。此外，由于此元素的重绘的递归性质（{strong>停止使用表格进行布局：）），任何带有display : table的元素可能最多需要重绘三倍。。 p>

Answer 2

它不应该，但那是一个浏览器行为，而不是jQuery行为。我不明白为什么如果渲染引擎没有收到属性更新，它会重绘任何内容。

Answer 3

.css()或DOMElement.style为元素添加内联样式，在div的案例样式中不是内联的，jQuery('div').css('position', 'fixed');命令后DOM树将更改。浏览器绝对会再次重绘（渲染）页面。

我不确定，但我猜即使DOM树中有style，您重新分配style浏览器也会再次呈现该页面。

Answer 4

那么，为了安全起见，除非有必要，否则不要改变财产？

if(jQuery('div').css('position') != 'fixed')
    jQuery('div').css('position', 'fixed');

如果没有进行任何更改，jQuery是否会在.css（）调用上重绘页面？

4 个答案: