Web 2.0應(yīng)用的推廣為用戶帶來了全新的體驗，同時也讓開發(fā)人員更加關(guān)注客戶端性能問題。最近，資深Web性能診斷專家、知名工具dynatrace的創(chuàng)始人之一Andreas Grabner根據(jù)自己的工作經(jīng)驗，總結(jié)了Web 2.0應(yīng)用客戶端性能問題十大根源，InfoQ中文站將這十個問題做了概括整理，供Web開發(fā)人員借鑒和思考。

1. IE中的CSS選擇器（selector）運行緩慢

Web開發(fā)人員通常使用JavaScript框架（如jQuery）提供的CSS選擇器來實現(xiàn)查找功能，如var element = $(“.shoppingcart”)，但是IE 6和7沒有提供這種查找方法的原生實現(xiàn)。所以，JavaScript框架不得不通過遍歷整個DOM樹來達到目的。這種方式花費的時間比在其他瀏覽器中的消耗要多得多，而且嚴重依賴于DOM樹的規(guī)模。IE 8對CSS查找提供了較好的支持，所以Web人員最好升級相應(yīng)的JavaScript框架版本以利用這些新特性。

2.針對相同對象重復進行CSS查找

正如第一點所說，單個CSS查找代價高昂，在這種情況下，如果還要對相同的對象進行多次重復查找，那性能問題就可想而知了。下圖是一個典型的Web頁面中CSS查找功能調(diào)用統(tǒng)計結(jié)果：

對于這種問題，Andreas Grabner建議將第一次查找的結(jié)果保存到變量中，在以后需要的時候重用即可，不必再重復進行查找。

3.XHR調(diào)用太多

JavaScript和XmlHttpRequest是AJAX技術(shù)的基礎(chǔ)，很多JavaScript框架都提供了非常方便的使用方法，Web開發(fā)人員會充分利用其異步通信優(yōu)勢來實現(xiàn)諸如分頁加載等效果，避免對整個頁面的操作。

Andreas Grabner根據(jù)自己的經(jīng)驗指出，他發(fā)現(xiàn)這種方式被濫用了——過多的信息通過過多的調(diào)用來動態(tài)訪問。例如，在一個顯示10種商品的頁面中，開發(fā)人員可能想分別加載每種商品的詳細信息。這意味著，你需要和服務(wù)器端進行10次交流才能得到全部信息，也會對后臺系統(tǒng)產(chǎn)生壓力。他建議，在這種情況下，把10次調(diào)用合并成1次來減少通信壓力。

4.代價高昂的DOM操作

操作DOM是網(wǎng)頁交互性的必要技術(shù)。拿添加DOM元素來說，存在多種實現(xiàn)方式，每種方式因為不同的瀏覽器類型和元素數(shù)量大小帶來的性能影響也各不相同。建議大家仔細分析比較不同的方法，采用適合自身情況的技術(shù)。

5.JavaScript文件過多

Andreas Grabner說，對于一個典型的網(wǎng)站來說，存在超過40個單獨的JavaScript文件并不少見。他指出，JavaScript文件過多帶來兩個問題：一是瀏覽器在加載這些文件時需要通過JavaScript引擎切換上下文運行環(huán)境，二是因為下載文件而帶來額外的網(wǎng)絡(luò)通信。解決方法是：減少JavaScript文件數(shù)量！

6.DOM規(guī)模龐大

DOM規(guī)模對頁面性能影響很大，具體表現(xiàn)在：

• 占用的內(nèi)存
• 從根節(jié)點到子節(jié)點的style變化所花費的開銷
• IE中CSS查找的性能問題
• DOM遍歷操作的性能問題

所以，警惕你的DOM樹！

7.事件處理函數(shù)綁定過多

對于Web開發(fā)人員來說，綁定事件處理函數(shù)是日常工作之一。Andreas Grabner提醒大家關(guān)注其對性能的影響：

• 綁定操作本身消耗時間（如查找對象、注冊事件管理器等）。
• 當事件被觸發(fā)時，事件管理器需要查找注冊該事件的元素，并調(diào)用正確的事件處理函數(shù)。
• 在切換頁面時，要記住對事件解綁，避免DOM相關(guān)的內(nèi)存泄露問題。

8.外部服務(wù)執(zhí)行緩慢

很多網(wǎng)頁都嵌入了外部內(nèi)容（如廣告欄等）或者調(diào)用外部服務(wù)，Web開發(fā)人員通常需要在頁面中包含由第三方提供商發(fā)布的JavaScript文件，而通常這些文件中就存在前面所提到的性能問題，我們需要擦亮眼睛，如果有問題要反饋給第三方供應(yīng)商讓其修改優(yōu)化。

9.濫用視覺效果

很多JavaScript框架都提供了絢麗的視覺特效，如動態(tài)彈出表單等，一些方法在示例代碼中運行良好，但是在實際的頁面中特別是DOM規(guī)模較大時表現(xiàn)不盡人意。Andreas Grabner建議Web開發(fā)人員在引入視覺效果時關(guān)注其對瀏覽器CPU、渲染引擎和整個網(wǎng)站性能的負面影響。

10.日志和監(jiān)控粒度過細

現(xiàn)在存在很多優(yōu)秀的日志和監(jiān)控工具，但是如果把粒度設(shè)得太細（如記錄每次鼠標移動的詳情），信息的收集過程會對JavaScript引擎和網(wǎng)絡(luò)產(chǎn)生額外的負擔。

Web 2.0應(yīng)用客戶端性能問題十大根源向大家介紹完了，原文作者Andreas Grabner不僅是Web性能診斷工具dynatrace的創(chuàng)始人之一，而且參與了許多企業(yè)級Web應(yīng)用的性能優(yōu)化項目，他總結(jié)的這些問題相信會對國內(nèi)Web開發(fā)人員帶來一定的啟示。