本節書摘來異步社群《響應式web設計性能優化》一書中的第2章，第2.2節，作者： 【美】tom barker 譯者： 餘紹亮 , 丁一 , 葉磊 責編： 趙軒，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。
追蹤web性能最常用和最有用的工具非瀑布圖莫屬了。瀑布圖非常直覺，可以展示構成web頁面的所有資源、加載這些資源所需的所有http事務，以及每個http請求消耗的時間。所有這些http請求都展示成條狀，一般y軸是資源的名稱或url。有的時候，資源的大小和資源的http響應狀态也會展示在y軸。x軸，或顯式或隐式地展示出所消耗的時間。
瀑布圖中的條形是按請求發生的順序繪制的（見圖2-4），條形區塊的長度表示完成事務耗時的長短。在瀑布圖的底部有時候也會看到總頁面加載時間以及總http請求數。瀑布圖的妙處之一是，從條形的排列和重疊我們也可以發現某些資源的加載是不是阻塞了其他資源的加載。
圖2-4 firebug生成的瀑布圖
現今，有許多不同的工具可以為我們建立瀑布圖。有些浏覽器提供了内置的工具，比如firefox中的firebug，或是chrome的開發者工具。也有一些免費、托管的解決方案，比如webpagetest.com。
我們來看幾個這樣的工具。
最簡單的生成瀑布圖的方法是用浏覽器自帶的工具。這類工具有好多種，但在這一點上或多或少都有些類同，至少在生成瀑布圖的方式上是相似的（有些浏覽器内置工具遠比其他一些工具有用，這一點在我們讨論web運作時性能的時候将會看到）。
firebug是首個廣為采用的浏覽器内置開發工具。以firefox插件形式存在，由joe hewitt初創，firebug确立了一項标準，不僅僅可以建立瀑布圖來展示用于加載和渲染一個頁面的網絡活動，還讓開發者可以通過控制台運作任意的javascript并展示錯誤，以及調試與單步調試浏覽器中的代碼。
注意 其他浏覽器也有可用的firebug，但一般都是簡化版，沒有提供像在firefox中那樣完整的功能。
圖2-5 firebug下載下傳頁
要在firebug中浏覽瀑布圖，點選“網絡”（net）頁籤。
自firebug出現以來，浏覽器一直在發展，到現在，最新釋出的浏覽器都内置了一些工具，至少可以度量性能的某些方面。chrome有開發者工具，internet explorer也有自己的開發者工具，opera有dragonfly。
要通路chrome中的開發者工具，可以點選chrome菜單圖示，選擇“工具-開發者工具”，如圖2-6所示。
圖2-6 通路chrome中的開發者工具
在internet explorer中，選擇“工具-開發人員工具”。
圖2-7 ios 7上httpwatch中的資源加載過程
圖2-8 ios7上httpwatch中的web性能資訊
用浏覽器内置的工具進行調試是非常不錯的，但是如果你想找一些在持續內建環境中能用的自動化解決方案，就需要擴大選擇範圍了，包括平台解決方案或無外設的解決方案。
提示
第6章我們将詳細講解無外設的測試以及持續內建。
webpagetest是一個web應用，它的輸入是一個url（以及一堆配置參數），然後對這個url運作性能測試。我們能配置的webpagetest參數的數量相當多。
可以從一組全球範圍的地點中選擇一個來運作你的測試。每個地點都有一或多個浏覽器供測試選擇。還可以指定連接配接速度以及要運作的測試數量。
webpagetest提供了有關站點整體性能的豐富資訊，不僅包括瀑布圖，還有展示給定頁面的内容分布圖表（負載的百分之多少由圖檔組成，多少由javascript組成等），模拟頁面加載到終端使用者的體驗截屏，甚至還有cpu使用率，這個在本章後面會詳講。
最重要的是，webpagetest是完全可程式設計的。它提供了一個api，可以擷取所有這些資訊。圖2-9展示了webpagetest中生成的瀑布圖。
圖2-9 webpagetest生成的一個瀑布圖
但在看web性能名額時，要看的理想值是從你自己的使用者那裡得到的真實使用者監控（real user monitoring，rum）結果。要實作這個目标，需要一個完全可程式設計的解決方案，網際網路聯盟w3c已經制定了一個标準api，可以用來捕獲和報告浏覽器内的性能資料。這是通過性能dom對象（在所有現代浏覽器中，這是一個屬于window對象的對象）來實作的。
2010年末，w3c建立了一個新的工作組，簡稱為web性能工作組（web performance working group）。據其網站描述，這個工作組的任務是提供方法來度量使用者代理特性和api的各方面應用性能。從戰略意義上這意味着該工作組開發了一個api，可以用javascript通過這個api擷取關鍵性能名額。
web性能工作組已經建立了一些新的對象和事件，不僅可以用來量化性能名額，還可以用來優化性能。下面是對這些對象和接口高層面的概述。
性能對象
這個對象對外暴露了多個對象，比如performancenavigation、performancetiming、memoryinfo，以及可以記錄亞毫米級高精度時間的能力。
頁面可見性api
這個接口讓開發者具備檢測指定頁面是處于展現狀态還是隐藏狀态的能力，這樣就可以針對如動畫效果或是輪詢操作中的網絡資源優化記憶體使用率。
如果你在javascript控制台鍵入window.performance，将會看到傳回的performance類型的對象，這個對象對外暴露了幾個對象和方法。截至本書寫作時，标準對象集有performancetiming類型的window.performance.timing、performancenavigation類型的window.performance.navigation。chrome還支援memoryinfo類型的window.performance.memory。我們将在本章稍後的“web運作時性能”部分讨論memoryinfo。
performancetiming對象對監控真實使用者名額來說最為有用。圖2-10所示為控制台中performance對象和performancetiming對象的一個截屏。
圖2-10 控制台中展示的performance對象及展開的performance.timing對象
要時刻記得，真實使用者監控的目标是擷取真實使用者的實際性能名額，而不是實驗室中人工測試或通過腳本測試獲得的模拟的性能測試名額。rum的好處在于能擷取和分析基于實際使用者的真實性能。
表2-1列出了performancetiming對象的屬性
圖2-11 性能計時事件