我不完全理解 JavaScript 线程

Question

在我深入讨论这个问题之前。让我声明一下，通过事件循环，我指的是 http://en.wikipedia.org/wiki/Event_loop< /a>.这是浏览器实现的东西。有关更多信息，请阅读：http://javascript.info/教程/further-javascript-features/events-and-timing-deep。

这个问题又难又长，请耐心看完！我非常感谢所有的答案！

---

所以。现在，据我了解，在 JavaScript 中只有一个主线程（即在大多数浏览器环境中）。因此，像这样的代码：

for (var color = 0x000; color < 0xfff; color++) {
    $('div').css('background-color', color.toString(16));
}

将产生从黑到白的动画，但您不会看到它，因为渲染是在处理代码后完成的（当下一个tick发生时 - 浏览器输入事件循环）。

如果你想看动画，你可以这样做：

for (var color = 0x000; color < 0xfff; color++) {
    setTimeout(function() {
        $('div').css('background-color', color.toString(16));
    }, 0);
}

上面的例子会产生一个可见的动画，因为 setTimeout 将一个新事件推送到浏览器事件循环堆栈，该事件将在没有任何运行后进行处理（它进入事件循环以查看接下来做什么）。

在这种情况下，浏览器似乎将 0xfff (4095) 事件推送到堆栈中，其中每个事件都通过它们之间的渲染进程进行处理。所以，我的第一个问题（#1）是渲染到底什么时候发生？它是否总是发生在事件循环堆栈中两个事件的处理之间？

---

第二个问题是关于我给你的 javascript.info 网站链接中的代码。

...
  function func() { 
    timer = setTimeout(func, 0)
    div.style.backgroundColor = '#'+i.toString(16)
    if (i++ == 0xFFFFFF) stop()
  }

timer = setTimeout(func, 0)
....

我的问题是，浏览器每次到达 div.style 时都会将新的“渲染”事件推送到事件循环堆栈。 ... = ... 行？但由于 setTimeout 调用，它不会首先推送事件吗？那么，浏览器最终是否会出现这样的堆栈：

setTimeout event
render event

因为 setTimeout 调用是在 div 样式更改之前处理的？如果这就是堆栈的样子，那么我会假设浏览器下次进入事件循环时，它将处理 setTimeout 的回调并最终得到：

rendering event
setTimeout event
rendering event

并继续先前的 setTimeout 调用产生的渲染事件？

Answer 1

问1：不一定。浏览器不同程度地实现了优化。例如，他们可能会等待收集多个样式更改，然后再触发昂贵的布局重新计算。所以答案是：取决于具体的浏览器。

试试这个：http://taligarsiel.com/Projects/howbrowserswork1.htm#Render_tree_construction （该文档的日期为 2009 年 10 月 - 即它是足够最新的）

Q2：渲染不一定与 JS 执行相同 - 这是两个不同的引擎。 JS 引擎不负责渲染，它只是与渲染引擎交互。在我看来，第二个问题的主要信息是JS 与渲染引擎的独立性。请记住，浏览器（或网页）不需要 Javascript，它们的主要目的是基于 CSS 样式规则呈现 HTML。 JavaScript 只是操作 HTML（实际上是 DOM 树）和样式规则的一种方法。

请注意，您可以通过读取样式定义来强制渲染 - 此时渲染引擎别无选择，只能处理任何未完成的样式更改，特别是当它涉及任何位置更改时。这就是为什么在进行大量样式更改或添加大量元素之前，应该从渲染树中删除对象（例如，通过设置显示：无 - 可见性：隐藏是不够的，因为元素的大小仍被考虑用于布局），例如当许多行被一一添加（“for”循环）到表中。

根本不是问题的一部分 - 但由于我刚刚提到了显示：无和可见性：隐藏之间的区别，这也是添加隐藏位置：绝对元素（如对话框）时要考虑的因素。虽然使用一种或另一种方法隐藏绝对定位的元素没有明显的区别，但内部存在很大的区别：当使用visibility:hidden隐藏时，该元素是渲染树的一部分，而使用display:none时，它是渲染树的一部分不是。因此，如果有这样一个需要频繁切换的元素，则应该使用visibility:hidden，因为当“显示”样式在“无”和“阻止”之间切换时，浏览器必须首先渲染它。

Answer 2

你提到的文章只考虑了Javascript。浏览器中还发生了很多事情；回流和重绘可以由更多的事情触发；请查看以下链接以获取更多信息。

• http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/
• http://www.browserscope.org/reflow/about

我不会使用 setTimeout为此目的。

编辑：
根据评论，推荐的方法是使用 requestAnimationFrame。截至撰写本文时，此功能仅在大多数浏览器的不稳定版本中可用。然而，有几个 库 可提供跨浏览器访问，并在必要时回退到使用 setTimeout。

看一下这个演示，了解在旧浏览器和新浏览器中工作的示例：
http://paulirish.com/2011/requestanimationframe-for-smart-animating/