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

隨選筆記文

Firebase Google

Firebase Authentication 第三方登入 – Google、FB

API

接氣象局 API、跨網域 AJAX 資料

Apps Script Google

用 Google Apps Script 取得 Google Sheets / Excel 資料

Google Maps

Google Maps API 學習筆記 – 2:在地圖上畫個日本結界

Bot Slack

Slack 通知功能 純靜態

Front-End

製作 RWD email 工具:MJML,如何使用及注意事項

Bot Telegram

Telegram Bot 學習筆記 – 2:用 Google Apps Script 接收 / 推播訊息

Front-End

JavaScript 載入方式 defer、async

Front-End

Promise、Async、Await 基本使用筆記

Google Maps

Google Maps API 學習筆記 – 6:畫新冠肺炎分佈圖

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

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

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

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

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

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

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

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

訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言