[译]编写更快、更好的JavaScript的13个技巧

时间 2020-06-11

原文原文链接

10年前，亚马逊分享一个例子，每100毫秒的延迟都会是他们损失1%的销售收入，即在整年中，每增长1秒钟的加载时间将使该公司损失约16亿美圆。一样，谷歌发现搜索页面的生成时间增长500毫秒，访问量将减小20%，潜在的广告收入也将减小五分之一。javascript

咱们中不多人能够像谷歌和亚马逊同样去处理这种大场面，可是，相同的原则也适用于更小规模的场景，速度更快的代码能够带来更好的用户体验，而且对业务更有利。特别是在web开发中，速度可能在与对手竞争中成为关键因素。在较快的网络上浪费的每个毫秒，就会在较慢的网络上放大。前端

在本文中，咱们将探讨13种提高JavaScript运行速度的实用技巧，不管你是写基于Node.js的服务端代码仍是客户端的JavaScript代码。我已经提供了基于https://jsperf.com建立的性能测试用例。若是你想本身测试这些技巧，请确保点击这些连接。java

Do It Less

最快的代码是那些历来不会运行的代码。

1. 删除无用的功能

开始着手优化已经写好的代码是一件很容易的事情，可是，对性能提高最大的方法每每来自于退后一步问问本身为何咱们的代码须要出如今这里。web

在继续某项优化工做以前，问问本身你的代码是否真的须要作他如今所作的事情。这个功能里面的组件或者函数是否有必要？若是没有，请删掉它。这一步对提高代码速度很是重要，却很容易被忽略。算法

2. 避免无用的步骤

基准测试：https://jsperf.com/unnecessary-stepschrome

在较小的规模上，一个函数运行过程当中执行的每一步都有用么？举个例子，为了达到最终的效果，你的数据是否会陷于一个没有必要的圈中？下面的示例可能被简化了，可是，它能表明那些在较大代码量中很难被发现的问题。编程

'incorrect'.split('').slice(2).join('');  // converts to an array
'incorrect'.slice(2);                     // remains a string

即便在简单的例子中，性能上的差别也是十分巨大的，运行某些代码比不运行任何代码要慢得多！尽管不多有人会犯上述错，可是面对更长、更复杂的代码，在获取结果的前加上一些毫无价值的步骤就会很容易。尽可能避免它！数组

Do It Less often

若是你不能删除代码，问问你本身能不能减小作这件事情的频率呢？代码如此强大的缘由之一是他可使用咱们轻松的完成重复的操做，可是，也更容易让咱们的代码执行次数超过须要的次数。如下是一些须要注意的特殊状况。浏览器

3. 越早退出循环越好

基准测试：https://jsperf.com/break-loops/1性能优化

在一个循环中找出不须要迭代完成的状况。举个例子，若是你正在寻找一个特殊值而且已经找到他了，那么剩下的迭代就已经不须要了。你应该经过使用break语句来中断正在执行中的循环：

for (let i = 0; i < haystack.length; i++) {
    if (haystack[i] === needle) {
        break;
    }
}

或者，若是，你须要只对循环中某些元素作操做时，你可使用continue语句来跳过对其余元素进行操做。continue会终止当前迭代中的执行语句，当即跳转到下一个语句中：

for (let i = 0; i < haystack.length; i++) {
    if (!haystack[i] === needle) {
        continue;
    }
    doSomething();
}

值得注意的是，你也能够经过break或continue跳过嵌套的循环：

loop1: for (let i = 0; i < haystacks.length; i++) {
    loop2: for (let j = 0; j < haystacks[i].length; j++) {
        if (haystacks[i][j] === needle) {
            break loop1;
        }
    }
}

4. 仅仅初始化一次

基准测试：https://jsperf.com/pre-compute-once-only/6 （译者在mac下自测，使用/不使用闭包，使用/不使用全局变量，目前对性能影响差别不大）

在咱们的应用中，咱们将会调用数次下列方法：

