Question

我想说的是：

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

如果我调用函数aFunction，div是否会显示在50px的位置？或者它只是从0px到100px？（我关注表现。）

此外，位置何时发生变化？

是否在分配后立即发生，

或aFunction

结束时

或anotherFunction()

结束时

或者当浏览器空闲时？

Answer 1

第4行和第5行将被忽略并且永远不会生效，因为第6行会立即覆盖那些。还会记录位置更改（如您可以alert(div.style.top)并且它将返回最后指定的值）立即，当浏览器空闲时，呈现。在第2行进入第3行之后第4行进入第5行（进入第6行），这很简单，因为渲染是单独完成的。

Answer 2

所有这些样式更改都将被浏览器选中，DOM将开始重新流动。虽然浏览器永远不会有机会完成构图和重新绘制，但更改将会如此迅速地发生。除非您运行的硬件需要超过16毫秒来更新CSSOM，否则无法找到。

如果你这样做了，那么当片段被添加到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"

HTML DOM位置刷新率

2 个答案: