?
?作者：郑鹏飞
本文为原创，转载请注明作者及出处
一、先思考问题对于开发者来说，优化性能这个词已经不绝于耳了，常道起的是首页打开要快，我要没有白屏时间，要请求次数少，把CSS放在页面头部先加载，JS文件/CSS文件压缩，把小图片做成雪碧图，尽量用字体图标等解决方案。我认为这些方案确实能起到优化的作用，但为什么要这样做，这些方法能优化到多少性能，如何能有效的监测到性能数据，对于一些其它性能消耗又是什么样的，这些问题都是在性能及体验优化上需要解决的事情。
二、认识性能消耗在哪里我认为要想了解性能消耗在哪里，需要先从了解访问一个链接地址直到这个链接的页面能让我们看到数据元素和进行交互的过程开始。把PC端或手机端的浏览器理解为客户端，把服务器理解为服务端，当一个用户从客户端输入一个页面链链接地址并进行回车的时候就是客户端向服务端进行资源请求的过程，然而，在服务端接收到客户端的请求指令并进行请求响应是服务端向客户端进行资源响应的过程，最后在请求及响应的过程中产生的时间我称为请求响应时间，性能消耗就有请求响应时间的一部分。
现如今一个网页主流是由HTML/CSS/JS三种类型的资源文件为主要构成，当客户端得到了服务器响应的资源后并不是可以给用户浏览的直观数据，这些资源文件的内容还需要浏览器对其内容进行解析及渲染。比如，将HTML的内容由DOM元素解析并绘制成页面文档结构，将CSS的内容解析并给绘制后的页面文档添妆加衣，将JS的内容解析及编译让页面文档变得生动可人。除了这三种类型文件的资源之外，还有其它的资源文件类型一样需要客户端去解析、编译、绘制。在客户端得到服务端响应的资源文件后进行解析、编译、绘制的时间我称为资源绘制时间，它是性能消耗里另一部分。
到这里我为了便于后面的理解，简单将性能消耗概括为请求响应时间和资源文件进行绘制时间两部分。
三、制定性能测试的维度通过上述描述对性能消耗的组成部分有了概念之后，我认为需要对项目的性能测试制定测试维度。尝试将项目以页面为颗粒度进行拆解，得到每个页面后，我认为对每个页面进行四个维度的深入测试，我给它们定义了四个名词，它们分别是（1）首屏速度、（）页面流畅度、（3）网络请求情况、（4）CPU/电量消耗。这四个维度的优先级顺序以每个名词前括号里的数字为依据进行顺序排序。
1、首屏速度首屏速度的性能数据指标尤为重要，它关乎到用户的转化率、粘性等，简单理解为如果一个用户在打开页面后不能及时的得到直观数据并能进行交互的话，基本用户就要跑了。我对首屏速度采用（1）白屏时长、（）页面加载时长、（3）首屏加载时长、（4）首次可直观数据的时长、（5）首次可交互的时长，五个指标来测量首屏速度，白屏时长是有定义为消耗为0毫秒的硬性指标。
提示：
1、上述提到页面性能消耗主要是由请求响应时间、资源绘制时间两个部分组成，然后在实际的应用场景中，一个页面的向服务端发起的请求数量是多个及多种文件类型组成，普遍的客户端对同一个域名的网络请求并发个数是6个，后面的请求都排在了请求队列里等待着第一梯队并发出去的6个请求中有请求状态为完成的就进行替补排入，注意客户端只会保持并发请求数量为6个。我建议将首屏展示所需要的资源请求放在第一梯队的网络并发中。
、客户端并发6个请求是基于同一个域名的场景下，如果请求分布式的方式在多个域名下就可以加大第一梯队的并发数量。例如，CDN就是基于这个方案产生的。
、页面流畅度解决了首屏速度后需要