Web 2.0應(yīng)用的推廣為用戶帶來了全新的體驗(yàn)，同時(shí)也讓開發(fā)人員更加關(guān)注客戶端性能問題。最近，資深Web性能診斷專家、知名工具dynatrace的創(chuàng)始人之一Andreas Grabner根據(jù)自己的工作經(jīng)驗(yàn)，總結(jié)了Web 2.0應(yīng)用客戶端性能問題十大根源，InfoQ中文站將這十個(gè)問題做了概括整理，供Web開發(fā)人員借鑒和思考。
1. IE中的CSS選擇器（selector）運(yùn)行緩慢
Web開發(fā)人員通常使用JavaScript框架（如jQuery）提供的CSS選擇器來實(shí)現(xiàn)查找功能，如var element = $(“.shoppingcart”)，但是IE 6和7沒有提供這種查找方法的原生實(shí)現(xiàn)。所以，JavaScript框架不得不通過遍歷整個(gè)DOM樹來達(dá)到目的。這種方式花費(fèi)的時(shí)間比在其他瀏覽器中的消耗要多得多，而且嚴(yán)重依賴于DOM樹的規(guī)模。IE 8對CSS查找提供了較好的支持，所以Web人員最好升級相應(yīng)的JavaScript框架版本以利用這些新特性。
2.針對相同對象重復(fù)進(jìn)行CSS查找
正如第一點(diǎn)所說，單個(gè)CSS查找代價(jià)高昂，在這種情況下，如果還要對相同的對象進(jìn)行多次重復(fù)查找，那性能問題就可想而知了。下圖是一個(gè)典型的Web頁面中CSS查找功能調(diào)用統(tǒng)計(jì)結(jié)果：
對于這種問題，Andreas Grabner建議將第一次查找的結(jié)果保存到變量中，在以后需要的時(shí)候重用即可，不必再重復(fù)進(jìn)行查找。
3.XHR調(diào)用太多
JavaScript和XmlHttpRequest是AJAX技術(shù)的基礎(chǔ)，很多JavaScript框架都提供了非常方便的使用方法，Web開發(fā)人員會充分利用其異步通信優(yōu)勢來實(shí)現(xiàn)諸如分頁加載等效果，避免對整個(gè)頁面的操作。
Andreas Grabner根據(jù)自己的經(jīng)驗(yàn)指出，他發(fā)現(xiàn)這種方式被濫用了——過多的信息通過過多的調(diào)用來動態(tài)訪問。例如，在一個(gè)顯示10種商品的頁面中，開發(fā)人員可能想分別加載每種商品的詳細(xì)信息。這意味著，你需要和服務(wù)器端進(jìn)行10次交流才能得到全部信息，也會對后臺系統(tǒng)產(chǎn)生壓力。他建議，在這種情況下，把10次調(diào)用合并成1次來減少通信壓力。
4.代價(jià)高昂的DOM操作
操作DOM是網(wǎng)頁交互性的必要技術(shù)。拿添加DOM元素來說，存在多種實(shí)現(xiàn)方式，每種方式因?yàn)椴煌臑g覽器類型和元素?cái)?shù)量大小帶來的性能影響也各不相同。建議大家仔細(xì)分析比較不同的方法，采用適合自身情況的技術(shù)。
5.JavaScript文件過多
Andreas Grabner說，對于一個(gè)典型的網(wǎng)站來說，存在超過40個(gè)單獨(dú)的JavaScript文件并不少見。他指出，JavaScript文件過多帶來兩個(gè)問題：一是瀏覽器在加載這些文件時(shí)需要通過JavaScript引擎切換上下文運(yùn)行環(huán)境，二是因?yàn)橄螺d文件而帶來額外的網(wǎng)絡(luò)通信。解決方法是：減少JavaScript文件數(shù)量！
6.DOM規(guī)模龐大
DOM規(guī)模對頁面性能影響很大，具體表現(xiàn)在：
所以，警惕你的DOM樹！
7.事件處理函數(shù)綁定過多
對于Web開發(fā)人員來說，綁定事件處理函數(shù)是日常工作之一。Andreas Grabner提醒大家關(guān)注其對性能的影響：
8.外部服務(wù)執(zhí)行緩慢
很多網(wǎng)頁都嵌入了外部內(nèi)容（如廣告欄等）或者調(diào)用外部服務(wù)，Web開發(fā)人員通常需要在頁面中包含由第三方提供商發(fā)布的JavaScript文件，而通常這些文件中就存在前面所提到的性能問題，我們需要擦亮眼睛，如果有問題要反饋給第三方供應(yīng)商讓其修改優(yōu)化。
9.濫用視覺效果
很多JavaScript框架都提供了絢麗的視覺特效，如動態(tài)彈出表單等，一些方法在示例代碼中運(yùn)行良好，但是在實(shí)際的頁面中特別是DOM規(guī)模較大時(shí)表現(xiàn)不盡人意。Andreas Grabner建議Web開發(fā)人員在引入視覺效果時(shí)關(guān)注其對瀏覽器CPU、渲染引擎和整個(gè)網(wǎng)站性能的負(fù)面影響。
10.日志和監(jiān)控粒度過細(xì)
現(xiàn)在存在很多優(yōu)秀的日志和監(jiān)控工具，但是如果把粒度設(shè)得太細(xì)（如記錄每次鼠標(biāo)移動的詳情），信息的收集過程會對JavaScript引擎和網(wǎng)絡(luò)產(chǎn)生額外的負(fù)擔(dān)。
Web 2.0應(yīng)用客戶端性能問題十大根源向大家介紹完了，原文作者Andreas Grabner不僅是Web性能診斷工具dynatrace的創(chuàng)始人之一，而且參與了許多企業(yè)級Web應(yīng)用的性能優(yōu)化項(xiàng)目，他總結(jié)的這些問題相信會對國內(nèi)Web開發(fā)人員帶來一定的啟示。
