如何在 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 次查看

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告