如何在更改元素可见性的同时冻结Web浏览器的重绘？

Question

我到目前为止还没有JS开发人员(事实上,根本不是开发人员:)但我想尝试编写一个小的Greasemonkey脚本来隐藏某个网页上的几个元素.一旦我开始轻拍它,我决定使用jQuery,只是为了让它更容易.一切顺利,脚本正在运行,但现在已经准备就绪,我开始怀疑细节了.

作为脚本的一部分,我需要找到特定的元素并将其与其兄弟姐妹的前一个和下一个一起隐藏起来.我最终没有那么可读,但工作线:

$('div#some-weird-box').prev().toggle(w).next().toggle(w).next().toggle(w);

我在这里担心的是,我将在三个不同的步骤中删除三个独立的div.这会导致浏览器三次"重绘"页面,对吗？这对三个div来说不是问题,当有更多元素时它可能会开始变得重要.所以,我的问题是 - 有没有办法告诉浏览器"停止刷新/重绘页面"？如果有,我可以使用它,隐藏任意数量的元素,然后要求浏览器更新屏幕.

Answer 1

Javascript执行会锁定浏览器,在代码执行完成之前,您不会看到重绘.你真的没有什么可担心的.

我在jsbin.com上发布了一个很好的例子:http://jsbin.com/ecuku/edit

更新:通常建议修改DOM之外的节点,因为修改DOM会导致重排(而不是重绘).回流是指浏览器必须重新计算页面上元素的位置和大小,因为某些内容已发生变化.虽然你的javascript执行可以导致多次重排,但它只会导致一次重绘(当你的代码完成时).这些回流可能是一个巨大的性能损失,但对于少量的DOM更改(例如,您的代码只有3),可能不值得做的工作在页面之外进行更改.此外,克隆节点并在插入节点之前将其修改到页面之外可能会产生意外后果.例如,如果您附加了事件处理程序,则需要将它们重新附加到新节点.