JavaScript 作为现代 Web 开发中不可或缺的一部分，其性能优化是前端工程师不得不面临的问题之一。因为 JavaScript 代码的性能问题会直接影响网页的性能，包括页面加载速度、响应时间和交互体验等。所以本文将介绍优化 JavaScript 代码性能的 3 种方法，并提供相应的示例代码。
方法一：减少 DOM 操作
修改 DOM 元素是 JavaScript 中最慢的操作之一，因为 DOM 操作会触发浏览器的重排和重绘，这将消耗大量的计算资源和时间。所以，我们在编写 JavaScript 代码的时候应该尽量减少 DOM 操作。
优化前代码：
-- -------------------- ---- -------
----
----------
----------
----------
----------
----------
-----
--------
--- --- - --------------------------------
--- --- - -----------
--- ---- - - -- - - ---- ---- -
---------------------------- - ------
-
---------优化后代码：
-- -------------------- ---- -------
--- --------
----------
----------
----------
----------
----------
-----
--------
--- -- - ------------------------------
--- -------- - ----------------------------------
--- ---- - - -- - - -- ---- -
--- -- - -----------------------------
------------ - - - --
-------------------------
-
-------------------------
------------------------ - ------
---------上述代码中，我们先创建一个文档碎片对象，然后在循环中创建多个 li 元素，并将其放入文档碎片对象中。最后将文档碎片一次性插入到 DOM 树中，以减少 DOM 操作的次数，提高了性能。
方法二：避免使用全局变量
在 JavaScript 中，全局变量是可以被任意的代码所读取和修改的，这会导致命名冲突和错误的发生，进而影响性能。所以我们应该尽可能的减少使用全局变量。
优化前代码：
<script>
let a = 1;
function add() {
let b = 2;
console.log(a + b);
}
add();
</script>优化后代码：
<script>
function add() {
let a = 1;
let b = 2;
console.log(a + b);
}
add();
</script>上述代码中，我们将 a 变量定义在局部作用域中，避免了全局变量的使用，提高了性能。
方法三：使用性能优化工具
除了手动优化 JavaScript 代码以提高性能，还可以使用一些性能优化工具，例如 Google Chrome 中的开发者工具和 Lighthouse 工具等。
以 Google Chrome 开发者工具为例，我们可以在 Performance 面板中进行性能分析和优化。在 Performance 面板中，我们可以记录网页的性能信息并生成性能报告，以查看网页加载过程中的性能瓶颈，如 CPU 时间、网络请求时间、JavaScript 执行时间等，并给出相应的优化建议。
结论
通过以上三种方法，我们可以针对 JavaScript 代码的性能问题进行优化，以提高网页的性能和响应速度。在实际开发中，我们可以通过减少 DOM 操作、避免使用全局变量和使用性能优化工具等方式，来优化 JavaScript 代码的性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6719e6289b4aadf9e006b681