Can I Use：查询JavaScript API兼容性的必备网站

在前端开发中，使用较新的 JavaScript API 或浏览器原生能力时，最常遇到的问题就是目标用户的浏览器是否支持该特性。Can I Use（caniuse.com）是前端领域查询 Web 标准和 JavaScript API 在各大浏览器支持情况的基础工具。本文将具体介绍如何使用 Can I Use 准确检索 JavaScript API、读懂数据表格中的关键标识、根据统计数据做出技术决策，以及如何将兼容性数据接入日常的前端工程化流程中。

一、Can I Use 的核心价值与适用边界

在编写现代化 JavaScript 代码时，我们经常会用到 Promise.allSettled、ResizeObserver、Fetch API、IntersectionObserver 以及 Web Workers 等原生特性。如果用户环境（如老旧移动端 WebView 或特定桌面浏览器）尚未支持这些 API，代码执行时就会抛出 TypeError: undefined is not a function 或未定义报错，造成页面白屏或功能中断。

Can I Use 汇集了由社区和各大浏览器厂商维护的兼容性数据库，覆盖主流浏览器（Chrome、Edge、Safari、Firefox、iOS Safari、Chrome for Android 等）的历史版本、当前稳定版和预览版本支持数据，并结合全球与地区维度的浏览器市场使用份额（StatCounter 数据），让开发者一目了然地获知某项特性的可用范围。

图 1：Can I Use 在 Web API 选型与兼容性治理中的决策定位

二、快速检索与查询操作步骤

使用 Can I Use 查询 API 的流程非常明确。以下是标准的检索步骤与关键设置项：

1. 输入检索词：打开 caniuse.com 后，在页面顶部的检索输入框中输入 API 名称。例如输入 IntersectionObserver、crypto.randomUUID 或 web workers。检索支持实时模糊匹配。
2. 定位具体条目：搜索结果会罗列相关特性卡片。点击进入对应的特性主面板。
3. 设定地理与版本范围：默认展示的是全球用户覆盖率（Global usage）。如果在国内开发面向国内用户的产品，可点击右上角设置，将地理分布切换为目标地区（如 China），因为不同地区 UC 浏览器、QQ 浏览器或各版本 Safari 占比存在差异。
4. 查看兼容性矩阵与统计百分比：主面板会显示两组核心统计数字：Can use（完全支持的总份额）与 Can use with polyfill / partial（需补丁或部分支持的份额）。

图 2：Can I Use 快速检索与条件配置流程

三、读懂特性卡片与兼容性图表

检索结果中的核心部分是一张矩阵式版本表格。每个主流浏览器占一列，自上而下排列该浏览器的不同版本号。正确理解表格色彩与脚标含义，是避免线上故障的关键：

• 绿色（Supported）：该版本已完全支持该特性，开发者可直接调用相关 API。
• 红色（Not Supported）：该版本完全不支持该特性，直接调用会导致运行时报错。
• 淡黄 / 浅绿色（Partial Support）：部分支持。通常意味着该 API 的核心功能可用，但某些高级配置项（例如 Fetch 的 keepalive 选项或特定 stream 返回类型）缺失，或者行为不完全符合最新 W3C 规范。
• 数字角标（如 ^#1、^#2）：对应表格下方的“Notes”。标注了具体限制，例如“仅在安全上下文（HTTPS）下可用”、“需在 about:flags 开启实验标记”或“iOS 14 之前存在内存泄漏”。
• Known issues 选项卡：收录了真实项目开发中已确认的特定内核 Bug。例如某些 Android 原生 WebView 对特定方法实现的异常处理，这是官方测试用例难以覆盖但极具参考价值的实战经验。

图 3：Can I Use 矩阵图表区域划分与信息点标识说明

四、工程化集成：通过 Browserslist 与工具链协同

日常开发中，逐个 API 手动上网站查询效率较低。Can I Use 的底层数据源开源为 caniuse-lite 与 caniuse-db，它被广泛集成在现代前端工具链中。前端开发者通常通过 Browserslist 配置受支持的目标浏览器群体，构建工具就会自动结合 Can I Use 的数据进行代码转换或 Polyfill 补齐。

1. 配置 package.json 或 .browserslistrc

在项目根目录创建 .browserslistrc 文件，声明项目所需支持的受众范围：

# 目标：全球使用份额大于 0.5% 且仍在官方维护期内的浏览器，排除 IE 11
> 0.5%
last 2 versions
Firefox ESR
not dead
not ie 11

2. 构建工具如何消费 Can I Use 数据

当配置好 Browserslist 后，以下核心工具会自动读取 Can I Use 数据库：

• Babel (@babel/preset-env)：检查目标环境是否原生支持某些语法或标准库，从而自动按需注入 core-js 对应的 Polyfill，避免打包冗余代码。
• Autoprefixer：针对 CSS 属性自动补充对应浏览器的前缀（如 -webkit-）。
• ESLint (eslint-plugin-compat)：在静态代码检查阶段直接拦截兼容性问题。当你在代码中直接使用超出配置范围的 JavaScript API（如 navigator.clipboard.writeText）时，编辑器会直接飘红报错，从源头阻断兼容性隐患。

// 针对未支持 API 的安全防御示例（优雅降级）
if ('clipboard' in navigator && typeof navigator.clipboard.writeText === 'function') {
  navigator.clipboard.writeText(textToCopy).then(() => {
    console.log('复制成功');
  }).catch(() => {
    fallbackCopy(textToCopy);
  });
} else {
  fallbackCopy(textToCopy);
}

五、全生命周期总结与开发指引

将兼容性查询融入开发全流程，能有效杜绝由于 API 不兼容带来的线上事故。从前期调研、本地编码到持续集成，各阶段的最佳实践对比如下：

图 4：现代前端 JavaScript API 兼容性治理全流程矩阵

综上所述，Can I Use 不仅是一个用于随手查询的工具网站，它更是整个现代前端兼容性治理体系的数据基座。在日常开发中，熟练掌握其查询技巧，配合 Browserslist、ESLint 和 Polyfill 工具链，能让开发者既享受现代 JavaScript 带来的开发效率，又确保业务在多样化的用户设备上稳定可靠运行。