应优先用 in、typeof 或 CSS.supports 检测 API 存在性与 CSS 特性,避免解析 userAgent;对可能抛错的 API 调用需 try...catch;polyfill 应按需引入,关键功能降级处理,行为不一致的 API 需实测验证。

用 if 判断 API 是否存在,而不是检测浏览器名
直接检查全局对象或构造函数是否存在,比解析 navigator.userAgent 可靠得多。UserAgent 字符串易被伪造、版本碎片化严重,且现代浏览器(如 Edge 18+、Chrome 100+)已逐步弃用特定标识。
常见误操作是写 if (navigator.userAgent.includes('Chrome')) —— 这无法区分 Chrome、Edge(Chromium 内核)、Opera,也挡不住用户手动修改 UA 的情况。
-
'fetch' in window比navigator.userAgent.indexOf('Firefox') > -1更准确判断是否支持fetch -
typeof IntersectionObserver === 'function'是检测该 API 的标准方式 - 对方法需进一步检查:
Element.prototype.hasOwnProperty('closest') && typeof Element.prototype.closest === 'function'
使用 try...catch 处理可能抛错的特性调用
某些 API 存在但调用时会因参数或环境限制报错(如 localStorage 在无痕模式下可能抛出 SecurityError),仅检查存在性不够。
典型场景:尝试写入 localStorage 并捕获异常,再 fallback 到内存缓存。
立即学习“Java免费学习笔记(深入)”;
网趣购物系统静态版支持网站一键静态生成,采用动态进度条模式生成静态,生成过程更加清晰明确,商品管理上增加淘宝数据包导入功能,与淘宝数据同步更新!采用领先的AJAX+XML相融技术,速度更快更高效!系统进行了大量的实用性更新,如优化核心算法、增加商品图片批量上传、谷歌地图浏览插入等,静态版独特的生成算法技术使静态生成过程可随意掌控,从而可以大大减轻服务器的负担,结合多种强大的SEO优化方式于一体,使
function safeSetItem(key, value) {
try {
localStorage.setItem(key, value);
} catch (e) {
if (e.name === 'QuotaExceededError' || e.name === 'SecurityError') {
// 使用 Map 模拟存储
if (!window.__memStorage) window.__memStorage = new Map();
window.__memStorage.set(key, value);
}
}
}
用 @supports 检测 CSS 特性,配合 JS 动态加载 polyfill
CSS 特性(如 gap、inset、color-mix())无法用 JS 直接判断是否生效,@supports 是唯一可靠手段。JS 可通过 CSS.supports() 调用它。
-
CSS.supports('display', 'grid')返回布尔值 -
CSS.supports('(transform-style: preserve-3d)')支持带括号的完整声明 - 结合动态脚本加载:若
!CSS.supports('font-synthesis: none'),则import('./font-synthesis-polyfill.js')
避免过度 polyfill,优先降级而非模拟
很多 polyfill(如 core-js 全量引入)会污染全局环境、增加包体积、甚至引发冲突。现代项目应按需处理:
- 只 polyfill 项目真实用到的 API,例如只补
Array.prototype.find,不引入整个 ES6 补丁集 - 用
import条件加载:if (!('AbortController' in window)) import('abortcontroller-polyfill'); - 对不关键的功能(如平滑滚动),直接用
scrollIntoView({ behavior: 'smooth' }),不兼容时自动退化为默认行为,无需 JS 干预
真正难处理的是那些“存在但行为不一致”的 API,比如 Intl.DateTimeFormat 在 Safari 14 之前不支持 timeZoneName: 'shortOffset' —— 这类必须查文档 + 实际运行测试,光靠 in 或 typeof 判定不了。









