DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 無阻塞加載js,防止因js加載不了影響頁面顯示的問題
無阻塞加載js,防止因js加載不了影響頁面顯示的問題
編輯:關於JavaScript     

浏覽器加載靜態資源和js的方式都是線性加載,所以一般情況可以將js放到</body>前,防止UI線程的阻塞。

而某些時候我們既希望js在整個網頁的頭部就加載,又擔心js阻塞導致網站加載緩慢,就可以用到無阻塞加載js技術。

Dynamic Script Elements 動態腳本元素

DOM允許我們使用Javascript動態創建HTML的幾乎所有文檔內容,一個新的<script>元素可以非常容易的通過標准DOM創建:

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

新的<script>元素加載file1.js源文件。此文件當元素添加到頁面後立刻開始下載。此技術的重點在於:無論在何處啟動下載,文件的下載和運行都不會阻塞其他頁面處理過程。

當文件使用動態腳本節點下載時,返回的代碼通常立即執行(除了Firefox和Opera,它們將等待此前的所有動態腳本節點執行完畢)。

大多數情況下,我們希望調用一個函數就可以實現Javascript文件的動態下載。下面的函數封裝實現了標准實現和IE實現:

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(){ //調用 
  alert("File is loaded!");  
}); 

此函數接受兩個參數:Javascript文件的Url和一個當Javascript接收完成時觸發的回調函數。屬性檢查用於決定監視哪種事件。最後一步src屬性,並將javascript文件添加到head。

動態腳本加載是非阻塞Javascript下載中最常用的模式,因為它可以跨浏覽器,而且簡單易用。

以上這篇無阻塞加載js,防止因js加載不了影響頁面顯示的問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved