JavaScript 性能

JavaScript 对于当今的每一个网站来说都是非常重要的。如果 JavaScript 失效，我们的网站将无法正常工作。关注 JavaScript 的性能是非常重要的，因为它影响到提供积极的用户体验、保持用户的参与度以及确保商业成功。优化过的 JavaScript 可以确保页面加载得更快，并且响应式的交互能够提高用户的满意度，从而带来更高的转化率以及更好的搜索引擎排名（因为 SEO 会更好）。

在一个竞争激烈的数字环境中，优化过的 JavaScript 代码不仅能吸引和保留用户，还能增强资源效率，减少服务器成本，并提供竞争优势。随着移动设备的日益普及以及对渐进式网络应用程序（Progressive Web Apps）的关注，性能优化不仅是用户的期望，也是那些希望在在线空间中脱颖而出并茁壮成长的企业的一项战略必要。

优化 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>

优化代码

<!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>

异步操作与 Promise

为了防止主线程被阻塞，我们必须优先考虑异步编程。考虑这个例子：使用 Promise 从 API 中获取数据；在这种情况下，Promise 是管理异步数据获取不可或缺的一部分。防止 UI 在操作期间冻结，提升整体用户体验：这些都是好处。

示例

<!DOCTYPE html>
<html>
<body>
   <h2>使用 Promise 的异步操作</h2>
   <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);
         });
   </script>
</body>
</html>

延迟加载 JavaScript

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

示例

<!DOCTYPE html>
<html>
<body>
   <p>延迟加载 JavaScript</p>
   <script defer src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
   <div id="loadingMessage">JavaScript 正在加载中...</div>
   <script>
      // 添加一个事件监听器来指示 JavaScript 是否已完全加载
      document.addEventListener('DOMContentLoaded', function() {
         document.getElementById('loadingMessage').textContent = 'JavaScript 已加载完毕！';
      });
   </script>
</body>
</html>

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

避免全局变量

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

示例

<!DOCTYPE html>
<html>
<body>
   <h2>避免全局变量</h2>
   <div id="result"></div>
   <script>
      var resultElement = document.getElementById('result');
      // 使用全局变量的低效方式
      var globalVar = 10;

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

      resultElement.innerHTML += "使用全局变量，总和是 " + addNumbers(51, 7) + "<br>";

      // 改进的封装
      (function () {
         var localVar = 10;
         function addNumbers(x, y) {
            return localVar + x + y;
         }
         resultElement.innerHTML += "使用封装，总和是 " + addNumbers(51, 7);
      })();
   </script>
</body>
</html>

尽管我们在本教程中从 JavaScript 的角度讨论了性能优化，但需要注意的是某些优化措施无论使用何种语言都是通用的。这包括使用 switch case 代替冗长的 if else if 结构、内存管理、并发等问题。

JavaScript 性能优化的影响跨越了行业与应用。在电子商务中，高速的页面加载已被证明能增强用户参与度并促进转化率的提升，而在社交媒体领域，JavaScript 帮助提供了无缝的互动体验。新闻和媒体相关的网站受益于内容快速更新的能力，而在教育科技行业中，则需要 JavaScript 来支持交互式的教育组件。

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