function whichSideOfTheForce1(name) {
    const light = ['Luke', 'Obi-Wan', 'Yoda'];
    const dark = ['Vader', 'Palpatine'];

    return light.includes(name) ? 'light' : dark.includes(name) ? 'dark' : 'unknown';
}

whichSideOfTheForce1('Luke');
whichSideOfTheForce1('Vader');
whichSideOfTheForce1('Anakin');

这段代码，咱们每次调用whichSideOfTheForce1时，都会从新建立2次数组，每次调用时都须要给咱们的数组从新分配内存。

提供的数组的值是固定的，那最好的解决办法就是定义一次，而后在函数中调用它的引用。尽管咱们也能够全局定义这2个数组变量，可是，这将容许他们在咱们的函数外部被篡改。最好的解决方法是使用闭包，这就意味着他返回的是一个函数：

function whichSideOfTheForceClosure1(name) {
    const light = ['Luke', 'Obi-Wan', 'Yoda'];
    const dark = ['Vader', 'Palpatine'];

    return (name) => (light.includes(name) ? 'light' : dark.includes(name) ? 'dark' : 'unknown');
}
const whichSideOfTheForce2 = whichSideOfTheForceClosure1();

如今，咱们的数组只会初始化一次了。再来看看下面的例子：

function doSomething(arg1, arg2) {
    function doSomethingElse(arg) {
        return process(arg);
    };
    return doSomethingElse(arg1) + doSomethingElse(arg2);
}

每次运行doSomething时，都会从头开始建立嵌套函数doSomethingElse。闭包提供了解决方案，若是咱们返回一个函数，doSomethingElse仍然是私有的，但只会建立一次：

function doSomething(arg1, arg2) {
    function doSomethingElse(arg) {
        return process(arg);
    };
    return (arg1, arg2) => doSomethingElse(arg1) + doSomethingElse(arg2);
}

5. 控制代码的执行顺序来保证最小的运行次数

基准测试: https://jsperf.com/choosing-the-best-order/1

若是仔细考虑函数中每一步的执行顺序，也能够帮助咱们提升代码的执行效率。假设，咱们有一个数组来存储上平的价格（美分），咱们须要一个函数对商品的价格进行求和并返回结果（美圆）：

const cents = [2305, 4150, 5725, 2544, 1900];

这个函数有2件事情要作，转化单位和求和，可是这些动做的顺序很重要。若是优先处理转化单位，咱们函数是这样的：

function sumCents(array) {
    return '$' + array.map(el => el / 100).reduce((x, y) => x + y);
}

在这个方法中，咱们对数组的每一项都须要进行除法，若是改变执行的顺序，咱们只须要进行一次除法:

function sumCents(array) {
    return '$' + array.reduce((x, y) => x + y) / 100;
}

优化性能的关键就是确保函数以最佳的顺序执行。

6. 了解代码的时间复杂度 O(n)

了解代码的时间复杂度是理解为何某些方法比其余方法运行的更快，占用的内存更少的最佳方法之一。例如，你能够经过使用时间复杂一目了然的了解为何二分搜索是效率最好的搜索算法之一，为何快排是每每是最有效的排序算法。详细请自行了解时间复杂度

Do It Faster

代码速度优化收益最大的每每是前面2类。在本节中咱们将讨论提升代码速度的几种方法，他们更多的是和代码优化相关，而不是剔除他或者减小运行的次数。

固然，这些优化也要减小代码的大小或者使其对编译器更友好，可是，表面上看你只更改了代码而已。

7. 多用内置函数

基准测试：https://jsperf.com/prefer-built-in-methods/1

对于拥有编译器和底层语言经验的人来讲，这是一件很明显的事情。可是，这里仍是要把它做为一个基础规则来提一下，若是JavaScript有内置函数，请使用它。

编译器代码在设计时，就针对方法或者对象类型进行了性能优化。另外，内置方法的底层语言是C++。除非你的用例特别具体，不然，你本身的JavaScript代码不多能比现有内置代码快。

为了测试这个，咱们本身来实现一个map方法

function map(arr, func) {
    const mapArr = [];
    for (let i = 0; i < arr.length; i++) {
        const result = func(arr[i], i, arr);
        mapArr.push(result);
    }
    return mapArr;
}

让咱们来建立一个数组，里面包含了100个随机数字（1-100)。

const arr = [...Array(100)].map(e=>~~(Math.random()*100));

咱们来执行一些简单操做（数字乘2）来比较两者的差别：

map(arr, el => el * 2);  // Our JavaScript implementation
arr.map(el => el * 2);   // The built-in map method

在个人测试中，咱们本身实现的map方法比原生的Array.prototype.map慢65%。

8. 选择最佳的数据类型

基准测试1：set.add()vs array.push() https://jsperf.com/adding-to-a-set-vs-pushing-to-an-array

基准测试2：map.set() vs object['xx'] https://jsperf.com/adding-map-vs-adding-object

一样，最佳的性能也可能来自于选择合适的内置数据类型。JavaScript中内置的数据类型远远不止：Number、String、Function、Object。不少不常见的数据类型若是在正确的场景中使用将会提供很是明显的优点。

Set和Map在频繁添加和删除元素的状况下有明显的性能优点。

了解内置的对象类型，并尝试使用最适合你须要的对象类型，这对提高代码的性能很是有用。

9. 别忘了内存

JavaScript做为一种高级语言，它为你处理不少底层细节。内存管理就是其中一个。JavaScript使用一种称为垃圾回收（GC）的系统来释放内存，在不须要开发人员明确指示的状况下，就能够自动释放内存。

尽管内存管理在JavaScript中是自动的，但这并不意味着它是完美的。你也能够采起其余步骤来管理内存并减小内存泄漏的机会。

例如，Set和Map有变体WeakSet和WeakMap，他们持有对象的“弱”引用。他们经过确保其中的对象没有其余对象引用时触发垃圾回收，来确保不会出现内存泄漏。

在ES2017以后，你能够经过TypedArray对象来更好的控制内存的分配。例如，Int8Array能够放-128到127之间的值，仅仅占用一个字节。可是，值得注意的是，使用TypedArray的性能提高可能很小：将常规数组与Uint32Array进行比较写入性能略有改善，但读取性能却几乎没有改善。

对于底层编程语言有基本的了解能够帮助你编写更快、更好的JavaScript代码。

10. 尽量使用单态

基准测试1：https://jsperf.com/monomorphic-forms

基准测试2：https://jsperf.com/impact-of-function-arguments

若是咱们设置const a = 2，则变量a能够被视为多态的（能够更改）。相反，若是咱们直接使用2，则能够认为是单态的（其值是固定的）。

固然，若是咱们须要屡次使用变量，则设置变量很是有用。可是，若是你只使用一次变量，则彻底避免设置变量会稍快一些。采起简单的乘法功能：

// 函数定义
function multiply(x, y) {
    return x * y;
}

若是咱们运行multiply(2, 3)，他比直接运行下面的代码快1%：

// 定义2个变量做为multiply的参数
let x = 2, y = 3;
multiply(x, y);

这是一个小胜利，在大型代码中，性能提高每每是由大量小胜利组成的。

一样，在函数中使用参数可提供灵活性，但会下降性能。若是不须要它们，就能够把它变成一个常量放在函数中，它会略微提升性能。所以，multiply的更快版本以下所示：

// 若是3是固定不变的时候，则直接做为函数中的一部分
function multiplyBy3(x) {
    return x * 3;
}

结合上述优化，在个人测试中性能提高约为2％。虽然改动的点比较小，可是若是能够在大型代码库中屡次进行这种改进，就值得考虑了。

译者注，这里原文太绕了，你们看看代码里面的注释理解一下

a. 仅在值必须是动态的时才引入函数参数，不然，就写成函数内部的变量；

b. 仅在屡次使用某一个值时才引入变量，不然，就直接写值；

11. 避免使用`delete`

基准测试1: https://jsperf.com/removing-variables-from-an-object/1

基准测试2: https://jsperf.com/delete-vs-map-prototype-delete

delete关键词的做用是用来删除对象中的某一个属性。也许你会以为这个对于你的应用来讲颇有用，可是，但愿你尽可能别去用它。在v8引擎中，delete关键词消除了hidden class的优点，让对象变成了一个"慢对象"。

hidden class：因为 JavaScript 是一种动态编程语言，属性可进行动态的添加和删除，这意味着一个对象的属性是可变的，大多数的 JavaScript 引擎（V8）为了跟踪对象和变量的类型引入了隐藏类的概念。在运行时 V8 会建立隐藏类，这些类附加到每一个对象上，以跟踪其形状/布局。这样能够优化属性访问时间

根据你的需求，可能仅仅将不须要的属性设置成undefined就够了。

const obj = { a: 1, b: 2, c: 3 };
obj.a = undefined;

我在网上看过一些建议，他们使用如下的功能去拷贝除去指定属性以外的对象：

const obj = { a: 1, b: 2, c: 3 };
const omit = (prop, { [prop]: _, ...rest }) => rest;
const newObj = omit('a', obj);

可是，在个人测试中，上面的函数比delete关键词还要慢。另外，它的可读性也很低。

或者，你能够考虑使用Map而不是Object，由于，Map.prototype.delete比delete也快不少。

Do It Later

若是你作不到上述3个方面的优化，你也能够试一试第四类优化，即便运行时间彻底相同也会让你觉代码更快。这涉及重构代码，使总体性较小或要求较高的任务不会阻塞最重要的代码执行。

12. 使用异步代码避免线程堵塞

默认状况下，JavaScript是单线程的，而且会同步的执行代码。（实际上，浏览器代码可能正在运行多个线程来捕获事件并触发处理程序，但就编写JavaScript代码而言，它是单线程的）

同步执行对大可能是JavaScript代码都适用，可是，若是咱们须要执行的代码须要很长时间，可是，咱们又不想堵塞其余更重要的代码执行。

咱们就须要使用异步代码。像fetch()或者XMLHttpRequest()这些内置方法强制是异步执行的。值得注意的是，任何同步函数均可以异步化：若是你在执行耗时的同步操做，例如对大型数组中的每一个项目执行操做，则可使此代码异步化，这样就不会阻止其余代码的执行。

此外，在NodeJs中，不少模块都存在同步方法和异步方法两种，例如，fs.writeFile()和fs.writeFileSync()。在正常状况下，请默认使用异步方法。

13. 使用Code Split

若是你在浏览器中写JavaScript，那么你应该优先确保你的页面展现的越快越好。“首屏渲染”是一个衡量浏览器渲染第一个有效界面时间的关键指标。

改善此问题的最佳方法就是经过JavaScript代码拆分。与其将全部代码都打包在一块儿，不如将其拆分红较小的块，这样就能够预加载更少的JavaScript代码。根据你是用的引擎不一样，代码拆分的方法也不一样。

Tree-Shaking是一个从代码库中剔除无用的代码的策略，你能够经过这篇文章tree-shaking来了解他。

总结

确保你的优化策略有效的最佳方案就是测试他们，我在文章中使用[]()测试性能，你也能够试一试:

http://jsben.ch/
https://jsbench.me/
console.time和consoele.timeEnd

Chrome的开发者工具中的性能和网络面板是检查web应用的性能的好工具，同时，我还推荐使用Google的LightHouse。

最后，尽管速度很重要，可是，速度并非好代码的所有。可读性和可维护性也很重要，若是为了提高轻微的性能而致使须要花更多的时间去找BUG并修复它，事情将变得很不值得。

关于我

我是一个莫得感情的代码搬运工，每周会更新1至2篇前端相关的文章，有兴趣的老铁能够扫描下面的二维码关注或者直接微信搜索前端补习班关注。

精通前端很难，让咱们来一块儿补补课吧！

好啦，翻译完毕啦，原文连接在此 13 Tips to Write Faster, Better-Optimized JavaScript。