“在后台”执行 JavaScript

Executing JavaScript "in the background"

本文关键字：执行 JavaScript 在后台 后台      更新时间：2023-09-26

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

此致敬意

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

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

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

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

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

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

  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();
相关文章：