Javascript 作为一种广泛应用于前端开发的编程语言，其性能是我们非常重视的一个方面。在本文中，我将会分享一些有关 Javascript 性能优化的实用技巧和贴士，来帮助您使您的应用在运行中表现更优秀。
1. 减少 DOM 操作
JavaScript 在处理 HTML DOM 时是相当耗费资源的。因此，我们应该尽可能地减少 DOM 操作。
操作 DOM 的代价
当您通过 JavaScript 操作 DOM 时，浏览器需要重渲染页面来反映这些更改。如果这些更改频繁发生，会导致浏览器不断地重渲染，从而影响网页性能。
解决方法
为了降低对性能的影响，您可以采用以下方法：
- 尽可能减少 DOM 操作的频率
- 使用
querySelector及querySelectorAll方法来选择元素，而不是通过选择器的方式访问元素 - 缓存 DOM 元素，避免频繁访问 DOM 元素
- 利用事件委托来对元素进行事件处理。例如，绑定某个容器元素的点击事件，而不是为每个子元素分别绑定事件。
2. 避免使用全局变量
代码中的全局变量可能会导致引用冲突，并且在整个应用程序中都能访问，因此更容易受到攻击。
解决方法
- 在 ECMAScript 6 之后，您可以使用 let 或 const 来声明局部变量，从而避免使用全局变量。
- 使用命名空间来将变量保存在对象或模块中。
- 限制您的库或插件可以访问的全局变量，并将它们封装到一个函数中。
3. 使用原生方法
Javascript 中存在大量的原生方法，它们被优化以在不同的浏览器中提供最佳性能。
解决方法
- 让浏览器来处理本地的代码运算，而不是模拟自己的实现
- 减少自己的代码大小，并让尽可能多的工作由原生方法完成。
4. 避免过度渲染
渲染是指浏览器处理 HTML 和 CSS 并生成 HTML 元素的过程。页面中运行的代码会影响这个过程。
解决方法
- 将样式表放在页面的头部
- 尽可能少地使用嵌套循环，因为它们会导致重复渲染。
- 权衡代码逻辑和代码渲染。如果你的代码反复绘制界面，那么就需要考虑是否需要重新设计代码。
5. 尽可能使用 let 和 const
使用 let 和 const 声明变量，相比于使用 var 声明变量，可以更好地控制变量的作用域。
解决方法
- 除非你需要在不同的作用域之间共享变量，否则使用 let 和 const 声明变量
- 将函数的局部作用域限制在函数内部，避免在函数外部使用这些变量。
6. 减轻事件处理的负担
处理 JavaScript 事件可以使用系统资源，从而导致页面变慢。您应该避免在页面上添加太多事件监听器，并使用合适的事件委托来优化。
解决方法
- 只有在需要时才添加事件监听器。例如，仅在需要时才添加滚动事件监听器以触发懒加载行为。
- 捕获捕获冒泡阶段的事件。写逻辑处理逻辑应该尽量利用 capture，通过在更低的 DOM 层级添加监听器，可以很大程度上提高性能。
- 使用事件委托来处理需要在许多元素上处理的事件。例如，为一个容器添加一个单击事件监听器，而不是在每个单元格上添加单击事件监听器。
7. 避免读取属性
每次读取 JavaScript 对象的属性时，JavaScript 引擎都需要为此进行查找。这些检测可能会使用大量 CPU 周期。
解决方法
- 缓存重复的属性查找，以便看到需要执行多次查找的代码。
- 访问尽可能少的属性，并且不要在循环中读取属性。
8. 使用 requestAnimationFrame()
当您需要更新页面以响应用户操作时，请使用 requestAnimationFrame() 方法。
解决方法
- requestAnimationFrame() 方法将在下一个页面渲染时调用，以卸载渲染和计算阶段的代码。
- 使用 requestAnimationFrame() 方法操作对象，而不是手动控制对象的动画。
9. 注意循环和递归
JavaScript 中的循环和递归可能会在处理大量数据时变得很慢。您应该尽可能使用更快的算法和数据结构。
解决方法
- 要考虑数据结构，尽可能使用适合问题的数据结构。
- 避免使用嵌套循环。其中一个解决方案是使用函数式编程方法，例如 map() 和 reduce()。
10. 减少 HTTP 请求
JavaScript 在访问远程服务器时通常会阻塞页面渲染。当您减少访问远程服务器的次数时，可以缩短页面加载时间。
解决方法
- 在加载的过程中保持一个流程，各请求之间不要互相干扰。
- 此外，尽可能缓存您的数据和资源，以便重复使用，减少访问的频率。
11. 压缩和混淆 JavaScript
通常，JavaScript 运行时会下载和解析整个脚本，但是在压缩和混淆 JavaScript 之后，您可以将整个代码库压缩到更小的文件中，以更快地加载、解析和运行代码。
解决方法
- 使用代码压缩程序自动混淆和压缩代码（例如 webpack）
- 将多个 JavaScript 文件合并为单个文件，并对其进行压缩。
12. 使用 Web Workers
当您需要处理大量数据时，Web Workers 可以在后台线程中处理 JavaScript。这将使主线程保持反应性，并减少主线程的阻塞。
解决方法
- 使用 Web Workers 来处理 CPU 密集型操作，例如行动查询、排序和过滤。
- 可以将代码封装到一个 Web Worker 文件中，并使用该文件启动一个工作线程。
总结
以上是关于 JavaScript 性能优化的 12 个实用技巧和贴士。在您的应用程序中尝试实现这些技巧，以优化其性能，提高用户体验，让整个应用在运行中表现更加优秀。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652e9aa87d4982a6ebfa69fb