如何在更改元素可见性的同时冻结Web浏览器的重绘？ [英] How to freeze web browser's repaints while changing visibility of elements?

问题描述

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

I'm by far no JS developer (in fact, hardly developer at all :) but I wanted to try to write a small Greasemonkey script to hide few elements on a certain webpage. Once I've started dabbing at it, I've decided to use jQuery, just to make it easier. Everything went well, the script is working, but now that it's ready, I've started to wonder about the details.

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

As a part of the script, I need to find specific element and hide it, together with previous and next of its siblings. I've ended up with not that readable, but working line:

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

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

My concern here is, that I'm removing three separate divs in three separate steps. This would cause browser to "repaint" the page three times, right? It's not a problem with three divs, it would probably start to matter when there are more elements. So, my question is - is there a way to tell browser "stop refreshing/redrawing the page"? If there is, I could use that, hide arbitrary number of elements, then ask browser to update the screen.

推荐答案

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

Javascript execution locks the browser and you will not see a repaint until your code execution is finished. You really have nothing to worry about with this.

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

I posted a good example of this on jsbin.com: http://jsbin.com/ecuku/edit

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

Update: Often it is suggested to modify nodes outside of the DOM because modifying the DOM does cause reflows (not repaints). Reflows are when the browser has to recalculate positions and sizes of elements on your page because something has changed. While your javascript execution can cause multiple reflows, it will only cause one repaint (when your code finishes). Those reflows can be a big performance hit, but for small numbers of DOM changes (e.g. your code only has 3) it probably isn't worth the work to do make your changes outside of the page. Also, cloning a node and modifying it outside of the page before inserting it back can have unexpected consequences. For example, if you had event handlers attached they would need to be reattached to the new nodes.

这篇关于如何在更改元素可见性的同时冻结Web浏览器的重绘？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！