性能优化

作者:Yuan Tang

更新于:6 个月前

字数统计:1.2k 字

阅读时长:3 分钟

性能方面着重考虑两点：首屏速度和操作速度。首屏速度顾名思义，就是刚进页面获取资源渲染页面的速度；操作速度是用户在点击、输入等操作后需要等待的时间。

下面依次细说。

首屏速度，白屏时间等

先来分析一下首屏速度的组成：

从图不难看出，在浏览器打开页面，需要先从服务器获取资源，获取完资源后才能执行 js 文件，这部分时间就是白屏时间；执行完 js 文件后请求数据，渲染 DOM 元素，这部分是渲染时间。

在白屏时间中执行 js 文件的速度一般情况下是很快的，除非项目用到了大的算法。因此大多数项目白屏时间主要在从服务器请求资源的这段时间。如果是 Vue 或 React 项目，它们的 index.html 内是没有东西的，请求到资源后还需要执行，这又消耗了一定的时间。

执行完 js 文件后浏览器开始渲染页面，发 axios 请求获取数据渲染真实 DOM，最后页面呈现数据。

针对上述描述，关于首屏速度优化可以做的操作从收益划分可以划分两类：

• 收益较大的操作：

  减少首屏资源提及（打包工具压缩、异步加载、减少体积、去除大的 base64 标识）

• 收益较小或特殊情况特殊分析的操作：

  1. 首屏数据尽量并行，小数据量的接口合并到其他接口
  2. 页面包含大量 DOM 可以分批随滚动渲染
  3. 骨架屏、loading等效果优化用户体验

打包工具压缩

这方面一般不需要去写什么代码逻辑，因为脚手架已经在打包时有压缩处理，如 vite 打包项目后会使用 gzip 压缩项目。

异步加载

异步加载不是简单的设置异步，而是需要考虑哪些资源需要异步加载，哪些资源不需要，继续保持同步。用一句话来概括就是，体积大且不是马上需要的资源，就采用异步加载。

举一个例子，项目中引入了第三方库实现 excel 和 word 资源转换与在线预览，但这两个库很大，在用户没有进入项目页面点击按钮执行操作时是用不到的，和首屏渲染没有关系，这部分的代码可以做异步加载。

更新

现在的打包工具有一个利器 tree-shaking ，它能够实现项目打包时只打包项目需要使用的第三方库，不会全部打包，但是这需要第三方库支持 tree-shaking 。有一些老版本的库不支持，更新到最新版后或许会支持，也能减少体积。

在实际项目中，可以通过排查项目使用的第三方依赖，卸载老版本的第三方库，引入新版本的第三方库，把全部导入修改为按需导入，利用 tree-shaking 的机制，能够大大减少打包后的体积，加快项目首屏渲染速度。

减少库的使用

有些时候，能不用第三方库自己写代码就不要用第三方库。例如时间格式化，自己写一个相关函数可能只需要 3kb ，引入第三方库可能还需要更大。

减小体积

修改代码，保持精简，积少成多，打包后能更精简。大的图片不要转 base64 ，图片的渲染不会影响首屏加载的速度，大图不转 base64 还能减小代码体积。

操作速度以及渲染速度

以下几种情况会造成操作卡顿和渲染慢：

1. 一次性操作大量的 DOM
2. 进行复杂度很高的运算（如循环、递归）
3. Vue 和 React 项目中，不必要的渲染太多

这里主要展开第三点，在 Vue 项目中有依赖收集，配合 Vue3 静态节点标记，基本上避免了因数据改变引起的无意义渲染。只需考虑以下情况：

1. 频繁切换显隐内容使用 v-show 来控制，打开决定显隐内容使用 v-if 控制
2. 循环、动态切换的内容添加 key 值
3. keep-alive 缓存
4. 区分请求粒度，减少请求范围，减少更新

其中谨慎缓存接口数据。只有不变数据，定期时效可以缓存在 cookies 或者 localstorage 中，比如 token ，用户名等。

可以考虑做一个缓存队列存于内存中（全局对象，vuex）。这样能保证刷新就更新数据，也能一定程度上缓存数据。

Contributors

Yuan Tang