javascript - “在后台”执行 JavaScript

Question

您是否遇到过以下问题：JavaScript 必须运行数百个性能密集型函数调用，这些函数调用无法跳过并导致浏览器在几秒钟内感觉崩溃（例如，没有滚动和单击）？示例：假设需要 500 次调用来获取元素高度，然后进行数百次 DOM 修改，例如设置类等。不幸的是，没有办法避免性能密集型任务。网络工作者可能是一种方法，但它们并没有得到很好的支持（IE ...）。我正在考虑基于超时或回调的逐步渲染，让浏览器有时间在两者之间做一些事情。在这方面你有什么经验可以分享吗？

最好的祝福

Answer 1

看看这个主题，这是与您的问题相关的一些事情。

如何提高页面中 java 脚本的性能？

Answer 2

如果你做了这么多的 DOM 操作，你可能应该克隆有问题的元素或 DOM 本身，并在缓存版本上进行更改，然后一次性或在更大的部分中替换整个 ting，而不是在时间。

需要时间的不是计算和函数等，而是 DOM 操作本身，并且只做一次，或者分部分做几次，将大大提高你正在做的事情的速度。

据我所知，网络工作者并不是真正用于 DOM 操作，而且我认为使用它们不会有太多优势，因为问题可能是您正在一个一个地更改大量元素的事实而不是在一批中将它们全部替换在 DOM 中。

Answer 3

在这种情况下，我可以推荐以下内容：

1. 再次检查代码。尝试按照建议应用一些标准优化，例如减少查找，使 DOM 修改离线（例如使用 document.createDocumentFragment()...）。使用 DOM 片段只能以有限的方式工作。检索元素高度和进行复杂的格式化是不够的。
2. 如果 1. 不能解决问题，请创建按需运行的渲染解决方案，例如由滚动事件触发。或者：使用超时逐步渲染，让浏览器有时间在两者之间执行某些操作，例如单击按钮或滚动。

2中逐步渲染的简短示例：

var elt = $(...);
function timeConsumingRendering() {

    // some rendering here related to the element "elt"

    elt = elt.next();
    window.setTimeout((function(elt){
        return timeConsumingRendering;
    })(elt));
}
// start
timeConsumingRendering();