● 区块链进阶 · 8 大模块交互式可视化

探索区块链的深层机制

从 EVM 字节码执行到 ZK 证明生成，从 AMM 做市到 MEV 三明治攻击——通过可交互的 SVG 可视化，直观理解区块链底层与进阶协议的运行原理。所有模块均为实时模拟，可拖动控件观察状态变化。

8 个模块 纯 HTML/CSS/JS 零依赖 SVG 可视化 响应式 · 减少动画支持
01

智能合约 — Solidity 执行与 EVM 字节码

逐字节码步进 EVM 栈式虚拟机，观察操作码如何操纵栈、内存与存储，并实时累计 Gas 消耗。理解合约执行的本质：状态机在 Gas 约束下的确定性计算。

EVM 执行可视化PC: 0
执行状态
当前操作码—
栈顶—
已用 Gas0
存储槽 0x000x00
点击「单步执行」逐条运行字节码。每个操作码消耗固定 Gas，栈是后进先出（LIFO）结构。
字节码长度
0 B
已执行步数
0
Gas 上限
30,000
执行状态
就绪
02

Layer 2 — Rollup、Plasma 与状态通道

Layer 2 在链下处理交易、将结果批量提交至 L1 以继承安全性。切换 Optimistic 与 ZK Rollup 模式，观察批量提交、欺诈证明窗口与有效性证明的差异。

L1 ↔ L2 数据流Optimistic
机制说明
安全性假设至少 1 诚实验证者
提款延迟7 天
L1 成本数据可用性
Optimistic Rollup：默认乐观假设交易有效，设有挑战期供提交欺诈证明。
ZK Rollup：每批附带有效性证明，L1 验证证明即终局，无需挑战期。
L2 TPS
0
已提交批次
0
L1 Gas 节省
~0×
终局时间
—
03

DeFi 协议 — AMM、闪电贷与流动性池

恒定乘积做市商 x·y=k 是 Uniswap 的核心。拖动滑块模拟兑换，观察储备量变化如何决定价格与滑点。理解无常损失与流动性提供的经济学。

AMM 曲线 x·y = k价格: 1.00
流动性池状态
储备 X1,000
储备 Y100
恒定乘积 k100,000
预期输出—
价格滑点0.00%
公式：out = reserveOut · Δin / (reserveIn + Δin)。交易越大，滑点越高——这是 AMM 的核心权衡。
即时价格
1.0000
池流动性
1,100
当前滑点
0.00%
手续费 0.3%
0.00
04

NFT 与标准 — ERC-721 / ERC-1155、元数据与版税

ERC-721 表示唯一非同质化代币，ERC-1155 允许单合约管理同质化与非同质化代币。查看代币铸造、元数据结构与二次销售版税分配。

代币集合ERC-721
代币元数据 (JSON)

            
ERC-721：每个 tokenId 独立拥有者，transfer 需逐一处理。
ERC-1155：支持批量转账，单个 tokenId 可有多个实例（半同质化）。

          

        

      

      

        
已铸造
0

        
总供应量
0

        
累计版税
0 ETH

        
Gas/铸造
~52k

      

    

  


  
  

    

      05
      

        
跨链桥 — 锁定 / 铸造、验证者签名与流动性

        
跨链桥在源链锁定资产，由验证者签名后在目标链铸造包装代币。调整验证者数量与阈值，观察签名聚合与安全性的关系。

      

    

    

      

        

          
源链 → 目标链待机

          
        

        

          

            

              
            

            

              
            

            

              
            

            

              
              
            

          

          

            
跨链进度

            
源链锁定—

            
已收集签名0 / 0

            
目标链铸造—

            
安全性—

            
阈值签名：需 3/5 验证者签名方可铸造。诚实假设下，最多容忍 1 个拜占庭节点。

          

        

      

      

        
已完成跨链
0

        
锁定量
0

        
拜占庭容错
1

        
确认时间
~12s

      

    

  


  
  

    

      06
      

        
零知识 Rollup — SNARK / STARK 证明生成与验证

        
ZK Rollup 将链下执行转化为简洁证明。追踪证明生成管线：执行轨迹 → 多项式插值 → 承诺 → 证明生成 → L1 验证。证明体积小、验证快，但生成成本高。

      

    

    

      

        

          
证明生成管线阶段 0/5

          
        

        

          

            

              

                
                
              

            

            

              
            

            

              
              
            

          

          

            
证明参数

            
证明大小—

            
生成时间—

            
验证时间—

            
可信设置需要

            
SNARK：证明极小（~200B）、验证毫秒级，但需可信设置。
STARK：抗量子、无需可信设置，但证明体积更大（~100KB）。

          

        

      

      

        
证明大小
—

        
验证 Gas
—

        
抗量子
否

        
扩容比
—

      

    

  


  
  

    

      07
      

        
DAO 治理 — 提案、投票与执行

        
代币加权投票决定协议走向。调整投票分布与法定人数，观察提案能否通过。理解委托投票、法定门槛与时间锁如何保障去中心化治理的安全性。

      

    

    

      

        

          
投票分布法定 0/0

          
        

        

          

            

              
            

            

              
            

            

              
            

            

              
            

            

              
              
              
            

          

          

            
提案 #042: 启用协议费用开关

            
赞成 (For)450k

            
反对 (Against)200k

            
弃权 (Abstain)50k

            
参与率70%

            
结果待投票

            
通过需同时满足：赞成 > 反对 且 参与率达到法定门槛。通过后进入时间锁延迟，方可链上执行。

          

        

      

      

        
总投票权
0

        
参与率
0%

        
赞成占比
0%

        
提案状态
进行中

      

    

  


  
  

    

      08
      

        
MEV 与排序 — 三明治攻击、套利与私有交易池

        
最大可提取价值（MEV）源于区块内交易排序权。观察三明治攻击如何前后夹击用户交易获利，以及私有交易池（Flashbots）如何保护用户免受抢跑。

      

    

    

      

        

          
内存池与区块排序MEV: 0

          
        

        

          

            

              

                
                
                
              

            

            

              
            

            

              
              
            

          

          

            
区块内交易排序

            
1. 抢跑 (Front-run)—

            
2. 用户交易—

            
3. 尾随 (Back-run)—

            
搜索者利润0

            
三明治攻击：搜索者侦测到大额买入，先抢跑买入推高价格，待用户高价成交后再卖出获利。私有交易池将交易直送矿工，绕过公共内存池，避免被抢跑。

          

        

      

      

        
提取 MEV
0 ETH

        
用户损失
0%

        
搜索者利润
0 ETH

        
用户保护
关闭

      

    

  


  

    
区块链进阶可视化实验室 · 纯前端实现 · MIT License

    
GitHub 仓库 →