《前端算法系列》如何让前端代码速度提高60倍

徐小夕
• 阅读 1046

《前端算法系列》如何让前端代码速度提高60倍 今天的问题从排序算法入手,来讲解如何根据业务需求,结合金典的算法,来实现js高性能开发。

情景

老板让小明给公司的20000+条数据排个序,但是由于排序的操作会频繁发生,如果操作执行的时间很慢,则会严重降低用户体验,听到这条噩耗后小明开始了代码。

1.毫无违和感的排序算法 小明根据需求,思考了一会,写下了如下算法:

/**
 * max排序
 * @param {*} arr 
 * 耗时:760ms
 */
 function maxSort(arr) {
     let result = [...arr];
     for(let i=0,len=result.length; i< len; i++) {
        let minV = Math.min(...result.slice(i))
        let pos = result.indexOf(minV,i)
        result.splice(pos, 1)
        result.unshift(minV)
     }
     return result.reverse()
 }

自信的小明陶醉在自己的算法中,准备测试一下性能,

/*
 * @Author: Mr Jiang.Xu 
 * @Date: 2019-06-11 10:25:23 
 * @Last Modified by: Mr Jiang.Xu
 * @Last Modified time: 2019-06-13 21:03:59
 * @desc 测试函数执行的时间
 */

const testArr = require('./testArr');
module.exports = async function getFnRunTime(fn) {
    let len = testArr.length;
    let startTime = Date.now(), endTime;
    let result = await fn(testArr);
    endTime = Date.now();
    console.log(result);
    console.log(`total time:${endTime-startTime}ms`,
                'test array\'length:' + len, 
                result.length
    );
}

运行该测试函数后,耗时760ms,小明觉得还不错,放到项目中后,第一次操作还好,连续操作了几次后,页面明显卡顿。。。(求此时小明心里的阴影面积)

2.冒泡排序

小明不甘心,在网上查找相关资料后,写下了如下冒泡排序代码:

/**
  * 置换函数
  * @param {源数组} arr 
  * @param {原数组的A项} indexA 
  * @param {原数组的B项} indexB 
  */
 function swap(arr, indexA, indexB) {
    [arr[indexA], arr[indexB]] = [arr[indexB], arr[indexA]];
 }

/**
 * 原始冒泡排序
 * @param {数组} arr 
 * 耗时:377ms
 */
 function bubbleSort1(arr) {
    for (let i = arr.length - 1; i > 0; i--) {
      for (let j = 0; j < i; j++) {
        if (arr[j] > arr[j + 1]) {
          swap(arr, j, j + 1);
        }
      }
    }

    return arr;
  }

测试后耗时377ms,完美,小明放到项目中测试,频繁排序还是会有点卡顿,能不能再优化一下呢? 思考许久之后,小明完善了冒泡排序:

/**
 * 利用索引优化后的冒泡排序
 * @param {数组} arr 
 * 耗时:350ms
 */ 
function bubbleSort2(arr) {
    let i = arr.length - 1;

    while (i > 0) {
        let pos = 0;

        for (let j = 0; j < i; j++) {
        if (arr[j] > arr[j + 1]) {
            pos = j;
            swap(arr, j, j + 1);
        }
        }
        i = pos;
    }

    return arr;
}

根据缓存索引位置来提高排序性能,时间节约了20ms,但收益很小。小明开始和自己过不去了,在维基百科上继续查找,最后发现了一个方法:

/**
 * 在每趟排序中进行正向和反向两遍冒泡 ,
 * 一次可以得到两个最终值(最大和最小), 
 * 从而使外排序趟数大概减少了一半
 * @param {*} arr 
 * 耗时:312ms
 */
function bubbleSort3(arr) {
    let start = 0;
    let end = arr.length - 1;

    while (start < end) {
      let endPos = 0;
      let startPos = 0;
      for (let i = start; i < end; i++) {
        if (arr[i] > arr[i + 1]) {
            endPos = i;
            swap(arr, i, i + 1);
        }
      }
      end = endPos;
      for (let i = end; i > start; i--) {
        if (arr[i - 1] > arr[i]) {
          startPos = i;  
          swap(arr, i - 1, i);
        }
      }
      start = startPos;
    }

    return arr;
  }

通过在每趟排序中进行正向和反向两遍冒泡,小明把时间又降低了38ms,不错~ 《前端算法系列》如何让前端代码速度提高60倍 再次推荐大家有事多上上维基百科,总有一款适合你。 ####3.插入排序 在收入小规模胜利后,小明膨胀了,狂言要把排序时间降低到100ms一下,于是后又安利了如下算法:

/**
   * 插入排序 -- 基础版
   * @param {*} arr 
   * 耗时:897ms
   */
  function insertionSort(arr) {
    for (let i = 1, len = arr.length; i < len; i++) {
      const temp = arr[i];
      let preIndex = i - 1;

      while (arr[preIndex] > temp) {
        arr[preIndex + 1] = arr[preIndex];
        preIndex -= 1;
      }
      arr[preIndex + 1] = temp;
    }

    return arr;
  }

897ms,小明留下了没技术的泪水。 《前端算法系列》如何让前端代码速度提高60倍 最后小明拿出了这个看家本领,查到了二分搜索,最后改造后代码入下:

