项目性能优化方案

前端性能优化的指标

• 首屏速度，白屏时间等
• 操作速度以及渲染速度等

 

 

首屏速度
白屏时间		渲染页面
资源加载	首屏 js 执行	首屏数据请求	Dom 渲染

首屏速度可以做的操作

# 收效很大的操作

1.减少首屏资源体积（打包工具的压缩，异步加载，更新为体积更小的新版本，编写代码尽量减少体积，去除大的 base64 体积）最大效果。

• 体积大又不需要马上用的功能适合异步加载（比如图片压缩功能）。
• 新版本的第三方库基本支持 tree-shaking（很多时候只用到第三方库的一部分功能）。
• 能不用第三方库的情形，就尽量自己写，因为第三方库通常比自己写的大。
• 图片转为 base64 时会进入 js 代码，增加了代码量，避免将大图片转为 base64。

# 收效不大或者特殊情况的优化操作

1. 首屏数据尽量并行，如果可行让小数据接口合并到其他接口。
2. 页面包含大量 Dom 可以分批，随滚动渲染。
3. 骨架屏，loading，先让屏幕不白，减少用户焦虑。

 

操作速度和渲染速度

# 什么情况下会造成操作卡顿和渲染慢？

1. 一次性操作大量 Dom。（解决方案：参照长列表渲染和异步渲染）
2. 进行了复杂度很高的运算（常见于循环）。
3. vue 和 react 项目中，不必要的渲染太多。

　　　　--如果是 react 相关技术栈，可以人工干预的性能优化很多。详情可参照 react 课程。

　　　　--vue 中有依赖收集，配合上 vue3 的静态节点标记，已经基本上避免了因为数据改变引起的无意义渲染。常见的优化方式如下：

　　　　　　1.频繁切换的显隐的内容用 v-show ，只有打开就一次决定显示与否的用 v-if。

　　　　　　2.循环，动态切换内容加好 key。

　　　　　　3.keep-alive 缓存。

　　　　　　4.区分请求粒度，减少请求范围，也能减少更新。

 

数据缓存

• 不变的数据，定期时效可以缓存在 cookies 或者 localstorage 中，比如 token，用户名等。
• 可以考虑做一个缓存队列，存于内存中（全局对象，vuex）。这样能保证刷新就更新数据，也能一定程度上缓存数据。