如果用一張圖檔诠釋這幾種script加載的特點,應該是這樣的:
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiI9s2RkBnVHFmb1clWvB3MaVnRtp1XlBXe0xCMy81dvRWYoNHLwEzX5xCMx8FesU2cfdGLwATMfRHLGZkRGZkRfJ3bs92YskmNhVTYykVNQJVMRhXVEF1X0hXZ0xCNx8VZ6l2cssmch1mclRXY39CXldWYtlWPzNXZj9mcw1ycz9WL49zZuBnLwIWMxUWMhJGZyADO5EmMhVDNzMmNjVDO2YmN4MWM2MWM4QTM5kzLcFTMxIDMy8CXzV2Zh1WavwVbvNmLvR3YxUjLzM3Lc9CX6MHc0RHaiojIsJye.png)
結合圖檔我們可以将三種方式的特點總結如下:
<code><script></code> : 當HTML解析過程中遇到script标簽時,浏覽器中斷HTML解析,随即下載下傳script檔案,完成後立即執行script,執行完成後再繼續HTML解析
<code><script async></code> : 當HTML解析過程中遇到script标簽時,不會中斷HTML解析,同時并行下載下傳script檔案,下載下傳完成後中斷HTML解析并執行script,執行完成後再繼續HTML解析(script的執行順序不一定按照script标簽的出現順序,而是取決于script下載下傳完成的順序)
<code><script defer></code> : 當HTML解析過程中遇到script标簽時,不會中斷HTML解析,同時并行下載下傳script檔案,直到HTML解析完成再執行script(script的執行順序與script标簽出現順序一緻)