/**
   * 改造二分查找,查找小于value且离value最近的值的索引
   * @param {*} arr 
   * @param {*} maxIndex 
   * @param {*} value 
   */
  function binarySearch1(arr, maxIndex, value) {
    let min = 0;
    let max = maxIndex;

    while (min <= max) {
      const m = Math.floor((min + max) / 2);

      if (arr[m] <= value) {
        min = m + 1;
      } else {
        max = m - 1;
      }
    }

    return min;
  }

/**
 * 使用二分法来优化插入排序
 * @param {*} arr 
 * 耗时:86ms
 */
function insertionSort1(arr) {
    for (let i = 1, len = arr.length; i < len; i++) {
        const temp = arr[i];
        const insertIndex = binarySearch1(arr, i - 1, arr[i]);

        for (let preIndex = i - 1; preIndex >= insertIndex; preIndex--) {
        arr[preIndex + 1] = arr[preIndex];
        }
        arr[insertIndex] = temp;
    }

    return arr;
}

完美,只用了86ms!小明激动的站了起来,还拍了下桌子,全然无视观众的眼光。 《前端算法系列》如何让前端代码速度提高60倍 小明已经满足的不要不要的了,对86ms相当满意,老板也对他刮目想看。

4.希尔排序

难道就没有提升的余地了么?进过调查研究表明,是有更优的方案的:

/**
 * 希尔排序
 * 核心:通过动态定义的 gap 来排序,先排序距离较远的元素,再逐渐递进
 * @param {*} arr 
 * 耗时:15ms
 */
function shellSort(arr) {
    const len = arr.length;
    let gap = Math.floor(len / 2);

    while (gap > 0) {
      // gap距离
      for (let i = gap; i < len; i++) {
        const temp = arr[i];
        let preIndex = i - gap;

        while (arr[preIndex] > temp) {
          arr[preIndex + gap] = arr[preIndex];
          preIndex -= gap;
        }
        arr[preIndex + gap] = temp;
      }
      gap = Math.floor(gap / 2);
    }

    return arr;
  }

耗时15ms,膜拜。 ####5.归并排序

/**
 * 归并排序
 * @param {*} arr 
 * 耗时 30ms
 */
function concatSort(arr) {
  const len = arr.length;

  if (len < 2) { return arr; }

  const mid = Math.floor(len / 2);
  const left = arr.slice(0, mid);
  const right = arr.slice(mid);

  return concat(concatSort(left), concatSort(right));
}

function concat(left, right) {
  const result = [];

  while (left.length > 0 && right.length > 0) {
    result.push(left[0] <= right[0] ? left.shift() : right.shift());
  }

  return result.concat(left, right);
}

耗时30ms,也想当优秀。还有没有更快的方法呢?答案是有的,但是会涉及到比较高僧的数学知识,放弃吧,孩子。。。《前端算法系列》如何让前端代码速度提高60倍

接下来会推出更多优秀的算法,敬请期待哦~ 最后,欢迎加入前端技术群,一起探讨前端的魅力

更多推荐

点赞
收藏
评论区
推荐文章
秃头王路飞 秃头王路飞
4个月前
webpack5手撸vue2脚手架
webpack5手撸vue相信工作个12年的小伙伴们在面试的时候多多少少怕被问到关于webpack方面的知识,本菜鸟最近闲来无事,就尝试了手撸了下vue2的脚手架,第一次发帖实在是没有经验,望海涵。languageJavaScript"name":"vuecliversion2","version":"1.0.0","desc
光头强的博客 光头强的博客
4个月前
Java面向对象试题
1、请创建一个Animal动物类,要求有方法eat()方法,方法输出一条语句“吃东西”。创建一个接口A,接口里有一个抽象方法fly()。创建一个Bird类继承Animal类并实现接口A里的方法输出一条有语句“鸟儿飞翔”,重写eat()方法输出一条语句“鸟儿吃虫”。在Test类中向上转型创建b对象,调用eat方法。然后向下转型调用eat()方
刚刚好 刚刚好
4个月前
css问题
1、在IOS中图片不显示(给图片加了圆角或者img没有父级)<div<imgsrc""/</divdiv{width:20px;height:20px;borderradius:20px;overflow:h
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
小森森 小森森
4个月前
校园表白墙微信小程序V1.0 SayLove -基于微信云开发-一键快速搭建,开箱即用
后续会继续更新,敬请期待2.0全新版本欢迎添加左边的微信一起探讨!项目地址:(https://www.aliyun.com/activity/daily/bestoffer?userCodesskuuw5n)\2.Bug修复更新日历2.情侣脸功能大家不要使用了,现在阿里云的接口已经要收费了(土豪请随意),\\和注意
晴空闲云 晴空闲云
4个月前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
艾木酱 艾木酱
3个月前
快速入门|使用MemFire Cloud构建React Native应用程序
MemFireCloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
Wesley13 Wesley13
1年前
MySQL查询按照指定规则排序
1.按照指定(单个)字段排序selectfromtable_nameorderiddesc;2.按照指定(多个)字段排序selectfromtable_nameorderiddesc,statusdesc;3.按照指定字段和规则排序selec
helloworld_34035044 helloworld_34035044
6个月前
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
helloworld_28799839 helloworld_28799839
4个月前
常用知识整理
Javascript判断对象是否为空jsObject.keys(myObject).length0经常使用的三元运算我们经常遇到处理表格列状态字段如status的时候可以用到vue