首页 > 文章 > web前端 > 一次点击消耗多少资源？ React 与 Vanilla

一次点击消耗多少资源？ React 与 Vanilla

Mary-Kate Olsen原创: 2024-10-22 06:24:30407浏览

React 与任何其他 JavaScript 框架一样，在幕后处理许多我们经常没有想到的事情。

没关系——我们作为开发人员的工作就是解决问题，实现越简单越好。您并不总是需要了解框架为您做什么的每个细节。

JavaScript 是一门有趣的语言；它是浏览器之王，而且浏览器仍然被大量使用，所以我认为它不会很快消失。

事实上，许多本机应用程序（iOS、Android、智能电视）都使用本机和 Web 技术运行混合解决方案。

在这篇文章中，我想测试 React 中的一个简单计数器及其 Vanilla JavaScript 版本。

使用 Chrome DevTools 衡量性能

首先，我们来谈谈 Chrome 提供的一个有用的选项卡，称为“性能”。此选项卡包含用于测量 Web 应用程序性能的记录功能。

在这篇文章中，我将重点关注三个关键指标：JS 堆、节点和监听器。

JS 堆：堆是 JavaScript 中存储对象、数组和函数的内存区域。与保存原始值（数字、字符串、布尔值）和函数调用的堆栈不同，堆管理动态内存分配。

DOM 节点：DOM 节点是网页 HTML 中的单个元素、属性或文本，以文档对象模型 (DOM) 表示。

事件监听器：在 JavaScript 中，事件监听器是等待 HTML 元素上的特定事件（例如单击、按键、鼠标移动）的函数。当事件发生时，侦听器会触发，并执行响应代码。

演示：构建基本的 React 计数器

好吧，UI 是一个简单的计数器。 UI 只是一个带有点击处理程序的按钮。每次单击按钮时，计数器都会递增。

反应演示

React 代码如下所示：

"use client";

import { useState } from "react";

export default function Page() {
  const [counter, setCounter] = useState(0);

  const incrementClickHandler = (event: { preventDefault: () => void }) => {
    event.preventDefault();

    setCounter((prevCounter) => prevCounter + 1);
  };

  return (
    <div style={{ maxWidth: 800, margin: "0 auto" }}>
      <a
        href="#"
        style={{
          display: "inline-block",
          padding: "20px 40px",
          fontSize: 28,
          border: "1px solid black",
          width: "100%",
          textAlign: "center",
          marginTop: 40,
        }}
        onClick={incrementClickHandler}
      >
        Increment {counter}
      </a>
    </div>
  );
}

代码非常不言自明。需要注意的一件事是，该演示运行在 Next.js 之上，这就是我们需要“使用客户端”的原因。除此之外，它只是一个基本的 React 组件。

反应计数器 UI

How Many Resources Does a Click Consume? React vs. Vanilla

20 秒，只需一键点击

现在，我将在 Chrome 中打开“性能”选项卡，单击“录制”图标，并让它运行 20 秒，同时仅单击该按钮一次。 20 秒结束时，性能结果如下所示：

How Many Resources Does a Click Consume? React vs. Vanilla

看看如何只需单击一下即可将数字提高到：

	React
JS Heap	3.4MB
Nodes	47
Listeners	287

？

20 秒，每秒点击一次

现在，我要让它再运行 20 秒，但这次我将每秒单击一次按钮。我们来看看结果：

How Many Resources Does a Click Consume? React vs. Vanilla

	React
JS Heap	4MB
Nodes	46
Listeners	331

关于 React 需要注意的两件事：

a) 当状态变量更新时，组件会重新渲染，这意味着在本例中，组件被渲染了 20 次。

b) 感谢虚拟 DOM，React 只更新需要更新的节点。

现在，让我们回到图表，看看蓝线（JS 堆）和黄线（监听器）如何递增，而绿线（节点）保持不变。

还值得一提的是，与一键运行相比，数字并没有太大变化。

演示：构建一个普通的 JavaScript 计数器

