前端性能优化2

常见问题：

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

一打开网页时白屏，是因为还需要从服务器那边请求HTML、JS这些过来，加载下来后才有东西渲染

首屏速度参考两方面：白屏时间（资源加载时间、首屏js执行）、渲染页面（首屏数据请求、Dom渲染）

渲染页面是比较快的，所以大多数时间是花在了白屏时间上，而其中的资源加载时间是占比比较大的。

所以：
收效很大的操作

1，减少首屏资源体积(打包工具的压缩，异步加载，更新为体积更小的新版本，能不用第三方库就尽量不用第三方库，编写代码尽量减少体积，去除大的base64体积) 这一步能实现最大效果
收效不大或者特殊情况的优化操作：

1，首屏数据尽量并行，如果可行让小数据量接口合并到其他接口

2，页面包含大量dom可以分批随滚动渲染

骨架屏，loading，先让屏幕不白，减少用户焦虑

异步加载： 得思考哪些适合做异步加载，哪些能做？

体积比较大、且不是马上需要用的功能适合。比如一个图片压缩的功能，因为使用了第三方库，导致体积比较大，并且它跟首屏渲染无关联，所以适合异步加载

更新为体积更小的新版本： 这里就涉及到tree-shaking

例如引用了第三方库，里面有100个方法，但只用了20个，那么如果配合tree-shaking，那就可以只打包用到的20个方法，进而减少体积。把一些老版本的库替换成新版本的支持tree-shaking的可以有效减少体积，其实也就是按需引入的plus版按需引入 ：是指只加载和使用实际需要的代码，通常通过动态导入等方式实现。Tree-shaking ：是一种在构建阶段通过静态分析移除未使用代码的技术，主要用于减小最终打包文件的体积。

假设你有一个库 math.js，其中包含多个数学函数：

javascript 复制代码

// math.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

export function multiply(a, b) {
  return a * b;
}

export function divide(a, b) {
  return a / b;
}

在你的主文件 main.js 中，你只使用了 add 函数：

javascript 复制代码

import { add } from './math.js';

console.log(add(2, 3)); // 输出 5

使用 Webpack 进行 Tree-shaking

使用 ES6 模块 ：确保你的项目使用 import 和 export 语法。

配置 Webpack ：在 webpack.config.js 中启用 Tree-shaking。

javascript 复制代码

module.exports = {
  mode: 'production', // 生产模式会自动启用 Tree-shaking
  optimization: {
    usedExports: true, // 启用 Tree-shaking
  },
  // 其他配置...
};

构建项目：运行 Webpack 构建命令。
bash 复制代码
```
npx webpack
```
在生产模式下，Webpack 会自动进行 Tree-shaking，移除 subtract、multiply 和 divide 函数，因为它们在 main.js 中没有被使用。

首屏数据尽量并行： 像一些请求，Promise.then(()=>{}).then(()=>{})，可能有些不是非得等上一个完成再进行下一个，如果这样等下来，时间就会拉长
页面包含大量dom可以分批随滚动渲染： 如果一个页面上的dom元素特别多，那么就先渲染第一屏，或者最上面的一些元素。例如首页是760px，那就先渲染900px的内容，当滚到900px的时候再去加载后面的，和虚拟滚动、大数据量加载一个思想
骨架屏，loading，先让屏幕不白，减少用户焦虑： 有时候实在是太大了，减不下来，那就采取这样的方案，让用户体验感好一点

还有一些小知识：

1，频繁切换的显隐的内容用v-show也就是display来控制隐藏，只有打开就一次性决定显示与否的用v-if不去创建

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

3，keep-alive缓存

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

javascript 复制代码

function getData(){
    //列表接口，更新到data
    axios('/api1').then(()=>{}
    // 分类接口，有哪些类目
    axios('/api2').then(()=>{})
}
onMounted(()=>getData()})
function deelte(){getData();}

// 以这个代码为例子，如果发生删除的时候，只需要更新api1，api2不需要更新，但是这样写，两个接口写在一块，那这样就有点请求多余了

数据缓存：

不变数据、定期时效的数据可以缓存在cookies或者localstorage中，比如token，用户名等

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