當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript 的性能优化：加载和执行

發(fā)布時(shí)間：2024/4/14 javascript 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript 的性能优化：加载和执行小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

概覽

無論當(dāng)前 JavaScript 代碼是內(nèi)嵌還是在外鏈文件中，頁面的下載和渲染都必須停下來等待腳本執(zhí)行完成。JavaScript 執(zhí)行過程耗時(shí)越久，瀏覽器等待響應(yīng)用戶輸入的時(shí)間就越長。瀏覽器在下載和執(zhí)行腳本時(shí)出現(xiàn)阻塞的原因在于，腳本可能會(huì)改變頁面或 JavaScript 的命名空間，它們對后面頁面內(nèi)容造成影響。一個(gè)典型的例子就是在頁面中使用document.write()。例如清單 1

清單 1 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>

當(dāng)瀏覽器遇到<script>標(biāo)簽時(shí)，當(dāng)前?HTML?頁面無從獲知?JavaScript?是否會(huì)向<p>?標(biāo)簽添加內(nèi)容，或引入其他元素，或甚至移除該標(biāo)簽。因此，這時(shí)瀏覽器會(huì)停止處理頁面，先執(zhí)行JavaScript代碼，然后再繼續(xù)解析和渲染頁面。同樣的情況也發(fā)生在使用?src?屬性加載?JavaScript的過程中，瀏覽器必須先花時(shí)間下載外鏈文件中的代碼，然后解析并執(zhí)行它。在這個(gè)過程中，頁面渲染和用戶交互完全被阻塞了。

回頁首

腳本位置

HTML 4 規(guī)范指出?<script>?標(biāo)簽可以放在 HTML 文檔的<head>或<body>中，并允許出現(xiàn)多次。Web 開發(fā)人員一般習(xí)慣在?<head>?中加載外鏈的 JavaScript，接著用?<link>?標(biāo)簽用來加載外鏈的 CSS 文件或者其他頁面信息。例如清單 2

清單 2 低效率腳本位置示例

<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ī)的做法卻隱藏著嚴(yán)重的性能問題。在清單 2 的示例中，當(dāng)瀏覽器解析到?<script>?標(biāo)簽（第 4 行）時(shí)，瀏覽器會(huì)停止解析其后的內(nèi)容，而優(yōu)先下載腳本文件，并執(zhí)行其中的代碼，這意味著，其后的 styles.css 樣式文件和<body>標(biāo)簽都無法被加載，由于<body>標(biāo)簽無法被加載，那么頁面自然就無法渲染了。因此在該 JavaScript 代碼完全執(zhí)行完之前，頁面都是一片空白。圖 1 描述了頁面加載過程中腳本和樣式文件的下載過程。

圖 1 JavaScript 文件的加載和執(zhí)行阻塞其他文件的下載

我們可以發(fā)現(xiàn)一個(gè)有趣的現(xiàn)象：第一個(gè) JavaScript 文件開始下載，與此同時(shí)阻塞了頁面其他文件的下載。此外，從 script1.js 下載完成到 script2.js 開始下載前存在一個(gè)延時(shí)，這段時(shí)間正好是 script1.js 文件的執(zhí)行過程。每個(gè)文件必須等到前一個(gè)文件下載并執(zhí)行完成才會(huì)開始下載。在這些文件逐個(gè)下載過程中，用戶看到的是一片空白的頁面。

從 IE 8、Firefox 3.5、Safari 4 和 Chrome 2 開始都允許并行下載 JavaScript 文件。這是個(gè)好消息，因?yàn)?lt;script>標(biāo)簽在下載外部資源時(shí)不會(huì)阻塞其他<script>標(biāo)簽。遺憾的是，JavaScript 下載過程仍然會(huì)阻塞其他資源的下載，比如樣式文件和圖片。盡管腳本的下載過程不會(huì)互相影響，但頁面仍然必須等待所有 JavaScript 代碼下載并執(zhí)行完成才能繼續(xù)。因此，盡管最新的瀏覽器通過允許并行下載提高了性能，但問題尚未完全解決，腳本阻塞仍然是一個(gè)問題。

