JavaScript提高加載和執(zhí)行效率的方法
前言
成都創(chuàng)新互聯(lián)成立于2013年，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目成都做網(wǎng)站、成都網(wǎng)站制作網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元藍山做網(wǎng)站,已為上家服務(wù),為藍山各地企業(yè)和個人服務(wù),聯(lián)系電話:18980820575
無論當前 JavaScript 代碼是內(nèi)嵌還是在外鏈文件中，頁面的下載和渲染都必須停下來等待腳本執(zhí)行完成。JavaScript 執(zhí)行過程耗時越久，瀏覽器等待響應(yīng)用戶輸入的時間就越長。瀏覽器在下載和執(zhí)行腳本時出現(xiàn)阻塞的原因在于，腳本可能會改變頁面或 JavaScript 的命名空間，它們對后面頁面內(nèi)容造成影響。
一個典型的例子就是在頁面中使用document.write() 。
JavaScript 代碼內(nèi)嵌示例
<html>
<head>
<title>Source Example</title>
</head>
<body>
<p>
<script type="text/javascript">
document.write("Today is " + (new Date()).toDateString());
</script>
</p>
</body>
</html>當瀏覽器遇到<script>標簽時，當前 html 頁面無從獲知 JavaScript 是否會向<p> 標簽添加內(nèi)容，或引入其他元素，或甚至移除該標簽。因此，這時瀏覽器會停止處理頁面，先執(zhí)行 JavaScript代碼，然后再繼續(xù)解析和渲染頁面。同樣的情況也發(fā)生在使用 src 屬性加載 JavaScript的過程中，瀏覽器必須先花時間下載外鏈文件中的代碼，然后解析并執(zhí)行它。在這個過程中，頁面渲染和用戶交互完全被阻塞了。
腳本位置
HTML 4 規(guī)范指出 <script> 標簽可以放在 HTML 文檔的<head>或<body>中，并允許出現(xiàn)多次。web 開發(fā)人員一般習(xí)慣在 <head> 中加載外鏈的 JavaScript，接著用 <link> 標簽用來加載外鏈的 CSS 文件或者其他頁面信息。
低效率腳本位置示例
<html> <head> <title>Source Example</title> <script type="text/javascript" src="script1.js"></script> <script type="text/javascript" src="script2.js"></script> <script type="text/javascript" src="script3.js"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <p>Hello world!</p> </body> </html>
然而這種常規(guī)的做法卻隱藏著嚴重的性能問題。在清單 2 的示例中，當瀏覽器解析到 <script> 標簽（第 4 行）時，瀏覽器會停止解析其后的內(nèi)容，而優(yōu)先下載腳本文件，并執(zhí)行其中的代碼，這意味著，其后的 styles.css 樣式文件和<body>標簽都無法被加載，由于<body>標簽無法被加載，那么頁面自然就無法渲染了。因此在該 JavaScript 代碼完全執(zhí)行完之前，頁面都是一片空白。
由于腳本會阻塞頁面其他資源的下載，因此推薦將所有<script>標簽盡可能放到<body>標簽的底部，以盡量減少對整個頁面下載的影響。
推薦的代碼放置位置示例
<html> <head> <title>Source Example</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <p>Hello world!</p> <!-- Example of efficient script positioning --> <script type="text/javascript" src="script1.js"></script> <script type="text/javascript" src="script2.js"></script> <script type="text/javascript" src="script3.js"></script> </body> </html>
這段代碼展示了在 HTML 文檔中放置<script>標簽的推薦位置。盡管腳本下載會阻塞另一個腳本，但是頁面的大部分內(nèi)容都已經(jīng)下載完成并顯示給了用戶，因此頁面下載不會顯得太慢。這是優(yōu)化 JavaScript 的首要規(guī)則：將腳本放在底部。
組織腳本
由于每個<script>標簽初始下載時都會阻塞頁面渲染，所以減少頁面包含的<script>標簽數(shù)量有助于改善這一情況。這不僅針對外鏈腳本，內(nèi)嵌腳本的數(shù)量同樣也要限制。瀏覽器在解析 HTML 頁面的過程中每遇到一個<script>標簽，都會因執(zhí)行腳本而導(dǎo)致一定的延時，因此最小化延遲時間將會明顯改善頁面的總體性能。
這個問題在處理外鏈 JavaScript 文件時略有不同?？紤]到 HTTP 請求會帶來額外的性能開銷，因此下載單個 100Kb 的文件將比下載 5 個 20Kb 的文件更快。也就是說，減少頁面中外鏈腳本的數(shù)量將會改善性能。
通常一個大型網(wǎng)站或應(yīng)用需要依賴數(shù)個 JavaScript 文件。您可以把多個文件合并成一個，這樣只需要引用一個<script>標簽，就可以減少性能消耗。文件合并的工作可通過離線的打包工具或者一些實時的在線服務(wù)來實現(xiàn)。
需要特別提醒的是，把一段內(nèi)嵌腳本放在引用外鏈樣式表的<link>之后會導(dǎo)致頁面阻塞去等待樣式表的下載。這樣做是為了確保內(nèi)嵌腳本在執(zhí)行時能獲得最精確的樣式信息。因此，建議不要把內(nèi)嵌腳本緊跟在<link>標簽后面。
無阻塞的腳本
減少 JavaScript 文件大小并限制 HTTP 請求數(shù)在功能豐富的 Web 應(yīng)用或大型網(wǎng)站上并不總是可行。Web 應(yīng)用的功能越豐富，所需要的 JavaScript 代碼就越多，盡管下載單個較大的 JavaScript 文件只產(chǎn)生一次 HTTP 請求，卻會鎖死瀏覽器的一大段時間。為避免這種情況，需要通過一些特定的技術(shù)向頁面中逐步加載 JavaScript 文件，這樣做在某種程度上來說不會阻塞瀏覽器。
無阻塞腳本的秘訣在于，在頁面加載完成后才加載 JavaScript 代碼。這就意味著在 window 對象的 onload事件觸發(fā)后再下載腳本。有多種方式可以實現(xiàn)這一效果。
延遲加載腳本
HTML 4 為<script>標簽定義了一個擴展屬性：defer。Defer 屬性指明本元素所含的腳本不會修改 DOM，因此代碼能安全地延遲執(zhí)行。defer 屬性只被 IE 4 和 Firefox 3.5 更高版本的瀏覽器所支持，所以它不是一個理想的跨瀏覽器解決方案。在其他瀏覽器中，defer 屬性會被直接忽略，因此<script>標簽會以默認的方式處理，也就是說會造成阻塞。然而，如果您的目標瀏覽器支持的話，這仍然是個有用的解決方案。
defer 屬性使用方法示例
<script type="text/javascript" src="script1.js" defer></script>
帶有 defer 屬性的<script>標簽可以放置在文檔的任何位置。對應(yīng)的 JavaScript 文件將在頁面解析到<script>標簽時開始下載，但不會執(zhí)行，直到 DOM 加載完成，即onload事件觸發(fā)前才會被執(zhí)行。當一個帶有 defer 屬性的 JavaScript 文件下載時，它不會阻塞瀏覽器的其他進程，因此這類文件可以與其他資源文件一起并行下載。
任何帶有 defer 屬性的<script>元素在 DOM 完成加載之前都不會被執(zhí)行，無論內(nèi)嵌或者是外鏈腳本都是如此。清單 5 的例子展示了defer屬性如何影響腳本行為：
defer 屬性對腳本行為的影響
<html>
<head>
<title>Script Defer Example</title>
</head>
<body>
<script type="text/javascript" defer>
alert("defer");
</script>
<script type="text/javascript">
alert("script");
</script>
<script type="text/javascript">
window.onload = function(){
alert("load");
};
</script>
</body>
</html>這段代碼在頁面處理過程中彈出三次對話框。不支持 defer 屬性的瀏覽器的彈出順序是：“defer”、“script”、“l(fā)oad”。而在支持 defer 屬性的瀏覽器上，彈出的順序則是：“script”、“defer”、“l(fā)oad”。請注意，帶有 defer 屬性的<script>元素不是跟在第二個后面執(zhí)行，而是在 onload 事件被觸發(fā)前被調(diào)用。
如果您的目標瀏覽器只包括 Internet Explorer 和 Firefox 3.5，那么 defer 腳本確實有用。如果您需要支持跨領(lǐng)域的多種瀏覽器，那么還有更一致的實現(xiàn)方式。
HTML 5 為<script>標簽定義了一個新的擴展屬性：async。它的作用和 defer 一樣，能夠異步地加載和執(zhí)行腳本，不因為加載腳本而阻塞頁面的加載。但是有一點需要注意，在有 async 的情況下，JavaScript 腳本一旦下載好了就會執(zhí)行，所以很有可能不是按照原本的順序來執(zhí)行的。如果 JavaScript 腳本前后有依賴性，使用 async 就很有可能出現(xiàn)錯誤。
動態(tài)腳本元素
文檔對象模型（DOM）允許您使用 JavaScript 動態(tài)創(chuàng)建 HTML 的幾乎全部文檔內(nèi)容。<script>元素與頁面其他元素一樣，可以非常容易地通過標準 DOM 函數(shù)創(chuàng)建：
通過標準 DOM 函數(shù)創(chuàng)建<script>元素
var script = document.createElement ("script");
script.type = "text/javascript";
script.src = "script1.js";
document.getElementsByTagName("head")[0].appendChild(script);新的<script>元素加載 script1.js 源文件。此文件當元素添加到頁面之后立刻開始下載。此技術(shù)的重點在于：無論在何處啟動下載，文件的下載和運行都不會阻塞其他頁面處理過程。您甚至可以將這些代碼放在<head>部分而不會對其余部分的頁面代碼造成影響（除了用于下載文件的 HTTP 連接）。
當文件使用動態(tài)腳本節(jié)點下載時，返回的代碼通常立即執(zhí)行（除了 Firefox 和 Opera，他們將等待此前的所有動態(tài)腳本節(jié)點執(zhí)行完畢）。當腳本是“自運行”類型時，這一機制運行正常，但是如果腳本只包含供頁面其他腳本調(diào)用調(diào)用的接口，則會帶來問題。這種情況下，您需要跟蹤腳本下載完成并是否準備妥善。可以使用動態(tài) <script> 節(jié)點發(fā)出事件得到相關(guān)信息。
Firefox、Opera, Chorme 和 Safari 3+會在<script>節(jié)點接收完成之后發(fā)出一個 onload 事件。您可以監(jiān)聽這一事件，以得到腳本準備好的通知：
通過監(jiān)聽 onload 事件加載 JavaScript 腳本
var script = document.createElement ("script")
script.type = "text/javascript";
//Firefox, Opera, Chrome, Safari 3+
script.onload = function(){
alert("Script loaded!");
};
script.src = "script1.js";
document.getElementsByTagName("head")[0].appendChild(script);Internet Explorer 支持另一種實現(xiàn)方式，它發(fā)出一個 readystatechange 事件。<script>元素有一個 readyState 屬性，它的值隨著下載外部文件的過程而改變。readyState 有五種取值：
微軟文檔上說，在<script>元素的生命周期中，readyState 的這些取值不一定全部出現(xiàn)，但并沒有指出哪些取值總會被用到。實踐中，我們最感興趣的是“l(fā)oaded”和“complete”狀態(tài)。Internet Explorer 對這兩個 readyState 值所表示的最終狀態(tài)并不一致，有時<script>元素會得到“l(fā)oader”卻從不出現(xiàn)“complete”，但另外一些情況下出現(xiàn)“complete”而用不到“l(fā)oaded”。最安全的辦法就是在 readystatechange 事件中檢查這兩種狀態(tài)，并且當其中一種狀態(tài)出現(xiàn)時，刪除 readystatechange 事件句柄（保證事件不會被處理兩次）：
通過檢查 readyState 狀態(tài)加載 JavaScript 腳本
var script = document.createElement("script")
script.type = "text/javascript";
//Internet Explorer
script.onreadystatechange = function(){
if (script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange = null;
alert("Script loaded.");
}
};
script.src = "script1.js";
document.getElementsByTagName("head")[0].appendChild(script);大多數(shù)情況下，您希望調(diào)用一個函數(shù)就可以實現(xiàn) JavaScript 文件的動態(tài)加載。下面的函數(shù)封裝了標準實現(xiàn)和 IE 實現(xiàn)所需的功能：
通過函數(shù)進行封裝
function loadScript(url, callback){
var script = document.createElement ("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function(){
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}此函數(shù)接收兩個參數(shù)：JavaScript 文件的 URL，和一個當 JavaScript 接收完成時觸發(fā)的回調(diào)函數(shù)。屬性檢查用于決定監(jiān)視哪種事件。最后一步，設(shè)置 src 屬性，并將<script>元素添加至頁面。此 loadScript() 函數(shù)使用方法如下：
loadScript()函數(shù)使用方法
loadScript("script1.js", function(){
alert("File is loaded!");
});您可以在頁面中動態(tài)加載很多 JavaScript 文件，但要注意，瀏覽器不保證文件加載的順序。所有主流瀏覽器之中，只有 Firefox 和 Opera 保證腳本按照您指定的順序執(zhí)行。其他瀏覽器將按照服務(wù)器返回它們的次序下載并運行不同的代碼文件。您可以將下載操作串聯(lián)在一起以保證他們的次序，如下：
通過 loadScript()函數(shù)加載多個 JavaScript 腳本
loadScript("script1.js", function(){
loadScript("script2.js", function(){
loadScript("script3.js", function(){
alert("All files are loaded!");
});
});
});此代碼等待 script1.js 可用之后才開始加載 script2.js，等 script2.js 可用之后才開始加載 script3.js。雖然此方法可行，但如果要下載和執(zhí)行的文件很多，還是有些麻煩。如果多個文件的次序十分重要，更好的辦法是將這些文件按照正確的次序連接成一個文件。獨立文件可以一次性下載所有代碼（由于這是異步進行的，使用一個大文件并沒有什么損失）。
動態(tài)腳本加載是非阻塞 JavaScript 下載中最常用的模式，因為它可以跨瀏覽器，而且簡單易用。
使用 XMLHttpRequest(XHR)對象
此技術(shù)首先創(chuàng)建一個 XHR 對象，然后下載 JavaScript 文件，接著用一個動態(tài) <script> 元素將 JavaScript 代碼注入頁面。清單 12 是一個簡單的例子：
通過 XHR 對象加載 JavaScript 腳本
var xhr = new XMLHttpRequest();
xhr.open("get", "script1.js", true);
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
var script = document.createElement ("script");
script.type = "text/javascript";
script.text = xhr.responseText;
document.body.appendChild(script);
}
}
};
xhr.send(null);此代碼向服務(wù)器發(fā)送一個獲取 script1.js 文件的 GET 請求。onreadystatechange 事件處理函數(shù)檢查 readyState 是不是 4，然后檢查 HTTP 狀態(tài)碼是不是有效（2XX 表示有效的回應(yīng)，304 表示一個緩存響應(yīng)）。如果收到了一個有效的響應(yīng)，那么就創(chuàng)建一個新的<script>元素，將它的文本屬性設(shè)置為從服務(wù)器接收到的 responseText 字符串。這樣做實際上會創(chuàng)建一個帶有內(nèi)聯(lián)代碼的<script>元素。一旦新<script>元素被添加到文檔，代碼將被執(zhí)行，并準備使用。
這種方法的主要優(yōu)點是，您可以下載不立即執(zhí)行的 JavaScript 代碼。由于代碼返回在<script>標簽之外（換句話說不受<script>標簽約束），它下載后不會自動執(zhí)行，這使得您可以推遲執(zhí)行，直到一切都準備好了。另一個優(yōu)點是，同樣的代碼在所有現(xiàn)代瀏覽器中都不會引發(fā)異常。
此方法最主要的限制是：JavaScript 文件必須與頁面放置在同一個域內(nèi)，不能從 cdn 下載（CDN 指"內(nèi)容投遞網(wǎng)絡(luò)（Content Delivery Network）"，所以大型網(wǎng)頁通常不采用 XHR 腳本注入技術(shù)。
總結(jié)
減少 JavaScript 對性能的影響有以下幾種方法：
通過以上策略，可以在很大程度上提高那些需要使用大量 JavaScript 的 Web 網(wǎng)站和應(yīng)用的實際性能。
補充js加載函數(shù)：
function loadJs(url, callback, charset) {
var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
if ( !!charset) script.charset = "utf-8";
script.src = url;
script.onload = script.onreadystatechange = function() {
var f = script.readyState;
if (f && f != "loaded" && f != "complete") return;
script.onload = script.onreadystatechange = null;
head.removeChild(script) if (callback) {
callback() || callback
};
};
head.appendChild(script);
}// js同步加載
function getScripts(i, linkArray, fn) {
env || getEnv();
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = linkArray[i];
var head = document.head || document.getElementsByTagName('head')[0];
head.appendChild(script);
if (env.ie && 'onreadystatechange' in script && !('draggable' in script)){ //ie瀏覽器使用以下方式加載
script.onreadystatechange = function () {
if (/loaded|complete/.test(script.readyState)) {
script.onreadystatechange = null;
if(i === linkArray.length-1) {
if (fn) {
fn();
}
} else {
getScripts(++i, linkArray, fn);
}
}
};
}else{
script.onload = function() {
if(i === linkArray.length-1) {
if (fn) {
fn();
}
} else {
getScripts(++i, linkArray, fn);
}
};
}
}// js存在依賴關(guān)系 依次加載
getScripts(0, [
'http://caibaojian.com/demo/base.js',
'http://caibaojian.com/demo/reset.js'], function() {
alert('callback');
});好了，以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
本文名稱：JavaScript提高加載和執(zhí)行效率的方法
文章轉(zhuǎn)載：http://www.muchs.cn/article40/jiogho.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、面包屑導(dǎo)航、外貿(mào)建站、云服務(wù)器、Google、網(wǎng)站設(shè)計
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
- 網(wǎng)站維護中打不開是什么原因？ 2013-10-22
- 網(wǎng)站維護中網(wǎng)站被黑了怎么辦？ 2015-05-20
- 外貿(mào)企業(yè)網(wǎng)站制作需要注意哪些問題？ 2015-01-13
- 怎么在手機上免費建網(wǎng)站 2016-10-08
- 域名注冊知識解析 2016-09-02
- 網(wǎng)站維護費用包含什么一部分 2016-11-15
- 為什么說網(wǎng)站維護需要專業(yè)人員參與 2016-11-14
- 用戶體驗對網(wǎng)站的發(fā)展有什么作用？ 2016-09-12
- 企業(yè)管理軟件，選擇通用型還是定制開發(fā)？ 2016-08-29
- 服務(wù)器租用和虛擬主機的有什么區(qū)別 2016-10-13
- 網(wǎng)站維護：網(wǎng)站防黑很重要！ 2022-05-05
- 我們?yōu)槭裁匆獙W(xué)習(xí)php軟件開發(fā)？ 2016-08-15