dynaTrace之二 —— JavaScript和AJAX性能最佳實踐
原文地址：Best Practices on JavaScript and AJAX Performance
同類閱讀: dynaTrace之一 —— 網絡請求和往返的最佳實踐
dynaTrace AJAX Edition有獨一無二跟蹤頁面JS執行的能力。它還能跟蹤到瀏覽器的DOM，獲取方法的參數和返回值。下圖就是一個腳本異常的JS跟蹤圖，在PurePath視圖中：
通過JS這個級別的執行細節，很容易識別運行緩慢的js處理程序、自定義js代碼、低效的訪問DOM，代價昂貴又低效的第三方框架比如jQuery==。
標記阻塞的腳本和長時間運行的腳本
當腳本開始下載，然後瀏覽器執行，瀏覽器通常會停止所有其他下載。這個行爲很容易從newwork視圖看出來：
The dynaTrace AJAX Edition 時間軸視圖顯示了這個期間發生的詳情：
延遲加載JS文件
頁面應該儘量快地下載所有的資源以提高第一印象時間和加載時間。谷歌和雅虎建議JS置底。Google’s Best Practices谷歌的最佳實踐描述了在onLoad事件處理程序動態添加腳本標籤的JavaScript的DOM延遲加載。
優化JavaScript執行
除了又換js的加載順序，js代碼本身的效率就可以提高。dynaTrace AJAX Edition 提供了兩種視圖來分析js執行：
JavaScript/AJAX面板有點類似於Hotspot面板，分析頁面內所有的js執行，並提供彙總清單，顯示所有方法的性能。列表以腳本塊分行和外部如jQuery庫的調用。這個列表給出了改進性能的良好出發點。其中Back Trace顯示了誰引發了所選的活動，而Forward Trace顯示了這個活動出發了哪些其他的活動。點擊Back Trace或 Forward Trace中樹的節點，會在最下面顯示相關的js源代碼：
另一個有趣的視圖是PurePath視圖。它顯示了所有瀏覽器的活動，包括Script標籤或時間句柄出發了哪些js的執行，還有網絡請求和呈現的時間。TimeLine視圖下雙擊腳本執行塊或者從HotSpot視圖的方法進入PurePath視圖，顯示了具體路徑：
有這些深入的執行跟蹤，很容易識別時間花在哪兒了。PurePath視圖還顯示了實際的js代碼。糟糕的性能往往是因爲過多使用字符操作，DOM操作，用CSS選擇器查找DOM對象，本身就存在問題的第三方js庫和過多或長期運行的XHR調用。具體有以下幾點：
低效的css選擇器：具體細節參考《jQuery提升性能的代碼規範》
太多的XHR請求：使用jQuery的很容易依賴AJAX從服務器獲取額外的內容
一個典型的例子是