笔记大全

EventLoop如何测试Node或页面的性能

更新时间：2023-12-04

段落一：EventLoop初步认识和性能监测

EventLoop初步认识

在了解如何测试 Node 或者页面的性能之前，我们需要先基本了解一下 Event Loop，EventLoop（事件循环）是 JavaScript 单线程执行的基础，它监测值栈和消息队列的动作，当消息队列为空时，会从任务队列中取出每一个事件执行，并将其加入到调用栈中。

由此可知：event loop 监测 call stack 去观察是否为空，若为空则将它从消息队列中取出，添加到调用栈的顶部，随后执行调用栈中的代码。调用栈中的代码都是同步代码，而异步代码并不会直接被执行，它们将会按照顺序被添加到消息队列中，去等待被执行。

EventLoop 的重要性就在于，它能够保证单线程实现多任务，而不出现死锁或其他的异常状况的情况。因此，当涉及到处理时间密集的任务时，监测和测试其效率以及性能对于优化程序的效率是非常重要的。

性能监测

那么，如何测试 Node 或页面的性能呢？除了使用命令行来进行操作和测试，我们还可以使用一些工具来帮助我们监测程序的效率和性能。比如说，可以使用 Chrome DevTools 来进行测试和监测。

具体来说，我们可以从 Performance 标签页中直接观察和监测代码的效率和性能。在该标签页中，我们可以观察到一些非常有用的信息。比如程序所使用的CPU 时间、程序所涉及到的网络请求次数，以及运行时间。这些信息对于优化程序的效率和性能都非常关键，能够帮助我们在项目中找到优化空间，提高项目的效率。

// 转换DOM元素为数字
function convertToNumber(element) {
  let numberValue = parseInt(element.innerText, 10);
  return isNaN(numberValue) ? 0 : numberValue;
}

// 运行测试脚本
function runBenchmark() {
  const benchmarkContainer = document.querySelector("#benchmark-container");

  const jsSum = benchmarkContainer.querySelector("#js-sum .value");
  const webWorkerSum = benchmarkContainer.querySelector("#web-worker-sum .value");

  const loopCount = convertToNumber(benchmarkContainer.querySelector("#loop-count"));
  const workersCount = convertToNumber(benchmarkContainer.querySelector("#workers-count"));

  // 执行WebWorker求和运算
  const webWorkersStartTime = performance.now();
  const webWorkersPromises = [];

  for (let i = 0; i < workersCount; i++) {
    const worker = new Worker("./worker.js");

    worker.addEventListener("message", (e) => {
      let { sum } = e.data;

      webWorkersPromises.push(Promise.resolve(sum));
    });

    worker.postMessage({
      start: i * loopCount,
      count: loopCount,
    });
  }

  Promise.all(webWorkersPromises).then((sums) => {
    webWorkerSum.innerText = sums.reduce((total, currentSum) => {
      return total + currentSum;
    }, 0);

    const webWorkersDuration = performance.now() - webWorkersStartTime;

    console.log(`WebWorkers ==> \nTime: ${webWorkersDuration}ms`);
  });

  // 执行JS求和运算
  const jsStartTime = performance.now();
  let jsSumTotal = 0;

  for (let i = 0; i < loopCount; i++) {
    jsSumTotal += i;
  }

  jsSum.innerText = jsSumTotal;

  const jsDuration = performance.now() - jsStartTime;

  console.log(`JS ==> \nTime: ${jsDuration}ms`);
}

runBenchmark();

上述示例代码就是利用 `Performance` 标签页来进行性能测试的关键部分，其中 `convertToNumber()` 函数是将 `innerHTML` 转换为 `Number` 的一个简单的辅助函数。 `runBenchmark()` 函数会执行一个简单的JavaScript求和运算，同时也会调用 `Worker API` 进行 WebWorker 的求和运算，最终我们会观察到两部分代码执行时间等信息。

段落二：Node 性能测试

Node 性能测试

测试 Node 程序的效率和性能的方法与测试页面的方法略有不同，这里我们提供一种基于 benchmark 模块的测试方法，该模块可以简化 Node 测试的工作流，并提供一种可视化的输出结果。

首先，我们需要先使用 `benchmark` 模块安装库函数，接着，就可以使用该模块来进行基准测试的工作。我们可以将测试用例放在 `suite` 函数中，并尽可能保证测试用例的控制量维度尽可能的窄。

const Benchmark = require("benchmark");
const suite = new Benchmark.Suite;

const objectLiteral = { name: "Roberto" };
const objectConstructor = new Object({ name: "Roberto" });

suite
  .add("object literal", () => {
    objectLiteral.test = "test";
  })
  .add("object constructor", () => {
    objectConstructor.test = "test";
  })
  .on("cycle", (event) => {
    console.log(String(event.target));
  })
  .on("complete", function () {
    console.log("Fastest is " + this.filter("fastest").map("name"));
  })
  .run({ async: true });

上述代码的代码意义为比较对象字面量（object literal）和对象构造函数（object constructor）的添加速度，我们可以在控制台中，看到每一轮测试的时间，并选择最快的程序。

段落三：页面性能测试

页面性能测试

在 Web 开发过程中，我们需要确保页面的性能和速度，而进行性能测试则是非常关键的过程之一。这里，我们推荐大家使用 `Lighthouse` 和 `DevTools` 进行测试。

其中，Lighthouse 是一款性能测试工具，它可以测试诸如保持交互时间（TTI）、首次渲染、页面加载时间等指标。它运行于 Google Chrome 中，也可以以命令行工具的形式运行。同时，它还可以为您的 Web 应用程序自动生成报告，以及为您提供改进建议和建议的资源

npm install -g lighthouse

// 使用Lighthouse对URL地址进行测试
lighthouse https://www.example.com

除此之外，我们还可以使用Chrome DevTools自身来进行测试工作。在对项目进行开发过程中，我们可以打开DevTools，在Performance选项卡下启动性能测试。按下右下角的记录按钮，进行测试。记录完毕后，我们可以查看Summary标签下的信息，获得有关页面性能的详细数据。

// 打开 开发者工具
DevTools > Performance > Start recording

// 执行测试用例
function runTest() {}

runTest()

// 结束测试
DevTools > Performance > Stop recording

这里是一个简单的，可在 DevTools 中运行的 `runTest` 函数的示例。在运行 DevTools 时，我们可以在顶部的 Performance 选项卡下停止和启动记录，获得有关测试情况的详细信息。

段落四：性能监测总结

性能监测总结

无论对于Node还是Web开发，了解和卡测程序的运行效率和性能是非常重要的过程。而对于JavaScript程序而言，一些简单易用的工具和API能够帮助我们大大提升开发和测试效率。这里，我们推荐使用 Performance 标签页以及 Lighthouse 和 DevTools 工具进行程序测试和性能监控。

通过这些工具，我们可以轻松地监测和测试程序的效率和性能，并找到程序优化的空间和途径。而对于 Node 开发而言，我们可以使用 `benchmark` 模块来读简化测试工作流，并提供可读性强的输出结果，帮助维护Node程序的性能和可读性。监测和优化程序的性能是保持程序稳定性和可用性的重要途径，同时也是提升代码质量和稳定性的重要工作之一。

c语言编程笔录