一次點擊消耗多少資源？ 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
20 秒，只需一鍵點擊
現在，我將在 Chrome 中開啟「效能」選項卡，點擊「錄製」圖標，並讓它運行 20 秒，同時僅單擊該按鈕一次。 20 秒結束時，效能結果如下圖所示：
看看如何只需單擊一下即可將數字提高到：
| React | |
|---|---|
| JS Heap | 3.4MB |
| Nodes | 47 |
| Listeners | 287 |
？
20 秒，每秒點擊一次
現在，我要讓它再運行 20 秒，但這次我將每秒單擊按鈕。我們來看看結果：
| 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>
香草櫃檯使用者介面
20 秒，只需一鍵點擊
再次，我將單擊錄製圖標並讓它運行 20 秒，僅單擊按鈕一次。
看看結果：
| Vanilla | |
|---|---|
| JS Heap | 1.7MB |
| Nodes | 16 |
| Listeners | 20 |
20 秒，每秒點擊一次
再次，我將單擊錄製圖標並讓它再運行 20 秒，但這一次，我將每秒單擊按鈕。看結果：
| 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中文網其他相關文章！