Question

在我深入研究这个问题之前。让我说，通过Event Loop，我指的是http://en.wikipedia.org/wiki/Event_loop。这是浏览器实现的东西。有关详细信息，请阅读：http://javascript.info/tutorial/further-javascript-features/events-and-timing-depth。

这个问题很难而且很长，所以请尽量忍受！我非常感谢所有答案！

因此。现在，据我所知，在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会将一个新事件推送到浏览器Event Loop堆栈，该堆栈将在没有任何运行后进行处理（它进入Event Loop以查看下一步该做什么）。

在这种情况下，浏览器似乎将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-call，它是否首先推送事件？那么，浏览器最终会出现如下堆栈：

setTimeout event
render event

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

rendering event
setTimeout event
rendering event

并继续执行早期setTimeout调用生成的呈现事件？

Answer 1

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

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

Q2：渲染不一定与JS执行相同 - 这是两个不同的引擎。 JS引擎不负责渲染，它只是与渲染引擎接口。在我看来，你的第二个问题的主要信息是这个 JS与渲染引擎的独立性。请记住，浏览器（或网页）不需要Javascript，其主要目的是根据CSS样式规则呈现HTML。 Javascript只是操纵HTML（真正的DOM树）和样式规则的一种方式。

请注意，您可以通过读取样式定义来强制渲染 - 此时渲染引擎别无选择，只能处理任何未完成的样式更改，尤其是在涉及任何位置更改时。这就是为什么人们应该从渲染树中删除对象（例如通过设置display：none - visibility：hidden是不够的，因为元素的大小仍然考虑布局），然后再进行大量的样式更改或添加大量元素，例如当许多行逐个添加（“for”循环）到表时。

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

Answer 2

你提到的文章只考虑Javascript。浏览器中发生了很多事情;回流和重新涂饰是/可以由更多的事情触发;请查看以下链接以获取更多相关信息。

我不会为此目的使用setTimeout。

修改根据评论，推荐的方法是使用requestAnimationFrame。在撰写本文时，这仅适用于大多数浏览器的不稳定版本。但是several libraries可以提供跨浏览器访问权限，如有必要，可以使用setTimeout。

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

我不完全理解JavaScript线程

2 个答案: