提高 JavaScript 性能的 12 个技巧

作者丨Liz Parody

在创建 Web 应用程序时应始终考虑性能。为了帮助你开始，本文列举了有效提高应用程序性能的 12 种方法。

性能是创建网页或应用程序时最重要的一个方面。没有人想要应用程序崩溃或者网页无法加载，或者用户的等待时间很长。根据 Kissmetrics，47％的访问者希望网站在不到 2 秒的时间内加载，如果加载过程需要 3 秒以上，则有 40％的访问者会离开网站。

考虑到以上这些数字，你在创建 Web 应用程序时应始终考虑性能。为了帮助你开始，以下提供了有效提高应用程序性能的 12 种方法：

要这样做有两种选择。第一种是使用 JavaScript Cache API，我们可以安装 service worker 来使用它。第二种是使用 HTTP 协议缓存。

访问某个对象通常要用脚本。通过把重复访问的对象存储在用户定义的变量中，以及在后续对该对象的引用中使用变量，可以立即实现性能的提升。

为了有效地衡量你在程序中加入的任何改进，你必须创建一组定义良好的环境，以便测试代码的性能。

对所有 Javascript 引擎的所有版本进行性能测试和优化实际上是不可行的。但是，在单一的环境中进行测试并非一个好习惯，因为你可能会得到片面的结果。因此，建立多个定义良好的环境并测试代码是否有效非常重要。

此步骤不仅会缩短传输时间，还会缩短浏览器分析和编译代码所需的时间。为此，你必须考虑以下几点：

你应该始终给内存加一条限制，那就是只有绝对必须的内容才能使用内存，因为你无法知道运行应用程序的设备到底需要多少内存。只要你的代码要求浏览器保留新的内存，浏览器的垃圾收集器就会被执行，并停止 JavaScript 的运行。如果经常发生这种情况，页面将变慢。

用户希望页面快速加载，但并非所有函数都需要在页面的初始加载时就可用。如果用户必须执行某个操作才能执行某个函数（例如，通过单击某个元素或更改选项卡），那么你可以将该函数的加载推迟到初始页面加载之后。

通过这种方式，你可以避免加载和编译那些会延迟页面初始显示的 JavaScript 代码。页面完全加载后，我们可以再开始加载这些功能，以便它们在用户开始交互时立即可用。在 RAIL 模型中，Google 建议将此延迟加载以 50 毫秒为单位进行，这样就不会影响用户与页面的交互。

如果内存正在泄漏，则加载的页面将保留越来越多的内存，并最终占用设备的所有可用内存并严重影响性能。你可能见过此类故障（并且可能对此类故障感到懊恼），例如在带有轮播或图像滑动条的页面上。

在 Chrome 开发者工具中，你可以通过在“性能”标签中记录时间线来分析你的网站是否存在内存泄漏。通常，内存泄漏的原因是，你从页面中删除了 DOM，但有一些变量还在引用这些 DOM，因此，垃圾收集器无法消除它们。

余下精彩内容，可点击“了解更多”进行查看