代码改变世界

web前端性能评测和常规优化方案(1)

2018-07-30 10:46 前端老牛 阅读(...) 评论(...) 编辑 收藏
如何评测前端性能和优化?

前端开发页面要遵循的基本标准:
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分别进行总结分享.....