执行顺序问题
来源：18-12 面试讲解-11：数组去重有几种方式？
Brannua
2020-05-25
- 老师好～
- 如下代码在谷歌浏览器中运行
document.write(1)
alert(2)
-
执行结果是先弹出2，点击确认后页面输出1，有几个问题如下，希望您指点
- 是否是先调用document.write方法，然后调用alert方法？（我认为是）
- 如果是先调用的document.write方法，为什么不是先页面输出1，然后弹窗提示2？
- 我搜索到的结果有一种说法是alert优先级高，我认为这种说法并不靠谱，因为优先级这种说法感觉只是一种现象，不是本质，它的本质是什么呢？
- 还有一种说法是说先调用document.write方法，只不过涉及页面渲染，那位同学的回答含糊不清，这里涉及页面渲染和异步问题吗老师，该如何理解呢？
- 怎样做可以让document.write先输出到页面然后在提示alert？
-
谢谢老师！
2回答
-
需要注意一个区别：
第一，alert(2) 或者 console.log(2) 这种，是不需要浏览器渲染的，直接执行 js 即可得到效果。
第二，document.write(1) 或者 $(document).append($('<div>1</div>')) 是需要浏览器渲染 DOM 的。即执行完了 js ，还要等浏览器把 DOM 节点渲染到页面上，才能被眼睛看到。
另外，还需要注意一个关键：js 执行和 DOM 渲染是公用同一个线程，就在 js 执行时不能同时进行 DOM 渲染，必须等 js 执行结束才能进行 DOM 渲染。
好了，有了以上的知识点，我们再梳理一下这个问题。
第一，开始执行你写的两行代码
第二，执行到 alert(2) ，弹出 2 ，等待用户确认。由于 alert(2) 是同步代码，用户不点击确认，则 js 就没执行结束。js 执行没结束，DOM 就没法渲染。
第三，用户点击 alert 确认之后，js 总算是执行完成了，然后 1 才被渲染到页面上。
总结：其实 document.wirte(1) 早就执行完成了，只是等待 js 执行完成才能被渲染到页面上。
262020-05-29 -
功不唐捐终入海
2020-06-24
老师他这个应该是和eventloop有点关系是不是？
document.write(1)执行后行为是dom渲染,而dom渲染和jS公用一条线程是在call stack空闲后才进行dom渲染。
所以要等主线程空了才能渲染。
执行alert(2)
alert()可以阻断js进程，所以alert点了确定才能打印1
132020-06-25
相似问题