在“后台”执行JavaScript

Question

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

祝你好运

Answer 1

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

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

Answer 2

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

花费时间的是计算和功能等，但DOM操作本身，只做一次，或几次，这将大大提高你正在做的事情的速度。 / p>

据我所知，Web工作者并不是真正用于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();