JavaScript兼容性应基于特性检测而非浏览器检测，优先使用现代标准并按需加载Polyfill，通过polyfill.io或core-js补全缺失API，Babel需配置targets和useBuiltIns，DOM操作需封装适配低版本行为。
JavaScript的浏览器兼容性处理核心是检测能力而非检测浏览器，优先使用现代标准写法，对旧环境做渐进增强或降级处理。
用特性检测代替浏览器检测
不要通过navigator.userAgent判断IE、Chrome等，容易出错且维护成本高。改用原生API是否存在来判断：
-
if ('fetch' in window)—— 判断是否支持 fetch -
if (Element.prototype.closest)—— 判断是否支持 closest 方法 -
if (typeof Promise !== 'undefined')—— 判断 Promise 是否可用
这样更可靠，比如某些国产双内核浏览器可能伪装成Chrome但不支持某API，特性检测能真实反映运行环境能力。
按需加载 Polyfill
只在缺失功能的环境中补全，避免污染现代浏览器。推荐方式：
立即学习“Java免费学习笔记（深入）”；
- 用 polyfill.io 动态注入：在 HTML 中引入
<script src="https://www.php.cn/link/4a481c12f9ce3441585bc800ae000fe8polyfill.min.js?features=Promise,fetch,Element.prototype.closest"></script>，它会自动识别用户浏览器并返回所需 polyfill - 项目中手动引入：如需要兼容 IE11，可安装
core-js并按需导入：import 'core-js/stable/promise'; import 'core-js/stable/fetch';
谨慎使用转译与构建工具
Babel 默认不处理 Web API（如 fetch、Array.from），只转换语法（如箭头函数、let/const）。需注意：
- 配置
@babel/preset-env的targets（如{ ie: '11' }）并开启useBuiltIns: 'usage'，才能自动注入 core-js 的 API polyfill - 确保构建产物中 polyfill 代码实际生效，可通过调试控制台检查全局对象（如
window.fetch）是否存在
DOM 操作兼容要点
老浏览器 DOM 行为差异多，常见问题及处理：
-
事件绑定：IE8- 用
attachEvent，现代用addEventListener；建议封装统一方法或直接用on类库，或避开低版本 -
类名操作：IE9- 不支持
classList，可用className.split(' ').includes()+ 字符串拼接模拟，或用dom-helpers/classname等轻量工具 -
样式设置：IE 中
element.style.transform需加前缀-ms-transform，建议用 CSS-in-JS 库或纯 CSS 处理动画/变换
基本上就这些。关键是保持代码简洁，优先面向标准，让兼容逻辑藏在工具链或小段适配代码里，而不是分散在业务逻辑中。
