capo.js：把 <head> 里的元素放对位置

页面快慢不只取决于加载了哪些资源，还取决于它们在 <head> 里出现的顺序。同步脚本放得太靠后，渲染就得干等；preconnect 放得太晚，提前建连就白设计了。capo.js 是 Rick Viscomi 维护的 Apache-2.0 开源工具：给 <head> 里的每个元素按对加载与渲染的影响分配权重，找出放错位置的元素，并在控制台用颜色标出。它起于 Harry Roberts 的 ct.css 与 Vitaly Friedman 在 Nordic.js 2022 的演讲，2023 年 5 月建库，最新版本 v2.3.1 发布于 2026 年 9 月 19 日。

核心功能

• 一套来自源码的权重表：meta（charset、viewport、CSP）与 base 最优先（10），其后依次是 title（9）、preconnect（8）、async 脚本（7）、带 @import 的样式（6）、同步脚本（5）、同步样式（4）、preload（3）、defer 脚本（2），prefetch 与 prerender 排最后（1）。
• 浏览器插件即装即用：Chrome 与 Firefox 都有扩展，装好打开任意页面，DevTools 控制台直接输出带颜色的排序报告，乱序元素一目了然。
• v2 编程接口：npm install @rviscomi/capo.js，用 analyzeHead 加 adapter 分析任意 head 元素；规则（ElementWeights、getWeight）与校验（isValidElement）按子路径导出，只引入需要的部分。
• 自定义 adapter：文档给出从零写 adapter 的指引，可以把同一套分析接进构建流程或其他运行环境。
• 区分服务端与客户端：README 提醒，对客户端往 <head> 动态加内容的页面，看服务端渲染出的 head 才准确。

典型使用场景

• 给页面提速：先用插件跑一遍找出乱序元素，再按权重表调整，通常只是移动几行代码的事，首屏渲染往往直接受益。
• 接入审查流程：编程接口让 head 顺序检查可以进代码审查或 CI，回归了立刻知道，不必每次手工开控制台。
• 学习加载机制：权重表本身就是一份「浏览器希望 <head> 长什么样」的速查表，讲得清为什么 charset 要放最前、defer 为什么比同步脚本安全。
• 配合整站体检：<head> 里也躺着不少 SEO 相关元素；想连同内容与结构化数据给整站做一次体检，可以用 jev-seo。

快速上手

1. 安装 Chrome 或 Firefox 扩展，打开任意网页的 DevTools 控制台读报告。
2. 想在代码里用：npm install @rviscomi/capo.js，然后 analyzeHead(head, new BrowserAdapter())。
3. 要分析浏览器 DOM 之外的东西，照 custom adapters 文档实现一个 adapter；完整 API 参考在 rviscomi.github.io/capo.js。

小结

capo.js 解决的是一个容易被忘掉的小问题：<head> 的书写顺序。它不改动页面本身，只把「哪些元素放错了、为什么错」讲清楚，剩下的调整由你完成。对做过性能优化的人来说，这是那种投入一分钟、可能换回几十毫秒首屏的工具。