欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

實現(xiàn)高性能JavaScript之執(zhí)行與加載

 更新時間：2016年01月30日 10:32:05   投稿：hebedich  
avaScript在瀏覽器中的性能，此問題因JavaScript的阻塞特征而復(fù)雜，也就是說JavaScript運(yùn)行時其他的事情不能被瀏覽器處理，事實上，大多數(shù)瀏覽器使用單進(jìn)程處理JavaScript運(yùn)行等多個任務(wù)，而同一時間只能有一個任務(wù)被執(zhí)行。

瀏覽器在處理HTML頁面渲染和JavaScript腳本執(zhí)行的時候是單一進(jìn)程的,所以在當(dāng)瀏覽器在渲染HTML遇到了<script>標(biāo)簽會先去執(zhí)行標(biāo)簽內(nèi)的代碼(如果是使用src屬性加載的外鏈文件,則先下載再執(zhí)行),在這個過程中,頁面渲染和交互都會被阻塞。

...雖然會有阻塞,但還是有幾招可以減少JavaScript對性能的影響的。

1.script標(biāo)簽的位置

當(dāng)<script>出現(xiàn)在<head>中的時候,比如:

<head>
  <script type="text/javascript" src="js1.js"></script>
  <script type="text/javascript" src="js2.js"></script>
  <script type="text/javascript" src="js3.js"></script>
</head>

這種加載多個js文件的時候,瀏覽器就會因先下載執(zhí)行js代碼而阻塞頁面渲染從而出現(xiàn)白屏頁面(瀏覽器解析到<body>標(biāo)簽之前,不會渲染頁面任何內(nèi)容),沒法預(yù)覽也沒法交互,很差勁的用戶體驗。

注意:

現(xiàn)代瀏覽器支持資源并行下載,只限于<script>下載外部資源的時候不會阻塞其他<script>標(biāo)簽,但會阻塞其他資源的下載。
下載JavaScript資源是異步的,但是執(zhí)行JavaScript代碼的時候仍是同步的,同樣會造成阻塞。
所以把<script>后置到<body>標(biāo)簽的底部,保證執(zhí)行腳本之前已完成頁面渲染,是一種比較常用的JavaScript優(yōu)化手段。

2.合并多個script標(biāo)簽

瀏覽器解析HTML時遇到<script>都會因為執(zhí)行腳本而有一定的延遲,對于有src屬性的外鏈則<script>更加,多HTTP請求則會帶來更多的性能開銷,盡量減少這種延遲,也是一種優(yōu)化手段,可以合并多個js文件來減少HTTP請求的次數(shù),減少三次握手的次數(shù)和多余的HTTP頭傳輸,降低響應(yīng)時間提高用戶體驗。網(wǎng)上有許多合并js的方案以及工具,在這不敘述了。

3.使用無阻塞下載JavaScript的方法

  1. 使用script標(biāo)簽的defer和async屬性
  2. 使用動態(tài)創(chuàng)建的script標(biāo)簽來下載執(zhí)行JavaScript代碼
  3. 使用XHR對象下載JavaScript代碼并注入頁面

3.1.使用script標(biāo)簽的defer和async屬性

async和defer屬性都是用于異步加載js文件,期間不會才生阻塞瀏覽器其他進(jìn)程,區(qū)別在于async是加載完之后自動執(zhí)行,而defer需要等到頁面加載之后再執(zhí)行,需要注意的一點是這兩個屬性必須在有src屬性的<script>標(biāo)簽中(外鏈腳本)才有效。下面是demo:

<!DOCTYPE html>
<html>
<head>
  <title>defer example</title>
</head>
<body>
  <script type="text/javascript" src="defer.js" defer></script>
  <script>
    alert("script");
  </script>
  <script>
    window.onload= function(){
      alert("load");
    }
  </script>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
</body>
</html>

//defer.js的文件下只有alert("defer");一行代碼
async的例子也是相同的頁面結(jié)構(gòu),這里就不擺例子了,可以戳下面的鏈接。
defer example的鏈接戳這里!
async example的鏈接戳這里!

雖然頁面結(jié)構(gòu)一樣,但不一樣的是

打開defer.html依次看到是: 彈出"script"的alert框=>頁面渲染出文字=>彈出"defer"的alert框=>彈出"load"的alert框
打開async.html依次看到是: 彈出"script"的alert框=>彈出"async"的alert框=>頁面渲染出文字=>彈出"load"的alert框

3.2.使用動態(tài)創(chuàng)建的script標(biāo)簽來下載執(zhí)行JavaScript代碼

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "file.js";
document.getElementByTagName("head")[0].appendChild(script);

file.js在script元素添加到頁面時就啟動下載,使用這種方式的優(yōu)勢在于file.js的下載和執(zhí)行不會阻塞頁面其他進(jìn)程。

從demo上可以明顯的看出動態(tài)加載方式可以在alert框彈出之前先看到頁面上的文字,但是普通的方式只有在alert框彈出之后才可以看到頁面上的文字。

我們可以封裝一個跨瀏覽器的讀取script腳本并動態(tài)創(chuàng)建script標(biāo)簽的函數(shù):

function loadScript(url,callback){
  var script = document.createElement("script");
  script.type = "text/javascript";
  //檢測客戶端類型
  if(script.readyState){//IE
    script.onreadystatechange = function(){
      if(script.readyState==="loaded"||script.readyState==="complete"){
        script.onreadystatechange = null;
        callback();
      }
    }
  }else{//其他瀏覽器
    script.onload = function(){
      callback();
    }  
  }
  
  script.src = url;
  document.getElementsByTagName("head")[0].appendChild(script);
}

這類動態(tài)加載腳本的方法兼容性好,也比較簡單,是一種常用的無阻塞解決方案。

3.3.使用XHR對象下載JavaScript代碼并注入頁面

另一種無阻塞加載腳本的方式是使用XMLHttpRequest(XHR)對象獲取腳本并注入頁面中。
這種技術(shù)會先創(chuàng)建一個XHR對象,然后用他下載JavaScript文件,最后通過常見動態(tài)<script>元素將代碼注入頁面中。

var xhr = new XMLHttpRequest();
xhr.open("get","file.js",true);
xhr.onreadystatechange = function(){
  if(xhr.readyState===4){
    if(xhr.status>=200&&xhr.status<300||xhr.status==304){
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.text = xhr.responseText;
      document.body.appendChild(script);
    }
  }
}

以上代碼發(fā)送GET請求file.js文件,onReadyStateChange檢測readyState是否為4(4表示請求完成)和HTTP狀態(tài)嗎是否有效(200表示有效響應(yīng),304表示讀取緩存)。判斷響應(yīng)有效之后,就動態(tài)創(chuàng)建一個<script>標(biāo)簽,內(nèi)容就是服務(wù)器接收到的responseText。

這種方法的優(yōu)點以及缺點:

優(yōu)點:下載JavaScript代碼可以不立即執(zhí)行,且兼容性好適合所有主流瀏覽器。
缺點:JavaScript文件必須與所請求頁面處于同一個域,這種情況下JavaScript文件不能從CDN下載,不適合大型的Web應(yīng)用。

4.一種推薦的無阻塞方案

如果頁面有大量的JavaScript代碼需要添加,可以先在頁面中去外鏈之前我們封裝好的動態(tài)讀取script腳本的函數(shù)loadScript,然后再使用它去加載其他所需腳本,例如:

<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript">
  loadScript("file.js",function(){
    //do something
  });
</script>

這樣只需在第一個<script>下載比較精簡的loader.js文件時對頁面有些許影響,之后的<script>并不會有太多影響。

相關(guān)文章

最新評論