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

隨選筆記文

Vue

Nuxt.js 引用Firebase SDK

Front-End

OSM + Leaflet 學習筆記2:移動中心點、抓目前地點

Front-End

IntersectionObserver:下篇-實際應用 lazyload、進場效果、無限捲動

Firebase Google

Firebase Cloud Firestore 常用功能筆記

PWA

PWA學習筆記-4:manifest.json

Front-End

Auth0 Universal Login,做一個自己的會員註冊、登入功能

API Front-End

WebSocket 基本介紹及使用筆記

Vue

Nuxt.js一些好用的設定

Google Maps

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

Google Others

Google Optimize A/B Testing 使用筆記

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

Let's Write

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