在js中有關檔案載入優化方面的問題

下面我就為大家分享一篇基於js檔案載入優化(詳解)，具有很好的參考價值，希望對大家有幫助。

在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。

js檔案放置位置應該要放置到body結尾

如果使用async的話，最後加上defer以求向下相容

<script src="test.js" async defer></script> //如果两者都支持，async会默认覆盖掉defer
//如果只支持一个，则执行对应的即可

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

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

在Node.js中使用Async和Await函數

解決webpack無法存取127.0.0.1的問題

在webpack-dev-server中實作遠端存取配置方法

#

以上是在js中有關檔案載入優化方面的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！