前端性能优化小记

背景

功能测试后的首页响应较慢，大概要3-6s的样子，于是需要优化。

目标

• 首次加载3S渲染完毕
• 二次加载1s渲染完毕

当前情况（PC）

谷歌渲染如下

 

分析（PC）

• 请求数太多，共33个请求（谷歌多2个请求为本地缓存）
• 图片资源太大，都是几百kb，正常几十kb即可
• umi这个js文件太大，加载时间较长！！！且umi.js文件下载完成后才开始下载图片这些（阻塞）

解决方案

前端

• 合并图片，减少请求数（如将图片的图标合并成一个文件，利用background-position来调整位置）
• 超过1kb的图片压缩为几十kb，这里需要设计这边出图
• umi文件优化，减少体积，加载时机可以按需加载（umi框架：https://github.com/umijs/umi/issues/4535）

服务端

• CDN加速，静态资源采用CDN加速
• GZIP压缩，看了nginx已经开启了，响应头有Content-Encoding：gzip（唯一不会被压缩的就是图片、音频、视频等二进制文件，因为它们本来就是已经被压缩过的）

参考前端性能优化：https://www.manongdao.com/article-2206319.html