提升 JavaScript 性能的 12 个技巧

原文：y3e.cn/T2Fep

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

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

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

1. 在浏览器中缓存

要这样作有两种选择。第一种是使用 JavaScript Cache API，咱们能够安装 service worker 来使用它。第二种是使用 HTTP 协议缓存。

访问某个对象一般要用脚本。经过把重复访问的对象存储在用户定义的变量中，以及在后续对该对象的引用中使用变量，能够当即实现性能的提高。

2. 定义执行的上下文

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

对全部 Javascript 引擎的全部版本进行性能测试和优化其实是不可行的。可是，在单一的环境中进行测试并不是一个好习惯，由于你可能会获得片面的结果。所以，创建多个定义良好的环境并测试代码是否有效很是重要。

3. 删除未使用的 JavaScript

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

• 若是你检测到一个用户未使用的功能，最好删除全部与之相关的 JavaScript 代码，这样网站的加载速度会更快，用户也会有更好的体验。

• 还有可能，你错误地加入了一个并不须要的库，或者你有依赖项，这些依赖项提供的功能在全部浏览器中本来就有，那么你无需再增长多余的代码。

4. 避免使用太多内存

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

5. 推迟没必要要的 JS 加载

用户但愿页面快速加载，但并不是全部函数都须要在页面的初始加载时就可用。若是用户必须执行某个操做才能执行某个函数（例如，经过单击某个元素或更改选项卡），那么你能够将该函数的加载推迟到初始页面加载以后。

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

6. 避免内存泄漏

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

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

7. 适当的使用 Web worker

当你执行耗时很长的代码时，请使用 Web worker。根据 Mozilla 开发人员网络 (MDN) 文档：“Web Worker 能够在与 Web 应用程序的主执行线程分开的后台线程中运行脚本操做。这样作的好处是你能够在一个单独的线程中执行耗时又费力的的处理，同时让主（一般为 UI）线程运行而不被阻塞或减慢。”

Web worker 容许代码执行处理器密集型计算，而不阻塞用户界面线程。Web Worker 容许你生成新线程并将工做委托给这些线程以得到高效的性能。这样，一般会阻碍其余任务且须要长时间运行的任务将被传递给 worker，从而让主线程能够在无阻碍的状况下运行。

8. 适当将 DOM 元素保存在局部变量中

访问 DOM 会很慢。若是要屡次读取某元素的内容，最好将其保存在局部变量中。但记住重要的是，若是稍后你会删除 DOM 的值，则应将变量设置为“null”，否则会致使内存泄漏。

9. 优先访问局部变量

JavaScript 首先搜索以查看变量是否存在于本地，而后才在更高级别的做用域内逐步搜索到全局变量为止。将变量保存在本地做用域内能让 JavaScript 更快地访问它们。

局部变量是基于最具体的做用域的，而且可能会穿过多个级别的做用域，所以查找这一动做可能致使出现通用的查询。在一个它前面没有变量声明的局部变量中定义函数做用域时，须要在每一个变量以前加上 let 或 const，以便定义当前做用域，防止查找并加速代码执行。

10. 避免使用全局变量

由于脚本引擎在从函数或其余做用域内引用全局变量时须要逐一查看做用域，因此当本地做用域丢失时，该变量将被销毁。若是全局做用域中的变量没法在脚本的生命周期内持续存在，则性能将获得改善。

11. 实施一些优化方案

• 始终使用计算复杂度最低的算法和最佳的数据结构来解决任务。

• 重写算法以得到相同的结果和更少的计算。

• 避免递归调用。

• 给重复的函数加入变量、计算和调用。

• 分解和简化数学公式。

• 使用搜索数组：用它们来获取基于另外一个的值，而不是使用 switch/case 语句。

• 使条件老是更有可能为真，以更好地利用处理器的推测执行。

• 若是能够，请使用位级运算符替换某些操做，由于这些运算符的处理周期较短。

12. 使用工具检测问题

Lighthouse 是一个很好的网页性能工具，它能够帮助你审核性能、可访问性、最佳实践和 SEO。谷歌 PageSpeed 旨在帮助开发人员了解网站的性能优化和潜在可改进的方面。这些组件旨在识别网站是否符合 Google Web 性能最佳实践，以及将调整过程自动化。

在 Chrome 中，你还可使用主菜单中的“更多工具”选项来查看每一个选项卡使用的内存和 CPU。对于更高级的分析，你可使用 Firefox 或 Chrome 中的开发人员工具“性能”视图来分析不一样的指标，例如：

devtools 的性能分析容许你在加载页面时模拟 CPU 消耗、网络和其余指标，以便识别和修复问题。

为了更深刻地了解，建议你使用 JavaScript Navigation Timing API，它容许你详细测量代码的每一个部分从编程自己中获取的内容。

对于基于 Node.js 构建的应用程序，NodeSource Platform 也是一种很是好、影响低的方式，它能够在很是精细的级别上探索应用程序性能。

全面的 Node.js 指标可帮助你识别内存泄漏源或其余性能问题，并更快地解决这些问题。

最后的说明

在代码的可读性和优化之间保持平衡很重要。代码由计算机解释，但咱们须要确保代码未来能够由咱们本身或其余人维护，所以它们须要易于理解。

请记住：应始终考虑性能，但不该将性能凌驾于错误检测和功能添加之上。

• 查看更多精彩内容锁定 

          0基础手把手教你开发探探类社交软件tinder