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');
      // Inefficient DOM manipulation
      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>
      // Efficient DOM manipulation using document fragment
      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>Asynchronous Operations with Promises</h1>
   <div id="dataContainer"></div>
   <script>
      // Fetch data asynchronously
      function fetchData() {
         return new Promise((resolve, reject) => {
            // Simulating an API call with a delay
            setTimeout(() => {
               const data = { message: 'Hello, world!' };
               resolve(data);
            }, 1000);
         });
      }

      // Usage of the fetchData function
      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>
      // Add an event listener to indicate when the JavaScript is fully loaded
      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');
      // Inefficient use of global variables
      var globalVar = 10;

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

      resultElement.innerHTML += "Using global variable, the sum is " + addNumbers(51, 7) + "<br>";
            
      // Improved encapsulation
      (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來確保其介面具有響應性並及時處理資料。

列印頁面