JavaScript載入方式 defer, async

這是很久以前的筆記，這次來整理並更新，主要是筆記載入JavaScript時，defer、async這兩個標籤的不同。

defer

<script defer src="javascript.js"></script>

瀏覽器對DOM的繪製不會停下，javascript.js在背景下載，待DOM繪製完才執行javascript.js。

要注意，defer執行的時間會在DOMContentLoaded之前，所以defer的檔案如果太大，會阻塞DOMContentLoaded被觸發。

async

<script async src="javascript.js"></script>

瀏覽器對DOM的繪製不會停下，javascript.js 在背景下載。

待javascript.js下載完畢，DOM繪製停下，執行javascript.js 。

待javascript.js執行完畢，DOM才接著往下繪製。

defer、async都不寫

瀏覽器是一行一行讀下去的，defer、async都不寫的話，就是DOM繪製到引用JavaScript的那一行時，就停下來，先解讀完這行引用的js，再執行完，然後DOM才接著往下繪製。

Summary

Article Name

JavaScript載入方式 defer, async

Description

本篇大綱：defer、async、都不寫。這是很久以前的筆記，這次來整理並更新，主要是筆記載入JavaScript時，defer、async這兩個標籤的不同。瀏覽器是一行一行讀下去的，defer、async都不寫的話，DOM繪製到引用JS的那一行時，就停下來先解讀、執行完，然後DOM才接著往下繪製。

Augustus

Augustus

Let's Write

Let's Write

Publisher Logo