JavaScript - 性能

如今，JavaScript 对每个网站都至关重要。如果 JavaScript 出现故障，我们的网站就无法正常运行。关注 JavaScript 的性能至关重要，因为它会影响到提供积极的用户体验、保持用户参与度以及确保业务成功。优化的 JavaScript 可以确保页面加载速度更快，响应式交互有助于提高用户满意度，从而提高转化率和搜索引擎排名(因为 SEO 效果会更好)。

在竞争激烈的数字环境中，优化的 JavaScript 代码不仅能够吸引和留住用户，还能提高资源效率，降低服务器成本，并带来竞争优势。随着移动设备的日益普及以及对渐进式 Web 应用的重视，性能优化不仅是用户的期望，也是企业在网络领域脱颖而出、蓬勃发展的战略必需。

优化 DOM 操作

DOM 操作是指将每个元素表示为树中的节点，并通过其 ID、类名等进行访问或修改。这些 DOM 操作应尽可能减少，因为它们会对应用程序的速度产生重大影响。让我们考虑以下示例，其中我们将动态创建一个包含 1000 个项目的列表。

示例

简单代码

<!DOCTYPE html>
<html>
<body>
   <ul id="itemList"></ul>
   <script>
      const itemList = document.getElementById('itemList');
      // 低效的 DOM 操作
      for (let i = 0; i < 1000; i++) {
         itemList.innerHTML += `<li>Item ${i}</li>`;
      }
   </script>
</body>
</html>

Optimized Code

<!DOCTYPE html>
<html>
<body>
   <ul id="itemList"></ul>
   <script>
      // 使用文档片段进行高效的 DOM 操作
      const itemList = document.getElementById('itemList');
      const fragment = document.createDocumentFragment();
      for (let i = 0; i < 1000; i++) {
         const listItem = document.createElement('li');
         listItem.textContent = `Item ${i}`;
         fragment.appendChild(listItem);
      }
      itemList.appendChild(fragment);
   </script>
</body>
</html>

使用 Promises 进行异步操作

为了防止主线程阻塞，我们必须优先考虑异步编程。请考虑以下示例:使用 Promises 从 API 检索数据;在这种情况下，Promise 对于管理异步数据获取至关重要。防止 UI 在操作过程中卡顿;提升整体用户体验:这些都是好处。

示例

<!DOCTYPE html>
<html>
<body>
   <h2>Asynchronous Operations with Promises</h1>
   <div id="dataContainer"></div>
   <script>
      // 异步获取数据
      function fetchData() {
         return new Promise((resolve, reject) => {
            // 模拟延迟的 API 调用
            setTimeout(() => {
               const data = { message: 'Hello, world!' };
               resolve(data);
            }, 1000);
         });
      }

      // fetchData 函数的用法
      fetchData()
         .then(data => {
            document.getElementById('dataContainer').textContent = data.message;
         })
         .catch(error => {
            alert('Error fetching data:', error);
         });
   </script>
</body>
</html>

延迟 JavaScript 加载

JavaScript 通常在页面打开时加载，但通过延迟 JavaScript 的加载，我们可以优化页面加载性能，尤其是在处理非必要脚本时。浏览器遇到 <script> 标签时，通常会阻止渲染，直到脚本完成下载和执行。但是，通过在 script 标签中使用 defer 属性，我们可以指示浏览器在后台继续下载脚本，同时继续解析和渲染 HTML。然后在 HTML 完全解析后执行脚本。

示例

<!DOCTYPE html>
<html>
<body>
   <p>Deferred JavaScript Loading</p>
   <script defer src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
   <div id="loadingMessage">JavaScript is loading...</div>
   <script>
      // 添加事件监听器来指示 JavaScript 何时完全加载
      document.addEventListener('DOMContentLoaded', function() {
         document.getElementById('loadingMessage').textContent = 'JavaScript has finished loading!';
      });
   </script>
</body>
</html>

上述代码的另一种选择是使用 async 属性。虽然与 defer 类似，async 会异步加载脚本，但它不保证执行顺序。最先加载完成的脚本将首先执行。

避免使用全局变量

全局变量是指在整个代码中可见或作用域较大的变量。了解我们的代码是否真的需要将变量的作用域设置为全局变量，或者是否可以通过代码封装来有效地管理全局变量至关重要。以下示例演示了如何使用封装来避免使用全局变量，从而提高脚本的性能。

示例

<!DOCTYPE html>
<html>
<body>
   <h2>Avoiding Global Variables</h2>
   <div id="result"></div>
   <script>
      var resultElement = document.getElementById('result');
      // 全局变量的使用效率低下
      var globalVar = 10;

      function addNumbers(x, y) {
         return globalVar + x + y;
      }

      resultElement.innerHTML += "Using global variable, the sum is " + addNumbers(51, 7) + "<br>";
            
      // 改进的封装
      (function () {
         var localVar = 10;
         function addNumbers(x, y) {
            return localVar + x + y;
         }
         resultElement.innerHTML += "Using encapsulation, the sum is " + addNumbers(51, 7);
      })();
   </script>
</body>
</html>

虽然我们在本教程中从 JavaScript 的角度讨论了性能优化，但需要注意的是，某些优化无论使用哪种语言都保持不变。这包括使用 switch case 而不是 length if else if、内存管理、并发等场景。

JavaScript 的性能优化对各个行业和应用程序都有影响。在电子商务领域，高速页面加载已被证明可以增强用户参与度并提高转化率;而在社交媒体领域，JavaScript 有助于提供无缝的交互。新闻和媒体相关网站受益于内容的快速更新，并且只有学习平台(教育科技行业)才需要 JavaScript 来实现交互式教育组件。

另一方面，金融应用程序、协作工具、游戏网站和医疗保健应用程序都需要优化的 JavaScript，以确保其界面响应迅速并及时处理数据。