14个 JavaScript 代码优化技巧 _avaScript

文章插图

作者 | Mahdhi Rezvi
译者 | 王强
策划 | 李俊辰
转发链接：https://mp.weixin.qq.com/s/veJ6mhxd5XwVG4OF7i0VYQ
前言这篇文章列举了一些技巧，可帮助你写出更好的 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