DOM渲染的时机

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);