针对目前接手的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
