本文最初发布于Medium网站，经原作者授权由InfoQ中文站翻译并分享。

JavaScript已经成为有史以来最受欢迎的编程语言之一。根据W3Tech的数据，全世界将近96％的网站都在使用它。关于Web有一个关键的事实是，你无法控制访问网站的用户所用设备的硬件规格。最终用户访问你的网站时，使用的可能是高端设备也可能是低端设备，网络连接条件也有好有差。这意味着你必须尽可能优化自己的网站，以满足任何用户的需求。

这篇文章列举了一些技巧，可帮助你写出更好的JavaScript代码，从而提高性能。

附带提一下，请共享和重用你的JS组件，以在高质量代码（写起来需要花费时间）和合理的交付时间之间保持适当的平衡。你可以使用 Bit等流行工具将任何项目中的组件（普通JS、TS、React、Vue等）共享到Bit的组件中心，用不了多大功夫。

1、删除未使用的代码和功能

你的应用程序包含的代码越多，就需要将更多的数据传输到客户端。浏览器也需要更多时间来分析和解释代码。

有时，你可能打包了很多根本用不到的功能。最好只在开发环境中保留这些额外的代码，而不要将其推送到生产环境中，以免给客户端的浏览器增加负担。

要不断问自己，某个功能或代码段是否是必要的。

你可以手动移除未使用的代码，也可以使用Uglify或谷歌的Closure Compiler之类的工具删除它们。你甚至可以使用一种称为摇树优化的技术从应用程序中删除未使用的代码。Webpack这类打包软件提供了这种技术，详情可以参考这里。如果要删除未使用的npm软件包，可以使用命令npm prune，详细信息参考NPM文档。

2、尽可能缓存

缓存可以减少延迟和网络流量，从而减少了显示资源表示所需的时间，以提高网站的速度和性能。缓存可以借助Cache API或HTTP caching来实现。你可能想知道内容更改时会发生什么。当满足某些条件（例如发布新内容）时，上述缓存机制能够处理和重新生成缓存。

3、避免内存泄漏

作为一种高级语言，JS会负责一些底层管理工作，例如内存管理。垃圾回收是大多数编程语言共有的过程。用外行术语来说，垃圾收集就是收集并释放已分配给对象，但目前尚未在程序的任何部分中使用的内存。在C这样的编程语言中，开发人员必须使用malloc()和dealloc()函数来处理内存分配和释放操作。

虽然在JavaScript中垃圾回收是自动执行的，但在某些情况下它也不是完美的。在JavaScript ES6中，引入了Map和Set及其“weaker”的同级对象。被称为WeakMap和WeakSet的“较弱”对应项持有对对象的“弱”引用。它们使未引用的值能够被垃圾回收，从而防止内存泄漏。你可以在此处阅读有关WeakMaps的更多信息。

4、尽早打破循环

超大循环肯定会消耗很多宝贵的时间，所以你应该尽早打破它们。你可以用break关键字和continue关键字来做这件事。编写最高效的代码是你的责任。

在下面的示例中，如果你没有从循环中break，则你的代码将循环运行1000000000次，显然会过载的。

let arr = new Array(1000000000).fill('----');
arr[970] = 'found';
for (let i = 0; i < arr.length; i++) {
  if (arr[i] === 'found') {
        console.log("Found");
        break;
    }
}

在下面的示例中，如果你在循环不符合你的条件时没有continue，则你仍将运行该函数1000000000次。我们仅在数组元素处于偶数位置时处理它。这将循环执行减少了近一半。

let arr = new Array(1000000000).fill('----');
arr[970] = 'found';
for (let i = 0; i < arr.length; i++) {
  if(i%2!=0){
        continue;
    };
    process(arr[i]);
}

你可以在此处详细了解循环和性能的关系。

5、最小化变量计算的次数

为了减少计算变量的次数，可以使用闭包。通俗来说，JavaScript中的闭包使你可以从内部函数访问外部函数作用域。每次创建函数（不调用）时都会创建闭包。内部函数将有权访问外部作用域的变量，即使在返回外部函数之后也是如此。

我们来看两个例子。这些示例均来自Bret的博客。

function findCustomerCity(name) {
  const texasCustomers = ['John', 'Ludwig', 'Kate']; 
  const californiaCustomers = ['Wade', 'Lucie','Kylie'];
  
  return texasCustomers.includes(name) ? 'Texas' : 
    californiaCustomers.includes(name) ? 'California' : 'Unknown';
};

如果你多次调用上面的函数，那么每次都会创建一个新对象。每次调用时，变量texasCustomers和californiaCustomers都会导致不必要的内存重分配。

function findCustomerCity() {
  const texasCustomers = ['John', 'Ludwig', 'Kate']; 
  const californiaCustomers = ['Wade', 'Lucie','Kylie'];
  
  return name => texasCustomers.includes(name) ? 'Texas' : 
    californiaCustomers.includes(name) ? 'California' : 'Unknown';
};
let cityOfCustomer = findCustomerCity();
cityOfCustomer('John');//Texas
cityOfCustomer('Wade');//California
cityOfCustomer('Max');//Unknown

在上面的示例中，借助于闭包，返回到变量cityOfCustomer的内部函数可以访问外部函数findCustomerCity()的常量。而且，每当以传递的名称作为参数调用内部函数时，都无需再次实例化常量。要了解关于闭包的更多信息，建议你阅读Prashant的博客文章。

6、尽量减少DOM访问

与其他JavaScript语句相比，访问DOM的速度很慢。如果你对DOM进行更改，触发了布局的重新绘制，那么就得等好一阵子了。

为了减少访问DOM元素的次数，请先访问一次，然后将其用作局部变量。完成需求后，请一定将其设置为null来移除该变量的值。这将防止内存泄漏，因为这会触发垃圾回收过程。

7、压缩文件

通过压缩方法（例如Gzip）可以减小JavaScript文件的大小。较小的文件会提升你的网站性能，因为浏览器只需下载较小的资产即可。

这类压缩手段最多可以减少80％的文件大小。在此处阅读有关压缩的更多信息。

8、缩小最终代码

有人认为缩小和压缩是相同的，其实不然。在压缩中，我们使用特殊算法来改变文件的输出大小；在缩小时，我们需要删除JavaScript文件中的注释和多余的空格。可以在网上找到许多工具和软件包来帮助完成这一过程。缩小已成为页面优化的标准做法，也是前端优化的主要步骤之一。

缩小可以让文件大小最多减少60％。你可以在此处阅读有关缩小的更多信息。

9、使用Throttle（节流）和Debounce（防抖）

我们可以使用这两种技术来严格控制代码需要处理事件的次数。

节流是指定函数可以超时的最大次数。例如，“每1000毫秒最多执行一次onkeyup事件函数”。也就是说哪怕你每秒敲20个键，该事件每秒也只会触发一次。这将减少代码的负担。

另一方面，防抖是指定自上次执行相同函数以来再次运行该函数的最短持续时间。换句话说，“上次调用函数后过最少600毫秒才执行此函数”。要了解有关节流和防抖的更多信息，这里有一篇快速入门。

你可以实现自己的防抖和节流函数，也可以从Lodash和Underscore之类的库中导入它们。

10、避免使用Delete关键字

delete关键字用于从对象中删除属性。这个关键字的性能表现不怎么好，预计它将在未来的更新中修复。

或者，你可以简单地将不需要的属性设置为undefined。

const object = {name:"Jane Doe", age:43};
object.age = undefined;

你还可以使用Map对象，Bret认为它的delete方法会更快。

11、使用异步代码防止线程阻塞

你应该知道JavaScript默认情况下是同步的和单线程的。但是在某些情况下，你的代码需要很大的计算量。代码本质上是同步的，意味着一段代码运行时将阻止其他代码语句运行，直到前者完成执行为止。这会降低整体性能。

但是我们可以通过异步代码来避免这种情况。异步代码以前以回调的形式编写，但是ES6引入了一种处理异步代码的新样式。这种新样式被称为Promise。你可以在MDN的官方文档中了解有关回调和Promise的更多信息。

可是等等……

JavaScript默认情况下是同步的，并且也是单线程的。

如何在单个线程上运行异步代码呢？这是很多人感到困惑的地方。做到这一点，主要依赖运行在浏览器后台的JavaScript引擎。JavaScript引擎是执行JavaScript代码的计算机程序或解释器。JavaScript引擎可以用多种语言编写。例如，支持Chrome浏览器的V8引擎是用C++编写的，而支持Firefox浏览器的SpiderMonkey引擎是用C和C++编写的。

这些JavaScript引擎可以在后台处理任务。根据Brian的说法，调用栈可以识别Web API的函数，并将其交给浏览器处理。浏览器完成这些任务后，它们将返回并作为回调被推上堆栈。

你可能想知道Node.js是怎么做这些工作的，毕竟它没有浏览器的帮助。实际上，支持Chrome的那个V8引擎也是Node.js背后的支撑。这里有Salil的一篇很棒的博客文章，解释了Node生态系统中的这一过程。

12、使用代码拆分

如果你有使用Google Light House的经验，肯定会熟悉一种称为“first contentful paint”的指标。它是Lighthouse报告的Performance部分中跟踪的六个指标之一。

First Contentful Paint（FCP）衡量用户转到你的页面后浏览器渲染第一段DOM内容所花费的时间。页面上的图像、非白色<canvas>元素和SVG被视为DOM内容；iframe内部不包含任何内容。

获得更高的FCP分数的最佳方法之一是使用代码拆分。代码拆分是一种在传输开始时仅将必要的模块发送给用户的技术。通过减小最初发送的载荷大小，这将极大地影响FCP分数。

流行的模块打包器（例如webpack）可为你提供代码拆分功能。你还可以利用原生ES模块来单独加载各个模块。你可以在此处详细了解有关原生ES模块的信息。

13、使用async和defer

在现代网站中，脚本比HTML更为密集，其大小更大且消耗更多的处理时间。默认情况下，浏览器必须等待脚本下载和执行完毕后，再处理页面的其余部分。

于是笨重的脚本可能会阻止网页的加载。为了避免这种情况，JavaScript为我们提供了两种分别称为async和defer的技术。你只需将这些属性添加到<script>标记中即可。

Async会让浏览器在不影响渲染的情况下加载脚本。换句话说，页面不会等待async脚本，而是先处理和显示内容。

Defer是让浏览器在渲染完成后加载脚本。如果同时指定它们两者，则async在现代浏览器上更优先，而支持defer但不支持async的老式浏览器将回退为defer。

这两个属性可以帮助你大幅减少页面加载时间。我强烈建议你阅读Flavio的这篇博客文章。

14、使用Web Workers在后台运行CPU密集型任务

Web Worker允许你在后台线程中运行脚本。如果你有一些高强度的任务，可以将它们分配给Web Worker，这些WebWorker可以在不干扰用户界面的情况下运行它们。创建后，Web Worker可以将消息发布到该代码指定的事件处理程序来与JavaScript代码通信，反之亦然。

要了解有关Web Worker的更多信息，建议你阅读MDN文档。

感谢阅读，欢迎评论，编程愉快！

延伸阅读

https://blog.bitsrc.io/14-javascript-code-optimization-tips-for-front-end-developers-a44763d3a0da

创作场景

14 个 JavaScript 代码优化技巧