WEB前端性能优化

一、为什么要做性能优化？
网站前端的用户体验决定了用户是否想要去使用网站的功能，而网站的功能决定了用户是否会一票否决前端体验。 不仅仅如此，如果前端优化得好，他不仅可以为企业节约成本，他还能给用户带来更多的用户，因为增强的用户体验。总结成三点就是：

1、加快页面展示和运行速度

2、节约服务器带宽流量

3、减少服务器压力

二、什么时候做性能优化最合适？
一般来说，遵循避免过早优化的原则，因为网站再发过程中的成本相对来说还是比较高的，web开发工程师、ui、产品、运维、后台服务等等，所以第一我们要保证基本功能完成，再考虑优化。第二在没有找到性能瓶颈之前，不要优化

三、哪方面需要做性能优化？
在这之前，我们先分析一个页面从发起请求到展示到用户大概流程
1、DNS 查询 2、发送 HTTP 请求 3、等待服务器响应 4、下载服务器响应内容 5、解析 HTML、CSS、JS 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 布局等 针对响应用户事件优化 尽量不在前端做复杂的运算

如何学习才能快速入门并精通呢？

当真正开始学习时难免不知从何入手，从而导致效率低下影响继续学习的信心。

但最重要的是不知道需要重点掌握哪些技术，学习时频繁踩坑，最终浪费大量时间。

为了让学习变得轻松高效， 现在给大家提供一个学习平台，让你在实践中积累经验掌握原理。主要方向是JAVA架构师，在这里你可以学习Java工程化、高性能及分布式、深入浅出、性能调优、Spring，MyBatis，Netty源码分析和大数据等知识点。想要了解详情的可以加入Java后端技术群：819940388，或关注微信公众号：Java资讯库，回复“架构”，免费的大型互联网Java视频分享给大家。