“在后台”执行 JavaScript答案

【问题标题】：Executing JavaScript "in the background"“在后台”执行 JavaScript
【发布时间】：2012-05-28 09:43:52
【问题描述】：

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

最好的问候

【问题讨论】：

标签： javascript performance rendering

【解决方案1】：

看看这个主题，这与你的问题有关。

How to improve the performance of your java script in your page?

【讨论】：

嗯，这可能是解决常见渲染问题的一个很好的解决方案。就我而言，我认为这可能无法完全解决问题。这就是为什么我要寻找“在后台逐步渲染”。大多数渲染的元素在滚动后都会可见。

【解决方案2】：

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

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

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

【讨论】：

在我的例子中，它实际上是 jQuery.height() 方法消耗了大约 70% 的时间。另一次是 DOM 操作……在片段中进行所有离线操作并不能完全解决问题。这就是为什么我正在寻找一个“逐步”的解决方案。

【解决方案3】：

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

再次检查代码。尝试按照建议应用一些标准优化，例如减少查找，使 DOM 修改离线（例如使用 document.createDocumentFragment()...）。使用 DOM 片段只能以有限的方式工作。检索元素高度并进行复杂的格式化是不够的。
如果 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();

【讨论】：