开发人员大幅改善JavaScript性能的9个技巧
发布于：2021-01-08 17:38:51
应始终保持代码的可读性与其优化之间的平衡。您绝不应该在应用程序开发期间损害其性能。为了缩短上市时间而匆忙完成整个过程将使事情变得更加复杂。
性能是任何Web应用程序成功（或失败）的决定因素。频繁的网络崩溃和漫长的等待时间使访问者感到烦恼。
Kissmetrics发现：
47％的访问者希望网站在不到2秒的时间内加载。
如果加载过程超过3秒，则有40％的访问者会离开网站。
我将告诉您9条提示，您可以使用这些提示注意到应用程序性能的多项改进。让我们开始吧。
删除未使用的JavaScript
它不仅减少了传输时间，还减少了浏览器分析和编译代码所花费的时间。在删除未使用的JavaScript时，应考虑以下几点：
如果检测到用户未使用的功能，则将其及其关联的JavaScript代码一起全部删除。
如果一个库被错误地包括进来并且不是必需的，则也将其删除。
在浏览器中缓存
您可以通过两种方式在浏览器中进行缓存。第一种选择是通过安装服务工作程序来使用JavaScript缓存API。其次，您可以使用HTTP协议缓存。
开发人员使用脚本来提供对特定对象的访问。通过将此类对象存储在用户定义的变量的内存中，并在对该对象的后续引用中使用变量，您会发现性能立即得到改善。
避免内存泄漏
Java虚拟机（JVM）在应用程序的生命周期中不断对其进行分析，并检测不再使用的对象。这些对象被收集为垃圾。内存泄漏是JVM无法识别未使用的对象，从而导致系统中垃圾堆积的一种情况。
在内存泄漏期间，加载的页面将逐渐占用设备的所有可用内存，并严重影响性能。
在Chrome开发工具中，可以通过在“效果”标签中记录时间轴来分析内存泄漏。
建立定义明确的测试环境
作为开发人员，您需要在应用程序上线之前对其进行测试，并且测试代码需要一组明确定义的环境。
对所有Javascript引擎的所有版本进行性能测试和优化都是不切实际的。另一方面，如果在单个环境中进行测试，则会得到部分结果。
因此，您应该更进一步地建立良好定义的测试环境，以便以后应用程序不会遭受性能不佳的困扰。
延迟不必要的JavaScript加载
用户喜欢快速加载的网页或应用程序，但在初始加载过程中无法访问所有功能。对？
如果某些功能需要用户执行操作（例如，单击图像，切换选项卡等），则可以将这些功能的加载推迟到以后。
一旦页面的初始加载完成，就可以加载延迟的功能。根据RAIL模型，Google建议以50毫秒的间隔完成此延迟的加载，以使用户与页面的互动保持不受影响。
优先访问局部变量
JavaScript总是在本地搜索变量，然后将其范围逐步扩展到全局变量。将变量保存在本地范围内有助于JavaScript更快地访问它们。
请记住，您需要指定作用域并通过在每个变量之前添加let或const来定义当前作用域，从而定义函数作用域。这将防止查找并加速代码。
使用网络工作者执行耗时的代码
我们在编程生涯中遇到了很多代码，这些代码需要很多时间才能执行，不是吗？使用主线程（应用程序的UI）运行此类脚本会大大降低应用程序的速度。
Web Workers可以在后台线程中运行脚本操作，并在单独的线程中执行关键进程，从而确保主应用程序不会在进程中被阻塞或减慢速度。
将重复的DOM项目保存在本地变量上
DOM代表文档对象模型（DOM）。它是一个应用程序编程接口（API），用于定义文档的逻辑结构以及文档的访问和操作方式。
访问DOM会花费大量时间。如果您知道某个元素需要多次读取，请将其保存在局部变量中。
但请记住：如果以后要删除DOM的值，则应将变量的值设置为“ null”，以免引起任何内存泄漏。
利用工具检测问题
Lighthouse是分析网页性能的最佳工具之一。它可以帮助您审核性能，可访问性，最佳实践和SEO。
Google PageSpeed可以了解网站的性能优化和潜在的改进领域。这些组件可以识别出网站是否违反Google的Web Performance Best Practices，并自动进行调整。
Chrome中的“更多工具”选项可以显示每个选项卡使用的内存和CPU。此外，Firefox或Chrome中的“性能”视图可用于分析高级指标。
作者介绍
