web前端性能评测和常规优化方案（1）

如何评测前端性能和优化？

前端开发页面要遵循的基本标准：
1. 统一使用框架、样式表base
2. html、CSS、JS编码要符合前端基本规范
3. CSS、JS进行压缩，多个CSS、JS时，需要进行CDN合并
4. 除一定需要预加载框架在头部外，页面及其他脚本统一放在body结束标签之前，并进行CDN合并
5. CSS统一放在头部，在核心JS框架引入之前；对页面CSS和base进行CDN合并加载
6. CN各项目前台页面使用PMS中统一的头和尾
7. 对UI或产品页面进行图片延迟按需加载
针对重点页面：

评测性能：使用性能测试工具
（firebug、yslow、pageSpeed等）进行，主要有以下几点：
1. 页面首屏加载时间
2. 页面大小、ready和loaded加载时间
3. 脚本和样式表加载个数、大小、请求时间
4. 背景图片请求数数、大小、请求时间，进行无损压缩
5. 产品图片大小、请求时间，进行无损压缩
6. 脚本、样式、图片的请求次序
7. 使用阿里测在线工具测试（http://www.alibench.com/）
8. 各ajax请求接口的时间和数据大小
9. 服务器端是否进行CDN加速
10. 服务器端是否启用Gzip压缩
11. (背景图片请求数数、大小、请求时间, 产品图片大小、请求时间)
根据评测报告，制定优化方案：
1. 提高首屏加载时间
2. 压缩css\js\html\image
3. 对脚本和样式进行CDN合并文件，减少脚本和样式文件的请求个数
4. 对背景图片使用CSS sprite，尽量控制在三张以内，并进行无损压缩
5. 结合UI交互对页面模块使用模块化按需加载
6. 提高ajax请求接口性能，可以进行合并请求的就进行合并
7. 对html\css\JS的代码进行内部优化，去掉冗余和影响性能的点
8. 需要服务器端进行CDN或Gzip时，联系PM和开发有运维进行

最后要对性能数据优化前后对比，总结报告并汇报。持续进行优化。。。

注：此文章是很久以前写的笔记，希望对初学者有帮助，贴出来供前端伙伴学习交流！

 后续会针对移动端及hybrid分别进行总结分享.....