了解前端性能監控，做好前端性能優化，需要知道一些概念東東。從用戶體驗出發的幾個核心時間指標包括：Start Render、DOM Ready、Page Load、TTI。不同的性能指標對用戶體驗的影響是不同的，而指標本身受哪些因素的影響也是不同的。
一、Start Render
定義
Start Render，顧名思義指的是瀏覽器開始渲染的時間，從用戶角度出發則可以定義為用戶在頁面上看到的第一個內容的時間。
用戶體驗
該時間決定着用戶對頁面的第一體驗時機，如果時間越短給用戶的體驗則是頁面速度越快，這樣用戶等待其余內容展現的耐心也會更大一些。如果時間過長，則用戶會在長時間內面對的都是一個空白的頁面，這對用戶的耐心將是一個考驗。總的來說，Start Render時間是越短越好，而且是非常關鍵的指標。
影響因素
要想知道Start Render時間受哪些因素的影響，首先要知道這個時間是怎么計算的。歸納一下，大概可以用以下這個公式來表示：
Time To Start Render = TTFB + TTDD + TTHE
其中：
TTFB(Time To First Byte)：發起請求到服務器返回數據的時間
TTDD(Time To Document Download)：從服務器加載HTML文檔的時間
TTHE(Time To Head End)：HTML文檔頭部解析完成所需要的時間
通過以上公式可以看到Start Render主要受以下因素影響(開發人員可控)：
(1) 服務器響應時間
(2) HTML文檔的大小
(3) Head中資源使用情況
二、DOM Ready
定義
DOM Ready，指的是頁面解析完成的時間，在高級瀏覽器里有對應的DOM事件 - DOMContentLoaded，Firefox官方的解析如下：
Fired at the page’s Document object when parsing of the document is finished. By the time this event fires, the page’s DOM is ready, but the referenced stylesheets, images, and subframesmay not be done loading; use the "load" event to detect a fully-loaded page.
即該事件在文檔解析完成時會觸發。那么文檔解析到底包括哪些操作呢？雖然暫不能給出一個完全的答案，但文檔的解析至少應該包括以下操作：HTML文檔分析以及DOM樹的創建、外鏈腳本的加載、外鏈腳本的執行以及內聯腳本的執行，但是不包括圖片、iframe等其它資源的加載。正因為如此，該事件觸發的時機一般比window.onload要早，而且是在所有DOM元素都可以操作之時。
目前，HTML5也對該事件進行了規范，IE9也開始支持該事件了。
用戶體驗
Start Render指標直接決定着用戶對頁面速度的體驗，與此不同，DOM Ready指標並不直接影響感官體驗，往往影響的是交互功能何時可用。為何影響的是交互呢？由於DOMContentLoaded事件觸發時是所有DOM節點可以進行操作的時候，比如添加事件、增刪改節點等，因此用Javascript實現的一些交互功能往往會在DOMContentLoaded事件中去初始化，也只有在DOMContentLoaded事件觸發后這項功能才可用。
所以說DOM Ready指標影響的是交互功能的最早可用時間，DOM Ready時間如果過長的話，用戶會發現頁面已經出來了，但是很多功能卻是不可用的，也許點擊某個鏈接會跳到頁面頂部。因此，DOM Ready時間也是越短越好，這樣交互功能才能盡早可用。
影響因素
先來看看一個粗略的時間組成公式：
Time To Dom Ready = TTSR + TTDC + TTST
其中：
TTSR(Time To Start Render)：瀏覽器開始渲染的時間
TTDC(Time To Dom Created)：DOM樹創建所耗時間
TTST(Time To Script)：BODY中所有腳本加載和執行的時間
通過以上公式可以看到Start Render主要受以下因素影響(開發人員可控)：
(1) DOM結構的復雜程度
(2) BODY中腳本使用情況
通過對一些實際監控數據的分析得出，在一個通過正常方式加載腳本的頁面中，腳本的加載和執行時間往往能占DOM Ready時間的50%左右，由此可見腳本的使用對DOM Ready指標的影響如何的顯著！因此，對DOM Ready指標的優化也應該着重從腳本的使用入手。
三、Page Load
定義
Page Load時間指的就是window.onload事件觸發的時間。與DOM Ready時間相比，Page Load的時間往往要更靠后一些，因為Page Load不僅僅是HTML文檔解析完畢還包括了所有資源加載所需要的時間，例如圖片資源的加載、iframe的加載等。
用戶體驗
大家可能覺得Page Load時間長一點無關緊要，實際上該指標從以下兩方面影響着用戶體驗：
(1). window.onload事件觸發的時間(Page Load)也就是所有資源加載完成的時間，該時間越長意味着用戶需要等待越久才能看見某些內容，例如圖片，這些內容也許並不是最總要的，但這是一個完整頁面的組成部分，這部分內容如果加載過慢，也會在一定程度上影響用戶對頁面完整性的體驗。
(2). window.onload事件在觸發前，如果有資源正在加載，例如腳本、圖片，則瀏覽器都會以某種方式告訴你正在加載資源。不同的瀏覽器有着不同的方式，例如IE6等非Tab瀏覽方式的瀏覽器會在狀態欄給予進度提示，而例如Firefox等Tab類型的瀏覽器一方面會在狀態欄給予提示，另一方面還會在Tab上顯示加載中的狀態。Page Load的時間越久，這些狀態顯示的時間也就越久，因此會影響用戶對頁面整體速度的體驗。
影響因素
(1) window.onload事件總是在DOM Ready之后才會觸發，因此，DOM Ready指標的影響因素也都會影響Page Load。
(2) 鑒於window.onload事件要等到所有資源加載完成后才會觸發，因此資源加載的時間越長則Page Load的時間越長。如果沒有任何外鏈資源，則Page Load時間與DOM Ready時間幾乎是相等的，隨着圖片等資源的增加，Page Load與DOM Ready的差距也會越來越大。（外鏈腳本除外，因為外鏈腳本也同樣會增加DOM Ready時間）
四、TTI
定義
TTI(Time To Interact)指的是頁面可交互的時間。頁面中的交互包括很多方面，例如點擊一個鏈接、點擊一個搜索按鈕都屬於頁面交互的范疇，但是對於衡量性能的TTI則主要指核心功能可以交互的時間。核心功能的定義則是隨着頁面的不同而不同，例如對於百度首頁而言，最為關鍵的就是搜索框出現的時間、而對於一些購物網站的商品詳情頁最關鍵的是購買功能可用和描述出現的時間。而目前的實際情況，TTI大都等於DOM Ready時間，因為不論交互功能是否重要，相關的Javascript都會在DOM Ready后才進行初始化和綁定，而實際上TTI是可以更早的。
用戶體驗
通過TTI的定義可以知道，TTI的長短對於用戶體驗的影響是十分重要的，它影響着用戶對核心功能的使用。
影響因素
(1) Start Render時間 - 只有內容渲染出來了，才可以談交互，因此渲染時間的快與慢會直接影響TTI時間。
(2) 核心功能相關HTML元素的顯示時間 - 決定着核心功能可見的時間
(3) 核心功能相關Javascript功能的綁定時間 - 決定着核心Javascript功能可交互的時間
監控方式
沒有固定的監控方式，依頁面而定，如果核心模塊無腳本那么計算核心模塊解析完成的時間即可；如果核心模塊有相關腳本則需要計算腳本加載和綁定完成的時間。
優化方法
TTI依賴於Start Render時間，因此對Start Render指標的優化方法同樣適用於TTI，請參考本篇文章>>。
(2) 將核心功能的HTML文檔盡量放置在BODY前部
目前在切頁面的時候，大多數都會注意這個問題，例如主體內容會靠前而側邊欄或廣告欄則會放在主體內容之后。
(3) 預加載核心功能的內容
有些核心功能並不一定就能放置在BODY前部，此時則可以考慮在更靠前的位置使用預加載的方式提前將核心功能載入，這樣也可以加快核心功能的展現速度。
(4) 盡早做核心功能Javascript初始化和綁定
目前大多數做法是在DOM Ready中做所有Javascript的初始化和功能綁定，也有一部分是在頁面底部進行的，這兩種方式的優點在於簡單，不需要關注具體DOM結點的位置；缺點則在於初始化的時間太晚，因為DOM Ready受頁面中資源尤其是外鏈Javascript的影響，時間上沒有保證，如果Javascript加載時間過長則用戶需要等待很長一段時間才能真正的進行交互。
因此，可以考慮將Javascript的初始化提前到相關DOM元素建立起來后進行，例如將初始化的操作直接放置在元素之后進行。
與其他指標的關系
Start Render、DOM Ready、Page Load三個指標實際上就是瀏覽器進行頁面處理的三個階段，最新開始的是Start Render，之后是DOM Ready，最后是Page Load。重要程度也可以從重要到不重要以此順序排列。而TTI本身並不與瀏覽器的處理相關，它只是一個業務邏輯上的性能指標。與其他幾個時間相比大致是這樣的關系：
Start Render <= TTI <= DOM Ready <= Page Load
即TTI最理想的狀況是等於Start Render，最糟糕的狀態也應該等於DOM Ready。而要向最理想狀態靠近的方法則正是前面提到的幾條優化原則。