本節書摘來異步社群《響應式web設計性能優化》一書中的第2章，第2.3節，作者： 【美】tom barker 譯者： 餘紹亮 , 丁一 , 葉磊 責編： 趙軒，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。
正如我們已經讨論過的，web性能跟蹤的是内容傳遞到使用者的耗時。現在來看看web運作時性能，它跟蹤的是使用者與應用互動時應用的行為。
對于傳統的編譯類型應用，運作時性能是有關記憶體管理、垃圾回收以及線程等各個方面的。這是因為編譯類的應用運作在核心之上，直接使用系統資源。
在用戶端運作web應用與運作編譯類應用是大不相同的。這是因為web應用運作在沙盒中，或者，說得更具體點，是運作在浏覽器中。當它們運作的時候，用的是浏覽器的資源。而浏覽器是運作在它事先從核心中配置設定的記憶體資源中的。是以，當我們提到web運作時性能，我們實際上說的是應用是怎樣在用戶端的浏覽器運作，以及讓浏覽器在虛拟記憶體中其自身的記憶體裡執行。圖2-12是web應用在常駐記憶體中的浏覽器記憶體裡運作的情況。
圖2-12 一個web應用運作在常駐記憶體中的浏覽器預配置設定記憶體中
下面是我們需要考慮到的影響web運作時性能的因素。
記憶體管理與垃圾回收
首先要看的是，我們有沒有因為太多無用的對象以及建立更多對象時卻仍保留這些無用對象而導緻浏覽器的記憶體配置設定被阻塞。随着時間推移，我們是否有什麼機制限制javascript中的對象建立，或應用用的越多越久時，記憶體消耗是否也越多？是否存在記憶體洩露？
回收無用對象可能會導緻浏覽器在渲染或播放動畫的時候暫停，容易在使用者體驗上出現鋸齒現象。我們可以通過減少建立的對象數量以及盡可能重用已有對象來将垃圾回收次數降到最少。
布局
我們更新dom的時候是否引發了頁面重繪？這一般是由于大範圍的樣式變化，需要渲染引擎重新計算頁面元素的大小與位置。
高代價的繪制
當使用者滾動頁面時，我們有沒有因為繪制一些區域而加重浏覽器的負擔？動畫效果或是更新除了位置、縮放、旋轉或透明度之外的任意元素屬性，都将引起渲染引擎重繪對應元素并消耗時間。位置、縮放、旋轉以及透明度是渲染引擎最後配置的元素屬性，是以，更新這些屬性隻需極小的開銷。
如果我們在寬度、高度、背景或者其他屬性上使用動畫，渲染引擎就需要重新考慮頁面的布局并且重繪那個元素，這就會在渲染和動畫過程中消耗更多的時間。更糟的是，如果我們引起了父元素的重繪，渲染引擎就需要重繪所有的子元素，嚴重影響運作時性能。
同步調用
我們會在等待同步調用傳回的時候阻塞使用者的動作嗎？當在操作複選框或其他方式接受輸入後更新服務端的狀态，再等待确認對應的更新操作已完成時，就會經常發生這樣的事情。這會讓頁面感覺起來有些卡頓。
cpu占用率
浏覽器渲染頁面和執行用戶端代碼需要多大負載？
我們要檢視的web運作時性能名額是每秒的幀數和cpu的占用率。
每秒幀數
fps還是浏覽器的一個重要性能名額，因為其反映出了動畫運作以及視窗滾動的平滑程度。滾動時出現鋸齒（卡頓）已經是web性能問題的一個明顯标志。
在google chrome中監控fps
google在建立浏覽器内置工具追蹤運作時性能方面在目前已是領頭羊。其内置開發工具中已經包含了追蹤fps的能力。點選rendering頁籤，然後選中“show fps meter”複選框，就可以看到（見圖2-13）。
圖2-13 在chrome開發者工具中啟用fps meter
在浏覽器的右上方會出現一個小的時間數列圖，顯示了目前fps以及每秒幀數的趨勢，如圖2-14所示。使用這個工具，可以顯式地追蹤你的頁面在實際使用過程中的執行情況。
圖2-14 chrome的fps meter，位于web頁面的右上角
雖然fps meter是很好的追蹤每秒幀數的工具，但迄今為止，對在幀率方面體驗下降進行調試的最有用的工具還是timeline工具，這個也是chrome開發者工具中的一員（見圖2-15）。
圖2-15 frames模式下的chrome timeline工具
用timeline工具，可以追蹤以及分析浏覽器運作的時候都幹了些什麼。它提供了3個操作模式：frames、events以及memory。我們來看一下frames模式。
frames模式
這個模式下，timeline工具展示了web應用的渲染性能。圖2-15是frames模式的螢幕布局。
在timeline工具中可以看到兩個不同的窗格。頂部窗格展示的是活動模式（位于左手邊），裡面包含了一系列代表幀的豎條。底部窗格是frames視圖，這裡展現的是形似瀑布的水準條狀，标示了某個給定動作在幀裡耗費的時長。在左邊有對應動作的描述。在frames視圖的最右邊是一個餅圖，展示了在給定幀中最耗時動作的分類。所包含的動作如下所示。
圖2-15展現出運作javascript耗去了将近一半的時間，1.02秒中占了525毫秒。
使用timeline工具，在frames模式下，通過在frames視圖下找到最長的條，就能輕易地确定對幀率影響最大的動作。
記憶體分析
記憶體分析是監控我們應用所用到的記憶體消耗模式的一種方法。這對檢測記憶體洩露與不會銷毀的對象建立非常有用——javascript中，當我們用程式為dom對象指定事件處理器，而後又忘記将事件處理器移除時尤為常見。更進一步，記憶體分析對優化記憶體占用也甚為有用。對象的建立、銷毀與重用應當是智能的，要時刻注意，不要讓剖析圖中不斷增加的一系列峰值呈上升趨勢。圖2-16描繪的是javascript堆。
圖2-16 javascript堆中的對象
雖然浏覽器内置的功能遠比之前強大，但這仍是一個需要擴大和規範化的領域。迄今為止，google已經做了很多，讓開發者可以用上浏覽器内置的記憶體管理工具。
memoryinfo對象
在chrome已有的記憶體管理工具中，首先我們要看的是memoryinfo對象，它存在于performance對象中。圖2-17的截圖中展示了一個控制台視圖。
圖2-17 memoryinfo對象
可以像這樣通路memoryinfo對象。
表2-2展示出了與memoryinfo相關的堆屬性。
這些屬性指出了可用和已用的javascript堆。堆是解釋器儲存在駐留記憶體中的javascript對象集合。在堆中，每個對象都是互有關聯的節點，它們是通過諸如原型鍊或組合對象等屬性連接配接起來的。浏覽器中運作的javascript是通過對象引用來使用堆中對象的。當要銷毀javascript中的一個對象，實際要做的就是銷毀那個對象的引用。當解釋器發現堆中對象不再有對象引用時，垃圾收集器将會從堆中移除這些對象。
用memoryinfo對象，我們可以擷取使用者群與記憶體消耗相關的rum資料，也可以在實驗室裡追蹤這些名額，好在代碼産品化之前發現潛在的記憶體問題。
timeline工具
除了提供frames模式來調試web應用幀率之外，chrome的timeline工具還有memory模式（如圖2-18所示），能可視化地觀察随時間變化的應用記憶體使用情況，并且會顯示文檔、dom節點以及留在記憶體中的事件監聽器的數量。
圖2-18 memory模式下的chrome timeline工具
頂部視窗展示的是記憶體剖析圖，最底部的視窗展示了文檔、節點以及監聽器的數量。注意看，藍色陰影區顯示了記憶體使用率，可視化地展示了堆記憶體使用量。随着更多對象被建立，記憶體使用率也一直上升；當這些對象被銷毀并被垃圾收集掉後，記憶體使用率就下降了。
firefox也開始開放記憶體使用資料，可以通過“about:memory”頁面看到，firefox的實作更多的還是通過靜态資訊頁的方式而不是暴露一組api。正因為如此，它無法容易地插入程式中生成經驗資料，about:memory頁面更像是為firefox使用者（盡管是進階使用者）設計的，而不是作為運作時性能管理的開發者工具集的一部分。
要在firefox中通路“about:memory”頁面，在浏覽器的位址欄裡鍵入about:memory。圖2-19展示了這個頁面的樣子。
圖2-19 firefox的about:memory頁面
如圖2-19所示，可以看到以作業系統級别展示的浏覽器配置設定的記憶體，以及浏覽器打開的每個頁面的堆配置設定情況。