包含的演示环节：
1、本地处理：浏览器解析 URL，检查本地缓存 (Cache)。
2、DNS 解析：如果缓存未命中，向 DNS 服务器查询 IP 地址。
3、TCP 三次握手：模拟 SYN, SYN-ACK, ACK 的数据包交互。
4、HTTP 请求：发送 Request 数据包。
5、服务器处理：服务器处理请求并准备资源。
6、HTTP 响应：服务器返回 HTML/CSS/JS 数据流。
7、页面渲染：浏览器接收数据，屏幕亮起，模拟渲染过程。
8、连接断开：TCP 四次挥手。
代码实现：
1、角色区分：
Browser：左侧的笔记本电脑形状。
Cache：附在浏览器旁边的透明橙色盒子，演示时会闪烁（模拟未命中）。
DNS Server：右上方的蓝色服务器机柜。
Web Server：右下方的绿色服务器机柜。
2、GSAP 时间轴控制：
将复杂的网络步骤串联起来。
不再是简单的死循环动画，而是有逻辑顺序的：DNS -> TCP -> HTTP -> Render。
动态生成“飞行的方块/球体”来代表数据包。
3、视觉反馈：
颜色编码：黄色代表DNS查询，蓝色代表TCP控制包，绿色代表HTTP请求，白色/灰色代表HTML资源，红色代表断开连接。
屏幕渲染：浏览器的屏幕材质会从黑色变为白色再到蓝色，模拟网页加载出来的效果。
文字说明：底部 UI 实时更新当前步骤的文字描述，帮助理解正在发生什么。
Copyright (C) 2018 www.fltvu.com All Rights Reserved.
联系电话：(023)72877316
地址：重庆涪陵黎明路38号
渝ICP备05002588号-1
渝公网安备 50010202000170号
技术支持：紫驰科技
Copyright (C) 2018 www.fltvu.com All Rights Reserved.
联系电话：(023)72877316
地址：重庆涪陵黎明路38号
渝ICP备05002588号-1
渝公网安备 50010202000170号
技术支持：紫驰科技
