前端性能优化方案思路
性能优化可以从两个方面来谈,一是网络通信方面,二是拿到数据后,更快的数据处理。
更快的网络通信
减少网络请求,和加快请求速度,使用http2.0。
减少网络请求
-
服务器通信层次(请求次数)
-
资源合并
- 雪碧图:把多张图片放在一张大图上。
- 把CSS代码合并到一个文件中。
-
域名分片
- 多域名
-
-
缓存
- 强缓存:若命中强缓存,则直接不发起请求,调用本地的缓存信息,返回200状态码,没有请求就是最快的请求;http头字段cache-control或者expires控制。
- 协商缓存:减小数据量
加快请求速度
- CDN:内容分发系统;简单理解就是把服务器的内容拷贝一份放在距离客户端近的地方;每次访问时,就访问这个地方的资源;比如说我的服务器在北京,客户端在郑州,然后我在新乡做一个CDN,那么每次在郑州访问我的网站,只要去新乡拿资源就行。
- 缓存系统
- 提高命中率
- 降低回源率
- 多级缓存
- 压缩
-
数据压缩:使用gzip或者br去压缩数据
-
代码文件压缩:压缩HTML/CSS/JS中的注释和空格,长变量名
-
静态资源
- 字体资源
- 去除元数据:图片本身有的作者,时间,地点,设备等
- 缩小尺寸和分辨率
- 使用jpg和webp格式,尽量使用webp格式
-
头与报文:http1.1的头是非常臃肿的,减少http1.1中的不必要的头;减少cookie数据量
-
使用http2.0
http2.0解决了http1.1的线头阻塞,TCP慢启动,多TCP连接竞争带宽影响关键资源下载问题.
-
头部压缩
-
专门的HPACK压缩算法
- 索引表
- 霍夫曼编码
-
-
http二进制帧
-
原本:文本字符分割的数据流
-
二进制帧
- 帧长度
- 帧类型
- 帧标识
-
帧头部信息会标识该帧属于哪个流,解决了线头阻塞问题。
-
-
链路复用:
-
不要做资源合并和域名分片
更高效的数据处理
前端代码层面
- 多使用伪元素,减少js的多DOM的查找遍历
- 能使用HTML/CSS实现的效果不用js
- 逻辑与展示解耦(h5,c3,js分开写),避免不必要的js引擎启动
- 减少作用域查找和闭包,使用块级作用域
- 避免==:==需要做类型的转换
- HTML语义化标签加强DOM解析
服务端渲染方案(SSR)
-
解决白屏时间长,seo不友好
-
主流服务端渲染方案
- next.js
- nuxt.js