前端性能--指标分析

针对目前接手的web前端的性能测试，一时间不知道从什么地方入手，然后经过查找资料，发现其实还是蛮简单的。

前端性能测试对象：

HTML、CSS、JS、AJAX等前端技术开发的Web页面

影响用户浏览网页速度的因素：

服务端数据返回、网络传输、页面渲染等

前端性能测试目的：

计算出包含页面渲染、网络传输以及服务器端解析等综合因素在内的加载时间等指标，对该页面性能进行评估分析，找出影响性能的主要因素和瓶颈，并在此结果的基础上，给出一定的优化建议和解决方案，从而提升用户体验

YSlow/PageSpeed：

通过网页JS/CSS/Image数及请求数量、请求类型、缓存等方面的静态分析

DynaTrace：

支持IE，不仅可以显示所有请求和文件在网络中传输的时间，还会记录浏览器Render、CPU消耗、JavaScript解析和运行情况等详细的动态分析

7个类别，总共35项指标

u  Content

u  Server

u  Cookie

u  CSS

u  JavaScript

u  Images

u  Mobile

u Content：

u Make fewer HTTP requests

u Reduce the number of DOM elements

u Avoid redirects

u Make AJAX cacheable

u Avoid HTTP 404 (Not Found) error

u Reduce DNS lookups

u Postload Components

u Preload Components

u Split Components Across Domains

u Minimize Number of iframes

u COOKIE：

u Use cookie-free domains for components

u Reduce cookie size

u CSS：

u Avoid CSS expressions

u Minify JavaScript. and CSS

u Put CSS at top

u Make JavaScript. and CSS external

u Avoid AlphaImageLoader filter

u Remove duplicate JavaScript. and CSS

u Choose <link> Over @import

u IMAGES：

u Make favicon small and cacheable

u Do not scale images in HTML

u Optimize Images

u Optimize CSS Sprites

u JAVASCRIPT：

u Minify JavaScript. and CSS

u Make JavaScript. and CSS external

u Put JavaScript. at bottom

u Remove duplicate JavaScript. and CSS

u Minimize DOM Access

u Develop Smart Event Handlers

u SERVER：

u Compress components with gzip

u Configure entity tags(ETags)

u Use a Content Delivery Network(CDN)

u Use GET for AJAX requests

u Add Expires or Cache-Control Header

u Flush Buffer Early

u Avoid Empty Image src

u Mobile：

u Keep Components Under 25 KB

u Pack Components Into a Multipart Document

Make fewer HTTP request

更少的http请求；页面中尽量少的引用外部静态资源、JS、CSS以及图片等，方法如使用CSS Sprites整合图片、合并CSS文件（不需要划分为什么色彩样式、布局样式、文字样式之类的）、合并JS文件

计算公式：

8×{100-[4×(JS文件数-3)+4×(CSS文件数-2)+3×(CSS背景图连接数-6) ] }

Avoid URL redirects

避免重定向；重定向增加了额外的浏览器向服务器的请求，这里有一种现象常常会被开发者所忽略，这种现象发生在当URL本该有斜杠（/）却被忽略掉时，这时候会返回一个301的状态码，然后浏览器重新发起一次请求，这其中就浪费掉了时间

计算公式：

4×(100-10×Redirect个数)

Make AJAX cacheable

设置AJAX的缓存；当前AJAX的应用越来越广泛，AJAX的信息读取是异步的，这也表示用户不一定会等待这异步的响应，为避免重复的AJAX请求，设置缓存是优化性能的一个好方法

计算公式：

4×(100-5×未缓存或者缓存时间不足3600秒的AJAX请求个数)

Avoid HTTP 404 (Not Found) error

避免404错误页面的出现。不管从服务器资源还是用户体验上来说，都是不好的

计算公式：

4×(100-5×状态为404的连接个数)

Reduce DNS lookups

减少DNS查找；不要把同一个网站的内容分散在不同的服务器上，比如说，一个图片站，因为空间大小的关系把某一部分图片放在了另一个服务器上，那么这一部分的图片在浏览的时候就会慢很多

计算公式：

3×[100-5×(域名数-4)]

Use cookie-free domains

使用免费cookie域名，即这个域名不会产生cookie；当浏览器向服务器请求一张静态的图片前，会先发送同域名下的cookie，服务器对于这些cookie不会做任何处理，因此它们只是在毫无意义的消耗带宽，所以你应该确保对于静态内容的请求是无cookie的请求，需要把静态资源放在一个二级域名上

计算公式：

3×(100-5×不满足cookie free要求的链接个数)

Reduce cookie size

减小cookie的大小；cookie一般用于个人信息身份验证等用途，cookie信息在HTTP headers中传递与服务端和浏览器间，所以cookie的大小对用户响应时间非常重要

计算公式：

3×[cookie大小不超过1000字节?100∶(99-10×页面cookie的大小/1000) ]

Avoid CSS expressions

避免CSS表达式；CSS表达式的执行次数是远远多于我们想象的，往往会严重地影响性能，并且只支持IE(IE5开始支持，IE8不再支持)

计算公式：

3×[不存在CSS表达式?100: (90-2×CSS表达式数目) ]

Minify JavaScript. and CSS

压缩JavaScript和CSS；容量小页面加载速度自然就快了

计算公式：

4×(100-10×未精简的CSS与JS个数)

Put CSS at top

将CSS放在页面顶部；CSS作为解释型语言，如果CSS在上方的话，那么浏览器解析结构的时候，就已经可以对页面进行渲染，从而提升用户体验

计算公式：

4×[body中没有CSS连接? 100∶(99-10×body中的CSS连接数) ]

Make JavaScript. and CSS external

使JavaScript和CSS为独立文件；把JS和CSS写在HTML文件中，可以减少2次请求，但同时也增大了页面大小，并且每次请求HTML都需要重新下载JS和CSS，严重影响性能，而JS和CSS可以缓存，重新访问就不存在多余的2次请求

Avoid AlphaImageLoader filter

避免AlphaImageLoader滤镜的使用；使用滤镜的目的是为了解决IE7以下版本中对于PNG图片透明度的问题，这种机制阻碍和延迟了图片的下载和页面渲染，增加内存的消耗，严重影响性能，可以用PNG8即256色PNG来处理，或者使用Hack-filter使IE7及以上版本也不会有问题

计算公式：

4×[100-(2×使用hack的filter个数+5×未使用hack的filter个数) ]

Remove duplicate JavaScript. and CSS

去除重复的JavaScript和CSS；

计算公式：

4×[100-5×(重复的JavaScript个数+重复的CSS个数) ]

Make favicon small and cacheable

使图片尽量小并使用缓存；不管怎样都会请求favicon.ico，在下载其它组件之前都会先下载favicon.ico，所以favicon.ico最好能在1K以内，并设置足够长的Expires header

计算公式：

2×[100-(favicon不可缓存或缓存时间小于3600秒? 5∶0)-(favicon大小超过2000字节? 5∶0)]

Do not scale images in HTML

不要对图片进行缩放；如只需要显示100*100的图片，就只需要100*100的图片，而不要使用500*500的图片，这是一种对服务器资源的浪费

计算公式：

3×(100-5×在HTML代码中设定width和height的图片数)

Put JavaScript. at bottom

将JavaScript放在页面底部；目的是为了防止JS的执行阻碍页面的下载，同时为了避免同其它资源的并行下载，一般的处理办法是页面头部引入JS链接，页面底部执行JS脚本程序，这样可以实现最 大的下载并行，页面加载初期做的事，最好只有下载，HTML的下载，CSS的下载，JS的下载，等下载完成后再去实现页面渲染，JS脚本运行

计算公式：

4×(100-5×head中的JavaScript连接数)

Compress components with gzip

使用gzip压缩文件；Gzip的思想就是把文件先在服务器端进行压缩，然后再传输，在客户端再进行解压，减小网络传输

计算公式：

8×[100-11×(文件大小大于500字节且未使用gzip的连接个数)]

Configure entity tags(Etags)

Etag是服务器告诉浏览器缓存，缓存中的内容是否已经发生变化的一种机制，通过Etag浏览器就可以知道现在的缓存中的内容是不是最新的，是否需要重新从服务器上下载

计算公式：

2×(100-11×未使用Etags的连接个数)

Use a Content Delivery Network(CDN)

使用CDN；CDN是一个分布于多个地方的服务器集群，为了更有效地向用户分发数据，通过在现有的Internet中增加一层新的网络架构，将网站的内容发布到最接近用户的 服务器内，通过DNS负载均衡的技术，判断用户来源就近访问服务器取得所需的内容

计算公式：

6×(100-10×未使用CDN的连接个数)

Add Expires headers

设置Expires Header可以将脚本、 样式表、图片、Flash等缓存在浏览器的Cache中，让用户通过本地缓存来更快的访问网站

计算公式：

10×[100-11×(Expire时间小于172800秒的连接个数) ]

Use GET for AJAX requests

用GET获取AJAX请求；POST方式在浏览器的处理分2步：第1步发送headers，第2步发送数据，所以最好使用GET方式，只发送一个TCP包。

计算公式：

3×(100-5×请求方式不是GET的AJAX个数)

Keep Components under 25K

这个约束主要针对iPhone客户端，iPhone无法缓存大于25K的资源文件

主要指标：

First Impression Time/Onload Time/Fullyload Time/Roundtrips(KPI’s)、Caching, Network, JavaScript. and Server-Side

计算公式：

KPI’s*0.6 + (Caching + Network + JavaScript. + Server-Side)*0.1

First Impression Time

这个时间等于在浏览器地址栏输入URL按回车到用户看到网页的第一个视觉标志为止，第一个视觉标志是浏览器的第一个绘制活动，浏览器绘制内容的起始时间取决于原始的HTML文档，不同的策略有不同的最佳实践，例如Google会先下载一个极简的页面提供快速的第一视觉呈现，在onLoad后再延迟加载更多 的内容，有时甚至是用户已经开始与网页交互了才加载剩下的内容

Onload Time