Question

寻找一个解决方案，或者甚至只是一些“引擎盖下”理论背后的原因，我在下面的例子中进行了总结。

似乎DOM的操纵以非阻塞的方式发生。换句话说，没有流控制来等待DOM语句的执行。

onclick事件后执行两个语句。

从左向右移动文字

document.getElementById('text').className = 'tr';

循环一段时间来停止执行。

for(var i = 0,temp=1000000000; i<temp;i++){var dummy=0;}

如果在执行每个语句时阻止了流控制，那么正如预期的那样，文本将从左向右移动，然后从循环中短暂停顿。相反，文本转换发生在循环迭代之后。

这表明className语句在循环执行优先级时排队。

在此示例中：http://jsfiddle.net/qHVJX/1/

onclick事件后执行三个语句：

从左向右移动文字

document.getElementById('text').className = 'tr';

循环一段时间来停止执行。

for(var i = 0,temp=1000000000; i<temp;i++){var dummy=0;}

从右向左移动文字。

document.getElementById('text').className = 'tl';

同样，如果在执行每个语句时阻止流控制，那么正如预期的那样，文本将从左向右移动，然后在循环迭代时短暂停顿，然后文本从右向后移动。

相反，执行循环并且从不会发生从左到右和从右到左的文本重绘。这说明了竞争条件。

setTimeout（）可以暂停执行足够长的时间以使DOM语句执行它并避免排队;没有办法知道每个陈述需要多长时间。如果间隔设置为短，则不会达到预期的效果。如果间隔设置得比它需要的长，则性能会受到影响。

在DOM操作期间是否存在阻止执行而没有setTimeout（）的开销？也许是某种回调程序？

非常感谢任何见解。谢谢。

Answer 1

不确定“setTimeout（）的开销是什么意思”，但是调用setTimeout时超时为0似乎是通常建议的方法。

http://javascript.info/tutorial/events-and-timing-depth#the-settimeout-func-0-trick

Answer 2

setTimeout绝对是正确的方法，如果它只是几毫秒的分辨率。

你的循环只是阻止浏览器更新。此外，它不是Loop可用于处理的持续时间。关于智能JavaScript编译器，如果由于循环没有任何好处，可以省略优化循环。

Answer 3

我意识到这是一个古老的问题，但我想解释一下为什么循环会在右侧停止更改文本。

浏览器以每秒60次的最大速率刷新窗口。这将通过事件循环来完成，该事件循环还会安排其他操作。首先，所有同步代码都已运行。然后，事件循环将经历延迟的操作；包括那些影响窗口重绘的内容（例如，更改DOM元素中的类并应用样式）。

这就是这里正在发生的事情。触发事件时，将首先完成同步代码。那是：

1）将tr作为类名分配给DOM元素数据（但不分配给显示的DOM本身。换句话说，如果检查开发工具上的元素，则不会看到更改）这次）。

2）运行循环。

完成同步代码后，事件循环将查看需要执行的其他操作。重新粉刷将在此处进行。因此，这时您将看到开发工具上的元素获得tr类，并且文本向右移动。

安排当前要执行的操作的最佳方法是通过requestAnimationFrame（不一定是setTimeout）。因此：

document.getElementById( 'text' ).className = 'tr';

requestAnimationFrame( () => {
  // ...
} );

我更改了您的代码以更好地说明我的意思：

document.addEventListener( 'mousedown', shift_text, false );

function shift_text() {
    requestAnimationFrame( () => {
        console.log( 'requestAnimationFrame 1' )
    } );

    // execute before halt
    document.getElementById( 'text' ).className = 'tr';

    console.log( 'class name now is', document.getElementById('text').className );

    requestAnimationFrame( () => {
        console.log( 'requestAnimationFrame 2' )
    } );

    // halt with large loop
    for(var i = 0,temp=3000000000; i<temp;i++){var dummy=0;} 

    console.log( 'sync code is done' );
}

如果运行此命令，将会看到控制台打印内容：

class name now is tr // Despite the text still being on the left.
sync code is done // After a while due to the large loop.
requestAnimationFrame 1 // At this point, the text will be on the right.
requestAnimationFrame 2

澄清您的问题，实际上每个语句都被屏蔽。每次对requestAnimationFrame的调用都将在那个时候执行，但是作为参数传递的回调是计划好的（不会立即执行）。这就是文本在循环前不移位的原因。话虽如此，正如我的示例代码所示，classname分配语句未安排，因为您可以看到数据更新，并且类名当时为tr。但是，这种更改的显示确实被推迟了。

关于您的三个语句建议，如果在document.getElementById('text').className = 'tl';循环之后有for，则由于这是同步代码，因此会将类更改回tl。因此，当重新绘制开始时，类名称为tl。换句话说，您将类更改为tr，然后更改为tl，然后重新绘制，该类为tl。我认为我的代码示例对此做了澄清，因为您可以看到第一个console.log会清楚地表明该类为tr。如果在渲染完成之前将其更改回原来的值，则该渲染可能永远不会使用。

希望这有助于弄清正在发生的事情！

另请参阅：https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

DOM操作不按顺序执行

3 个答案: