前端性能优化

一、为什么要做性能优化？

1、加快页面展示和运行速度(增强用户体验)

2、节约服务器带宽流量

3、减少服务器压力

二、先分析一个页面从发起请求到展示到用户大概流程：

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 布局等针对响应用户事件优化尽量不在前端做复杂的运算

转自https://baijiahao.baidu.com/s?id=1589456719510687604&wfr=spider&for=pc