每天做个总结吧，坚持就是胜利！
/**
@date 2021-07-06
@description 前端性能优化
*/
壹（序）
作为一名前端开发，性能优化是很重要的一环，因为我们是最接近用户的开发人员，所以必须得了解一些性能优化方面的知识。
昨天总结了一下从输入URL到页面渲染出来的过程，从这里其实可以看到很多可以优化的点。
下面我根据目前掌握的知识从两个方面总结性能优化：一是网络请求层面，一是浏览器渲染层面。
贰（网络请求）
- 减少HTTP请求：从网络层面来讲，优化这一步是必不可少的，因为网络是基于HTTP协议通信，那么可以从什么方面减少HTTP请求呢？
通过将比较小的文件合并成一个文件进行请求，多个小图标合并成雪碧图，小图片转换为BASE64格式等方式，减少HTTP请求
-
压缩资源，减轻传输压力：将资源进行
压缩，减小资源大小，能有效的减轻HTTP请求数据的压力，资源小了，效率自然就高了，可以进行代码压缩，图片压缩，开启gzip，treeshaking等 -
使用HTTP/2.0：
HTTP/2.0为HTTP的优化做了很多有效的事情，如二进制协议，首部压缩，多路复用，推送功能等 -
使用CDN：
CDN就是内容分发网络，通过就近原则去最近的CDN服务器获取数据，从物理距离上去减小网络请求的压力 -
缓存：通过浏览器的
缓存，可以将资源保存在浏览器，在需要的时候直接从缓存中获取，减少发送请求，这是一种很高效的HTTP层面的性能优化。
缓存分为强缓存与协商缓存：
强缓存：强制浏览器使用缓存去获取数据，主要通过请求头配置Expires或Cache-Control的max-age，max-age优先级较高，然后浏览器判断是否过期，过期则重新请求，未过期则使用缓存
协商缓存：非强制性的，会发送请求由服务器判断是否使用缓存，通过eTag和If-None-Modified判断资源是否变化，变化的话返回状态码200及新的资源，未变化则返回状态码304，然后浏览器使用缓存资源
叁（浏览器渲染）
-
使用
link标签引入CSS而不是使用style标签，因为style标签中的CSS由HTML解析器解析，且不会阻塞DOM解析，就可能出现‘闪屏’ -
将link标签放在head标签
最下方，因为CSS解析器解析CSS的时候不会阻塞DOM解析，所以避免放在最下面导致DOM解析完了再去解析CSS -
将style标签放在body标签
最底部，因为JS的执行是会阻塞DOM解析，CSS解析和页面渲染的，所以应该放在最后执行，避免阻塞 -
减少
重绘重排：重绘是指修改了一些非布局的样式如背景色时，浏览器会进行重新绘制，重排是指修改了一些布局样式属性如width时，浏览器会重新排列再重新绘制
我们可以从以下方面优化重绘重排：
利用CSS图层：因为重绘重排的最小单位是图层，所以将一些经常会进行重绘重排的元素单独放置在一个图层里，那么这个图层的重绘重排就不会影响到整个页面，可以使用以下方法独立一个CSS图层：
a. transform: translateZ(0);
b. video元素
c. canvas元素
d. 使用CSS动画的元素
e. will-change: transform;
减少获取元素的width，height等布局方面的属性；
用requestAnimationFrame代替setInterval；
使用transform去改变布局，而不是left，top；
-
使用
WebWorker开启新的线程处理一些操纵 -
合理利用
防抖和节流函数
