项目性能优化方案
前端性能优化的指标
- 首屏速度,白屏时间等
- 操作速度以及渲染速度等
首屏速度 | |||
白屏时间 | 渲染页面 | ||
资源加载 | 首屏 js 执行 | 首屏数据请求 | Dom 渲染 |
首屏速度可以做的操作
# 收效很大的操作
1.减少首屏资源体积(打包工具的压缩,异步加载,更新为体积更小的新版本,编写代码尽量减少体积,去除大的 base64 体积)最大效果。
- 体积大又不需要马上用的功能适合异步加载(比如图片压缩功能)。
- 新版本的第三方库基本支持 tree-shaking(很多时候只用到第三方库的一部分功能)。
- 能不用第三方库的情形,就尽量自己写,因为第三方库通常比自己写的大。
- 图片转为 base64 时会进入 js 代码,增加了代码量,避免将大图片转为 base64。
# 收效不大或者特殊情况的优化操作
- 首屏数据尽量并行,如果可行让小数据接口合并到其他接口。
- 页面包含大量 Dom 可以分批,随滚动渲染。
- 骨架屏,loading,先让屏幕不白,减少用户焦虑。
操作速度和渲染速度
# 什么情况下会造成操作卡顿和渲染慢?
- 一次性操作大量 Dom。(解决方案:参照长列表渲染和异步渲染)
- 进行了复杂度很高的运算(常见于循环)。
- vue 和 react 项目中,不必要的渲染太多。
--如果是 react 相关技术栈,可以人工干预的性能优化很多。详情可参照 react 课程。
--vue 中有依赖收集,配合上 vue3 的静态节点标记,已经基本上避免了因为数据改变引起的无意义渲染。常见的优化方式如下:
1.频繁切换的显隐的内容用 v-show ,只有打开就一次决定显示与否的用 v-if。
2.循环,动态切换内容加好 key。
3.keep-alive 缓存。
4.区分请求粒度,减少请求范围,也能减少更新。
数据缓存
- 不变的数据,定期时效可以缓存在 cookies 或者 localstorage 中,比如 token,用户名等。
- 可以考虑做一个缓存队列,存于内存中(全局对象,vuex)。这样能保证刷新就更新数据,也能一定程度上缓存数据。