[英]DOM Manipulation not executing in sequence
在我汇总的以下示例中寻找解决方案,甚至只是一些“幕后”理论。
DOM 的操作似乎是以非阻塞方式发生的。 换句话说,没有流控制来等待 DOM 语句的执行。
在这个例子中: http : //jsfiddle.net/qHVJX/
在 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 语句完成它的事情并避免排队; 没有办法知道每条语句需要多长时间。 如果间隔设置为短,则不会达到预期的结果。 如果间隔设置得比需要的长,则性能会受到影响。
无论如何,在没有 setTimeout() 开销的情况下,是否可以在 DOM 操作期间阻止执行? 也许是某种回调例程?
任何见解将不胜感激。 谢谢。
我意识到这是一个老问题,但我想解释为什么循环停止向右更改文本。
浏览器以每秒 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
不确定您所说的“setTimeout() 的开销”是什么意思,但是以 0 超时调用 setTimeout 似乎是通常建议的执行此操作的方法。
http://javascript.info/tutorial/events-and-timing-depth#the-settimeout-func-0-trick
setTimeout 也是绝对正确的方法,如果它只是几毫秒的分辨率。
您的 Loop 只是阻止浏览器更新。 此外,循环处理所需的持续时间也不是可预测的。 对于智能 JavaScript 编译器,如果循环没有任何好处,则可以通过优化省略循环。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.