由于腳本會(huì)阻塞頁面其他資源的下載，因此推薦將所有<script>標(biāo)簽盡可能放到<body>標(biāo)簽的底部，以盡量減少對整個(gè)頁面下載的影響。例如清單 3

清單 3 推薦的代碼放置位置示例

<html> <head><title>Source Example</title><link rel="stylesheet" type="text/css" href="styles.css"> </head> <body><p>Hello world!</p><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>標(biāo)簽的推薦位置。盡管腳本下載會(huì)阻塞另一個(gè)腳本，但是頁面的大部分內(nèi)容都已經(jīng)下載完成并顯示給了用戶，因此頁面下載不會(huì)顯得太慢。這是優(yōu)化 JavaScript 的首要規(guī)則：將腳本放在底部。

回頁首

組織腳本

由于每個(gè)<script>標(biāo)簽初始下載時(shí)都會(huì)阻塞頁面渲染，所以減少頁面包含的<script>標(biāo)簽數(shù)量有助于改善這一情況。這不僅針對外鏈腳本，內(nèi)嵌腳本的數(shù)量同樣也要限制。瀏覽器在解析 HTML 頁面的過程中每遇到一個(gè)<script>標(biāo)簽，都會(huì)因執(zhí)行腳本而導(dǎo)致一定的延時(shí)，因此最小化延遲時(shí)間將會(huì)明顯改善頁面的總體性能。

這個(gè)問題在處理外鏈 JavaScript 文件時(shí)略有不同。考慮到 HTTP 請求會(huì)帶來額外的性能開銷，因此下載單個(gè) 100Kb 的文件將比下載 5 個(gè) 20Kb 的文件更快。也就是說，減少頁面中外鏈腳本的數(shù)量將會(huì)改善性能。

通常一個(gè)大型網(wǎng)站或應(yīng)用需要依賴數(shù)個(gè) JavaScript 文件。您可以把多個(gè)文件合并成一個(gè)，這樣只需要引用一個(gè)<script>標(biāo)簽，就可以減少性能消耗。文件合并的工作可通過離線的打包工具或者一些實(shí)時(shí)的在線服務(wù)來實(shí)現(xiàn)。

需要特別提醒的是，把一段內(nèi)嵌腳本放在引用外鏈樣式表的<link>之后會(huì)導(dǎo)致頁面阻塞去等待樣式表的下載。這樣做是為了確保內(nèi)嵌腳本在執(zhí)行時(shí)能獲得最精確的樣式信息。因此，建議不要把內(nèi)嵌腳本緊跟在<link>標(biāo)簽后面。

回頁首

無阻塞的腳本

減少 JavaScript 文件大小并限制 HTTP 請求數(shù)在功能豐富的 Web 應(yīng)用或大型網(wǎng)站上并不總是可行。Web 應(yīng)用的功能越豐富，所需要的 JavaScript 代碼就越多，盡管下載單個(gè)較大的 JavaScript 文件只產(chǎn)生一次 HTTP 請求，卻會(huì)鎖死瀏覽器的一大段時(shí)間。為避免這種情況，需要通過一些特定的技術(shù)向頁面中逐步加載 JavaScript 文件，這樣做在某種程度上來說不會(huì)阻塞瀏覽器。

無阻塞腳本的秘訣在于，在頁面加載完成后才加載 JavaScript 代碼。這就意味著在?window?對象的?onload事件觸發(fā)后再下載腳本。有多種方式可以實(shí)現(xiàn)這一效果。

延遲加載腳本

HTML 4 為<script>標(biāo)簽定義了一個(gè)擴(kuò)展屬性：defer。Defer?屬性指明本元素所含的腳本不會(huì)修改 DOM，因此代碼能安全地延遲執(zhí)行。defer?屬性只被 IE 4 和 Firefox 3.5 更高版本的瀏覽器所支持，所以它不是一個(gè)理想的跨瀏覽器解決方案。在其他瀏覽器中，defer?屬性會(huì)被直接忽略，因此<script>標(biāo)簽會(huì)以默認(rèn)的方式處理，也就是說會(huì)造成阻塞。然而，如果您的目標(biāo)瀏覽器支持的話，這仍然是個(gè)有用的解決方案。清單 4 是一個(gè)例子

