前端性能优化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，此中包罗多个数学函数：

2. // math.js
3. export function add(a, b) {
4.   return a + b;
5. }
7. export function subtract(a, b) {
8.   return a - b;
9. }
11. export function multiply(a, b) {
12.   return a * b;
13. }
15. export function divide(a, b) {
16.   return a / b;
17. }

复制代码

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

2. import { add } from './math.js';
4. console.log(add(2, 3)); // 输出 5

复制代码

使用 Webpack 举行 Tree-shaking

•         使用 ES6 模块：确保你的项目使用 import 和 export 语法。
  
•         设置 Webpack：在 webpack.config.js 中启用 Tree-shaking。
  
  2. module.exports = {
  3.   mode: 'production', // 生产模式会自动启用 Tree-shaking
  4.   optimization: {
  5.     usedExports: true, // 启用 Tree-shaking
  6.   },
  7.   // 其他配置...
  8. };

  复制代码
•         构建项目：运行 Webpack 构建下令。
  
  2. 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,区分哀求粒度，淘汰哀求范围，也能淘汰更新

2. function getData(){
3.     //列表接口，更新到data
4.     axios('/api1').then(()=>{}
5.     // 分类接口，有哪些类目
6.     axios('/api2').then(()=>{})
7. }
8. onMounted(()=>getData()})
9. function deelte(){getData();}
11. // 以这个代码为例子，如果发生删除的时候，只需要更新api1，api2不需要更新，但是这样写，两个接口写在一块，那这样就有点请求多余了

复制代码

数据缓存：
稳定数据、定期时效的数据可以缓存在cookies大概localstorage中，比如token，用户名等
可以思量做一个缓存队列，存于内存中(全局对象，vuex)如许能包管革新就更新数据，也能肯定程度上缓存数据

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金