JavaScript 代码优化技巧

当用户访问你的网站时，使用的可能是高端设备也可能是低端设备，网络连接条件也有好有差。这意味着你必须尽可能优化自己的网站，以满足任何用户的需求。

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

你的应用程序包含的代码越多，就需要将更多的数据传输到客户端。浏览器也需要更多时间来分析和解释代码。有时，你可能打包了很多根本用不到的功能。最好只在开发环境中保留这些额外的代码，而不要将其推送到生产环境中，以免给客户端的浏览器增加负担。

2. 尽可能的缓存

缓存可以减少延迟和网络流量，从而减少了显示资源表示所需的时间，以提高网站的速度和性能。缓存可以借助应用里的缓存http缓存来实现。

3. 避免内存泄漏

作为一种高级语言，JS 会负责一些底层管理工作，例如内存管理。垃圾回收是大多数编程语言共有的过程。用外行术语来说，垃圾收集就是收集并释放已分配给对象，但目前尚未在程序的任何部分中使用的内存。

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

4. 尽早打破循环

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

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

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

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() 的常量。而且，每当以传递的名称作为参数调用内部函数时，都无需再次实例化常量。

6. 尽量减少 DOM 访问

与其他 JavaScript 语句相比，访问 DOM 的速度很慢。如果你对 DOM 进行更改，触发了布局的重新绘制，那么就得等好一阵子了。为了减少访问 DOM 元素的次数，请先访问一次，然后将其用作局部变量。完成需求后，请一定将其设置为 null 来移除该变量的值。这将防止内存泄漏，因为这会触发垃圾回收过程。

7. 压缩文件

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

8. 缩小最终代码

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

9. 使用 Throttle 和 Debounce

我们可以使用 Throttle（节流）和 Debounce（防抖）这两种技术来严格控制代码需要处理事件的次数。你可以实现自己的防抖和节流函数，也可以从 Lodash 和 Underscore 之类的库中导入它们。

10. 避免使用 Delete 关键字

delete 关键字用于从对象中删除属性。这个关键字的性能表现不怎么好，预计它将在未来的更新中修复。或者，你可以简单地将不需要的属性设置为 undefined。

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

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

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

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

12. 使用代码拆分

代码拆分是一种在传输开始时仅将必要的模块发送给用户的技术。通过减小最初发送的载荷大小，这将极大地影响 FCP 分数。流行的模块打包器（例如 webpack）可为你提供代码拆分功能。你还可以利用原生 ES 模块来单独加载各个模块。你可以在此处详细了解有关原生 ES 模块的信息。

13. 使用 async 和 defer

在现代网站中，脚本比 HTML 更为密集，其大小更大且消耗更多的处理时间。默认情况下，浏览器必须等待脚本下载和执行完毕后，再处理页面的其余部分。于是笨重的脚本可能会阻止网页的加载。为了避免这种情况，JavaScript 为我们提供了两种分别称为 async 和 defer 的技术。你只需将这些属性添加到<script>标记中即可。

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

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

完结撒花，有疑问留言探讨哈~~~