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