Script 載入方式 (async, defer, lazyload) 三種避免阻塞腳本的載入方式

me
林彥成
2019-08-30 | 1 min.
文章目錄
  1. 1. 三種方法 (async, defer, lazyload)
  2. 2. 使用程式懶載入

HTML5 <script> tag 中有多 async 和 defer 這兩個 attribute 可以使用,透過這兩個 attribute 我們可以非同步的去載入腳本,來加快網頁載入的速度。

三種方法 (async, defer, lazyload)

  • async: 如果可以就非同步,不保證按照順序,若沒有相依性且拿來操作畫面,是最佳做法
  • defer: 頁面載入後都執行完才按照順序執行,可用來加速網頁載入
  • lazyload 用程式控制載入時機

async 按照 MDN 文件 說明在 inline 的狀況不會有效果,必須帶有 src 屬性。:

1
2
3
<script async>
var code;
</script>
1
2
3
var script = document.createElement("script");
script.innerHTML = "code";
document.body.appendChild(script);

使用程式懶載入

Promise 的範例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function newScript() {
return new Promise((resolve, reject) => {
const script = document.createElement("script");
script.src = "./test.min.js";
script.addEventListener("load", () => {
resolve();
});
script.addEventListener("error", (e) => {
reject(e);
});
document.body.appendChild(script);
});
}
newScript()
.then(() => {
self.setState({ status: true });
})
.catch(() => {
self.setState({ status: false });
});

Google Tag Manager 的範例

1
2
3
4
5
6
7
8
9
10
11
12
13
(function (a, b, c, d, e) {
a[d] = a[d] || [];
a[d].push({
"gtm.start": new Date().getTime(),
event: "gtm.js",
});
var f = b.getElementsByTagName(c)[0],
g = b.createElement(c),
h = "dataLayer" != d ? "&l=" + d : "";
g.async = true;
g.src = "https://www.googletagmanager.com/gtm.js?id=" + e + h;
f.parentNode.insertBefore(g, f);
})(window, document, "script", "dataLayer", "GTM-XXXXXXX");

喜歡這篇文章,請幫忙拍拍手喔 🤣

share