LiuLyndon Look For: [JavaScript] defer, async

defer, async

起緣
HTML 4.01	`<script defer src="~/Scripts/Lyndon.js"></script>`
XHTML 1.0 / 1.1	`<script defer="defer" src="~/Scripts/Lyndon.js"></script>`
HTML 5	`<script defer src="~/Scripts/Lyndon.js"></script> <script async src="~/Scripts/Lyndon.js" …>`

一般我們引用外部 javascript 寫法如下：

<script src="~/Scripts/Lyndon.js"></script>

預設引用用法
browser 在 html parsing 碰到 script 時會暫停 html parsing ，會先下載 script 和執行 script 後才會繼續往下做 html parsing
如果引用 script 檔案很大或需要執行時間很長，會使畫面卡卡

Demo - HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="JavaScript1.js"></script>
    <script src="JavaScript2.js"></script>
    <script src="JavaScript3.js"></script>
    <script>
        console.log("JavaScript");
    </script>
</head>
<body>
</body>
</html>

上方為簡單的範例，將引用 script 寫至 head 中，script 檔會依據順序下載並執行
通常寫法會將引用 script 寫至 body 最後，因先下載網頁中的圖片與內容為最重要，之後才是執行 script ，當然有些 script 也是必需先讀取 (如：SVG.js)

async 屬性

<script async src="~/Scripts/Lyndon.js"></script>

async 在碰到 script 時，會開始下載 script 但不會暫停 HTML parsing ，直到 script 下載完，才會暫停 HTML parsing，把 script 執行完，才會繼續做 HTML parsing
引用多個外部的 script 都是使用 async 時，async 並不保證順序性，誰先下載完，誰就會先行執行
使用時機：此 script 和其他的 script 無連帶關係，即不需等待其他的 script 執行完，可獨立作業

Demo

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script async src="JavaScript1.js"></script>
    <script async src="JavaScript2.js"></script>
    <script async src="JavaScript3.js"></script>
    <script async>
        console.log("JavaScript");
    </script>
</head>
<body>
</body>
</html>

defer 屬性

<script defer src="~/Scripts/Lyndon.js"></script>

整個頁面都下載及分析完成後才會執行，類似於將 script 放在頁尾的情況
defer 碰到 script 時不會暫停 html parsing 並同時下載 script 直到 HTML parsing 結束後才執行 script。defer 與 async 不同的是把 script 執行 delay 到 HTML parsing 結束後才處理

Demo

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script defer src="JavaScript1.js"></script>
    <script defer src="JavaScript2.js"></script>
    <script defer src="JavaScript3.js"></script>
    <script defer>
        console.log("JavaScript");
    </script>
</head>
<body>
</body>
</html>

結論

良好的寫作習慣，還是將 script 寫至 body 最後
Demo

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    ...
    ...
    <script defer src="JavaScript1.js"></script>
    <script defer src="JavaScript2.js"></script>
    <script defer src="JavaScript3.js"></script>
    <script defer>
        console.log("JavaScript");
    </script>
</body>
</html>

Ref:

LiuLyndon Look For

2017年8月24日星期四

[JavaScript] defer, async

沒有留言:

張貼留言

2017年8月24日 星期四

[JavaScript] defer, async

沒有留言:

張貼留言

2017年8月24日星期四