清單 4 defer 屬性使用方法示例

帶有?defer?屬性的<script>標(biāo)簽可以放置在文檔的任何位置。對應(yīng)的 JavaScript 文件將在頁面解析到<script>標(biāo)簽時(shí)開始下載，但不會(huì)執(zhí)行，直到 DOM 加載完成，即onload事件觸發(fā)前才會(huì)被執(zhí)行。當(dāng)一個(gè)帶有?defer?屬性的 JavaScript 文件下載時(shí)，它不會(huì)阻塞瀏覽器的其他進(jìn)程，因此這類文件可以與其他資源文件一起并行下載。

任何帶有?defer?屬性的<script>元素在 DOM 完成加載之前都不會(huì)被執(zhí)行，無論內(nèi)嵌或者是外鏈腳本都是如此。清單 5 的例子展示了defer屬性如何影響腳本行為：

清單 5 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>元素不是跟在第二個(gè)后面執(zhí)行，而是在?onload?事件被觸發(fā)前被調(diào)用。

如果您的目標(biāo)瀏覽器只包括 Internet Explorer 和 Firefox 3.5，那么?defer?腳本確實(shí)有用。如果您需要支持跨領(lǐng)域的多種瀏覽器，那么還有更一致的實(shí)現(xiàn)方式。

HTML 5 為<script>標(biāo)簽定義了一個(gè)新的擴(kuò)展屬性：async。它的作用和?defer?一樣，能夠異步地加載和執(zhí)行腳本，不因?yàn)榧虞d腳本而阻塞頁面的加載。但是有一點(diǎn)需要注意，在有async?的情況下，JavaScript 腳本一旦下載好了就會(huì)執(zhí)行，所以很有可能不是按照原本的順序來執(zhí)行的。如果 JavaScript 腳本前后有依賴性，使用?async?就很有可能出現(xiàn)錯(cuò)誤。

動(dòng)態(tài)腳本元素

文檔對象模型（DOM）允許您使用 JavaScript 動(dòng)態(tài)創(chuàng)建 HTML 的幾乎全部文檔內(nèi)容。<script>元素與頁面其他元素一樣，可以非常容易地通過標(biāo)準(zhǔn) DOM 函數(shù)創(chuàng)建：

清單 6 通過標(biāo)準(zhǔn) 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 源文件。此文件當(dāng)元素添加到頁面之后立刻開始下載。此技術(shù)的重點(diǎn)在于：無論在何處啟動(dòng)下載，文件的下載和運(yùn)行都不會(huì)阻塞其他頁面處理過程。您甚至可以將這些代碼放在<head>部分而不會(huì)對其余部分的頁面代碼造成影響（除了用于下載文件的 HTTP 連接）。

當(dāng)文件使用動(dòng)態(tài)腳本節(jié)點(diǎn)下載時(shí)，返回的代碼通常立即執(zhí)行（除了 Firefox 和 Opera，他們將等待此前的所有動(dòng)態(tài)腳本節(jié)點(diǎn)執(zhí)行完畢）。當(dāng)腳本是“自運(yùn)行”類型時(shí)，這一機(jī)制運(yùn)行正常，但是如果腳本只包含供頁面其他腳本調(diào)用調(diào)用的接口，則會(huì)帶來問題。這種情況下，您需要跟蹤腳本下載完成并是否準(zhǔn)備妥善。可以使用動(dòng)態(tài)?<script>?節(jié)點(diǎn)發(fā)出事件得到相關(guān)信息。

Firefox、Opera, Chorme 和 Safari 3+會(huì)在<script>節(jié)點(diǎn)接收完成之后發(fā)出一個(gè)?onload?事件。您可以監(jiān)聽這一事件，以得到腳本準(zhǔn)備好的通知：

