第一章:減少javascript對性能的影響:
</body>閉合標簽之前砸民,將所有的<script>標簽放到頁面底部抵怎。這能確保在腳本執(zhí)行前頁面已經(jīng)完成了渲染。不然<script>標簽會阻塞頁面的渲染阱洪。
合并腳本: 頁面中的<script>標簽越少便贵,加載也就越快,響應(yīng)也更迅速冗荸。無論外鏈文件還是內(nèi)嵌腳本都是如此承璃。因為每一次<script>外部文件都會有一次HTTP請求有多中無阻塞下載javascript的方法
使用defer屬性(不推薦,只有IE支持)
使用動態(tài)創(chuàng)建的<script>元素來下載并執(zhí)行代碼蚌本。
使用XHR對象下載javascript代碼并注入頁面中
第二章:數(shù)據(jù)訪問
對象成員的嵌套也會開銷系統(tǒng)資源盔粹。location.href永遠會比window.location.href快。
訪問直接量和局部變量的速度最快程癌,相反舷嗡,訪問數(shù)組元素和對象成員相對較慢。
由于局部變量存在于作用域鏈的起始位置嵌莉,因此訪問局部變量比訪問跨作用域變量更快进萄。變量在作用域鏈中的位置越深,訪問所需時間就越長。由于全局變量總處在作用域鏈的最末端中鼠,因此訪問速度也是最慢的可婶。
避免使用with語句,因為它會改變運行期上下文作用域鏈援雇。同樣矛渴,try-catch語句中的catch子句也有同樣的影響,因此要小心使用惫搏。
嵌套的對象成員會明顯影響性能具温,盡量少用
屬性或方法在原型鏈中的位置越深,訪問它的速度也越慢筐赔。
通常來說铣猩,你可以通過把常用的對象成員、數(shù)組元素川陆、跨域變量保存在局部變量中來改善javascript的性能剂习,因為局部變量訪問速度最快。
第三章:DOM編程
最小化DOM訪問次數(shù)较沪,盡可能在javascript端處理
如果需要多次訪問某個DOM節(jié)點,請使用局部變量存儲它的引用
小心處理HTML集合失仁,因為它實時聯(lián)系著底層文檔尸曼。把集合的長度緩存到一個變量中,并在迭代中使用它萄焦。如果需要經(jīng)常操作集合控轿,建議把它拷貝到一個數(shù)組中。
如果可能的話拂封,使用速度更快的API茬射,比如querySelectorAll()和firstElemengChild()
要留意重繪和重排;批量修改樣式時冒签,“離線”操作DOM樹在抛,使用緩存,并減少訪問布局信息的次數(shù)萧恕。
動畫中使用絕對定位刚梭,使用拖放代理
使用事件委托來減少事件處理器的數(shù)量
第四章:算法和流程控制
for、while和do-while循環(huán)性能相似票唆,所以沒有一種循環(huán)類型明顯快于或慢于其他類型
避免使用for-in循環(huán)朴读,除非你需要遍歷一個屬性數(shù)量未知的對象
改善循環(huán)性能的最佳方式是減少每次迭代的運算量和減少循環(huán)迭代次數(shù)
通常來說,switch總是比if-else快走趋,但并不總是最佳解決方案
在判斷條件較多時衅金,使用查找表比if-else和switch更快
瀏覽器的調(diào)用棧大小限制了遞歸算法在javascript中的應(yīng)用;棧溢出錯誤會導(dǎo)致其他代碼中斷運行
如果你遇到棧溢出錯誤,可將方法改為迭代算法氮唯,或使用Memoization來避免重復(fù)計算鉴吹。
第六章:快速響應(yīng)的用戶界面
任何javascript任務(wù)都不應(yīng)當(dāng)執(zhí)行超過100毫秒。過長的運行時間會導(dǎo)致UI更新出現(xiàn)明顯的延遲您觉,從而對用戶體驗產(chǎn)生負面的影響拙寡。
javascript運行期間,瀏覽器響應(yīng)用戶交互的行為存在差異琳水。無論如何肆糕,javascript長時間運行將導(dǎo)致用戶體驗變得混亂和脫節(jié)
定時器可用來安排代碼延遲執(zhí)行,它使得你可以把長時間運行的腳本分解成一系列的小任務(wù)
Web workers是新版瀏覽器支持的特性在孝,它允許你在UI線程外部執(zhí)行javascript代碼诚啃,從而避免鎖定UI
第七章:Ajax
作為數(shù)據(jù)格式,純文本和HTML只適用于特定場合私沮,但它們可以節(jié)省客戶端的CPU周期始赎。XML被廣泛應(yīng)用而且支持良好,但是它十分笨重且解析緩慢仔燕。JSON是輕量級的造垛,解析速度快(被視為原生代碼而不是字符串),通用性與XML相當(dāng)晰搀。字符分隔的自定義格式十分輕量五辽,在解析大量數(shù)據(jù)集時非常快外恕,但需要編寫額外的服務(wù)端構(gòu)造程序杆逗,并在客戶端解析。
當(dāng)從頁面當(dāng)前所處的域下請求數(shù)據(jù)時鳞疲,XHR提供了最完善的控制和靈活性罪郊,盡管它會把接收到的所有數(shù)據(jù)當(dāng)成一個字符串,且這有可能降低解析速度尚洽。另一方面悔橄,動態(tài)腳本注入允許跨域請求和本地執(zhí)行javascript和JSON但是它的接口不那么安全,而且還不能讀取頭信息或相應(yīng)代碼翎朱。Multipart XHR可以用來減少請求數(shù)橄维,并處理一個響應(yīng)中的各種文件類型,但是它不能緩存接收到的響應(yīng)拴曲。當(dāng)需要發(fā)送數(shù)據(jù)時争舞,圖片信標是一種簡單而有效的方法。XHR還可以用POST方法發(fā)送大量數(shù)據(jù)澈灼。
除了這些格式和傳輸技術(shù)竞川,還有一些準則有助于加速你的Ajax減少請求數(shù)店溢,可通過合并javascript和CSS文件,或使用MXHR
縮短頁面的加載時間委乌,頁面主要內(nèi)容加載完成后床牧,用Ajax獲取那些次要的文件
確保你的代碼錯誤不會輸出給用戶,并在服務(wù)端處理錯誤
指導(dǎo)何時使用成熟的Ajax類庫遭贸,以及何時編寫自己的底層Ajax代碼
第八章:編程實踐
通過避免使用eval()和Function()構(gòu)造器來避免雙重求值帶來的性能消耗戈咳。同樣的,給setTimeout()和setInterval()傳遞函數(shù)而不是字符串作為參數(shù)
盡量使用直接量創(chuàng)建對象和數(shù)組壕吹。直接量的創(chuàng)建和初始化都比非直接量形式要快
避免做重復(fù)的工作著蛙。當(dāng)需要檢測瀏覽器時,可使用延遲加載或條件預(yù)加載
在進行數(shù)學(xué)計算時耳贬,考慮使用直接操作數(shù)字的二進制形式的位運算
javascript的原生方法總會比你寫的任何代碼都要快踏堡。盡量使用原生的方法
第九章:構(gòu)建并部署高性能javascript應(yīng)用
合并javascript文件以減少HTTP請求數(shù)
使用YUN Compressor壓縮javascript文件
在服務(wù)器端壓縮javascript文件(Gzip編碼)
通過正確設(shè)置HTTP響應(yīng)頭來緩存javascript文件,通過向文件名增加時間戳來避免緩存問題
使用CDN提供javascript文件咒劲,CDN不僅可以提升性能顷蟆,它也為你管理文件的壓縮與緩存