feat(docs): add JavaScript introduction components and content

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

@@ -304,6 +304,81 @@ DOM 树 + CSSOM 树 = **渲染树 (Render Tree)**。
 ---
 
 ## 5.5 网页是怎么"生成"的？静态网站 vs 动态网站
+
+前面我们讲的都是浏览器如何"拆开包裹"——把服务器发来的 HTML/CSS/JS 渲染成页面。但你有没有想过一个问题：**服务器上那个 HTML 文件是怎么来的？**
+
+答案是：**有两种方式**，这就是静态网站和动态网站的区别。
+
+### 静态网站：提前做好、直接给你
+
+想象你去超市买饼干。货架上的饼干都是工厂已经生产好的，你直接拿走就行，不需要等。
+
+**静态网站**就是这样的"成品"——网页在服务器上已经准备好了，你访问时服务器直接把现成的 HTML 文件发给你，不做任何额外处理。
+
+**特点：**
+- ✅ 访问速度快（服务器直接发文件，不用计算）
+- ✅ 制作简单（写好 HTML 就能用）
+- ✅ 承载力强（可以用 CDN 分发，多少人访问都不怕）
+- ❌ 内容难更新（想改内容就要重新生成文件）
+
+**常见例子：** 公司介绍页、产品文档、帮助中心、个人博客
+
+### 动态网站：现点现做、每次不同
+
+这次想象你去餐厅点餐。厨师根据你的订单现做，你点宫保鸡丁不会给你上糖醋里脊。
+
+**动态网站**就是你访问时才"现场制作"的页面——服务器收到你的请求后，去数据库查资料、计算数据，然后生成一个全新的 HTML 发给你。
+
+**特点：**
+- ✅ 内容实时（购物车显示最新库存、新闻随时更新）
+- ✅ 因人而异（登录后看到你的个人信息）
+- ✅ 功能强大（搜索、评论、推荐、支付都能实现）
+- ❌ 访问速度慢（服务器需要时间计算）
+- ❌ 服务器压力大（同时很多人访问要排队）
+
+**常见例子：** 淘宝、微博、在线银行、在线文档
+
+**需要服务器吗？** 动态网站确实需要某种"后端"来生成内容，但形式多样：
+- **传统服务器**：自己买/租服务器（阿里云 ECS、AWS EC2）
+- **Serverless**：不用管服务器，云厂商帮你运行代码（AWS Lambda、阿里云函数计算、Cloudflare Workers）
+- **调用第三方 API**：支付用 Stripe、天气用气象局 API，自己不写后端代码
+
+::: tip 💡 静动态结合
+现在很多网站是"混合"的：网页主体是静态的，但某些部分（比如评论区、搜索框）是动态加载的。JavaScript 可以在页面加载后调用 API 获取数据，实现"静态页面 + 动态功能"。
+:::
+
+### 📊 静态 vs 动态，一对比就清楚
+
+| | 静态网站 | 动态网站 |
+|---|---------|---------|
+| **怎么来的** | 提前做好，存服务器上 | 访问时现做 |
+| **像什么** | 超市货架上的商品 | 餐厅现点的菜 |
+| **速度** | 快 | 慢（需要计算） |
+| **能改内容吗** | 难（要重新生成） | 容易（后台直接改） |
+| **适合做什么** | 展示型内容（介绍页、文档） | 交互型应用（购物、社交） |
+| **典型例子** | 公司官网、帮助文档 | 淘宝、微信、在线银行 |
+
+### 🤔 常见疑问
+
+**Q: 静态网站是不是不能用 JavaScript？**
+
+当然不是！轮播图、折叠菜单、表单验证这些交互功能，静态网站都能用 JavaScript 实现。我们说的"静态""动态"，是指**页面内容是不是提前准备好的**，跟有没有交互功能是两回事。
+
+**Q: 动态网站一定要自己买服务器吗？**
+
+不一定。除了传统服务器，你还可以用 Serverless（云函数）、或者直接调用第三方 API。现在的趋势是"能不动服务器就不动"——用静态网站 + JavaScript 调用 API 的方式，既快又省成本。
+
+::: tip 💡 重要提示
+无论静态网站还是动态网站，**浏览器渲染的原理都是一样的**！服务器发来的是什么，浏览器就渲染什么。区别只在于：
+- 静态网站：服务器发来的是"成品"
+- 动态网站：服务器发来的是"现做的"
+
+作为前端开发者，你主要关注的是浏览器如何处理收到的内容，而不是服务器怎么生成的。
+:::
+
+---
+
+## 6. 总结：一次完整的"网购"之旅
 
 让我们回顾整个旅程：