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

Lin Yen-Cheng on 2019-08-30 2 min. read

簡介與問題

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

三種方法 (async, defer, lazyload)

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

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

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

使用程式懶載入

Promise 的範例

function newScript() &#123;
  return new Promise((resolve, reject) => &#123;
    const script = document.createElement("script");
    script.src = "./test.min.js";
    script.addEventListener("load", () => &#123;
      resolve();
    &#125;);
    script.addEventListener("error", (e) => &#123;
      reject(e);
    &#125;);
    document.body.appendChild(script);
  &#125;);
&#125;
newScript()
  .then(() => &#123;
    self.setState(&#123; status: true &#125;);
  &#125;)
  .catch(() => &#123;
    self.setState(&#123; status: false &#125;);
  &#125;);

Google Tag Manager 的範例

(function (a, b, c, d, e) &#123;
  a[d] = a[d] || [];
  a[d].push(&#123;
    "gtm.start": new Date().getTime(),
    event: "gtm.js",
  &#125;);
  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);
&#125;)(window, document, "script", "dataLayer", "GTM-XXXXXXX");

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

share