關于頁面加載時的時間消費，許多書中都做出了介紹，也提出了很多種方法。本文章就詳細介紹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文件頁面加載時的阻塞問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
