vue-性能优化总结

最新推荐文章于 2024-04-07 07:45:00 发布

万物可爱_85

最新推荐文章于 2024-04-07 07:45:00 发布

阅读量158

点赞数

文章标签：前端 vue.js javascript 性能优化

本文链接：https://blog.csdn.net/hnn567/article/details/123332396

版权

性能优化总结

1 防抖节流
2 函数或者组件的部分引入，不是全部
3 v-if|v-show
4 懒加载
5 多次请求优化
6 传参时如果不想传值给服务器，将置空改为undefined

1 防抖节流

正常：事件触发非常频繁，而且每一次的触发，回调函数都要去执行（如果时间很短，而回调函数内部有计算，那么很可能出现浏览器卡顿）

防抖：前面的所有的触发都被取消，最后一次执行在规定的时间之后才会触发，也就是说如果连续快速的触发,只会执行最后一次

节流：在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发

防抖与节流的原理，通过JS实现【闭包 + 延迟器】

防抖：用户操作很频繁，但是只执行一次
节流：用户操作很频繁，但是把频繁的操作变为少量操作【可以给浏览器留有充裕的时间解析代码】

防抖：搜索功能----（_.debounce）
lodash插件：官网或者npm都可以下载

npm i --save lodash

//全部引入
// import _ from "lodash";
//按需引入，因为是默认暴露的，所以不加 { throttle }大括号了
import throttle from "lodash/throttle";

    // //用es5写法--全部引入
    // changeIndex:_.throttle(function(index){
    //   this.currentIndex = index;
    // },50),

    //用es5写法--按需引入(throttle别用箭头函数，可能出现上下文)
    changeIndex: throttle(function (index) {
      this.currentIndex = index;
    }, 50),

   handler:throttle(  async function(type, disNum, cart){
            //type区分三个元素
      //disNum变化量和最终量
      //cart产品id
      switch (type) {
        case "add":
          disNum=1;
          break;
        case "minus":
         disNum=cart.skuNum>1?-1:0
          break;
        case "change":
          //输入非法【字母，汉字】或者负数
         if(isNaN(disNum)||disNum<1){
           disNum=0
         }else{
           //小数取证
           disNum=parseInt(disNum)-cart.skuNum
         }
          break;
      }
      //  console.log(disNum);
      //派发请求
      try {
         await this.$store.dispatch('addOrUpadteShopCart',{skuId:cart.skuId,skuNum:disNum})
         this.getData()
      } catch (error) {   
      }

    },800),

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 引入lodash:全部功能 -->
    <script src="./lodash.js"></script>
</head>
<body>
    <!-- 防抖--搜索 -->
    <p>输入内容<input type="text"></p>

    <script>
        //lodash插件：里面封装了防抖和节流的业务【闭包+延迟器】
        //lodash函数库对外暴露——函数
        let input=document.querySelector('input');
        input.oninput=_.debounce(function(){
            console.log('请求');
        },1000);
    </script>
</body>
</html>

节流：计数器+1 ，轮播图多次点击切换（出现混乱错位现象），菜单的三级联动功能（防卡顿） ----（_.throttle）；购物车减一时出现负数

    <!-- 节流 -计数器在一秒内只能+1-->
    <div>
        <h1>计数器<span>0</span></h1>
        <button>+</button>
    </div>

    <script>
        let span = document.querySelector('span')
        let button = document.querySelector('button')
        let count = 0;

        button.onclick = _.throttle(function(){
            count++;
            span.innerHTML = count
        },1000)
    </script>

2 函数或者组件的部分引入，不是全部

如：函数防抖与节流按需加载

按需加载:对于loadsh插件，它里面封装的函数功能很多
import _ from lodash 相当于把全部功能引入进来，但是我们只是需要节流。

//全部引入
import _ from 'lodash';
//按需引入，因为是默认暴露的（module.exports = throttle;），所以不加 { throttle }大括号了
import  throttle  from "lodash/throttle";

    // es6写法，没法用节流
    // changeIndex(index) {
    //   this.currentIndex = index;
    // },

    // //用es5写法--全部引入
    // changeIndex:_.throttle(function(index){
    //   this.currentIndex = index;
    // },50),

    //用es5写法--按需引入
    changeIndex: throttle(function (index) {
      this.currentIndex = index;
    }, 50),

3 v-if|v-show

4 懒加载

路由和组件的常用两种懒加载方式：

1、vue异步组件实现路由懒加载

　　component：resolve=>(['需要加载的路由的地址'，resolve])

2、es提出的import(推荐使用这种方式)

　　const HelloWorld = （）=>import('需要加载的模块地址')

const HelloWorld = ()=>import("@/components/HelloWorld")
component:HelloWorld

5 多次请求优化

像菜单组价，在home和search页来回切换时不断发送请求，且请求结果是一样的数据，这时可以放在APP根组件的mounte里，保存到store里

    //通知vuex发请求，获取数据，存储于仓库中
    //派发action
    this.$store.dispatch("home/categoryList");

6 传参时如果不想传值给服务器，将置空改为undefined

如面包屑点击删除时的操作

 removeCategoryName() {
      //参数置空，getData没有必须要传入的参数，可带可不带，越少越好；
      //所以将this.searchParams.categoryName = undefined;【即不向服务器传参】

      // this.searchParams.categoryName = "";
      // this.searchParams.category1Id='';
      // this.searchParams.category2Id='';
      // this.searchParams.category3Id='';

      this.searchParams.categoryName = undefined;
      this.searchParams.category1Id = undefined;
      this.searchParams.category2Id = undefined;
      this.searchParams.category3Id = undefined;
      this.getData();
    },

未完待续。。。。。

万物可爱_85

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue-性能优化总结

性能优化总结1 防抖节流2 函数或者组件的部分引入，不是全部3 v-if|v-show懒加载1 防抖节流正常：事件触发非常频繁，而且每一次的触发，回调函数都要去执行（如果时间很短，而回调函数内部有计算，那么很可能出现浏览器卡顿）防抖：前面的所有的触发都被取消，最后一次执行在规定的时间之后才会触发，也就是说如果连续快速的触发,只会执行最后一次节流：在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发防抖与节流的原理，通过JS实现【闭包 + 延迟器】防
复制链接

扫一扫