学习前端性能优化

一提起前端的性能优化，普遍的答案就是减少http请求数，使用精灵图，压缩代码，图片懒加载，防抖节流，使用css动画代替等。
其实答案也没什么错，那为什么要这么做呢？
从用户的角度看待性能优化，优化的指标有下面几个。
1.加载指标 进入页面的时候等待的时间，过慢的加载会使用户离开
2.交互指标 用户点击按钮 得到反馈的时间
3.视觉稳定性指标 页面从一帧切换到另外一帧时，不稳定元素的偏移情况 （在使用某视频网站的时候，准备打开一个电影，突然弹个图片出来，我一点击进了个网页游戏）
在三个指标里，我感觉优化的点其实都是一致的，就是对于资源的请求效率，浏览器的渲染效率的优化
一、对于加载指标，我们需要知道加载的过程反生了什么，期间有哪些瓶颈点。
页面的加载过程，输入url回车之后，先通过本地缓存查找是否存在该网站，没有则向DNS服务器发起查询，获取id地址，通过ip地址找到服务器，建立TCP连接，再发起http请求，获取资源，解析渲染。
这期间的瓶颈点就在于获取资源和解析渲染。
一般来说不经常改变的静态资源的会在nginx里设置缓存
http里面有4个缓存字段 expires cache-control ETag/If-None-Match Last-Modified/If-Modified-Since

上图就是nginx通过Response Header 通知浏览器将 gif|jpg|jpeg|png|bmp|swf 的文件缓存过期时间30天
在发送http请求获取资源时，一般来说,浏览器的并发请求数量在 6 到 8 个之间,这是因为浏览器通常会限制同一域名下的并发请求数量,以避免对服务器造成过大的压力，所以需要合并请求或者做域名发散（会导致DNS解析成本增加）。
获取资源的速度，和网络带宽、资源大小有关，所以尽量要让资源更小加载更快，所以需要压缩资源，可以使用一些构建工具例如webpack、vite进行项目管理。
在获取资源之后进行解析渲染，那过程又发生了什么？
将html文档解析成为dom树，然后将css文档解析成css树，然后浏览器会将dom树和css树合并成为一棵渲染树，最后浏览器根据渲染树来布局和绘制页面。这期间一些错误会导致解析的时间变长，例如HTML标签不满足web语义化，
少写了/，table标签排列错误，浏览器会进行语法纠错。遇到script标签，dom的解析会暂停，等待script脚本加载完成，所以JS的引入尽量写在最下或者使用defer和async告诉浏览器等待脚本下载期间不阻塞解析过程。Defer是等待脚本和HTML文档加载完成再执行，可以避免执行时HTML还没解析完成导致顺序错误。在渲染过程中，回流和重绘是最常规的性能优化之一，回流是指页面布局发生变化时，浏览器重新计算渲染树中元素的位置大小，过程涉及遍历渲染树，计算每个元素的布局，然后更新布局。回流非常耗费性能。重绘是改变页面元素的一些颜色属性，浏览器需要重绘受到影响的元素。所以尽量使用css的transform属性来改变大小，tansform不会触发回流，只会触发重绘。将需要多次修改的样式属性集中在一起进行修改，然后再将其应用到DOM元素上。可以使用节流或者防抖的方式来控制事件触发的频率。对于延迟渲染的元素如img，可以设定宽高占位，避免触发回流及元素偏移。