Capo.js

网站地址:https://rviscomi.github.io/capo.js

GitHub:https://github.com/rviscomi/capo.js

网站描述:用于评估HTML文档 <head> 部分质量的工具

访问官网

GitHub

Capo.js 是一个用于评估 html 文档 <head> 部分质量的工具，开发者可以将其作为 Chrome 扩展程序在浏览器中运行。

未优化的 <head> 部分会导致性能下降和用户体验不佳，而 Capo.js 可以帮助识别并修复这些问题。Capo.js 会对 <head> 执行多项验证检查，以确保其符合现代最佳实践。

Capo.js 将<head>中的元素分为 11 个组，每个组都有一个权重，用于确定最佳排序顺序。同一组内的元素权重相同，并按照它们在文档中出现的顺序显示，典型的包括：

<link rel=prefetch>、<link rel=dns-prefetch>、<link rel=prerender>
<script defer src>
<link rel=preload>、<link rel=modulepreload>
<link rel=stylesheet>、<style>
<script src>
<script async src>
<link rel=preconnect>

等等，目前 Capo.js 在 Github 通过 MIT 协议开源，有超过 1k 的 star，是一个值得关注的前端开源项目。

目前 Capo.js 支持两种评估模式：静态模式和动态模式。

静态模式

在静态模式下，Capo.js 分析服务器渲染的页面 HTML，其通过获取页面 URL 并解析返回的 HTML 来实现这一点，大致流程如下：

Capo.js 获取当前页面的 URL
解析响应体以提取 <head> 元素
分析此静态 <head> 元素内的元素

当想要查看页面在客户端 JavaScript 修改 dom 之前如何从服务器交付时，静态模式是理想之选，其有助于识别初始 HTML 结构中的问题。静态模式是 Capo.js Chrome 扩展程序的默认模式。

动态模式

在动态模式下，Capo.js 分析浏览器中 DOM 的当前状态，大致流程如下：

Capo.js 直接访问 document.head 元素
分析当前存在于 <head> 标签中的元素

如果想查看客户端脚本运行后 <head> 标签的最终状态，动态模式非常有用，其有助于识别动态添加或修改的元素，这些元素可能会影响性能或行为。

使用 CLI 时，动态模式是默认模式，也可以在 Chrome 扩展程序选项中启用。

如何使用 Capo.js

使用 capo.js 的最佳方法是安装 Capo Chrome 扩展程序：

在 Chrome 网上应用商店中找到 Capo 扩展程序并点击“添加到 Chrome”按钮
在任意页面上，点击浏览器工具栏中的 Capo 图标
打开开发者工具控制台以查看更多日志

开发者还可以使用 Capo.js 的 api 来进行深度定制。下面是最基础的用法：

// Analyze a head element
const head = /* your head element */;
const adapter = new BrowserAdapter(); // Or other adapter
const result = analyzeHead(head, adapter);
console.log(result.elements);      // Array of head elements with weights
console.log(result.violations);    // Number of ordering violations
console.log(result.warnings);      // Validation warnings

为了减小软件包大小，开发者还可以按需导入：

// Import just the core analyzer
import { analyzeHead, checkOrdering } from "@rviscomi/capo.js";
// Import just adapters
import { BrowserAdapter } from "@rviscomi/capo.js/adapters";
// Import rules API
import { ElementWeights, getWeight } from "@rviscomi/capo.js/rules";
// Import validation API
import {
  isValidElement,
  getValidationWarnings,
} from "@rviscomi/capo.js/validation";

Capo.js 会用以下几种方法表明一个元素是否无效：