document.write和alert的执行顺序问题

• 先看两行代码，放到chrome中运行一下瞅一瞅

  	document.write(1)
  	alert(2)
  

• 我的天，竟然先弹窗显示2，点击确认后才页面输出了1

• 原因如下

  • js执行和dom操作共用一个线程，同一时刻二者只能有一个在执行
  • alert(2) 和 console.log(2)这种不需要浏览器渲染，直接执行js就可以得到效果
  • 当运行如上两行代码，两行代码会迅速被执行，当执行第二行时，页面显示弹窗，此时js并不算执行完毕，所以无法进行dom渲染
  • 当用户点击确认弹窗消失后，js执行完毕，dom开始渲染，页面输出了1

• 利用任务队列和执行栈的知识可以实现先让页面输出1，再弹窗显示2

  	document.write(1)
  	setTimeout(() => {
  		alert(2)
  	}, 0)