完美解決JS文件頁面加載時的阻塞問題

更新時間：2016年12月18日 12:19:38 投稿：jingxian

下面小編就為大家?guī)硪黄昝澜鉀QJS文件頁面加載時的阻塞問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

關(guān)于頁面加載時的時間消費，許多書中都做出了介紹，也提出了很多種方法。本文章就詳細介紹XHR注入。

概述：JS分拆的方法

1.XHR注入：就是用ajax異步請求同域包含腳本的文件，然后將返回的字符串轉(zhuǎn)化為腳本使用，該方法不會造成頁面渲染和onload事件的阻塞，因為是異步處理，推薦使用。

2.iframe注入：加載一個iframe框架，通過使用iframe框架中的腳本來避免src方式加載腳本的阻塞，但是iframe元素開銷較大，不推薦。

3.DOM注入：就是創(chuàng)建script元素，通過制定該元素的src并放入DOM樹中，根據(jù)該語句書寫的文字不同，會造成渲染或onload事件的阻塞。

4. document.write方法：在JS腳本中使用document.write('<script>XXX</script>');這種方法簡單粗暴，但是它仍然會造成阻塞，所改變的只是什么時候阻塞。

詳細介紹：

第一步：創(chuàng)造ajax函數(shù)：1建立XMLHTTPRequest或ActiveXObject對象 2.ajax對象的open方法 3.ajax對象的send方法 4.改寫onreadystatechange事件，判斷status（200）和readyState（4）屬性值，對請求數(shù)據(jù)類型操作。

第二步：用ajax函數(shù)請求一個JS文件。

第三步：兩個分支：第一種：拿來主義，eval（請求返回字符串）;執(zhí)行了JS中的函數(shù)，達到目的。

第二種：創(chuàng)建script對象，利用該對象的text屬性賦值返回字符串方式，達到目的。

看代碼：

實例JS文件：創(chuàng)建一個100X100的黑色div，并加載到指定元素中。

function test() {
  oDiv = document.createElement('div');
  oDiv.style['width'] = '100px';
  oDiv.style['height'] = '100px';
  oDiv.style['background'] = 'black';
  document.getElementById('header').appendChild(oDiv);
}
test();

頁面使用該JS文件

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type="text/css">
   *{ margin:0; padding:0;}
  </style>
</head>
<body>
 <div id="header" style=" height:150px; background-color:Red;"></div>
 <div id="init">
 <script type="text/javascript">
   //Ajax獲取字符串
function Ajax(Method,url,funcSucc,funcFalse) {
  if (XMLHttpRequest)
    var oAjax = new XMLHttpRequest();
  else {
    var oAjax = new ActiveXObject('Microsoft.XMLHTTP');
  }
  oAjax.open(Method, url, true);
  oAjax.send();
  oAjax.onreadystatechange = function () {
    if (oAjax.readyState == 4) {
      if (oAjax.status == 200) {
        var str = oAjax.responseText;
        funcSucc(str);
      }
      else {
        funcFalse();
      }
    }
  };

   Ajax('GET', 'javascript/load.js', function (str) {
     eval(str);
 //    var oScript = document.createElement('script');
//     oScript.text = str;
//     document.getElementsByTagName('head')[0].appendChild(oScript);

   }, function () {
     alert('失敗');
   });
   
   </script>
 </div>
</body>
</html>

以上這篇完美解決JS文件頁面加載時的阻塞問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: