执行顺序问题

Question

• 老师好～
• 如下代码在谷歌浏览器中运行

	document.write(1)
	alert(2)

• 执行结果是先弹出2，点击确认后页面输出1，有几个问题如下，希望您指点

  • 是否是先调用document.write方法，然后调用alert方法？（我认为是）
  • 如果是先调用的document.write方法，为什么不是先页面输出1，然后弹窗提示2？
  • 我搜索到的结果有一种说法是alert优先级高，我认为这种说法并不靠谱，因为优先级这种说法感觉只是一种现象，不是本质，它的本质是什么呢？
  • 还有一种说法是说先调用document.write方法，只不过涉及页面渲染，那位同学的回答含糊不清，这里涉及页面渲染和异步问题吗老师，该如何理解呢？
  • 怎样做可以让document.write先输出到页面然后在提示alert？

• 谢谢老师！

Answer 1

双越 2020-05-25 11:29:29

需要注意一个区别：

第一，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 执行完成才能被渲染到页面上。

• 提问者 Brannua #1

  明白了，老师如何做才能让页面显示出1之后，再弹窗提示2呢

• 双越 回复 提问者 Brannua #2

  把 alert(2) 放在 setTimeout 中

• 提问者 Brannua 回复 双越 #3

  document.write(1)
      setTimeout(() => {alert(2)}, 0)
  老师我这样写的，感觉您的意思是alert(2)先扔到任务队列，等到主执行栈空以后，也就是渲染完事之后再从任务队列取出来执行，所以setTimeout延时是0也没关系，我理解对吗老师？谢谢您！期待您的后续课程！

点开查看后面3条评论

Answer 2

功不唐捐终入海 2020-06-24 22:52:34

老师他这个应该是和eventloop有点关系是不是？

1. document.write(1)执行后行为是dom渲染,而dom渲染和jS公用一条线程是在call stack空闲后才进行dom渲染。

2. 所以要等主线程空了才能渲染。

3. 执行alert(2)

4. alert()可以阻断js进程，所以alert点了确定才能打印1
   

• 双越 #1

  event loop 是异步回调的实现方案。这个题目里，有异步吗？

• 功不唐捐终入海 回复 双越 #2

  没有异步。。老师所说的js执行结束是否就是call stack空闲

• 双越 回复 功不唐捐终入海 #3

  是的。但没有异步，就和 event loop 没关系。只是 js 执行和 DOM 渲染是同一个线程，是互斥的。