全站不引用任何 CDN,包括字体。Three.js 自托管(687 KB 原始 / 172 KB gzip),其余全部系统字体栈。
理由不是洁癖:3 Mbps 出口不允许我把带宽送给第三方;而入口页的关键文字全部写在 HTML 里,3D 与着色器是渐进增强 —— 加载失败、没有 WebGL、或系统开了「减少动态效果」时,内容照常可读可点。
想要的效果是「纯白空间里,机柜一排排掠过,尽头一个沙发」。第一反应是建模导出 GLTF —— 随便一个带贴面的柜子就是 5~20 MB,在 3 Mbps 上要下载十几秒,HR 会直接关掉页面。
但这个场景本身就是极简几何:白地面、白墙靠雾消失、规整重复的柜体。于是全部代码生成:
BoxGeometry 阵列 × 4 列 × 15 行 EdgesGeometry 冷灰描边,制造"图纸感" Fog(white) 远处完全白化 → 沙发从雾里显影 camera.z 插值 推进;FOV 58→44 收束定格 lookAt.x 插值 先掠过右侧机柜,再正对沙发
代价:零模型文件,全部动画逻辑约 12 KB。
三个真实场景决定的:HR 会搜你(要能被抓取)、客户会从微信点进单个案例(要能深链)、以及坏一页不该拖全站。
代价是部分子页内容由 data.js 在前端渲染 —— 这是已知未完成项:上线前要加一步预渲染,把结果内联回 HTML。入口页与本页已是纯静态。
这台 ECS 同时承担个人站、远程桌面中继、GPU 调度网关。冲突的不是 CPU,是带宽和内存。
远程桌面本可以 P2P 直连,那样服务器只承担信令、几乎不占带宽。我用 STUN 做了实测:
Google-1 222.209.214.232:50461 Google-2 222.209.214.232:62850 Google-3 222.209.214.232:52413 Xiaomi 222.209.214.232:50784 → 同一出口 IP,不同目标返回不同映射端口 = 对称型 NAT
对称 NAT 下,打洞方永远猜不到该往哪个端口回包,UDP 打洞在原理上不可能成功。这不是配置问题,是运营商网络结构问题。所以永久走中继,体验靠调画质而不是靠网络技巧。
我在这个问题上花了不少时间,最后的结论是承认它无解,然后把力气花在带宽封顶和画质上 —— 有时候正确的设计决策是放弃一条路。