JavaScript載入方式 defer, async

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
JavaScript載入方式 defer, async
Article Name
JavaScript載入方式 defer, async
Description
本篇大綱:defer、async、都不寫。這是很久以前的筆記,這次來整理並更新,主要是筆記載入JavaScript時,defer、async這兩個標籤的不同。瀏覽器是一行一行讀下去的,defer、async都不寫的話,DOM繪製到引用JS的那一行時,就停下來先解讀、執行完,然後DOM才接著往下繪製。
Augustus
Let's Write
Let's Write
Publisher Logo

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *