DOM的渲染不是执行到改变DOM的js代码后立即执行的,如
for(var i=0;i<100000;i++){
//DOM操作
$("#num").text(i);
console.log(i);
}
这行上面的代码是看不到num从0到10000的过程的,能大致看到console.log一点一点变大
DOM操作会引起浏览器的一系列操作,如重绘,重新排版。(这两项会占用很大的内存和CPU)
想象一下,如果每次操作DOM都渲染一次页面的话,上面例子中的js代码会引发100000次的重绘,重排操作,这会严重影响到体验,所以大部分浏览器都不太会在js脚本执行的时候去进行DOM渲染,等js脚本结束才去进行DOM渲染
实验发现,在循环过程中,如果有alert之类的阻塞js线程,DOM也会被渲染,如
for(var i=0;i<1000;i++){
//DOM操作
$("#num").text(i);
console.log(i);
if(i==998){
alert("last DOM");
}
}
alert('after for');
998输出时候,发现num元素已经被渲染。
另外,通过定时器也可以阻塞js,执行DOM渲染
setTimeout(function() {//DOM操作 }, 20);