作者 Mark 'Tarquin' Wilton-Jones · 2006年11月2日

本文翻譯自 Efficient JavaScript

原譯文地址 http://kb.operachina.com/node/207

傳統(tǒng)上，網(wǎng)頁中不會(huì)有大量的腳本，至少腳本很少會(huì)影響網(wǎng)頁的性能。但隨著網(wǎng)頁越來越像 Web 應(yīng)用程序，腳本的效率對(duì)網(wǎng)頁性能影響越來越大。而且使用 Web 技術(shù)開發(fā)的應(yīng)用程序現(xiàn)在越來越多，因此提高腳本的性能變得很重要。

對(duì)于桌面應(yīng)用程序，通常使用編譯器將源代碼轉(zhuǎn)換為二進(jìn)制程序。編譯器可以花費(fèi)大量時(shí)間優(yōu)化最終二進(jìn)制程序的效率。Web 應(yīng)用程序則不同。因?yàn)閃eb應(yīng)用程序需要運(yùn)行在不同的瀏覽器、平臺(tái)和架構(gòu)中，不可能事先完全編譯。瀏覽器在獲得腳本后要執(zhí)行解釋和編譯工作。用戶要求不僅要求網(wǎng)頁能快速的載入，而且要求最終 Web 應(yīng)用程序執(zhí)行的效果要和桌面應(yīng)用程序的一樣流暢。Web 應(yīng)用程序應(yīng)能運(yùn)行在多種設(shè)備上，從普通的桌面電腦到手機(jī)。

瀏覽器并不很擅長(zhǎng)此項(xiàng)工作。雖然 Opera 有著當(dāng)前最快的腳本引擎，但瀏覽器有不可避免的局限性，這時(shí)就需要 Web 開發(fā)者的幫助。Web開發(fā)者提高 Web 應(yīng)用程序的性能的方法很多而且也很簡(jiǎn)單，如只需要將一種循環(huán)變成另一種、將組合樣式分解成三個(gè)或者只添加實(shí)際需要的腳本。

本文從 ECMAScript/JavaScript, DOM, 和頁面載入方面分別介紹幾種簡(jiǎn)單的能提高 Web 應(yīng)用程序性能的方法。

目錄

ECMAScript

避免使用 eval 或 Function 構(gòu)造函數(shù)
重寫 eval 如果你需要函數(shù)，那就用函數(shù)
避免使用 with 不要在影響性能的關(guān)鍵函數(shù)中使用 try-catch-finally 分隔 eval 和 with 避免使用全局變量 注意隱式對(duì)象轉(zhuǎn)換 在關(guān)鍵函數(shù)中避免 for-in 優(yōu)化 string 合并 基本運(yùn)算符比函數(shù)調(diào)用更快 向 setTimeout() 和 setInterval()傳送函數(shù)名，而不要傳送字符串

DOM

重繪和 reflow
減少 reflow 次數(shù) 最小化 reflow 影響
修改 DOM 樹 修改不可見元素 測(cè)量大小 一次修改多個(gè)樣式值 用流暢性換取速度 避免搜索大量節(jié)點(diǎn) 使用 XPath 提高速度 避免在遍歷 DOM 時(shí)修改 DOM 使用變量保存 DOM 值

頁面載入

避免保存來自其他文檔的引用 快速歷史瀏覽 使用 XMLHttpRequest 動(dòng)態(tài)創(chuàng)建 SCRIPT 元素 location.replace() 控制歷史項(xiàng)

ECMAScript

避免使用 eval 或 Function 構(gòu)造函數(shù)

每次 eval 或 Function 構(gòu)造函數(shù)作用于字符串表示的源代碼時(shí)，腳本引擎都需要將源代碼轉(zhuǎn)換成可執(zhí)行代碼。這是很消耗資源的操作 —— 通常比簡(jiǎn)單的函數(shù)調(diào)用慢100倍以上。