前端性能指标分析-Start Render、DOM Ready、Page Load、TTI
了解前端性能监控，做好前端性能优化，需要知道一些概念东东。从用户体验出发的几个核心时间指标包括：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。而要向最理想状态靠近的方法则正是前面提到的几条优化原则。
