页面比你先知道电脑扛不扛得住
Chrome 152 稳定版已经开始推送。真正值得盯的，不是又多了几个能写进选择器的名字，而是网页第一次拿到一个很粗的档位，直接读这台设备的 CPU 性能。
以前做自适应，多数人靠屏幕宽度、设备内存、网络类型去猜。猜错的代价很具体：低端机打开会议页就开始掉帧，高端机却被砍成糊成一团的画面。现在页面可以读一个小整数，再决定画质、特效、后台任务开不开。同一版更新里，JavaScript 还能摸到更多伪元素，服务器也能用一条 HTTP 响应头，把页面允许连出去的地址锁死。
对普通用户，这意味着网站可能按机器快慢换一套体验。对写页面的人，意味着少写一套坐标碰撞，多写一条外连名单。三件事叠在同一版本里，手感完全不一样。
电脑慢，页面现在能提前知道
低端机最怕的不是功能少，是功能全开。视频虚化、降噪、虚拟背景一起上，风扇先响，画面后卡。Chrome 152 把这件事从"上线后看投诉"提前到"进页面前先看档"。
网站读到的不是型号，也不是核心数，是一个很小的整数档位。官方把这个接口叫做 CPU 性能接口（CPU Performance API）。读法很直：看 navigator.cpuPerformance 。0 表示分不出来，1 到 4 表示从几乎扛不住重活，到还有余量可以并行。档位越高，机器越能扛。以后理论上还可能出现 5、6，旧档位不会被重定义。
这改变了默认策略。
过去只能等卡了再降级。现在可以进门就按档裁剪：1 档只保通话，2 档加一点检测，3 档再开降噪，4 档或未知档才上虚拟背景。官方示例里，1 档直接给 QVGA、15 帧，特效列表是空的。数字不整齐，但方向清楚。
它还能跟计算压力接口（Compute Pressure API）一起用。档位回答"这台机器本来就快不快"，压力接口回答"这一刻 CPU 是不是已经顶住了"。先用档位决定功能开不开，再用压力观察器在负载冲高时把特效关掉。静态裁一刀，动态再收一刀。
页面拿到的是粗桶，不是体检报告。
故意做成粗桶，是为了少泄露硬件指纹。接口只在 HTTPS 安全上下文里可用。用户可以在 Chrome 的「设置 > 性能 > 速度 > 覆盖 CPU 性能层级」里改上报值，管理员也能用企业策略 CpuPerformanceTierOverride 统一覆盖。这个策略名读起来像内部工单号，我第一眼还以为是哪个实验开关没改名。
社区里对这件事本来就吵。有人觉得不读档位，低端机只能继续吃满配特效；有人觉得再开一条设备侧写通道，指纹面又宽一寸。两种判断都站得住，我也不打算在这里判赢。
写的时候别把 0 当成残废机。官方示例把 0 和 4 放在同一组默认高配里，理由很朴素：分不出来时，宁可先按能跑的机器来。你要是更保守，也可以把 0 单独降一档，两种做法都有人用。
点蒙层关弹窗，不用再算坐标
CSSPseudoElement 这个接口以前只覆盖 ::after 、 ::before 、 ::marker 。152 把它伸到 ::backdrop 、 ::scroll-marker 、 ::view-transition 。听着像选择器名单变长，动手时差在事件落到谁头上。
点对话框外面的那层黑，以前要自己算。点击落在对话框矩形里还是落在蒙层上，坐标对一次，滚动后再对一次，嵌套弹窗再对一次。算错一次，里面的按钮点着没反应，或者外面一点，里面的表单一起丢。现在可以直接在 ::backdrop 上处理交互：点蒙层就关，点内容区不受牵连。
滚动标记是另一路。长页面旁边那些小圆点、章节锚，以前多半只是样子。152 让 ::scroll-marker 能接交互，官方举的例子很窄，就是收集点击统计。我见过类似需求还出现在目录跳转、进度点打点上，其余场景先不展开。
::view-transition 更往动画中段伸。视图转场进行到一半，元素还在飞，页面如果能拿到正在动的坐标，就有机会按几何关系切下一段转场，而不是等动画播完再重来。官方原话说的是为"感知几何的视图转场"铺路，并能在转场中途拦截。
接口伸到伪元素，不等于所有伪元素都突然变成熟悉的 DOM 节点。事件、命中测试、和现有点击冒泡怎么相处，还得对着真实对话框测。至于中途拦截转场会不会把动画状态机写乱，也得试过才知道。
对普通用户，这只是弹窗更好关、页面跳得更顺。对写过蒙层碰撞的人，少的是那堆 getBoundingClientRect() 对拍。MDN 上的 CSSPseudoElement 文档还在，152 只是把能摸到的伪元素名单拉长了。
外连名单交给浏览器盯着
第三方脚本一旦被塞进页面，它能连哪，过去主要靠内容安全策略（Content Security Policy，CSP）和开发者自己的请求封装。CSP 擅长管资源从哪来、脚本能不能跑。页面运行之后， fetch 、WebSocket、跳转、预加载往外伸手，仍可能走出你以为已经圈好的范围。
152 带上了连接许可名单（Connection Allowlists）。站点在HTTP 响应头里写明：这个文档或 Web Worker 只许连哪些地址。浏览器在真正建连前先核对，名单外的直接拦住。门卫从业务代码里搬到了浏览器里。
头名字就叫 Connection-Allowlist 。写法是一组 URL 模式，常见还会带上 response-origin ，表示页面自己的源默认放行。匹配上的才能出网，对不上的请求到不了电线那头。需要先观察、先不封的时候，可以用 Connection-Allowlist-Report-Only 只上报、不拦截。
它盯的面比很多人第一反应里的"管住 fetch"更宽。文档和 Worker 经由 Fetch 以及其他 Web 平台接口发起的连接都在范围内。提案和试验文档里还提到跳转、重定向、WebSocket、预加载这类出口。具体哪些出口在你当前的 152 构建里已经封死，仍要以正式说明为准，别把试验期的覆盖面直接抄进生产策略。
浏览器先看名单，再决定这条网线接不接。
这和 CSP 不是互相替换的关系。CSP 继续管加载和执行，许可名单管"准不准连出去"。两个名单一起维护会烦，但烦在配置层，不烦在每个请求函数里塞 if。有人先上 Report-Only 看一周违规再改强制，有人直接强制、同时把监控端点接上。选哪条，看你能不能接受误伤支付页、日志域名、验证码 iframe。
配置写错的代价很硬。漏写 CDN，图片和字体集体空白；漏写登录域名，会话续上不去。理论上，越短的名单越好审计，也越容易把依赖你没记住的第三方掐死。
先改一处就能验证
先确认浏览器已经是 152。然后只动一件事：在控制台读档位，看它是不是 0 到 4 之间的整数。
// 只读档位，不改任何功能开关
const tier = navigator.cpuPerformance;
console.log(tier); // 0 未知，1–4 从弱到强
跑完应看到一个小整数。如果是 undefined ，多半还没升到 152，或当前页不是 HTTPS。这步最容易忽略的，是用普通 http 本地页去试，结果接口根本不出现。
档位能读之后，再按官方思路做一次静态裁剪。下面这段来自接口说明里的示例结构，数字不要擅自改整齐。
function getPresetFeatures() {
switch (navigator.cpuPerformance) {
case 1:
return { videoQuality: 'QVGA', frameRate: 15, effects: [] };
case 2:
return { videoQuality: 'VGA', frameRate: 15, effects: ['voice-detection'] };
case 3:
return { videoQuality: '720p', frameRate: 30, effects: ['voice-detection', 'noise-reduction'] };
case 4:
case 0:
default:
return { videoQuality: '1080p', frameRate: 30, effects: ['voice-detection', 'noise-reduction', 'virtual-background'] };
}
}
跑完会得到一份预设。把它接到你现有的画质开关上，先不要一次开所有特效。若要看实时负载，再加压力观察器，在 serious 或 critical 时把重特效摘掉。
验证外连名单时，先用只上报的头，避免第一次就把自己的 API 封死。
Connection-Allowlist-Report-Only: (response-origin "https://api.example.com/*"); report-to=default
把 api.example.com 换成你真实的接口域名。观察上报里出现哪些意外出口，再改成强制头 Connection-Allowlist 。名单里的模式要写全，注释里写清楚每个模式对应哪类请求。
注意： 强制头一生效，名单外的连接会被浏览器直接拦住，本地调试也一样。
用户侧验收很简单。打开「设置 > 性能 > 速度」，改一次覆盖档位，刷新页面，看你的预设有没有跟着变。企业环境再核对策略有没有盖掉用户自己的选择。策略优先于个人设置，测的时候别只改一边。
伪元素这一头没有必须复制的样板代码。找一个带 dialog 的页，把"点蒙层关闭"从坐标判断改成针对 ::backdrop 的交互，看内容区点击还在不在。过关的标志很土：里面的输入框还能点，外面的黑底一点就关。
152 真正能带走的判断就三句。设备快慢可以先读档再裁功能，别等用户骂卡。弹窗蒙层可以交给伪元素，别再手写碰撞。页面外连可以写成响应头，别把门卫藏在业务函数里。完整发行说明在 Chrome 开发者站点的 152 页面，接口细节分别在 CPU Performance 说明和 Connection Allowlists 文档里。
像 Chrome 152 这类浏览器底层的迭代，云栈社区也会持续跟进讨论。低端机上，你先砍功能还是先看实时负载？
发表于 3 小时前
|
查看: 7|
回复: 0
