架构研发样本 01 — 参照:本站
零信任简报管道,受实测性能预算约束
架构研发样本:工作室在本代码库中构建并实测的研发工作。它不是客户作品,也不描述任何客户。本页的每一个数字都是实测或计算得出,并说明了方法。
设计问题
一个接收决策者咨询的公开网站,能否拒绝一切无法验证的内容,不设置 Cookie、不运行分析,同时在桌面端和被限速的手机上仍实测达到 Lighthouse 性能 100 分?本站就是样本:工作室自己的大门,按它所出售的公差来构建。
证据层级 A:在本代码库中实现,并由其测试验证。测量是单一机器类别的实验室数据;其局限列于“取舍与局限”。
I
约束与公差
在编写任何代码之前就确定了三项约束,每一项在每次发布时都会检查。
信任边界:来自浏览器的一切都不被信任。来源、请求体大小、数据结构、蜜罐与填写时长、机器人检查和净化器,依次在服务器上运行。未通过其中任何一项的请求会被拒绝,绝不修补。
数据最小化:没有 Cookie,没有分析,浏览器中不存储任何内容。唯一的第三方是机器人检查,在表单的最后一步加载,且仅在投递已接通之处。
帧节奏:页面滚动时保持显示器自身的节奏。在采样的滚动中,60 Hz 显示器上的帧间隔中位数为 16.7 毫秒,第 99 百分位为 16.9 毫秒,每次刷新一帧。
II
架构
一条路由,一条管道,以及一条让框架远离关键路径的渲染路径。
投递管道:浏览器、来源检查与速率限制、数据结构验证、机器人检查、净化器与优先级分类,然后通过签名 webhook(HMAC-SHA256,幂等)或 TLS 上的 SMTP 投递到工作室邮箱。每一步都可以拒绝;拒绝会结束请求,并向访客提供邮件草稿。系统在失败时保持关闭。
渲染:页面在服务器端渲染,处于强制执行的内容安全策略之下,每个请求带一个 nonce。框架在首次内容绘制之后、通过单个加载脚本启动,因此首次绘制不必等待它。首屏以下的部分按需绘制,依据实测的占位高度。
密码学公开可见:页面上的安全模拟器在访客自己的浏览器中用 Web Crypto(HMAC-SHA256、AES-256-GCM)对消息签名并密封,使用与参考架构相同的函数和相同的测试。
III
验证
论断受可执行检查约束,而不是截图。
每次发布之前,针对生产构建运行超过两百项检查的设计审计和超过一百八十项检查的 HTTP 冒烟测试,随后在两种视口下运行真实浏览器流程;发布之后再进行一次线上检查。
可访问性用 axe 在各页面、语言和视口中扫描(无违规)。内容安全策略在真实浏览器中对线上站点验证(无违规、无控制台错误)。分享卡片在站点发布的每一种语言中渲染并比对。
布局移动按其发生的方式测试:占位高度在所绘高度的 15% 以内,而选择预算级别不会移动任何东西。浏览器的布局偏移指标会忽略点击后 500 毫秒内的偏移,因此测试改为比较位置与高度。
投递以真实的机器人检查令牌,针对本地回环 SMTP 接收端做端到端验证。对任何特定邮件服务商是否接受不作任何声明。
IV
实测结果与局限
测量了什么,以及在什么环境下测量。
实测
这些是线上站点已发布且带日期的测量。帧数据是整页一次录制滚动中帧与帧之间的间隔。
- Lighthouse 性能
- 100 · 100
- 桌面端 · 移动端
- 最大内容绘制(LCP)
- 425 ms
- 桌面端
- 布局偏移(CLS)
- 0.00
- 桌面端
- 帧间隔(中位数 · 第 99 百分位)
- 16.7 · 16.9
- ms · 60 Hz 显示器,每次刷新一帧
Lighthouse,desktop preset, live production (syncflow.agency), median of 5 runs,2026年10月17日。帧采样器:1280×800,无头 Chrome,60 Hz,2026年10月8日。
取舍与局限
这个设计的代价,以及这些数字没有证明的事。
实验室数据,而非现场数据
Lighthouse 运行是单一机器类别上的实验室测量。如上面的环境所述,移动端分数是在安静机器上多次运行的中位数;在繁忙的主机上,同一构建得分更低,因为水合处于总阻塞时间的窗口之内。负载下的一次运行绝不会被当作 100 发布。
帧节奏,而非帧内工作
帧数据是 60 Hz 下帧与帧之间的间隔,16.7 毫秒即一帧。它们表明在录制的滚动中没有丢帧;并不说明每一帧自身的工作耗时多久。
严格是有代价的
强制执行的策略和失败即拒绝的路由,意味着缺失的设置会产生错误,而不是悄无声息的成功。表单会在使用之前说明这一点,并提供邮件草稿。
测量环境
- Lighthouse 13.5 · live production
- 412×823 · slow 4G · 4× CPU
- 1280×800 · 60 Hz · frame sampler