性能是Web开发人员或Web应用程序面临的最重要问题之一。 没有人会对由于加载过多而崩溃的应用程序或已经加载了很长时间的页面不满意。 网站用户还没有准备好等待太长的时间来等待其下载或使其页面进入工作状态。 根据
Kissmetrics的统计 ，有47％的访问者希望网站加载时间不到2秒。 如果加载时间超过3秒，将有40％的访问者离开网站。
该材料的作者（我们今天将其翻译发表）说，考虑到以上数据，很明显，性能是Web开发人员应始终记住的。 这里是提高JS项目性能的12个技巧。
1.使用浏览器缓存机制
使用浏览器缓存数据的主要方法有两种。 第一种是使用由服务工作者处理的Cache JavaScript JavaScript API。 第二个是常规HTTP缓存。
脚本通常用于组织对某些对象的访问。 如果将经常需要访问的对象的引用存储在变量中，并且在需要访问该对象的重复操作中使用此变量，则可以提高代码性能。
2.针对将在其中运行的环境优化代码
为了充分评估对程序的改进，建议形成一组可以进行测量的环境。
实际上，例如在所有现有JS引擎版本中，您将无法执行代码性能研究，也无法针对可在其中运行的所有环境优化代码。 但应注意，在任何一种环境中测试代码也不是最佳实践。 这种方法可能会导致失真的结果。 因此，重要的是创建一组最有可能在其中运行代码的环境，并在这些环境中测试项目。
3.摆脱未使用的JS代码
通过从项目中删除未使用的代码，不仅可以缩短浏览器加载脚本的时间，而且可以缩短浏览器分析和编译代码所需的时间。 为了摆脱未使用的代码，您应该注意项目的功能。 因此，如果您发现用户无法使用的某些功能，请考虑将其从项目中删除，同时考虑与之关联的JS代码。 结果，网站将加载得更快，准备在浏览器中工作的速度将更快。 这将对用户在网站上获得的印象产生有益的影响。 分析项目时，请记住，例如，其组成中包含的某个库可能会错误地包含在其中。 可能不使用它。 值得摆脱它。 这同样适用于某些依赖项的使用，这些依赖项实现了现代浏览器中已经实现的功能。 结果，切换到由该依赖项重复的标准浏览器功能将有助于摆脱不必要的代码。
4.节省内存
值得努力确保Web项目仅使用该内存，否则，它们将绝对无法使用。 事实是，开发人员无法事先知道其应用程序在特定设备上可以访问多少内存。 如果应用程序不合理地使用大量内存，则将增加浏览器JS引擎的内存管理机制的负载。 特别是，这适用于垃圾收集器。 频繁的垃圾回收调用会使程序变慢。 这会对项目的可用性产生负面影响。
5.对次要脚本使用延迟加载机制
用户希望网页尽快加载。 但是，页面的初始显示不太可能需要项目的整个JS代码。 如果用户需要执行一些操作来激活特定代码（例如，单击某个元素或转到应用程序中的某些选项卡），则可以在初始加载页面和最重要的资源后完成该代码后推迟此代码的加载。
使用这种方法，您可以避免浏览器从一开始就加载和编译大量JS代码，即避免因执行这些操作而导致的页面输出速度变慢。 在完成所有最重要的下载之后，您可以开始下载其他代码。 结果，当用户需要此代码时，该代码将已经可供他使用。 根据
RAIL模型，Google建议运行大约50毫秒持续时间的延迟加载脚本会话。 使用这种方法，代码加载操作将不会影响用户与页面的交互。
6.避免内存泄漏
如果您的应用程序发生内存泄漏，这将导致加载的页面从浏览器请求越来越多的内存。 结果，此页面的内存消耗可能会达到一定程度，这将对整个系统的性能产生不利影响。 您自己可能遇到了类似的问题（您可能不喜欢它）。 内存泄漏的页面可能包含某种图像查看器-例如滑块或“轮播”。
使用Chrome开发者工具，您可以分析您的网站是否存在内存泄漏。 这是通过使用“性能”选项卡检查指标来完成的。 通常，内存泄漏来自页面中删除的DOM片段，但与某些变量相关。 这样可以防止垃圾回收器清除不必要的DOM片段中数据所占用的内存。
7.如果需要进行大量计算，请使用Web Worker。
从MDN资源的材料中，您可以发现Web Worker可以在与Web应用程序主线程分离的后台线程中运行代码。 这种方法的优点是可以在单独的线程中执行繁重的计算。 这使主线程（通常负责维护用户界面）得以执行而不会阻塞或减慢速度。
Web Worker允许您执行大量使用处理器的计算，而不会阻塞用户界面流。 该技术使您可以创建新线程并为其分配任务，这对应用程序性能具有有益的影响。 使用这种方法，需要很长时间才能完成的任务不会阻止其他任务的执行。 在主线程中执行类似任务时，其他任务将被阻止。
8.如果您多次访问DOM元素，则将链接保存到变量中
获取对DOM元素的引用是一项缓慢的操作。 如果要多次访问元素，则最好将链接保存到局部变量中。 但是在这里重要的是要记住，如果稍后将元素（存储在变量中的链接）从DOM中删除，则需要从变量中删除到该元素的链接。 例如，您可以通过将
null写入变量来实现。 这样可以避免内存泄漏。
9.努力声明变量的使用范围。
JavaScript在尝试访问变量时，首先在本地范围内查找它。 如果未在此处出现，则搜索将在嵌入本地范围的范围内继续。 这将一直进行到检查全局变量为止。 将变量保存在本地范围内可加快对它们的访问。
在没有特殊需要的情况下，请尝试在声明变量时不要使用
var关键字。 而是使用
let和
const关键字分别声明变量和常量。 它们在块范围和一些其他有用功能方面有所不同。 注意在函数中使用变量，以确保您在函数内部访问的变量是局部的。 请注意隐式声明全局变量可能导致的麻烦。
10.尽量不要使用全局变量
全局变量在脚本运行的整个过程中都存在。 销毁本地范围时，销毁本地变量。 因此，仅在确实需要时才使用全局变量。
11.在JavaScript代码优化中应用您将应用其他语言编写的程序
- 始终使用尽可能小的计算复杂度的算法，使用最佳数据结构解决问题。
- 优化用于以更少的计算获得相同结果的算法。
- 避免递归调用。
- 设计重复的计算功能。
- 简化数学计算。
- 使用搜索数组而不是switch / case构造。
- 力求确保在条件构造中检查的条件更经常采用真实值。 这有助于更有效地利用处理器功能来主动执行指令。
- 如果您有机会使用按位运算符执行某些操作，请执行此操作。 执行此类计算会占用较少的处理器资源。
12.使用应用程序性能研究工具
要探索Web项目的各个方面，可以推荐使用Lighthouse工具。 他基于以下指标对应用程序进行评分：性能，渐进式Web应用程序，可访问性，最佳实践，SEO。 灯塔不仅给出了分数，而且还提出了改善项目的建议。 创建了另一个生产力分析工具
Google PageSpeed来帮助开发人员浏览其站点并查看如何改进。
Lighthouse和PageSpeed都不是完美的工具，但是它们的使用有助于发现乍一看可能看不到的问题。
在Chrome菜单中，您可以找到打开任务管理器的命令。 它显示有关打开的浏览器选项卡使用的系统资源的信息。 您可以通过打开Chrome开发者工具的“性能”标签获得更多有关该页面上发生的情况的详细信息（其他浏览器也提供类似的工具）。 该选项卡使您可以分析与站点性能相关的许多指标。
Chrome开发者工具中的“效果”标签在使用Chrome收集页面性能信息的过程中，您可以配置页面可用的处理器和网络资源，从而使您可以识别并解决问题。
Chrome页面性能分析为了更深入地分析网站，您可以使用API导航时序。 它使您可以直接在应用程序代码中测量各种指标。
如果您要使用JavaScript通过Node.js开发服务器端项目，则可以使用NodeSource平台对应用程序进行深入分析。 该平台工具进行的测量对项目影响很小。 在Node.js环境中，就像在浏览器中一样，可能会出现许多问题-例如相同的内存泄漏。 对基于Node.js的项目进行分析有助于识别和修复其性能问题。
总结
在代码优化和可读性之间保持平衡非常重要。 该代码由计算机解释，但人们必须予以支持。 因此，该代码不仅应该是计算机而且人类也可以理解的。
此外，记住应该始终考虑性能是很有用的，但是它比确保代码的无错误操作和实现用户所需的应用程序功能更重要。
亲爱的读者们！ 您如何优化JS项目？
