js查重去重性能优化心得

时间: 2019-03-06阅读: 791标签: 优化

概述

今天产品反映有个5000条数据的页面的保存按钮很慢,查看代码看到是因为点击保存按钮之后,进行了查重操作,而查重操作是用2个for循环完成了,时间复杂度是O(n^2)。没办法,只能想办法优化一下了。



源码

简单来说,这个页面的要求是查找一个数组中的重复项,并且返回重复项的行号。源码简化后如下:

    checkData(tableData) {
      // console.time('数组检查重复项时间');
      // 检查重复项,检查空值(全局)
      const repeatMidArr = [];
      const repeatArr = [];

      for (let i = 0; i < tableData.length; i += 1) {
        // 检查重复项
        for (let j = i + 1; j < tableData.length; j += 1) {
          const arr1 = tableData[i].condition;
          const arr2 = tableData[j].condition;
          if (arr1.length === arr2.length && jsON.stringify(arr1) === jsON.stringify(arr2)) {
            repeatMidArr.push(i + 1);
            repeatMidArr.push(j + 1);
          }
        }
      }

      // 给repeatMidArr去重
      repeatMidArr = repeatMidArr.sort();
      if (repeatMidArr.length <= 1) {
        repeatArr = repeatMidArr;
      } else {
        repeatArr.push(repeatMidArr[0]);
        for (let i = 1; i < repeatMidArr.length; i += 1) {
          if (repeatMidArr[i] !== repeatMidArr[i - 1]) repeatArr.push(repeatMidArr[i]);
        }
      }
      // console.timeEnd('数组检查重复项时间');

      if (repeatArr.length !== 0) {
        this.sendRepeatMsg(repeatArr);
        return true;
      }

      return false;
    },

注意:

  1. 因为需要对一个数组查重,所以使用了jsON.stringify把数组转化为字符串简单处理。
  2. 给纯数字数组利用sort方法去重。


优化

优化的核心思想是算法中的hash表,也就是字典。在js中可以利用对象的键值不重复这个特性来把对象变成一个hash表。简化后的代码如下:

    checkData(tableData) {
      // console.time('数组检查重复项时间');
      // 检查重复项,检查空值(全局)
      const repeatObj = {};
      let repeatMidArr = [];
      let repeatArr = [];

      for (let i = 0; i < tableData.length; i += 1) {
        // 检查重复项(优化方法)
        const itemCondition = jsON.stringify(tableData[i].condition);
        const index = repeatObj[itemCondition];
        if (!index) {
          repeatObj[itemCondition] = i + 1;
        } else {
          repeatMidArr.push(index);
          repeatMidArr.push(i + 1);
        }
      }

      // 给repeatMidArr去重
      repeatMidArr = repeatMidArr.sort();
      if (repeatMidArr.length <= 1) {
        repeatArr = repeatMidArr;
      } else {
        repeatArr.push(repeatMidArr[0]);
        for (let i = 1; i < repeatMidArr.length; i += 1) {
          if (repeatMidArr[i] !== repeatMidArr[i - 1]) repeatArr.push(repeatMidArr[i]);
        }
      }
      // console.timeEnd('数组检查重复项时间');

      if (repeatArr.length !== 0) {
        this.sendRepeatMsg(repeatArr);
        return true;
      }

      return false;
    },

代码很简单,这里就不细说了。这种方法既然都能用到查重并返回重复项中,当然也能够用到去重里面去。


结果

优化之后,在5000条数据下,点击保存按钮的响应时间从35秒缩短到了3秒,性能提升了10倍!!!


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/2251

关闭

react性能优化之bind(this)

bind在react组件中使用不当也会影响性能,bind在render里面直接onClick = this.onClick.bind(this),这样写的话,render每次都会执行这段

通过HTML5 Video来优化动态GIF

网页中的动态GIF图片是非常受欢迎的,因为它们相比静态图片更生动,相比网页视频更简单。但是GIF图片通常具有较大的体积,就导致网页加载速度变慢,内存使用增加

加速vue组件渲染之性能优化

平时在用vue开发后台管理系统的时候,应该会用到大量的table这种组件,正常这种组件我们会在项目里做二次封装,然后针对表头title做参数化配置,如下:

js的防抖节流优化高频触发

js的防抖就是比如一个水龙头坏了一直在滴水,我们为了节约用水,那么我们会想办法让他不再滴的那么快,这就是防抖。常见的比如scroll,onresize这些高频触发的情况。

Web前端性能优化

web性能优化,主要分为前端和后台两个部分性能优化,后台性能优化决定了web能不能用,前端优化决定了其好不好用,也就是牵涉到前端用户体验和web易用性等情况,所以前端性能与用户体验是有着极大的关联的。

前端性能优化的三大处理方式

减少 HTTP 的请求次数和传输报文的大小,可以减少 HTTP 请求次数或者减少请求内容的大小 ,使图片渲染的更快:因为他们是基于代码渲染的,而对于位图(png/jpg/gif)是需要先把图片编码再渲染 ,可以避免图片失真变形

js节流阀和去抖动的基本实现

节流阀throttle:触发的事件以周期的形式去执行,而非实时。如滴水的水龙头。去抖动debounce:事件最后一次触发的N毫秒后触发,如电梯门。

js前端性能优化之函数节流和函数防抖

针对一些会频繁触发的事件如scroll、resize,如果正常绑定事件处理函数的话,有可能在很短的时间内多次连续触发事件,十分影响性能。节流:使得一定时间内只触发一次函数。 防抖动:将几次操作合并为一此操作进行。

WEB前端_搜索引擎工作原理与SEO优化

搜索引擎的工作分为三个阶段,即爬行,索引和检索;搜索引擎具有网络爬虫或蜘蛛来执行爬网,每次抓取工具访问网页时,它都会复制该网页并将其网址添加到索引中。

客户端内H5页面的首屏性能优化

性能优化是前端开发中不可避免的一个话题。本文将记录一次客户端内H5页面首屏性能优化的项目。信息流App是当下最流行的产品之一,如今日头条等。我所在的团队也是在做这样一款信息流App

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广