Web3 知识体系概览

什么是 Web3？

Web3 是互联网发展的第三个阶段，核心理念是去中心化——用户拥有自己的数据和数字资产，不再依赖中心化平台。对前端开发者来说，Web3 意味着一套全新的交互范式：用户通过钱包连接 DApp，在区块链上读写数据，通过智能合约执行业务逻辑。

Web1 → Web2 → Web3 的演进

阶段	时代	特征	用户角色	代表产品
Web1	1990s-2000s	只读互联网，静态网页	内容消费者	Yahoo、新浪
Web2	2005-至今	读写互联网，用户生成内容（UGC）	内容创作者，但平台拥有数据	微信、抖音、Twitter
Web3	2020-至今	读写+拥有，去中心化	数据和资产的真正所有者	Uniswap、OpenSea、Aave

Web3 的核心区别

Web2 的"登录"依赖邮箱/手机号 + 中心化服务器验证；Web3 的"登录"是用钱包签名——你用私钥证明你是某个链上地址的所有者，不需要任何中间方参与。这就是**去中心化身份（DID）**的基础。

---

面试速答版

什么是 Web3？前端要掌握什么？ Web3 是「不靠中心化服务器」的互联网，对前端来说是一套全新交互范式：

• 登录不是账号密码，是钱包签名（用私钥证明你是某个地址的主人）。
• 后端不是服务器，是部署在区块链上的智能合约，前端通过 RPC 节点调用。
• 主要技术栈：钱包连接（window.ethereum/EIP-1193、WalletConnect）、交互库（ethers.js / viem）、React 集成（wagmi）。
• DApp 的所有写操作必须走交易，需要付 Gas 且不可逆，这个心智模型跟传统 Web 区别很大。

区块链基础

区块链是 Web3 的底层技术，可以理解为一个去中心化的、不可篡改的共享账本。

核心特性

• 去中心化：没有单一的控制节点，由全网节点共同维护
• 不可篡改：数据一旦写入区块链，极难修改（需要控制 51% 以上算力）
• 透明性：所有交易记录公开可查（隐私链除外）
• 共识机制：节点之间通过共识算法（PoW、PoS 等）就数据状态达成一致

区块结构

每个区块通过哈希指针链接到前一个区块，形成一条链——如果修改了某个历史区块的数据，它的哈希会变，导致后续所有区块的哈希都对不上，篡改立即被发现。

---

以太坊与 EVM

在众多区块链中，**以太坊（Ethereum）**对前端开发者最重要，因为绝大多数 DApp 都运行在以太坊或其兼容链上。

以太坊 vs 比特币

特性	比特币	以太坊
定位	数字货币	去中心化计算平台
脚本能力	有限的脚本语言	图灵完备的智能合约
虚拟机	无	EVM（以太坊虚拟机）
主要用途	价值转移	DApp、DeFi、NFT
共识机制	PoW（工作量证明）	PoS（权益证明，2022 年转换）

EVM（以太坊虚拟机）

**EVM（Ethereum Virtual Machine）**是以太坊的运行环境，所有智能合约都在 EVM 上执行。它的核心特点：

• 确定性：相同的输入一定产生相同的输出，保证全网节点运行结果一致
• 隔离性：合约在沙箱环境中运行，不能直接访问网络或文件系统
• Gas 计量：每条指令消耗一定的 Gas，防止无限循环和资源滥用

面试要点

被问到"为什么选以太坊开发 DApp"时，关键词是：图灵完备的智能合约 + 最大的开发者生态 + EVM 兼容链遍地（Polygon、BSC、Arbitrum 等都兼容 EVM，同一套合约可以多链部署）。

---

钱包与账户

钱包是用户与区块链交互的入口，也是前端开发者最常打交道的 Web3 组件。

EOA vs 合约账户

以太坊有两种账户类型：

特性	EOA（外部账户）	合约账户
控制方式	由私钥直接控制	由智能合约代码控制
创建方式	生成密钥对即可	部署合约时创建
能否发起交易	可以	不能主动发起，只能被调用
有无代码	无	有合约代码
Gas 支付	直接支付	由调用方（EOA）支付
代表产品	MetaMask 默认账户	Safe（Gnosis）多签钱包

注意

**ERC-4337（账户抽象）**正在模糊 EOA 和合约账户的边界——它允许合约账户像 EOA 一样发起交易，支持社交恢复、Gas 代付等高级功能。这是以太坊钱包的未来方向。

钱包工作原理

关于钱包连接的详细实现方案（包括 EIP-1193、WalletConnect、多钱包适配等），请参阅 Web3 钱包连接方案。

---

智能合约基础

智能合约（Smart Contract）是部署在区块链上的程序，一旦部署就不可修改（除非使用代理模式），任何人都可以调用。

核心概念

• Solidity：以太坊上最主流的智能合约编程语言，语法类似 JavaScript/TypeScript
• ABI（Application Binary Interface）：合约的接口描述，前端通过 ABI 知道合约有哪些方法、参数类型
• 合约地址：每个部署的合约都有一个唯一的链上地址

前端调用智能合约示例

import { ethers } from 'ethers';

// 合约 ABI（只列出需要调用的方法）
const abi = [
  'function balanceOf(address owner) view returns (uint256)',
  'function transfer(address to, uint256 amount) returns (bool)',
];

// 连接钱包获取 provider 和 signer
const provider = new ethers.BrowserProvider(window.ethereum);
const signer = await provider.getSigner();

// 创建合约实例
const contract = new ethers.Contract(
  '0x1234...abcd', // 合约地址
  abi,
  signer,
);

// 读操作（view 函数，不消耗 Gas，不需要签名）
const balance = await contract.balanceOf(signer.address);

// 写操作（修改链上状态，需要支付 Gas，需要钱包签名）
const tx = await contract.transfer('0xabcd...1234', ethers.parseEther('1.0'));
await tx.wait(); // 等待交易确认

读操作 vs 写操作

• 读操作（view/pure 函数）：只读取链上数据，不修改状态，免费且即时返回
• 写操作：修改链上状态，需要发送交易、支付 Gas、等待区块确认

前端开发中，读操作用 provider（只读连接），写操作用 signer（带签名能力的连接）。

---

DApp 架构

**DApp（去中心化应用）**是运行在区块链上的应用。与传统 Web 应用最大的区别在于：后端逻辑运行在区块链上（智能合约），而不是中心化服务器。

架构对比

DApp 前端技术栈

层级	传统 Web	Web3 DApp
框架	React / Vue / Next.js	同左 + wagmi/viem
用户认证	邮箱/密码、OAuth	钱包连接（EIP-1193）
数据读取	REST API / GraphQL	RPC 调用 / The Graph
数据写入	POST 请求到后端	发送交易到链上
文件存储	S3 / CDN	IPFS / Arweave
状态管理	Redux / Zustand	同左 + 链上状态同步

---

Token 标准

以太坊上的 Token（代币）通过标准化的智能合约接口实现，最重要的三个标准：

ERC-20（同质化代币）

同质化代币——每个 Token 都是一样的，可以互换。如 USDT、USDC、UNI。

核心方法：transfer()、approve()、transferFrom()、balanceOf()。

ERC-721（NFT）

非同质化代币——每个 Token 都是独一无二的，不可互换。如 CryptoPunks、BAYC。

每个 Token 有唯一的 tokenId，可以附带 tokenURI 指向元数据（通常存在 IPFS 上）。

ERC-1155（多代币标准）

在一个合约中同时管理同质化和非同质化代币，支持批量操作，Gas 效率更高。常用于游戏场景（同时管理游戏币和装备 NFT）。

标准	类型	特点	典型场景
ERC-20	同质化	可互换，可分割	稳定币、治理代币、DeFi
ERC-721	非同质化	唯一，不可分割	数字艺术、PFP、域名
ERC-1155	混合	批量操作，Gas 效率高	游戏资产、门票

---

Gas 机制

在以太坊上执行任何写操作（发送交易、调用合约方法）都需要支付 Gas 费用，它是区块链的"手续费"。

Gas 计算公式

$$\text{交易费用} = \text{Gas Used} \times \text{Gas Price（单价）}$$

其中 Gas Price 由两部分组成（EIP-1559 之后）：

$$\text{Gas Price} = \text{Base Fee（基础费，自动调整）} + \text{Priority Fee（小费，给矿工/验证者）}$$

前端开发中的 Gas 注意事项

1. Gas 估算：发送交易前应调用 estimateGas() 预估费用，避免交易失败浪费 Gas
2. Gas 上限（Gas Limit）：设置过低会导致交易执行到一半失败（但 Gas 已扣）
3. 用户体验：应在 UI 上显示预估的 Gas 费用，让用户知道这笔操作要花多少钱
4. 读操作免费：只有写操作才消耗 Gas，view/pure 函数不消耗

---

知识地图

---

前端开发者的 Web3 技术栈

类别	常用工具	说明
链交互库	ethers.js / viem	连接区块链、读写合约
React Hooks	wagmi	基于 viem 的 React Hooks 库
钱包连接	RainbowKit / ConnectKit	钱包连接 UI 组件
合约开发	Hardhat / Foundry	合约编译、测试、部署
索引查询	The Graph	链上数据索引和 GraphQL 查询
去中心化存储	IPFS / Arweave	NFT 元数据、文件存储
多链支持	Chain 配置	Mainnet、Sepolia、Polygon、Arbitrum 等

---

学习建议

推荐学习路径

1. 区块链基础 + 以太坊概念 → 理解 Web3 的底层逻辑
2. 钱包连接与账户体系 → 掌握 Web3 应用的"登录"流程
3. 智能合约交互（ethers.js / viem） → 学会前端读写链上数据
4. Token 标准（ERC-20/721/1155） → 理解 DeFi 和 NFT 的技术基础
5. DApp 架构设计 → 掌握前端 + 钱包 + 区块链的完整架构
6. Gas 机制与安全 → 优化用户体验，防止常见安全问题
7. 多链适配与 Layer 2 → 应对实际项目中的多链需求

给前端开发者的建议

你不需要成为 Solidity 专家或区块链底层开发者。作为前端工程师，重点掌握：

• 如何连接钱包（EIP-1193、WalletConnect）
• 如何读写智能合约（ethers.js / viem + ABI）
• 如何处理交易状态（pending、confirmed、failed）
• 如何设计好的 Web3 用户体验（Gas 估算、错误提示、链切换）

这些足以覆盖 90% 的 Web3 前端面试和实际工作需求。

---

常见面试问题

Q1: Web2 和 Web3 的核心区别是什么？

答案：

Web2 是平台拥有数据的读写互联网，用户创造内容但平台掌握数据所有权和分发权（如微信文章、抖音视频）。Web3 是用户拥有数据和资产的去中心化互联网，通过区块链技术实现：

• 身份：Web2 用邮箱/手机号登录（依赖平台），Web3 用钱包签名（自主身份）
• 数据：Web2 数据存在中心化数据库，Web3 数据存在区块链/IPFS 上
• 资产：Web2 中你的"资产"（如游戏装备）实际上归平台所有，Web3 中链上资产真正属于你
• 信任：Web2 依赖平台信誉，Web3 依赖代码和密码学（"Code is Law"）

Q2: 前端如何与智能合约交互？

答案：

前端通过 JSON-RPC 协议与区块链节点通信，通常借助 ethers.js 或 viem 等库封装底层调用。核心流程：

1. 通过 window.ethereum（钱包注入的 Provider）或 RPC URL 创建 Provider
2. 用合约地址 + ABI 创建合约实例
3. 调用合约方法：读操作直接返回结果，写操作返回交易对象，需要等待确认

Q3: 什么是 Gas？为什么需要 Gas？

答案：

Gas 是以太坊上衡量计算资源消耗的单位。需要 Gas 的原因：

• 防止滥用：如果执行合约免费，攻击者可以写无限循环消耗网络资源
• 激励验证者：Gas 费作为报酬支付给打包交易的验证者
• 资源分配：通过市场化定价（Gas Price 随网络拥堵自动调整），合理分配有限的区块空间

Q4: EOA 和合约账户有什么区别？

答案：

EOA（Externally Owned Account）由私钥控制，可以主动发起交易；合约账户由智能合约代码控制，只能被动响应调用。EOA 创建零成本（生成密钥对即可），合约账户需要部署合约（消耗 Gas）。ERC-4337（账户抽象）正在统一两者的能力边界。

Q5: ethers.js 中的 Provider 和 Signer 有什么区别？

答案：

• Provider：只读连接，可以查询链上数据（余额、区块、交易等），但不能发送交易
• Signer：带签名能力的连接，继承 Provider 的所有读能力，额外可以签名和发送交易

简单记忆：读操作用 Provider，写操作用 Signer。

---

相关链接

• 以太坊官方文档
• Solidity 官方文档
• ethers.js 文档
• viem 文档
• wagmi 文档
• EIP-1193: Ethereum Provider JavaScript API
• EIP-4337: Account Abstraction
• The Graph 文档
• Web3 钱包连接方案（本站）