學習javascript檔案載入最佳化，javascript檔案載入

學習javascript檔案載入最佳化，javascript檔案載入

在js引擎部分，我們可以瞭解到，當渲染引擎解析到script標籤時，會將控制權給JS引擎，如果script載入的是外部資源，則需要等待下載完後才能執行。 所以，在這裡，我們可以對其進行很多最佳化工作。

放置在BODY底部

為了讓渲染引擎能夠及早的將DOM樹給渲染出來，我們需要將script放在body的底部，讓頁面儘早脫離白屏的現象，即會提早觸發DOMContentLoaded事件. 但是由於在IOS Safari, Android browser以及IOS webview裡面即使你把js指令碼放到body尾部，結果還是一樣， 所以這裡需要另外的操作來對js檔案載入進行最佳化.

DEFER載入

這是HTML4中定義的一個script屬性，它用來表示的是，當渲染引擎遇到script的時候，如果script引用的是外部資源，則會暫時掛起，並進行載入。 渲染引擎繼續解析下面的HTML文檔，解析完時，則會執行script裡面的指令碼。

<script src="outside.js" defer></script>

他的支援度是<=IE9的.
並且，他的執行順序，是嚴格依賴的，即:

<script src="outside1.js" defer></script><script src="outside2.js" defer></script>

當頁面解析完後，他便會開始按照順序執行 outside1 和 outside2檔案。
如果你在IE9以下使用defer的話，可能會遇到 它們兩個不是順序執行的，這裡需要一個hack進行處理，即在兩個中間加上一個空的script標籤

<script src="outside1.js" defer></script><script></script> //hack<script src="outside2.js" defer></script>

ASYNC載入

async是H5新定義的一個script 屬性。 他是另外一種js的載入模式。

• 渲染引擎解析檔案，如果遇到script(with async)
• 繼續解析剩下的檔案，同時並行載入script的外部資源
• 當script載入完成之後，則瀏覽器暫停解析文檔，將許可權交給JS引擎，指定載入的指令碼。
• 執行完後，則恢複瀏覽器解析指令碼

可以看出async也可以解決 阻塞載入 這個問題。不過，async執行的時候是非同步執行，造成的是，執行檔案的順序不一致。即:

<script src="outside1.js" async></script><script src="outside2.js" async></script>

這時，誰先載入完，就先執行誰。所以，一般依賴檔案就不應該使用async而應該使用defer.
defer的相容性比較差，為IE9+,不過一般是在移動端使用，也就不存在這個problem了。

指令碼非同步

指令碼非同步是一些非同步載入庫(比如require)使用的基本載入原理. 直接上代碼:

function asyncAdd(src){  var script = document.createElement('script');  script.src = src;  document.head.appendChild(script);}//載入js檔案asyncAdd("test.js");

這時候，可以非同步負載檔案，不會造成阻塞的效果.
但是，這樣載入的js檔案是無序的，無法正常載入依賴檔案。
這時候，我們需要對上述函數進行最佳化.

var asyncAdd = (function(){  var head = document.head,    script;  return function(src){    script = document.createElement('script');    script.src= src;    script.async=false;    document.head.appendChild(script);  }})();//負載檔案asyncAdd("first.js");asyncAdd("second.js");//或者簡便一點["first.js","second.js"].forEach((src)=>{async(src);});

但是，使用指令碼一步載入的話，需要等待css檔案載入完後，才開始進行載入，不能充分利用瀏覽器的並發載入優勢。而使用靜態文本載入async或者defer則不會出現這個問題。

使用指令碼非同步載入時，只能等待css載入完後才會載入
使用靜態async載入時，css和js會並發一起載入

關於這三種如何取捨，那就主要看leader給我們目標是什麼，是相容IE8,9還是手機端，還是案頭瀏覽器，或者兩兩組合。
但是對於單獨使用某一個技能的情境，使用時需要注意一些tips。

1、js檔案置放位置應該放置到body末尾
2、如果使用async的話，最後加上defer以求向下相容

<script src="test.js" async defer></script> //如果兩者都支援，async會預設覆蓋掉defer//如果只支援一個，則執行對應的即可

通常，我們使用的載入都是defer載入，因為很強的依賴關係。

以上就是本文的全部內容，希望對大家的學習有所協助。

您可能感興趣的文章:

• 用ajax動態載入需要的js檔案
• 動態載入JS檔案的三種方法
• php ci架構中載入css和js檔案失敗的解決方案
• 使用jQuery動態載入js指令檔的方法
• JSP載入JS檔案不起作用的有效解決方案
• js怎麼判斷flash swf檔案是否載入完畢
• 在css載入完畢後自動判斷頁面是否加入css或js檔案
• jquery動態載入js/css檔案方法(自寫小函數)
• 如何調試非同步載入頁面裡包含的js檔案
• JS擷取瀏覽器語言動態載入JS檔案範例程式碼