前端性能优化浅记

目的：更块的页面响应，更流畅的用户体验。

主要从加载时和运行时两个方面入手。

加载时的优化

减少HTTP请求

将多个小文件合并为一个大文件，从而减少 HTTP 请求次数。一次发送的数据包越大，实际要发送数据占整个请求的比例就越大。

帧头和帧尾固定，通过增大实际要传输数据占数据包的比例，达到提高数据传输效率的效果。

使用 HTTP2

HTTP2有更块的解析速度

更块的原因-----或者说是HTTP2相比 HTTP1的优点：

多路复用：允许同时通过一个http连接发起多个的请求-响应消息。
- 统一办理好过HTTP1的分开排队办理，毕竟有人可能会阻塞通道，后面的人等到天荒地老！
首部压缩：HTTP2.0使用HPACK算法对header的数据进行压缩，这样数据体积小了，在网络上传输就会更快。（HTTP1是个大头娃）
服务器推送：服务器可以在同一TCP连接中将客户端未请求的数据同原始请求的数据一同发送过来，一个请求多个响应，在多路复用的基础上又减少了客户端请求的时间。

使用服务器端渲染

客户端渲染:

获取 HTML 文件，根据需要下载 JavaScript 文件，运行文件，生成 DOM，再渲染。

服务端渲染：

服务端返回 HTML 文件，客户端只需解析 HTML。

服务端渲染的优点：首屏渲染快，SEO 好。
服务端渲染的缺点：配置麻烦，增加了服务器的计算压力。

静态资源使用CDN-内容分发网络

CDN的全称是Content Delivery Network，即内容分发网络。

CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。

具体啥是CDN,咱也说不明白~~~

将 CSS 放在文件头部，JavaScript 文件放在底部

JS 加载和执行会阻塞 HTML 解析，阻止 CSSOM 构建，造成页面短暂空白。

JS 文件也不是不可以放在头部，只要给 script 标签加上 defer 属性就可以了，异步下载，延迟执行。

使用字体图标代替图片图标

字体图片的优势：

是矢量图-不失真
体积小

用就完了~~~

利用缓存，不重复加载相同的资源

合理利用缓存，达到减少HTTP请求次数的效果。

图片优化

在一些情况下降低图片质量

JPEG？---->有损压缩---->啊对对对，用了也没人看得出来（听说设置60%的压缩等级最好）。

选择合适的图片格式和压缩大图，可从根源上截图大图加载过慢的问题。
使用雪碧图，字体图标，css代替图片等可减少图片 http 请求，提高页面加载速度。
使用CDN图片可达到分流的效果，减少服务器压力。
图片懒加载，预加载，渐进式图片等可不同程度减少白屏时间，提高产品体验。

运行时的优化

减少重绘重排

什么是重绘重排，这不就是八股吗嘛~~~

减少重绘重排的具体方法：

尽可能把样式加在在低层级的DOM节点上，减小重排范围。
样式集中改变，减少重绘次数
尽量少使用dispaly:none，可以使用visibility:hidden代替。（dispaly:none会造成重排，visibility:hidden会造成重绘。）
不要使用Table布局，因为一个小小的操作，可能就会造成整个表格的重排或重绘。
使用绝对定位和固定定位将元素提升为body的直属子元素，减少重排对于其他元素的影响，减小重排重绘开销，如：使用在动画元素上。
批量修改元素时，可以先让元素脱离文档流，等修改完毕后，再放入文档流。（即：DOM离线处理：display:none将DOM隐藏处理）

使用事件委托

什么是事件委托，这可是JS事件中的大爹内容，怎么能不知道~~~

即：利用事件冒泡实现，使用一个事件处理程序管理一个类型的事件，避免过多的事件处理程序影响性能。

编码习惯对性能的影响

相对于早期的定位浮动布局，flex性能有提高。
在使用选择器时（意义不大，性能提升微小）：
- 选择器越短越好。
- 尽量使用高优先级的选择器，例如 ID 和类选择器。
- 避免使用通配符 *。
不要覆盖原生方法：过度封装，影响性能。
位操作也比其他数学运算和布尔操作高效。

与webpack相关的前端优化

CSS压缩使用css-minimizer-webpack-plugin，效果包括压缩、去重。
JS压缩使用terser-webpack-plugin，实现打包后JS代码的压缩。
tree-shaking的作用：只打包用到的代码，没用到的代码不打包，webpack5默认开启tree-shaking。
source-map的作用：方便你报错的时候能定位到错误代码的位置。所以对于不同环境设置不同的类型是很有必要的。生产环境使用小体积的source-map。
开启Gzip，提高用户的页面加载速度，因为gzip的体积比原文件小很多（需要后端的配合），使用compression-webpack-plugin。
在 webpack里面配置 image-webpack-loader 进行图片压缩。

其他优化

多使用按需加载
vue中路由和组件的按需加载（懒加载）
vue中使用keep-alive缓存路由。

参考

# 每个前端都必须要学会的Webpack优化手段

性能滞销，快帮帮我们！！！