javascript - 使用 setTimeout 提高响应能力

Question

在寻求提高页面性能时，我以前从未听说过的一种技术是使用 setTimeout 来防止 javascript 阻止页面呈现。

例如，假设我们有一段特别耗时的 jQuery 内联 html:

$('input').click(function () {
    // Do stuff
});

如果这段代码是内联的，我们将阻止页面的感知完成，而 jquery 片段正忙于将点击处理程序附加到页面上的每个输入。

生成一个新线程是否明智:

setTimeout(function() {
    $('input').click(function () {
        // Do stuff
    })
}, 100);

我能看到的唯一缺点是，现在用户更有可能在附加点击处理程序之前点击元素。然而，这种风险可能是可以接受的，而且我们有一定程度的这种风险，即使没有 setTimeout。

我是对还是错？

Answer 1

实际的技术是使用setTimeout时间为 0。

之所以可行，是因为 JavaScript 是单线程的。超时不会导致浏览器产生另一个线程，也不保证代码会在指定的时间内执行。但是，代码将在以下两种情况下执行:

1. 指定的时间已过。
2. 执行控制交还给浏览器。

因此调用setTimeout时间为 0 可以认为是暂时屈服于浏览器。

这意味着如果您有长时间运行的代码，您可以通过定期让出 setTimeout 来模拟多线程。 .您的代码可能如下所示:

var batches = [...]; // Some array
var currentBatch = 0;

// Start long-running code, whenever browser is ready
setTimeout(doBatch, 0);

function doBatch() {
    if (currentBatch < batches.length) {
        // Do stuff with batches[currentBatch]

        currentBatch++;
        setTimeout(doBatch, 0);
    }
}

---

注意:虽然在 some scenarios 中了解此技术很有用，我非常怀疑您在描述的情况下是否需要它(在 DOM 上分配事件处理程序准备就绪)。如果性能确实是一个问题，我建议研究通过调整选择器来提高真实性能的方法。

例如，如果页面上只有一个表单包含 <input> s，然后给出 <form>一个 ID，并使用 $('#someId input') .