載入非同步指令碼的藝術

silenceboy發表於2019-02-16
非同步指令碼

由於JavaScript指令碼的載入會阻塞頁面上其他元素的載入，以非同步非阻塞的方式載入指令碼檔案對網頁效能而言就顯得尤為重要，甚至可以說很關鍵。
Facebook JavaScript SDK配置示例如下：

<script>(function(d,s,id){
    var js,fjs = d.getElementByTagName(s)[0];
    if(d.getElementById(id)) return;
    js = d.createElement(s);
    js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js,fjs);
}(document,`script`,`facebook-jssdk`));</script>

這是一個自執行函式，確保了所有臨時變數都處於區域性作用於內，而不會汙染到全域性的名稱空間。
如果你擁有宿主頁面的控制權，一切將變的更加簡單：

<script>(function(d){
    var js = d.createElement(`script`);
    js.src = "http://example.com/my.js";
    (d.head || d.getElementByTagName(`head`)[0]).appendChild(js);
}(document));</script>

以非同步非阻塞方式載入指令碼對網頁的效能有很大的幫助。

相關文章