前端性能优化方案思路

前端性能优化方案思路

性能优化可以从两个方面来谈，一是网络通信方面，二是拿到数据后，更快的数据处理。

更快的网络通信

减少网络请求，和加快请求速度，使用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二进制帧

  • 原本：文本字符分割的数据流

  • 二进制帧

    • 帧长度
    • 帧类型
    • 帧标识

  • 帧头部信息会标识该帧属于哪个流，解决了线头阻塞问题。

• 链路复用：

• 不要做资源合并和域名分片

更高效的数据处理

前端代码层面

1. 多使用伪元素，减少js的多DOM的查找遍历
2. 能使用HTML/CSS实现的效果不用js
3. 逻辑与展示解耦（h5，c3，js分开写），避免不必要的js引擎启动
4. 减少作用域查找和闭包，使用块级作用域
5. 避免==：==需要做类型的转换
6. HTML语义化标签加强DOM解析

服务端渲染方案（SSR）

• 解决白屏时间长，seo不友好

• 主流服务端渲染方案

  • next.js
  • nuxt.js