摘要: 一般来说页面访问的时间有一条著名的 "2-5-8 原则". 当用户访问一个页面:
在 2 秒内得到响应时, 会感觉系统响应很快;
在 2-5 秒之间得到响应时, 会感觉系统的响应速度还可以;
在 5-8 秒以内得到响应时, 会感觉系统的响应速度很慢, 但可以接受;
而超过 8 秒后仍然无法得到响应时, 用户会感觉系统糟透了, 进而选择离开这个站点, 或者发起第二次请求. 对于一个网站如果希望抓住用户, 网站的速度以及稳定性是非常重要的.
一, 为什么要做性能优化?
从上面可以看出, 网站前端的用户体验决定了用户是否想要去使用网站的功能, 而网站的功能决定了用户是否会一票否决前端体验. 不仅仅如此, 如果前端优化得好, 他不仅可以为企业节约成本, 他还能给用户带来更多的用户, 因为增强的用户体验. 总结成三点就是:
1, 加快页面展示和运行速度
2, 节约服务器带宽流量
3, 减少服务器压力
二, 什么时候做性能优化最合适?
一般来说, 遵循避免过早优化的原则, 因为网站再发过程中的成本相对来说还是比较高的, web 开发工程师, ui, 产品, 运维, 后台服务等等, 所以第一我们要保证基本功能完成, 再考虑优化. 第二在没有找到性能瓶颈之前, 不要优化
三, 哪方面需要做性能优化?
在这之前, 我们先分析一个页面从发起请求到展示到用户大概流程
1,DNS 查询
2, 发送 HTTP 请求
3, 等待服务器响应
4, 下载服务器响应内容
6, 渲染 HTML,CSS,JS 和图片
7, 响应用户事件
了解了这几个过程, 大家应该知道如何优化了吧, 对, 就是对症下药:
1, 针对 DNS 查询优化
减少网站所用的域名个数(现代浏览器基本都具备并行下载能), 减少 DNS 查询时间建议一个网站使用至少 2 个域, 但不多于 4 个域来提供资源
2, 针对发送方面的请求优化
localStorage(本地存储)
静态资源打包, 开启 Gzip 压缩(节省响应流量)
Cookie 隔离(节省请求流量)
使用 CDN 加速(访问最近服务器)
3, 针对等待服务器响应方面的优化
合理设置 HTTP 缓存: Etag 与 Cache-control
启用 HTTP/2(多路复用, 并行加载)
优化数据库查询
部署负载均衡
4, 针对下载服务器响应内容优化
用 CSS3 实现图片, 对小图标进行 base64(降低请求数)
延迟 (defer) 加载 / 异步 (async) 加载依赖
针对解析 HTML,CSS,JS 优化
去掉无用的 HTML,CSS 和 JS
优化首屏时间: 脚本后位置, 图片压缩, 懒加载
5, 针对渲染 HTML,CSS,JS 和图片优化
最小化重绘 (repaint) 和回流(reflow): 批量修改元素样式, 避免 table 布局等
针对响应用户事件优化
尽量不在前端做复杂的运算
爱前端 - 专注全栈大前端, 前端教育, 我们更专业!
关注公众号[爱前端] , 免费领取精品全栈大前端试听课程, 课程好不好, 听了就知道!
专注全栈大前端, 爱前端整理了一批最新 Web 前端教学视频, 不论是零基础学习还是在职提升, 这些资料都会给你带来帮助, 爱前端帮助所有想要学好前端的同学, 学习规划, 学习路线, 学习资料, 问题解答. 全栈大前端技术交流群: 137503198 !
来源: http://www.jianshu.com/p/a5a77e08ec5a