如何在持续升级的项目中保持项目的高性能？如何更加准确的定位和解决性能问题？实际上，WPO的最主要目的是改善用户体验，而用户体验的好坏则可以根据几个核心性能指标来衡量。从用户体验出发的几个核心时间指标包括：Start Render、DOM Ready、Page Load、TTI。不同的性能指标对用户体验的影响是不同的，而指标本身受哪些因素的影响也是不同的。优化某个指标又该具体采用什么样的方式？接下来将一一介绍，本文集中介绍TTI。

定义

        TTI(Time To Interact)指的是页面可交互的时间。页面中的交互包括很多方面，例如点击一个链接、点击一个搜索按钮都属于页面交互的范畴，但是对于衡量性能的TTI则主要指核心功能可以交互的时间。核心功能的定义则是随着页面的不同而不同，例如对于百度首页而言，最为关键的就是搜索框出现的时间、而对于一些购物网站的商品详情页最关键的是购买功能可用和描述出现的时间。而目前的实际情况，TTI大都等于DOM Ready时间，因为不论交互功能是否重要，相关的Javascript都会在DOM Ready后才进行初始化和绑定，而实际上TTI是可以更早的。

用户体验

        通过TTI的定义可以知道，TTI的长短对于用户体验的影响是十分重要的，它影响着用户对核心功能的使用。

影响因素

        (1) Start Render时间 - 只有内容渲染出来了，才可以谈交互，因此渲染时间的快与慢会直接影响TTI时间。

        (2) 核心功能相关HTML元素的显示时间 - 决定着核心功能可见的时间

        (3) 核心功能相关Javascript功能的绑定时间 - 决定着核心Javascript功能可交互的时间

监控方式

        没有固定的监控方式，依页面而定，如果核心模块无脚本那么计算核心模块解析完成的时间即可；如果核心模块有相关脚本则需要计算脚本加载和绑定完成的时间。

优化方法

        (1) Start Render指标的优化方法

        TTI依赖于Start Render时间，因此对Start Render指标的优化方法同样适用于TTI，请参考本篇文章>>。

        (2) 将核心功能的HTML文档尽量放置在BODY前部

        目前在切页面的时候，大多数都会注意这个问题，例如主体内容会靠前而侧边栏或广告栏则会放在主体内容之后。

        (3) 预加载核心功能的内容

        有些核心功能并不一定就能放置在BODY前部，此时则可以考虑在更靠前的位置使用预加载的方式提前将核心功能载入，这样也可以加快核心功能的展现速度。例如玉伯在Velocity2010 China上分享的《淘宝商品详情页面的优化实践》中提到的在头部即开始加载商品描述便是一个很有意义的实践。

        (4) 尽早做核心功能Javascript初始化和绑定

        目前大多数做法是在DOM Ready中做所有Javascript的初始化和功能绑定，也有一部分是在页面底部进行的，这两种方式的优点在于简单，不需要关注具体DOM结点的位置；缺点则在于初始化的时间太晚，因为DOM Ready受页面中资源尤其是外链Javascript的影响，时间上没有保证，如果Javascript加载时间过长则用户需要等待很长一段时间才能真正的进行交互。

        因此，可以考虑将Javascript的初始化提前到相关DOM元素建立起来后进行，例如将初始化的操作直接放置在元素之后进行。

与其他指标的关系

        前面3篇文章所介绍的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。而要向最理想状态靠近的方法则正是前面提到的几条优化原则。

建议继续学习：

1. 十个最容易犯的用户体验错误及规避方案    (阅读：78264)
2. 产品细节、用户体验和学习的态度    (阅读：3478)
3. Google 用户体验指标衡量方案：HEART    (阅读：2616)
4. Facebook的用户体验评判规则    (阅读：2582)
5. 用户体验到底是个什么玩意儿    (阅读：2493)
6. iOS 8/Android/WP 系统设置的用户体验对比    (阅读：2463)
7. 用户体验的泡沫    (阅读：2312)
8. 记录用户体验细节    (阅读：2311)
9. Think Different - 从苹果的用户体验说JavaEye的用户体验    (阅读：2245)
10. 用户体验量化方法研究（一）    (阅读：2163)