web前端性能优化指南

摘要：通常来讲页面访问的时间有一条著名的“2-5-8原则”。当用户访问一个页面： 一、在2秒内获得响应时，会感受系统响应很快； 二、在2-5秒之间获得响应时，会感受系统的响应速度还能够； 三、在5-8秒之内获得响应时，会感受系统的响应速度很慢，但能够接受； 而超过8秒后仍然没法获得响应时，用户会感受系统糟透了，进而选择离开这个站点，或者发起第二次请求。对于一个网站若是但愿抓住用户，网站的速度以及稳定性是很是重要的。

1、为何要作性能优化？

从上面能够看出，网站前端的用户体验决定了用户是否想要去使用网站的功能，而网站的功能决定了用户是否会一票否决前端体验。 不只仅如此，若是前端优化得好，他不只能够为企业节约成本，他还能给用户带来更多的用户，由于加强的用户体验。总结成三点就是： 一、加快页面展现和运行速度 二、节约服务器带宽流量 三、减小服务器压力

2、何时作性能优化最合适？

通常来讲，遵循避免过早优化的原则，由于网站再发过程当中的成本相对来讲仍是比较高的，web开发工程师、ui、产品、运维、后台服务等等，因此第一咱们要保证基本功能完成，再考虑优化。第二在没有找到性能瓶颈以前，不要优化

3、哪方面须要作性能优化？

在这以前，咱们先分析一个页面从发起请求到展现到用户大概流程 一、DNS 查询 二、发送 HTTP 请求 三、等待服务器响应 四、下载服务器响应内容 五、解析 HTML、CSS、JS 六、渲染 HTML、CSS、JS 和图片 七、响应用户事件 了解了这几个过程，你们应该知道如何优化了吧，对，就是对症下药： 一、针对 DNS 查询优化

减小网站所用的域名个数（现代浏览器基本都具有并行下载能），减小 DNS 查询时间建议一个网站使用至少 2 个域，但很少于 4 个域来提供资源

二、针对发送方面的请求优化

localStorage（本地存储） 静态资源打包，开启 Gzip 压缩（节省响应流量） Cookie 隔离（节省请求流量） 使用 CDN 加速（访问最近服务器）

三、针对等待服务器响应方面的优化

合理设置 HTTP 缓存：Etag 与 Cache-control 启用 HTTP/2（多路复用，并行加载） 优化数据库查询 部署负载均衡

四、针对下载服务器响应内容优化

用 CSS3 实现图片，对小图标进行 base64（下降请求数） 延迟(defer)加载/异步(async)加载依赖 针对解析 HTML、CSS、JS优化 去掉无用的 HTML、CSS 和 JS 优化首屏时间：脚本后位置、图片压缩、懒加载

五、针对渲染 HTML、CSS、JS 和图片优化

最小化重绘(repaint)和回流(reflow)：批量修改元素样式、避免 table 布局等 针对响应用户事件优化 尽可能不在前端作复杂的运算

更多分享请关注，微信公众号：xiaohumuhe13，或今日头条号：（大话前端），还能得到海量视频资源哦~ 个人目标：作最好最全的前端资源分享 ​