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
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

API

用 Performance API 檢測檔案讀取時間

Analytics Google

Google Analytics 事件追蹤設定

Vue

用 Vue CLI 3 + Vuetify 製作說明頁面

Apps Script Google

用 Google Apps Script 取得 Google Excel 資料

Forms Google

Google 表單,輸入 ID 後自動帶入其它欄位資料

API

切詞工具結巴 Jeiba 優化標籤關鍵字

WordPress

WordPress:Site Kit by Google 介紹及使用

Bot Telegram

Telegram Bot 學習筆記 – 6:Google 表單提交時收到通知

Front-End

如何使用 Vivus.js 製作輕量快速 SVG 動畫

Front-End

從使用者輸入網址,到瀏覽器呈現出來,經過了哪些過程?

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

Let's Write

前端工程師 Augustus 的學習筆記 — solving problems, in simple ways.