前端性能测试与应用

a)         性能的重要性

一个良好的页面结构对浏览器的渲染来说可以节约很大的时间开销，更快更好的将最终页面展示给用户。这个是很重要，当今的浏览者对网页的浏览速度是比纸张阅读要快好几倍的。

浏览器花费的最多时间是对CSS，Html的渲染上！等待的时间最多是客户端与服务器端的相应上。

1. 1. 页面大小

虽然页面大小并不是决定页面传输的主要因素，但是过大的页面将变成突出的主要因素，我们可以接受的页面最大为50K，超过50K，说明这个文件就十分有必要去进行重组和分离。可以把样式表、脚本外联。

1. 2. 加载速度

文档的解析速度非常重要。网页的解析时间控制在0.5秒内被认为是“瞬间”，1秒被认为是“很快”，2秒属于“一般”，大于2秒就变得“有点慢”了，6秒的话让大多数的宽带用户开始忍耐了。一般情况是，寻找每个文件的时延就要耗去0.1～0.5秒——这属于在宽带连接阶段，并没有包括实际下载文件的时间。由于这个时延，“很快”的页面可能会载入3个额外的文件，例如一个样式表、一个JavaScript文件和一张图片，而“一般”的页面可能会载入7个额外的文件。

为了提高性能，浏览器会把文件放在缓存里面。这会对后续的下载有所帮助，不过在第一次下载的时候会起不到任何作用。此外，缓存的文件只有在服务器端设置的截止日期前能提高性能。当缓存的文件到期了，浏览器会询问服务器那个文件是否有更改。即使文件没有任何变化，不用重新下载，这也将用掉0.1～0.5秒/文件的时间。因此，尽可能把到期日设置得远一些。至于多远，要依据你所期望的服务器上变更文件的频率。问题是，如果你在到期日前对这个文件进行了修改，用户将不会看到文件有任何更新，因为浏览器才懒得去询问服务器呢！

1. 3. 浏览器渲染效率

背景定位导致aborted拉取；expression；IE filter,；iframe；不标准的代码或浏览器的渲染的bug

1. 4. Yahoo十四条性能优化原则

利用firebug可以简单的测试出一些比较初级的重构效率错误。参对Yahoo十四条性能优化原则，可以改善页面在前端的表现效率。

1. 5. 空格，换行与注释（项目发布版本理应都该去掉）压缩（压缩你能压缩的一切）

空格、换行符、注释是在项目开发过程中必不可少的内容，一个良好的页面代码结构和注释，可以让我们很快的找到接手的代码位置。过多的注释和换行符及空格

1. 6. 页面请求数

一个页面从请求到客户端浏览器渲染完成，耗费最多时间的有可能是服务器计算时间，网络传输时间，域名DNS查询时间，文件的请求数。过高的请求数增加DNS查询时间，过少的且大请求数增加网络传输时间，减少文件请求数，能合并到一起的合并一下，css，js，图片等，减小排队等待和服务器端开销。

分域提高同时加载数，优化排队等待。

避免404无效请求数。

避免重定向。

1. 7. 延迟加载和预载

把暂时不用的文件等主体页面加载完了再加载，把用户稍后要看浏览的内容预先加载进来，相册浏览就是很好的例子，先用小图片放大再把大图展示出来，看本张图片时把下一张预载进来等等。

b)         发现并提出问题

1. 1. 为什么性能低下? 表现在那里？
2. 2. 测试工具

查看连接数的工具：HttpWatch /firebug

c)          测试及资料收集

1. 1. 常用测试方式

I．        观察打开速度

II．      查看页面大小

III．     观察CPU变化

IV．     观察HTTP请求

V．      观察浏览器如何渲染

VI．     观察是否充分利用浏览器缓存

1. 2. Baidu & google资料查询（加快你的解决时间）
2. 3. 常见问题：

I．        IE滤镜

II．      JS（大小、位置）

III．     Css（大小、位置）

IV．     页面DOM层级数