如何在 JavaScript 中使用 performance.now() 方法時解決出現的問題?


performance.now() 方法用於計算任何程式設計師或編碼人員編寫的程式碼的效能。performance.now() 方法將返回一個數值,該數值表示編寫程式碼執行所需的時間。即使對於相同的程式碼,每次執行程式碼時,此方法返回的值也可能有所不同。

在當今時代,每個人都希望為一個問題編寫快速載入且高效的程式碼,該程式碼可以在每個引數上執行,並且比所有其他解決方案都快。因此,為了衡量效率並確保編寫的程式碼足夠快,程式設計師使用 JavaScript 提供的 performance.now() 方法來衡量編寫的程式碼的所有引數。

到目前為止,我們已經討論了 performance.now() 方法的優點,但是使用此方法計算程式碼效率或效能時,可能會出現一些問題或問題。

問題

假設有兩個程式設計師Prog1Prog2,他們都正在編寫程式碼來解決同一個問題。如果Prog1編寫的程式碼在小輸入的情況下比Prog2的程式碼花費的時間少,則Prog1的程式碼被認為僅對於小輸入更高效。但是,另一方面,Prog2編寫的程式碼在大輸入的情況下比Prog1的程式碼花費的時間少,則Prog2的程式碼被認為是該問題的唯一有效解決方案。

讓我們透過程式碼示例來討論使用此方法時可能出現的問題。

語法

以下語法將向您展示如何使用 performance.now() 方法來查詢編寫的程式碼的效能:

var variable_name = performance.now();

讓我們假設這兩個程式設計師都在嘗試尋找前 N 個自然數之和問題的最佳解決方案,其中 N 由使用者輸入。

步驟

  • 步驟 1 - 在第一步中,我們將在 HTML 文件中新增數字型別的輸入元素,以獲取使用者的數字輸入。

  • 步驟 2 - 在下一步中,我們將新增一個帶 onclick 事件的按鈕元素,當用戶單擊按鈕時,該元素將呼叫一個函式,並且前 N 個自然數的和以及程式碼執行所需的時間對使用者可見。

  • 步驟 3 - 在此步驟中,我們將定義一個 JavaScript 函式,以使用 for 迴圈計算前 N 個自然數的和。

  • 步驟 4 - 在最後一步中,我們將上一步中定義的函式分配給按鈕的 onclick 事件。

示例

以下程式碼由 Prog1 編寫,用於計算前 N 個自然數的和:

<html>
<body>
   <h3>Solving the issue that arise while using performance.now() method in JavaScript</h2>
   <p id = "upper">The below code is to find the sum of N natural numbers written by Programmer1.</p>
   <p>Enter a number:</p>
   <input type = "number" id = "inp1"> <br><br>
   <button id = "btn" onclick = "findSum()"> check the time </button>
   <p id = "result"> </p>
   <script>
      let initialTime = performance.now();
      let result = document.getElementById("result");
      function findSum() {
         let sum = 0;
         let inp1 = document.getElementById("inp1");
         let num1 = Number(inp1.value);
         for (let i = 1; i <= num1; i++) {
            sum += i;
         }
         let finalTime = performance.now();
         let time = finalTime - initialTime;
         result.innerHTML += " The sum of the first <b> " + num1 + " </b>  natural numbers is: <b>  " + sum + " </b>, and the time taken by code to execute is: <b> " + time + " </b>. <br> ";
      }
   </script>
</body>
</html>

現在讓我們討論程式 2 的程式碼

方法

此示例的方法幾乎與前一個示例的演算法類似。您只需要透過用查詢前 N 個自然數之和的公式替換前一個示例的 for 迴圈來執行一個小的更改:N*(N+1)/2。

示例

以下程式碼由 Prog2 編寫,用於計算前 N 個自然數的和:

<html>
<body>
   <h3>Solving the issue that arise while using performance.now() method in JavaScript</h3>
   <p id = "upper">The below code is to find the sum of N natural numbers written by Programmer2.</p>
   <p>Enter a number:</p>
   <input type = "number" id = "inp1"> <br> <br>
   <button id = "btn" onclick = "findSum()"> check the time </button>
   <p id = "result"> </p>
   <script>
      let initialTime = performance.now();
      let result = document.getElementById("result");
      function findSum() {
         let inp1 = document.getElementById("inp1");
         let num1 = Number(inp1.value);
         let sum = (num1 * (num1 + 1)) / 2;
         let finalTime = performance.now();
         let time = finalTime - initialTime;
         result.innerHTML += " The sum of the first <b> " + num1 + " </b>  natural numbers is: <b>  " + sum + " </b>, and the time taken by code to execute is: <b> " + time + " </b>. <br> ";
      }
   </script>
</body>
</html>

在以上兩個程式碼示例中,使用者輸入相同值時的執行時間幾乎相同。這是使用 performance.now() 方法計算程式碼效能時出現的問題。在這些情況下,我們無法使用 performance.now() 方法找到哪種方法或問題的解決方案對問題有效或最佳。

解決方案

問題的解決方案是使用大 O表示法來查詢編寫解決方案的效率。大 O 表示法不會給出程式碼執行所需的時間,而是會藉助一些約束來計算程式碼執行可能花費的最壞情況或最長時間。

讓我們使用 Prog1 和 Prog2 的程式碼實現大 O 表示法,以查詢哪個解決方案更有效。

Prog1編寫的程式碼包含一個迴圈,該迴圈執行到數字 N,因此此程式碼使用大 O 表示法表示的最大時間為O(N)。而Prog2編寫的程式碼不包含任何迴圈,並使用包含常數執行時間的公式查詢 N 個數字的和。因此,Prog2 的程式碼使用大 O 表示法表示的時間僅為O(1)

因此,我們可以說Prog2編寫的程式碼在時間複雜度方面優於Prog1編寫的程式碼。

結論

在本文中,我們詳細討論了在 JavaScript 中使用 performance.now() 方法查詢程式碼效率時出現的問題,並使用兩個程式設計師及其程式碼的真實示例進行了說明。我們也看到了問題的解決方案,並使用該解決方案找到了兩個程式設計師編寫的有效解決方案。

更新於: 2023年11月20日

163 次檢視

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.