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

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

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

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

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

（引自dynatrace博客，中間一列為查找函數總執行時間，單位毫秒，最后一列為函數調用次數）

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

　　3.XHR調用太多

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

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

　　4.代價高昂的DOM操作

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

　　5.JavaScript文件過多

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

　　6.DOM規模龐大

　　DOM規模對頁面性能影響很大，具體表現在：

　　*占用的內存
　　*從根節點到子節點的style變化所花費的開銷
　　* IE中CSS查找的性能問題
　　* DOM遍歷操作的性能問題

　　所以，警惕你的DOM樹！

　　7.事件處理函數綁定過多

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

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

　　8.外部服務執行緩慢

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

　　9.濫用視覺效果

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

　　10.日志和監控粒度過細

　　現在存在很多優秀的日志和監控工具，但是如果把粒度設得太細（如記錄每次鼠標移動的詳情），信息的收集過程會對JavaScript引擎和網絡產生額外的負擔。

　　Web 2.0應用客戶端性能問題十大根源向大家介紹完了，原文作者Andreas Grabner不僅是Web性能診斷工具dynatrace的創始人之一，而且參與了許多企業級Web應用的性能優化項目，他總結的這些問題相信會對國內 Web開發人員帶來一定的啟示，InfoQ中文站也會繼續關注業界的最新進展。

it知識庫：Web 2.0應用客戶端性能問題十大根源，轉載需保留來源！

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。