麦当劳宇宙：现代 Web 架构图解

ACT 1

寻路与进店基础设施篇

故事：你肚子饿了，脑子里只记得一个名字：“麦当劳”。你只知道品牌，不知道经纬度。

技术定义：方便人类记忆的入口（如 google.com），而非机器识别的 IP。

故事：你打开地图输入“麦当劳”，地图忽略了千里之外的总店，告诉你：“离你最近的店在圣何塞北街，坐标 (123, 456)。”

技术定义：网络的通讯录。将域名翻译成 IP 地址，并根据位置进行智能调度。

故事：走进分店，门口货架上已经摆好了炸好的薯条。不用排队，伸手就拿。

技术定义：遍布全球的“前置仓”。静态资源（图片/CSS/JS）被缓存到最近节点，秒级加载。

ACT 2

故事：你要点“AI秘制汉堡”。服务员拦住你：“请出示身份证。”你证明了你是张三。

技术定义：系统的第一道门，解决“你是谁”的问题（如：登录）。

故事：验证通过后，服务员在你额头贴了个“VIP贴纸”，说：“下次凭贴纸点单，别老掏身份证。”

技术定义：解决 HTTP “无状态”问题。服务器记不住你，靠每次请求携带的 Token 维持会话。

故事：服务员打给总部确认：“张三是VIP（已认证），但他买了‘超级套餐’吗？哦，他付过钱，有权吃这个。”

技术定义：系统的第二道门，解决“你有权干这事吗”的问题（如：付费功能）。

ACT 3

故事：汉堡要烤5分钟。服务员没让你站着死等，而是给了个“震动取餐器”，让你先找座玩手机。

技术定义：避免阻塞主线程。耗时任务扔进队列，完成后通知前端，保证页面流畅。

故事：你在麦当劳里大喊：“给我送杯隔壁 KFC 的豆浆进来！” 你的保镖（浏览器）瞬间捂住你的嘴：“除非 KFC 经理亲口答应！”

技术定义：浏览器的安全机制。Origin A 请求 Origin B 的资源时，若无许可，浏览器会拦截。