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