這是很久以前的筆記,這次來整理並更新,主要是筆記載入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
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg
