资讯文章资讯 · NEWS

还要不要兼容老浏览器：目录站的 polyfill 和构建目标该怎么定

2026-10-24 约 2,138 字预计阅读 5 分钟 yiyunkj

兼容老浏览器这件事，很多站的做法是「能兼容就兼容」，结果就是构建产物里常年躺着一堆 polyfill，所有用户都得为那几个百分点的老版本买单。

目录站尤其不该这么干。它的页面形态简单，用户来去都快，为了视觉效果牺牲加载速度是明显的亏本买卖。

目录站浏览器兼容范围与 polyfill 体积成本权衡示意

图片来源：网络，版权归原作者所有，侵权请联系删除

先用真实数据划一条线

定兼容范围的第一步不是查 Can I use，是看自己的统计。把过去三个月访问里浏览器及版本的分布拉出来，按占比从高到低排，然后回答一个问题：累计覆盖到 99% 需要兼容到哪个版本？

绝大多数中文站的情况是：Chrome 和 Edge 的几个新版本占掉大头，加上 Safari 的几个版本，再加一批微信内置浏览器和各种 App 的 WebView。真正古老的 IE 通常已经可以忽略。

有了这个分布，把兼容目标写成配置而不是口头约定：

"browserslist": [
  "> 0.5% in CN",
  "last 2 versions",
  "not dead"
]

这段配置会被构建工具和 CSS 前缀工具共同读取，一次改动同时影响 JS 转译和 CSS 前缀，比在两个地方各写一遍靠谱。

还有个近年出现的参考标准叫 Baseline，它把 Web 特性标记为「新近可用」和「广泛支持」两档，广泛支持大致等于所有主流浏览器支持满 30 个月。用它来决定某个新特性能不能直接用，比逐个查兼容性表省事。

同样是补特性，加的地方不同，代价差很多：

方式	谁承担成本	适用
语法降级（转译）	所有人，包变大	语法层面，如可选链
按需注入 polyfill	只有老浏览器	API 层面，如 IntersectionObserver
特性检测兜底	几乎为零	渐进增强的功能

第一层交给构建工具自动处理，但要注意转译范围。明明目标里已经没有 IE 了，还开着全量 ES5 转译，出来的代码会比手写长出一截，体积和解析时间都涨。

第二层才是真正的 polyfill。现代构建流程可以按 browserslist 目标自动算出需要哪些补丁，只给需要的人下发。老版本浏览器加载补丁包，新浏览器一个字节都不多下。

第三层最省，也更符合目录站的形态。比如「点击复制」这个交互，老浏览器不支持 Clipboard API，那就检测一下，不支持就不显示这个按钮，用户手动复制也不会怎样。这种「没有也能用」的功能，都不值得为它加补丁。

如果站点里还引用着第三方 polyfill 服务（最常见的就是 polyfill.io 那个域名），现在就去检查并移除。

2024 年 6 月，这个服务在被收购之后被指出会向部分页面的脚本里注入跳转代码，Cloudflare 和 Fastly 先后发出警告并提供替代方案。这不是兼容问题，是供应链安全问题：你在自己的页面里放了一个别人可以随时改内容的脚本。

移除的方式很直接——改成构建时打进自己的包里，或者干脆去掉。顺手把页面上所有第三方域名的脚本列一遍，问一句「这个域换了主人我会有风险吗」，答案不确定的都换成本地托管。

兼容的目标不是「效果一模一样」，是「核心功能不失效」。对目录站来说核心功能就三件：

这三件事里，前两件其实只要 HTML 结构正确就能做到——它们原本就不依赖 JS。真正需要 JS 的是「能搜」和下拉联想那一类增强功能，而这类功能即便失效，用户还能靠分类一层层翻。

所以目录站的兼容策略可以定得很清楚：HTML 保证结构与链接完整，CSS 保证布局不塌，JS 只做增强。白屏是不允许的，缺个动画无所谓。

很多人只盯着 JS，其实 CSS 才是导致「页面看起来坏了」的主因。几个高频坑：

判断某个特性能不能放心用，标准做法是 @supports 包一层：

.list { display: block; }
@supports (display: grid) {
  .list { display: grid; grid-template-columns: repeat(4, 1fr); }
}

先写一个所有浏览器都能接受的兜底，再在支持的环境里升级。顺序反了就变成「不支持的浏览器看到坏掉的布局」。

真要验证老版本，不必囤机器。三条够用的路：云端真机平台按小时租、DevTools 里调低渲染引擎版本做粗测、以及最实在的一条——找几个用旧手机和旧系统的同事实际打开看一眼。

最后给个执行顺序：先统计分布定出兼容范围，写进 browserslist；再清理第三方脚本；然后按「HTML 结构、CSS 布局、JS 增强」三层各自设底线；最后把老浏览器占比低于某个阈值的（比如 0.5%）单独标记，不专门为它写补丁，但要保证它至少能白屏以外的样子。

兼容不是越多越好，是刚好覆盖你的用户。多出来的每一 KB，都是所有用户在替少数人付钱。