清單 7 通過監(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 支持另一種實(shí)現(xiàn)方式，它發(fā)出一個(gè)?readystatechange?事件。<script>元素有一個(gè)?readyState?屬性，它的值隨著下載外部文件的過程而改變。readyState?有五種取值：

“uninitialized”：默認(rèn)狀態(tài)
“l(fā)oading”：下載開始
“l(fā)oaded”：下載完成
“interactive”：下載完成但尚不可用
“complete”：所有數(shù)據(jù)已經(jīng)準(zhǔn)備好

微軟文檔上說，在<script>元素的生命周期中，readyState?的這些取值不一定全部出現(xiàn)，但并沒有指出哪些取值總會(huì)被用到。實(shí)踐中，我們最感興趣的是“l(fā)oaded”和“complete”狀態(tài)。Internet Explorer 對這兩個(gè)?readyState?值所表示的最終狀態(tài)并不一致，有時(shí)<script>元素會(huì)得到“l(fā)oader”卻從不出現(xiàn)“complete”，但另外一些情況下出現(xiàn)“complete”而用不到“l(fā)oaded”。最安全的辦法就是在?readystatechange?事件中檢查這兩種狀態(tài)，并且當(dāng)其中一種狀態(tài)出現(xiàn)時(shí)，刪除?readystatechange?事件句柄（保證事件不會(huì)被處理兩次）：

清單 8 通過檢查 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)用一個(gè)函數(shù)就可以實(shí)現(xiàn) JavaScript 文件的動(dòng)態(tài)加載。下面的函數(shù)封裝了標(biāo)準(zhǔn)實(shí)現(xiàn)和 IE 實(shí)現(xiàn)所需的功能：

清單 9 通過函數(shù)進(jìn)行封裝

此函數(shù)接收兩個(gè)參數(shù)：JavaScript 文件的 URL，和一個(gè)當(dāng) JavaScript 接收完成時(shí)觸發(fā)的回調(diào)函數(shù)。屬性檢查用于決定監(jiān)視哪種事件。最后一步，設(shè)置?src?屬性，并將<script>元素添加至頁面。此?loadScript()?函數(shù)使用方法如下：

清單 10 loadScript()函數(shù)使用方法

loadScript("script1.js", function(){alert("File is loaded!"); });

您可以在頁面中動(dòng)態(tài)加載很多 JavaScript 文件，但要注意，瀏覽器不保證文件加載的順序。所有主流瀏覽器之中，只有 Firefox 和 Opera 保證腳本按照您指定的順序執(zhí)行。其他瀏覽器將按照服務(wù)器返回它們的次序下載并運(yùn)行不同的代碼文件。您可以將下載操作串聯(lián)在一起以保證他們的次序，如下：

清單 11 通過 loadScript()函數(shù)加載多個(gè) 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í)行的文件很多，還是有些麻煩。如果多個(gè)文件的次序十分重要，更好的辦法是將這些文件按照正確的次序連接成一個(gè)文件。獨(dú)立文件可以一次性下載所有代碼（由于這是異步進(jìn)行的，使用一個(gè)大文件并沒有什么損失）。

動(dòng)態(tài)腳本加載是非阻塞 JavaScript 下載中最常用的模式，因?yàn)樗梢钥鐬g覽器，而且簡單易用。

使用 XMLHttpRequest(XHR)對象

此技術(shù)首先創(chuàng)建一個(gè) XHR 對象，然后下載 JavaScript 文件，接著用一個(gè)動(dòng)態(tài)?<script>?元素將 JavaScript 代碼注入頁面。清單 12 是一個(gè)簡單的例子：

清單 12 通過 XHR 對象加載 JavaScript 腳本

此代碼向服務(wù)器發(fā)送一個(gè)獲取 script1.js 文件的 GET 請求。onreadystatechange?事件處理函數(shù)檢查?readyState?是不是 4，然后檢查 HTTP 狀態(tài)碼是不是有效（2XX 表示有效的回應(yīng)，304 表示一個(gè)緩存響應(yīng)）。如果收到了一個(gè)有效的響應(yīng)，那么就創(chuàng)建一個(gè)新的<script>元素，將它的文本屬性設(shè)置為從服務(wù)器接收到的?responseText?字符串。這樣做實(shí)際上會(huì)創(chuàng)建一個(gè)帶有內(nèi)聯(lián)代碼的<script>元素。一旦新<script>元素被添加到文檔，代碼將被執(zhí)行，并準(zhǔn)備使用。

