一次點擊消耗多少資源？ React 與 Vanilla
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中文網其他相關文章！
熱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)
神秘的JavaScript：它的作用以及為什麼重要
Apr 09, 2025 am 12:07 AM
JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。
誰得到更多的Python或JavaScript？
Apr 04, 2025 am 12:09 AM
Python和JavaScript開發者的薪資沒有絕對的高低，具體取決於技能和行業需求。 1.Python在數據科學和機器學習領域可能薪資更高。 2.JavaScript在前端和全棧開發中需求大，薪資也可觀。 3.影響因素包括經驗、地理位置、公司規模和特定技能。
如何實現視差滾動和元素動畫效果，像資生堂官網那樣？
或者：
怎樣才能像資生堂官網一樣，實現頁面滾動伴隨的動畫效果？
Apr 04, 2025 pm 05:36 PM
實現視差滾動和元素動畫效果的探討本文將探討如何實現類似資生堂官網（https://www.shiseido.co.jp/sb/wonderland/）中�...
JavaScript的演變：當前的趨勢和未來前景
Apr 10, 2025 am 09:33 AM
JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。
如何使用JavaScript將具有相同ID的數組元素合併到一個對像中？
Apr 04, 2025 pm 05:09 PM
如何在JavaScript中將具有相同ID的數組元素合併到一個對像中？在處理數據時，我們常常會遇到需要將具有相同ID�...
JavaScript引擎：比較實施
Apr 13, 2025 am 12:05 AM
不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。
前端開發中如何實現類似 VSCode 的面板拖拽調整功能？
Apr 04, 2025 pm 02:06 PM
探索前端中類似VSCode的面板拖拽調整功能的實現在前端開發中，如何實現類似於VSCode...
