完美解決JS文件頁(yè)面加載時(shí)的阻塞問題

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

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

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

概述：JS分拆的方法

1.XHR注入：就是用ajax異步請(qǐng)求同域包含腳本的文件，然后將返回的字符串轉(zhuǎn)化為腳本使用，該方法不會(huì)造成頁(yè)面渲染和onload事件的阻塞，因?yàn)槭钱惒教幚?，推薦使用。

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

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

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

詳細(xì)介紹：

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

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

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

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

看代碼：

實(shí)例JS文件：創(chuàng)建一個(gè)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();

頁(yè)面使用該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文件頁(yè)面加載時(shí)的阻塞問題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: