14个 JavaScript 代码优化技巧

Posted 2021-04-17 前端之巅

作者 | Mahdhi Rezvi

译者 | 王强

策划 | 李俊辰

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

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

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

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

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

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

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

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

你可以手动移除未使用的代码，也可以使用 Uglify 或谷歌的 Closure Compiler 之类的工具删除它们。你还可以使用一种被称为摇树优化的技术从应用程序中删除未使用的代码。Webpack 这类打包软件提供了这种技术，详情可以参考这里：

https://www.infoq.cn/article/dcKcJiT8aeEBNZbdotFF

如果要删除未使用的 npm 软件包，可以使用命令 npm prune，详细信息参考 NPM 文档。

https://docs.npmjs.com/cli-commands/prune.html

2、尽可能的缓存

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

3、避免内存泄漏

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

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

https://blog.bitsrc.io/understanding-weakmaps-in-javascript-6e323d9eec81

4、尽早打破循环

超大循环肯定会耗费很多的时间，所以你应该尽早打破这些超大循环。你可以用 break 关键字和 continue 关键字来做这件事，从而编写更高效的代码。

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

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]);
}

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

https://www.oreilly.com/library/view/high-performance-javascript/9781449382308/ch04.html

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 的博客文章：

https://medium.com/@prashantramnyc/javascript-closures-simplified-d0d23fa06ba4

6、尽量减少 DOM 访问

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

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

7、压缩文件

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

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

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer#text_compression_with_gzip

8、缩小最终代码

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

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

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer#minification_preprocessing_context-specific_optimizations

9、使用 Throttle 和 Debounce

我们可以使用 Throttle（节流）和 Debounce（防抖）这两种技术来严格控制代码需要处理事件的次数。

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

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

https://css-tricks.com/the-difference-between-throttling-and-debouncing/

你可以实现自己的防抖和节流函数，也可以从 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 的更多信息。

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Introducing

可是等等……

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

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

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

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

https://medium.com/better-programming/is-node-js-really-single-threaded-7ea59bcc8d64

12、使用代码拆分

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

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

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

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

https://blog.bitsrc.io/understanding-es-modules-in-javascript-a28fec420f73

13、使用 async 和 defer

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

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

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

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

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

https://flaviocopes.com/javascript-async-defer/

14、在后台运行 CPU 密集型任务

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

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

https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers

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

延伸阅读

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

福利来了

前端之巅真爱粉福利：

免费领取大前端技能图谱