前端性能优化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，其中包含多个数学函数：
// 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 函数：
import { add } from './math.js';console.log(add(2, 3)); // 输出 5使用 Webpack 进行 Tree-shaking
-
使用 ES6 模块：确保你的项目使用
import和export语法。 -
配置 Webpack：在
webpack.config.js中启用 Tree-shaking。module.exports = {mode: 'production', // 生产模式会自动启用 Tree-shakingoptimization: {usedExports: true, // 启用 Tree-shaking},// 其他配置... }; -
构建项目：运行 Webpack 构建命令。
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,区分请求粒度，减少请求范围，也能减少更新
function getData(){//列表接口，更新到dataaxios('/api1').then(()=>{}// 分类接口，有哪些类目axios('/api2').then(()=>{})
}
onMounted(()=>getData()})
function deelte(){getData();}// 以这个代码为例子，如果发生删除的时候，只需要更新api1，api2不需要更新，但是这样写，两个接口写在一块，那这样就有点请求多余了数据缓存：
不变数据、定期时效的数据可以缓存在cookies或者localstorage中，比如token，用户名等
可以考虑做一个缓存队列，存于内存中(全局对象，vuex)这样能保证刷新就更新数据，也能一定程度上缓存数据