JavaScript 載入方式 defer、async

/

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


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 都不寫

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

Summary
JavaScript 載入方式 defer, async
Article Name
JavaScript 載入方式 defer, async
Description
本篇大綱:defer、async、都不寫。這是很久以前的筆記,這次來整理並更新,主要是筆記載入 JavaScript 時,defer、async 這兩個標籤的不同。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

PWA

PWA 學習筆記 – 2:Workbox CLI

Vue

D3.js、Vue 畫一個台灣地圖

Front-End

幾個方便開發的 Console API 應用

Vue

用 VuePress 製作說明文件頁面 – 5:改樣式、加元件

Vue

Vue.js Transition 中用多個 v-if、v-show

Google Others

Google Top Heavy 演算法

Google Maps

Google Maps API 學習筆記 – 5:抓目前位置、計算到各點距離

Bot LINE

LINE Bot:X-Line-Signature 簽名驗證 範例

Firebase Google

Firebase Dynamic Links 從後台建立縮網址

Front-End

JavaScript 載入方式 defer、async

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 August 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 August 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。