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-rendering.md

@@ -3,6 +3,22 @@
 **为什么有些网页流畅如丝，有些却卡成PPT？** 浏览器是怎么把一堆HTML、CSS、JavaScript代码变成你眼前看到的网页的？本章将带你深入浏览器的"车间"，理解它的工作流程，从而写出性能更好的网页。
 :::
 
+**这篇文章会带你学什么？**
+
+| 章节 | 内容 | 学完能干嘛 |
+|-----|------|-----------|
+| **第 1 章** | 为什么要理解渲染管线 | 理解性能优化的必要性 |
+| **第 2 章** | 渲染管线的五个阶段 | 掌握浏览器渲染的基本流程 |
+| **第 3 章** | 构建DOM树和CSSOM树 | 理解HTML和CSS如何被解析 |
+| **第 4 章** | 构建渲染树 | 知道哪些元素会被渲染 |
+| **第 5 章** | 布局与重排 | 避免触发昂贵的布局计算 |
+| **第 6 章** | 绘制与重绘 | 减少不必要的绘制操作 |
+| **第 7 章** | 合成与GPU加速 | 利用GPU提升动画性能 |
+| **第 8 章** | 事件循环 | 理解JavaScript的执行机制 |
+| **第 9 章** | 性能优化实战 | 掌握常用的性能优化技巧 |
+
+每一章都从"理解原理"开始，不需要你会手写优化代码。遇到性能问题时，随时回来查就行。
+
 ---
 
 ## 1. 为什么要理解"渲染管线"？
@@ -933,7 +949,41 @@ lazyImages.forEach(img => imageObserver.observe(img))
 
 ---
 
-## 10. 总结：渲染管线优化的本质
+## 10. 你现在应该能识别的性能问题
+
+理解了浏览器的渲染管线后，你应该能识别以下常见的性能问题：
+
+| 问题代码 | 问题所在 | 如何描述给AI |
+|---------|---------|-------------|
+| `element.style.width = ...` | 在循环中频繁修改宽度 | "这里会触发多次重排，请改用transform或者批量处理" |
+| `height = element.offsetHeight` | 在写入后立即读取布局属性 | "这是强制同步布局，请分离读写操作" |
+| `element.className = ...` | 频繁修改class触发样式重新计算 | "用classList.add/remove代替，减少样式计算" |
+| 动画用`width`/`left` | 触发重排和重绘，性能差 | "改用transform和opacity做动画" |
+| 给所有元素加`translateZ(0)` | 滥用GPU加速导致内存爆炸 | "只给需要动画的元素开启GPU加速" |
+| 列表项10000个全渲染 | DOM节点过多导致卡顿 | "实现虚拟滚动，只渲染可见区域" |
+| scroll事件里直接操作DOM | 触发频率太高导致卡顿 | "用requestAnimationFrame或节流优化" |
+| `box-shadow`做hover动画 | 复杂的阴影计算很慢 | "改用transform或伪元素，避免动画阴影" |
+
+**如果你认真读了每一章的"踩坑实录"，你还掌握了这些核心概念：**
+
+- **渲染管线五阶段**：DOM/CSSOM → 渲染树 → 布局 → 绘制 → 合成
+- **重排 vs 重绘**：重排最昂贵（几何变化），重绘次之（外观变化）
+- **强制同步布局**：读写交替会导致布局抖动，必须分离
+- **GPU加速**：transform和opacity由GPU处理，性能最佳
+- **事件循环**：JavaScript是单线程的，通过任务队列实现异步
+
+这些概念会帮你快速定位性能瓶颈。
+
+::: info 💡 遇到性能问题时这样跟AI说
+- "动画卡顿，检查是否触发了重排或重绘"
+- "滚动性能差，可能需要节流或requestAnimationFrame"
+- "列表数据量大时卡顿，需要虚拟滚动"
+- "频繁修改样式导致性能问题，请用transform优化"
+:::
+
+---
+
+## 11. 总结：渲染管线优化的本质
 
 通过本文的学习，我们可以得出以下核心结论：
 
@@ -948,7 +998,7 @@ lazyImages.forEach(img => imageObserver.observe(img))
 
 ---
 
-## 11. 名词对照表
+## 12. 名词对照表
 
 | 英文术语 | 中文对照 | 解释 |
 | :--- | :--- | :--- |