Javascript HTML DOM位置刷新率

假设我得到了这个：

aFunction = function(){
    var div = document.getElementById('div');
    div.style.top = '0px';
    div.style.top = '50px';
    div.style.top = '100px';
    anotherFunction();
}

如果我调用函数

a函数

，div是否会显示在50px位置？或者只是从0px到100px？（我很关心性能。）

另外，位置变化确切发生在什么时候

任务完成后是否立即发生

或在

a功能的末尾

或者在另一个函数（）的末尾

或者当浏览器处于空闲状态时？
第四行和第五行将被忽略，并且永远不会生效，因为第六行会立即覆盖它们。位置更改也将立即被记录（如您可以
警报（div.style.top）
并且它将返回最后分配的值），尽管它是在浏览器空闲时呈现的。在第二行结束后，第三行结束，第四行结束，第五行结束（第六行结束），简单地说，渲染是单独完成的。
所有这些样式更改都将由浏览器拾取，DOM将开始重新流动。这些变化发生得如此之快，以至于浏览器永远都没有机会完成构图和重新绘制。除非您运行的硬件更新CSSOM需要16毫秒以上，否则可能无法找到

如果您这样做了，那么当片段被添加到DOM中时，回流只会发生一次

aFunction = function(){
  var div = document.createElement('div');

  div.style.top = '0px';
  div.style.top = '50px';
  div.style.top = '100px';

  document.body.appendChild(div);
}

我在Chrome中运行了这段代码，只得到最后一种颜色的渲染。我本以为能看到蓝色背景10秒钟，但我从来没有看到过

div.style.backgroundColor = "green";
div.style.backgroundColor = "blue";
for(var i = 0; i < 1000000; i++){}
div.style.backgroundColor = "yellow"

div.style.backgroundColor=“绿色”；
div.style.backgroundColor=“蓝色”；
对于（var i=0；i<1000000；i++）{
div.style.backgroundColor=“黄色”