DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 完美解決JS文件頁面加載時的阻塞問題
完美解決JS文件頁面加載時的阻塞問題
編輯:關於JavaScript     

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

概述:JS分拆的方法

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

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

3.DOM注入:就是創建script元素,通過制定該元素的src並放入DOM樹中,根據該語句書寫的文字不同,會造成渲染或onload事件的阻塞。

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

詳細介紹:

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

第二步:用ajax函數請求一個JS文件。

第三步:兩個分支:第一種:拿來主義,eval(請求返回字符串);執行了JS中的函數,達到目的。

第二種:創建script對象,利用該對象的text屬性賦值 返回字符串 方式,達到目的。

看代碼:

實例JS文件:創建一個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文件頁面加載時的阻塞問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持。

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