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)