javascript - 如何在更改元素可见性的同时卡住网络浏览器的重绘?

标签 javascript jquery performance

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

作为脚本的一部分,我需要找到特定元素并隐藏它,连同它的前一个和下一个 sibling 。我最终得到的不是那么可读,而是工作线:

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

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

最佳答案

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

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

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

关于javascript - 如何在更改元素可见性的同时卡住网络浏览器的重绘?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1357361/

相关文章:

javascript - 根据排序或不更改光标样式

javascript - jQuery $.parseJSON 数据到 HTML

c# - SQL Server Compact 与 C# 数据结构的比较

java - 获取创建 hibernate 实体的平均时间

javascript - clojurescript 相当于 javascript 的模块模式

javascript - JavaScript 代码中的安全性

javascript - jQuery ajaxSend - 哪个元素触发了 ajax?

python - 如何有效地计算 numpy 数组中每个单元格的函数?

javascript - Javascript WebRTC 库的现状?

javascript - Jquery mobile 如何删除 ui-body 类周围的边框