innerHTML 延后执行？-CSDN博客

时常会觉得 innerHTML 可能有延后执行的情况，比如下面代码：

document.body.innerHTML = 'something';
alert('something else');

明显发现，先是收到弹窗，再是 body 内容变了，所以会觉得 innerHTML 存在延后执行的情况，但是换个角度

document.body.innerHTML = 'something';
alert(document.body.innerHTML);//'something'

这个例子直接否定了上面的猜测，证明，innerHTML 并不存在延后执行，延后执行的是页面的渲染，后来在 stackoverflow 上找到了答案，原理大概就是，

代码执行的时候，是按照从上到下的顺序的，innerHTML 也并不存在延后执行，只是，因为 js 是单线程的，所以还在执行语句块的时候，按照顺序，修改了 DOM 元素的 innerHTML，然后继续执行后面的代码，等进程空闲，渲染页面，然后执行任务队列里的代码，也就是说，之前修改了 DOM 元素的 innerHTML，并不会立马重新渲染页面，因为这是两码事，js 本身是单线程，所以只能把代码执行完后，有空闲，再去渲染页面。

那么如何去改善这种情况呢？想了几个方法：

1、给后面的代码，加个定时器，把代码加到任务队列里；

document.body.innerHTML = 'something';
setTimeout(function() {
    alert(document.body.innerHTML);
}, 0);

因为 setTimeout 本身就是异步调用机制，高程解释：

除了主JavaScript 执行进程外，还有一个需要在进程下一次空闲时执行的代码队列；

定时器对队列的工作方式是，当特定时间过去后将代码插入。注意，给队列添加代码并不意味着对它立刻执行，而只能表示它会尽快执行；

如果在这个时间点上，队列中没有其他东西，那么这段代码就会被执行；

考虑下面代码：

setTimeout('alert(1)',0);
alert(2);
alert(3);

此时的主线程和任务队列：

队列里的代码等主线程空闲时才会执行，所以 alert(1)，会等到alert(2),alert(3)执行完毕后再执行；

alert(1);
alert(2);
alert(3);

此时的主线程和任务队列：

所以代码按照从上往下的顺序正常执行；

回到这里 innerHTML 和 setTimout，

document.body.innerHTML = 'something';
setTimeout(function() {
    alert(document.body.innerHTML);
}, 0);

间隔 = 0 不影响异步的逻辑，本来是 innerHTML->alert()->渲染，现在就是 innerHTML->空闲？渲染->空闲？alert()；

setTimout(fn,0) 实际上是立即把 fn 添加到了任务队列里，既然是队列，代码执行就是从第一个开始到最后一个结束；

实际上，猜测，页面渲染会在进程空闲时，立马执行，然后再去执行任务队列里的代码。所以等主线程空闲时，首先执行的是渲染，然后执行的 alert();

不信？考虑下面代码：

let header = document.getElementsByTagName('header')[0];
setTimeout(() => { alert('s') }, 0)
header.innerHTML = 'hello';
i = 100000;
while (i > 0) {
    i--;
}
alert('done');

chrome 62,先弹出 done，然后页面修改了，弹出了 s；

firefox ，有点怪异，done 和 hello 几乎同步，然后是 s;(逻辑上 alert 阻塞了进程，所以弹出 done 的时候，hello 应该无法被渲染到页面，可能有优化)

如果 innerHTML 的渲染，仅仅是作为普通的代码放到了任务队列里，那么肯定是 alert('s') 先弹出来（因为 alert('s') 是最早被添加到任务队列的），所以这里可以证明 innerHTML 的渲染，实际上还要早于任务队列里的代码；