现在，我们拥有相同的 UI，但这次它是使用普通 HTML 和 JavaScript 构建的，不涉及任何框架。

香草演示。

"use client";

import { useState } from "react";

export default function Page() {
  const [counter, setCounter] = useState(0);

  const incrementClickHandler = (event: { preventDefault: () => void }) => {
    event.preventDefault();

    setCounter((prevCounter) => prevCounter + 1);
  };

  return (
    <div style={{ maxWidth: 800, margin: "0 auto" }}>
      <a
        href="#"
        style={{
          display: "inline-block",
          padding: "20px 40px",
          fontSize: 28,
          border: "1px solid black",
          width: "100%",
          textAlign: "center",
          marginTop: 40,
        }}
        onClick={incrementClickHandler}
      >
        Increment {counter}
      </a>
    </div>
  );
}

需要提到的是以下元素的必要性：

<html>
  <head>
    <script>
      let increment = 0;

      window.onload = function () {
        document.querySelector("#counter").innerText = increment;

        document.querySelector("a").addEventListener("click", function (event) {
          event.preventDefault();
          increment++;
          document.querySelector("#counter").innerText = increment;
        });
      };
    </script>
  </head>
  <body style="max-width: 800; margin: 0 auto; font-family: monospace;">
    <a
      href="#"
      style="
        display: inline-block;
        padding: 20px 40px;
        font-size: 28px;
        border: 1px solid black;
        width: 100%;
        text-align: center;
        text-decoration: none;
        color: black;
        margin-top: 40;
        box-sizing: border-box;
      "
      >Increment <span id="counter"></span>
    </a>
  </body>
</html>

使用 JavaScript 进行操作以更新其内容：

<span id="counter"></span>

香草柜台用户界面

How Many Resources Does a Click Consume? React vs. Vanilla

20 秒，只需一键点击

再次，我将单击录制图标并让它运行 20 秒，仅单击按钮一次。

看看结果：

How Many Resources Does a Click Consume? React vs. Vanilla

	Vanilla
JS Heap	1.7MB
Nodes	16
Listeners	20

20 秒，每秒点击一次

再次，我将单击录制图标并让它再运行 20 秒，但这一次，我将每秒单击一次按钮。查看结果：

How Many Resources Does a Click Consume? React vs. Vanilla

	Vanilla
JS Heap	2.3MB
Nodes	42
Listeners	77

就像在 React 示例中一样，蓝线（JS 堆）和黄线（监听器）随着时间的推移而增加。然而，绿线（节点）并不是恒定的；单击按钮时它会增加。

关于垃圾收集的几句话

垃圾收集：垃圾收集算法依赖的主要概念是引用的概念。

JavaScript 自动为我们处理垃圾收集；我们不需要手动触发它。在前面的示例中，我们看到了资源是如何消耗的，但在某些时候，JavaScript 会通过其垃圾收集器释放其中一些资源。

结论

一次点击或二十次点击在资源消耗方面没有太大区别。一旦发生点击，JavaScript 就会分配资源，后续的点击会继续消耗资源。然而，这种跳跃并不像从零次点击到一次点击的转变那么显着。

让我们看看两个版本中 20 次点击的最终值：

	Vanilla	React
JS Heap	2.3MB	4.0MB
Nodes	42	46
Listeners	77	331

React 消耗更多资源是有道理的；这就是使用框架的成本。

一个关键的区别是 React 从一开始就附加所有节点，而普通版本则在点击发生时添加节点。然而，最终，两个版本的节点数量几乎相同。

演示非常简单，在这个级别上，性能方面没有显着差异。如前所述，使用该框架需要付出一定的代价，但考虑到它提供的所有功能和便利性，这是值得的。

以上是一次点击消耗多少资源？ React 与 Vanilla的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript chrome html chrome devtools Object Resource for while continue using Attribute Event Collection JS number function dom this transition android ios ui

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：SSL Certificate Problem: Unable to Get Local Issuer Certificate – Causes and Solutions下一篇：What is the Difference Between Expressions and Statements in JavaScript?

查看更多