一次点击消耗多少资源？ React 与 Vanilla-js教程-PHP中文网

首页

web前端

js教程

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

Mary-Kate Olsen

Oct 22, 2024 am 06:24 AM

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中文网其他相关文章！

本站声明

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

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7892

Java教程

1651

CakePHP 教程

1411

Laravel 教程

1302

PHP教程

1248

显示更多

Related knowledge

前端热敏纸小票打印遇到乱码问题怎么办？ Apr 04, 2025 pm 02:42 PM

前端热敏纸小票打印的常见问题与解决方案在前端开发中，小票打印是一个常见的需求。然而，很多开发者在实...

神秘的JavaScript：它的作用以及为什么重要 Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。