前端监控里跨域图片的加载耗时全是零,该补哪个响应头
前端监控里跨域图片的加载耗时为什么全是零,该补哪个响应头——答案是计时放行头,缺它的时候读数被强制归零。官方文档的定义很清楚:这个头指定哪些来源被允许看到通过资源计时接口取到的属性值,否则这些值会因跨域限制被报告为零。要点是「读数为零」不代表资源没花时间,而是客户端被禁止告诉你它花了多少时间。
耗时为零不代表资源没花时间
资源计时接口把一次请求拆成若干阶段:重定向、域名解析、建连与协商、发送请求、等待首字节、接收内容。页面在跨域取图片时,这些细节默认不对外暴露,接口返回的分段耗时统一读成零,只剩下少数不受限制的项目。于是监控面板上会出现一个误导结论:图片耗时看不到,就被当成没有耗时。归因工作在这种数据上做任何比较都会失真。
这个头放行的到底是什么
放行的是读数权限,不是访问权限。资源能不能被加载由来源策略与页面里的引用决定;这个头只决定脚本能不能看到它的时间明细。这一点决定了改动风险很低:补上之后原本能取到的图片仍然一样取到,只是监控可以按阶段拆分。反过来,漏配它也不会导致图片显示异常,只会让数据缺失——这类问题往往拖到有人认真看耗时分布时才被发现。
取值怎么写,多来源怎么处理
两种写法。一种是通配符,全部来源都可以读到计时;另一种是逗号分隔的来源清单,只把需要读取数据的那几个页面地址列进去。选择依据很直接:如果监控采集端地址固定且已知,就写清单;如果站点被多方嵌入或来源难以穷举,才考虑通配。要留意的是这个头必须出现在资源那一侧的响应里,写在页面所在的域名上不起作用——图片在另一个域名下,就得由那个域名返回。
| 现象 | 数据上的原因 | 要改的位置 | 改完怎么确认 |
|---|---|---|---|
| 跨域图片分段耗时全为零 | 未放行计时读数 | 图片所在域名的响应 | 重新采集,看各阶段是否出现非零值 |
| 自家图片有数据、图片服务没有 | 只在主域写了放行 | 图片服务或缓存层 | 绕过缓存直连源站复现一次 |
| 补了头仍然读不到 | 前置层把该头过滤掉 | 生成该响应的缓存层 | 对比直连与经缓存两次响应 |
| 上线后忽然读不到 | 同层新增响应头定义带走继承 | 服务器配置的层级位置 | 检查这一层是否写过别的加头指令 |
归因前先确认采集端能读到什么
补头之前值得先把采集口径核对一遍。页面上脚本读取的是哪一项指标、有没有带上跨域属性、上报时是否区分同源与跨域,这三件事决定补完头之后能不能看到想看的数字。站内图片链路上还有一层容易忽略的因素:标题自动配图会把图片分配到文章里,加上水印处理后图片地址常常与页面地址不同域。AnQiCMS 的这类图片与静态资源走独立路径,跨域计时未放行时,正好是最容易在监控里读成零的一段。
别把它当性能优化本身
这个头解决的是可见性。补完之后页面加载速度不会有变化,但你能第一次看清慢在哪一段:是协商、等待首字节还是接收内容。对内容站来说这一步很关键,官方对页面加载速度的口径是相比传统 PHP 程序有显著提升,单机可承载约 500 万 PV,这些描述讲的是服务端能力,不代表具体页面的资源链路没有瓶颈。真正要做优化时,能用的输入只有分段数据。
常见问题
问:通配写法有什么风险? 答:暴露的是时间明细而非内容,风险不大,但会给任意来源的脚本提供站点资源分布信息,能收清单就收清单。
问:图片走第三方服务、改不了它的响应怎么办? 答:只能把该服务地址加进采集口径的例外,或改由自家域名反代图片,在反代层补这个头。
问:只补图片域名不够吗? 答:脚本、字体、样式表同样受这条限制,凡是需要分段耗时的跨域资源都要在各自响应里放行。