這種方法的主要優(yōu)點(diǎn)是，您可以下載不立即執(zhí)行的 JavaScript 代碼。由于代碼返回在<script>標(biāo)簽之外（換句話說不受<script>標(biāo)簽約束），它下載后不會(huì)自動(dòng)執(zhí)行，這使得您可以推遲執(zhí)行，直到一切都準(zhǔn)備好了。另一個(gè)優(yōu)點(diǎn)是，同樣的代碼在所有現(xiàn)代瀏覽器中都不會(huì)引發(fā)異常。

此方法最主要的限制是：JavaScript 文件必須與頁面放置在同一個(gè)域內(nèi)，不能從 CDN 下載（CDN 指"內(nèi)容投遞網(wǎng)絡(luò)（Content Delivery Network）"，所以大型網(wǎng)頁通常不采用 XHR 腳本注入技術(shù)。

回頁首

總結(jié)

減少 JavaScript 對性能的影響有以下幾種方法：

將所有的<script>標(biāo)簽放到頁面底部，也就是</body>閉合標(biāo)簽之前，這能確保在腳本執(zhí)行前頁面已經(jīng)完成了渲染。
盡可能地合并腳本。頁面中的<script>標(biāo)簽越少，加載也就越快，響應(yīng)也越迅速。無論是外鏈腳本還是內(nèi)嵌腳本都是如此。
采用無阻塞下載 JavaScript 腳本的方法：
- 使用<script>標(biāo)簽的 defer 屬性（僅適用于 IE 和 Firefox 3.5 以上版本）；
- 使用動(dòng)態(tài)創(chuàng)建的<script>元素來下載并執(zhí)行代碼；
- 使用 XHR 對象下載 JavaScript 代碼并注入頁面中。

通過以上策略，可以在很大程度上提高那些需要使用大量 JavaScript 的 Web 網(wǎng)站和應(yīng)用的實(shí)際性能。

參考資料

學(xué)習(xí)

- Steve Sounders 撰寫的高性能網(wǎng)站建設(shè)指南介紹了網(wǎng)站性能問題的現(xiàn)狀、產(chǎn)生的原因，以及改善或解決性能問題的原則、技術(shù)技巧和最佳實(shí)踐。
- Steve Sounders 撰寫的高性能網(wǎng)站建設(shè)進(jìn)階指南提供了提升網(wǎng)站性能的最佳實(shí)踐和實(shí)用建議。
- 參考了雅虎特別性能小組在 JavaScript 影響頁面下載性能方面的研究成果。
- Steve Sounders 的個(gè)人博客?HIGH PERFORMANCE WEB SITES BLOG
- “提升 web 應(yīng)用程序的性能”（developerWorks，2011 年 8 月）：找出瓶頸，加快客戶端內(nèi)容的速度。
- “全面提升 Web 2.0 應(yīng)用程序的性能，第 3 部分: 瀏覽器渲染時(shí)間分析”?（developerWorks，2010 年 2 月）：瀏覽器端頁面渲染時(shí)間的性能分析。
- developerWorks Web development?專區(qū)：通過專門關(guān)于 Web 技術(shù)的文章和教程，擴(kuò)展您在網(wǎng)站開發(fā)方面的技能。
- developerWorks Ajax 資源中心：這是有關(guān) Ajax 編程模型信息的一站式中心，包括很多文檔、教程、論壇、blog、wiki 和新聞。任何 Ajax 的新信息都能在這里找到。
- developerWorks Web 2.0 資源中心，這是有關(guān) Web 2.0 相關(guān)信息的一站式中心，包括大量 Web 2.0 技術(shù)文章、教程、下載和相關(guān)技術(shù)資源。您還可以通過?Web 2.0 新手入門欄目，迅速了解 Web 2.0 的相關(guān)概念。
- 查看?HTML5 專題，了解更多和 HTML5 相關(guān)的知識(shí)和動(dòng)向。

http://blog.csdn.net/lw61186938/article/details/12165545

轉(zhuǎn)載于:https://www.cnblogs.com/daishuguang/p/3883706.html

總結(jié)

以上是生活随笔為你收集整理的JavaScript 的性能优化：加载和执行的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： Lesson 31-32 Persona
下一篇： gradle idea java ssm