快捷導(dǎo)航

無(wú)阻塞加載js,防止因js加載不了影響頁(yè)面顯示的問(wèn)題

更新時(shí)間：2016年12月18日 11:32:06 投稿：jingxian

下面小編就為大家?guī)?lái)一篇無(wú)阻塞加載js,防止因js加載不了影響頁(yè)面顯示的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)

瀏覽器加載靜態(tài)資源和js的方式都是線(xiàn)性加載，所以一般情況可以將js放到</body>前，防止UI線(xiàn)程的阻塞。

而某些時(shí)候我們既希望js在整個(gè)網(wǎng)頁(yè)的頭部就加載，又擔(dān)心js阻塞導(dǎo)致網(wǎng)站加載緩慢，就可以用到無(wú)阻塞加載js技術(shù)。

Dynamic Script Elements 動(dòng)態(tài)腳本元素

DOM允許我們使用Javascript動(dòng)態(tài)創(chuàng)建HTML的幾乎所有文檔內(nèi)容，一個(gè)新的<script>元素可以非常容易的通過(guò)標(biāo)準(zhǔn)DOM創(chuàng)建：

var script = document.createElement ("script"); 
script.type = "text/javascript"; 
script.src = "file1.js";  
document.body.appendChild(script);

新的<script>元素加載file1.js源文件。此文件當(dāng)元素添加到頁(yè)面后立刻開(kāi)始下載。此技術(shù)的重點(diǎn)在于：無(wú)論在何處啟動(dòng)下載，文件的下載和運(yùn)行都不會(huì)阻塞其他頁(yè)面處理過(guò)程。

當(dāng)文件使用動(dòng)態(tài)腳本節(jié)點(diǎn)下載時(shí)，返回的代碼通常立即執(zhí)行（除了Firefox和Opera，它們將等待此前的所有動(dòng)態(tài)腳本節(jié)點(diǎn)執(zhí)行完畢）。

大多數(shù)情況下，我們希望調(diào)用一個(gè)函數(shù)就可以實(shí)現(xiàn)Javascript文件的動(dòng)態(tài)下載。下面的函數(shù)封裝實(shí)現(xiàn)了標(biāo)準(zhǔn)實(shí)現(xiàn)和IE實(shí)現(xiàn)：

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 { //Others 
    script.onload = function(){ callback(); 
   };  
  } 
  script.src = url; 
  document.getElementsByTagName("head")[0].appendChild(script);  
 } 
 
loadScript("file1.js", function(){ //調(diào)用 
  alert("File is loaded!");  
});

此函數(shù)接受兩個(gè)參數(shù)：Javascript文件的Url和一個(gè)當(dāng)Javascript接收完成時(shí)觸發(fā)的回調(diào)函數(shù)。屬性檢查用于決定監(jiān)視哪種事件。最后一步src屬性，并將javascript文件添加到head。

動(dòng)態(tài)腳本加載是非阻塞Javascript下載中最常用的模式，因?yàn)樗梢钥鐬g覽器，而且簡(jiǎn)單易用。

以上這篇無(wú)阻塞加載js,防止因js加載不了影響頁(yè)面顯示的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: