前端性能分析优化

分析问题

我们并不仅仅关注页面资源的解析和展示响应时间，而是要关注总时间；我们进行web前端性能测试的目的是计算出包含页面渲染、网络传输以及服务器端解析等综合因素在内的加载时间等指标，对该页面性能进行评估分析，找出影响性能的主要因素和瓶颈，并在此结果的基础上，给出一定的优化建议和解决方案，从而提升用户体验。

根据雅虎团队经验：网站页面性能优化的34条黄金守则，我们逐条分析。

性能黄金法则

只有10%-20%的最终用户响应时间花在接收请求的HTML文档上，剩下的80%-90%时间花在HTML文档所引用的所有组件(图片，script，css，flash等等)进行的HTTP请求上。

1. 尽量减少HTTP请求次数
   • 合并文件.

     例如将项目中用的资源文件合并。所有的CSS文件都放入一个样式表中.或者将js文件合并压缩

     利用gulp,grunt,webpack等构建工具将项目资源文件整合

   • 利用CSS Sprites 减少图像请求.

     通过使用合并图片，通过指定css的backgroud-image和backgroud-position来显示元素。

2. 启用浏览器缓存
   • 要利用浏览器缓存存储可缓存的资源

     在HTTP标头中为静态资源设置有效期或最长存在时间，可指示浏览器从本地磁盘中加载以前下载的资源而不是从网络中加载。

3. 减少DNS查找
   • DNS缓存

     当客户端的DNS缓存为空时，DNS查找的数量与Web页面中唯一主机名的数量相等。减少唯一主机名的数量就可以减少DNS查找的数量。

4. 使用内容分发网络
   • 页面静态化,取决于发布系统

     按页面内容划分域名，在合适的资源服务器上存放文件

5. 避免404错误
   • 避免内部无效的链接
6. 避免重定向
7. 压缩组件
8. 精简Javascript和Css
9. 尽量缩减页面大小
   • 页面必须小于150K(不含图片）

     a) 静态文件是否gzip

     b) 图片是否压缩优化过

10. 预处理
    • 浏览器空闲时请求将来可能会用到的页面内容

    无条件加载：触发onload事件时，直接加载额外的页面内容

    有预期的加载：载入重新设计过的页面时使用预加载。

11. 移除重复脚本
12. 使iframe的数量最小
    • 异步加载
13. js 开发规范

• 代码逻辑分层
• 避免全局变量
• 便于多人协作开发
• 各部分代码模块化，可以按需加载 利用requirejs和seajs等模块化工具加载
• 保持全局变量的清洁
• 可进行单元测试

最新内容请见作者的GitHub页：http://qaseven.github.io/