一次點擊消耗多少資源？ 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 13, 2025 am 12:05 AM
不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。
Python vs. JavaScript：學習曲線和易用性
Apr 16, 2025 am 12:12 AM
Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。
從C/C到JavaScript：所有工作方式
Apr 14, 2025 am 12:05 AM
從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。
JavaScript和Web：核心功能和用例
Apr 18, 2025 am 12:19 AM
JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。
JavaScript在行動中：現實世界中的示例和項目
Apr 19, 2025 am 12:13 AM
JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。
了解JavaScript引擎：實施詳細信息
Apr 17, 2025 am 12:05 AM
理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。
Python vs. JavaScript：社區，圖書館和資源
Apr 15, 2025 am 12:16 AM
Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。
Python vs. JavaScript：開發環境和工具
Apr 26, 2025 am 12:09 AM
Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda，適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack，適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。
