feat(docs): enhance JavaScript runtime and browser-as-os content

refactor(demos): improve variable box, scope, and type annotation demos
style(demos): update visual styles and animations for better UX
docs(browser-as-os): restructure content with tables and practical examples
feat(demos): add new TypeScript and runtime environment demos

docs/zh-cn/appendix/3-browser-and-frontend/browser-as-os.md

@@ -1,18 +1,77 @@
 # 浏览器是一个操作系统
 
-> **学习指南**：本章节无需编程基础。我们将用**"网购"**的生活化比喻，配合**真实的技术过程**，带你一步步理解浏览器如何将一行网址变成丰富多彩的页面。
+::: tip 前言
+你每天都在用浏览器——看视频、刷新闻、在线办公。但你有没有想过：**当你在地址栏输入一个网址并按下回车，背后发生了什么？**
+
+这篇文章会用**"网购"**的生活化比喻，配合**真实的技术过程**，带你一步步理解浏览器如何将一行网址变成丰富多彩的页面。
+
+读完这篇，你就能：
+- 理解从输入网址到显示页面的完整流程
+- 掌握 URL、DNS、TCP、HTTP 等核心概念
+- 了解浏览器如何渲染页面
+- 知道静态网站和动态网站的区别
+
+**无需编程基础**，只需要你平时网购的经验即可。
+:::
+
+**这篇文章会带你学什么？**
+
+| 章节 | 内容 | 核心概念 |
+|-----|------|---------|
+| **第 1 章** | URL 解析 | 网址的结构和作用 |
+| **第 2 章** | DNS 查询 | 域名如何转换成 IP 地址 |
+| **第 3 章** | TCP 握手 | 如何建立可靠的连接 |
+| **第 4 章** | HTTP 通信 | 浏览器和服务器如何对话 |
+| **第 5 章** | 浏览器渲染 | 代码如何变成画面 |
+| **第 6 章** | 静态 vs 动态 | 网页内容的生成方式 |
 
 ---
 
 ## 0. 引言：当你按下回车键的那一刻
 
-想象你正在进行一次**网购**。你需要：
+::: tip 🤔 核心问题
+**当你在浏览器输入网址并按下回车，后台发生了什么？** 为什么有的网页打开很快，有的很慢？为什么有时候会出现"找不到服务器"的错误？
+:::
 
-1. **填写订单**（选好商品，确认收货地址）
-2. **系统查找仓库**（根据店铺名找到具体的发货仓库）
-3. **建立物流通道**（确保仓库正常营业且能发货）
-4. **仓库发货**（快递员把包裹送上门）
-5. **拆箱体验**（打开包裹，看到心仪的商品）
+### 生活比喻：一次网购之旅
+
+想象你正在进行一次**网购**。整个过程可以分为 5 个步骤：
+
+<div style="display: flex; gap: 20px; margin: 20px 0;">
+<div style="flex: 1; padding: 16px; background: var(--vp-c-bg-alt); border-radius: 12px;">
+
+**🛒 第 1 步：填写订单**
+选好商品，确认收货地址
+
+</div>
+<div style="flex: 1; padding: 16px; background: var(--vp-c-bg-alt); border-radius: 12px;">
+
+**🗺️ 第 2 步：查找仓库**
+系统找到具体的发货仓库
+
+</div>
+<div style="flex: 1; padding: 16px; background: var(--vp-c-bg-alt); border-radius: 12px;">
+
+**📞 第 3 步：建立通道**
+确认仓库营业且能发货
+
+</div>
+</div>
+
+<div style="display: flex; gap: 20px; margin: 20px 0;">
+<div style="flex: 1; padding: 16px; background: var(--vp-c-bg-alt); border-radius: 12px;">
+
+**🚚 第 4 步：仓库发货**
+快递员把包裹送上门
+
+</div>
+<div style="flex: 1; padding: 16px; background: var(--vp-c-bg-alt); border-radius: 12px;">
+
+**🎁 第 5 步：拆箱体验**
+打开包裹，看到心仪的商品
+
+</div>
+</div>
 
 **访问网页的过程和网购惊人地相似！**
 
@@ -20,10 +79,18 @@
 
 <UrlToBrowserQuickStart />
 
+::: info 💡 核心启示
+理解浏览器工作原理的关键是：**把复杂的技术过程映射到熟悉的生活场景**。网购的 5 个步骤完美对应了浏览器访问网页的 5 个技术阶段。
+:::
+
 ---
 
 ## 1. 第一步：填写"订单" —— URL 解析
 
+::: tip 🤔 核心问题
+**为什么网址要写成这样？** `https://www.example.com:8080/path/page.html?id=123#section` — 这串字符到底有什么含义？
+:::
+
 ### 生活比喻：填写购物单
 
 假设你只在订单上写"买鞋子"，仓库肯定不知道发哪双。你需要写清楚：
@@ -49,12 +116,18 @@
 
 <UrlParserDemo />
 
-> **关键理解**：URL 的存在是为了让**人类**能记住和输入。计算机最终需要的是 **IP 地址**（就像快递员最终需要的是具体的仓库地址，而不是"Nike 官方店"这个名字）。
+::: info 💡 关键理解
+URL 的存在是为了让**人类**能记住和输入。计算机最终需要的是 **IP 地址**（就像快递员最终需要的是具体的仓库地址，而不是"Nike 官方店"这个名字）。
+:::
 
 ---
 
 ## 2. 第二步：查"地址簿" —— DNS 查询
 
+::: tip 🤔 核心问题
+**为什么浏览器能找到网站？** 你输入的是人类可读的域名（如 `baidu.com`），但计算机真正需要的是数字地址（IP）。这中间发生了什么？
+:::
+
 ### 生活比喻：查仓库地址
 
 你下单写的是"Nike 官方店"，但物流系统不知道仓库在哪。它需要查地址簿：
@@ -90,12 +163,20 @@
 
 <DnsLookupDemo />
 
-> **为什么需要这么多层？** 想象一下如果全世界只有一个地址簿，几十亿人同时查，早就崩溃了。分层设计让每个层级只管理自己的"辖区"，既高效又可靠。
+::: info 💡 为什么需要这么多层？
+想象一下如果全世界只有一个地址簿，几十亿人同时查，早就崩溃了。分层设计让每个层级只管理自己的"辖区"，既高效又可靠。
+
+这就是互联网设计的核心思想：**分布式系统**。
+:::
 
 ---
 
 ## 3. 第三步：打电话确认 —— TCP 三次握手
 
+::: tip 🤔 核心问题
+**为什么需要"三次握手"？** 找到服务器地址后，为什么不能直接发送数据？为什么要先进行三次通信？
+:::
+
 ### 生活比喻：建立物流通道
 
 假设物流车直接开到仓库，结果：
@@ -145,6 +226,10 @@
 
 ## 4. 第四步："买家"和"商家"的对话 —— HTTP 请求与响应
 
+::: tip 🤔 核心问题
+**浏览器和服务器在说什么？** 建立连接后，浏览器如何"告诉"服务器它想要什么？服务器又如何"回应"？
+:::
+
 ### 生活比喻：仓库发货
 
 物流车到达仓库："这是订单（HTTP请求），**我要取回商品（网页 HTML 源代码）！**"
@@ -225,6 +310,10 @@ Set-Cookie: user_id=xyz789        ← 设置 Cookie
 ## 5. 第五步：拆开"包裹" —— 浏览器渲染
 
 ::: tip 🤔 核心问题
+**代码怎么变成画面？** 服务器发来的是枯燥的 HTML/CSS/JavaScript 代码，浏览器如何把它们变成丰富多彩的网页？
+:::
+
+### 生活比喻：拆箱与组装
 
 你终于收到了快递包裹（HTTP 响应），但打开一看，里面不是现成的家具，而是一堆**零件**（HTML）和一本**组装说明书**（CSS）。作为"买家"（浏览器），你需要亲自动手组装：
 
@@ -298,14 +387,18 @@ DOM 树 + CSSOM 树 = **渲染树 (Render Tree)**。
 <BrowserRenderingDemo />
 
 ::: info 💡 你知道吗？
->
-> **布局和绘制**是浏览器最忙碌的时候。网页里的元素越多、结构越复杂，浏览器就需要花更多时间来计算位置和上色。这就是为什么有的复杂网页打开会卡顿的原因。
-
+**布局和绘制**是浏览器最忙碌的时候。网页里的元素越多、结构越复杂，浏览器就需要花更多时间来计算位置和上色。这就是为什么有的复杂网页打开会卡顿的原因。
+:::
+
 ---
 
 ## 5.5 网页是怎么"生成"的？静态网站 vs 动态网站
 
 ::: tip 🤔 核心问题
+**网页内容从哪里来？** 前面我们讲了浏览器如何渲染页面，但服务器上的 HTML 文件是怎么来的？是提前做好还是现做？
+:::
+
+前面我们讲的都是浏览器如何"拆开包裹"——把服务器发来的 HTML/CSS/JS 渲染成页面。但你有没有想过一个问题：**服务器上那个 HTML 文件是怎么来的？**
 
 答案是：**有两种方式**，这就是静态网站和动态网站的区别。
 
@@ -381,6 +474,14 @@ DOM 树 + CSSOM 树 = **渲染树 (Render Tree)**。
 ## 6. 总结：一次完整的"网购"之旅
 
 ::: tip 🎉 学完本章，你应该能
+- 解释从输入网址到显示页面的完整流程
+- 理解 URL、DNS、TCP、HTTP 的作用和关系
+- 知道浏览器如何渲染页面
+- 区分静态网站和动态网站
+- 用生活化比喻向他人解释浏览器工作原理
+:::
+
+让我们回顾整个旅程：
 
 | 阶段        | 技术术语   | 网购类比 | 核心任务           | 关键技术                       |
 | ----------- | ---------- | -------- | ------------------ | ------------------------------ |
@@ -403,6 +504,13 @@ DOM 树 + CSSOM 树 = **渲染树 (Render Tree)**。
 这就是互联网的魅力：**复杂的技术，简单的体验**。
 
 ::: info 💡 进阶学习
+如果你想深入了解某个环节，可以参考：
+- **API 开发**：[API 简介](./api-intro.md) - 学习如何设计和使用 API
+- **前端性能**：[前端性能优化](./frontend-performance.md) - 学习如何优化网页加载速度
+- **浏览器渲染**：[浏览器渲染管道](./browser-rendering-pipeline.md) - 深入了解渲染细节
+:::
+
+---
 
 ## 7. 名词速查表 (Glossary)
 
@@ -424,4 +532,13 @@ DOM 树 + CSSOM 树 = **渲染树 (Render Tree)**。
 ---
 
 ::: tip 🎓 恭喜
-> **恭喜！** 现在当你再次在地址栏输入网址时，你已经能看到屏幕背后的那个忙碌而精彩的数字世界了。
+现在当你再次在地址栏输入网址并按下回车时，你已经能看到屏幕背后的那个忙碌而精彩的数字世界了。
+
+你理解了：
+- 为什么有时候网页打不开（DNS 解析失败、服务器宕机）
+- 为什么有的网页快、有的慢（网络延迟、服务器性能、页面复杂度）
+- 浏览器是如何把代码变成画面的（渲染管道）
+
+**这就是理解技术原理的价值** — 遇到问题时，你能知道从哪里找原因，而不是束手无策。
+:::
+:::