JavaScript浏览器兼容性如何处理？

JavaScript浏览器兼容性问题主要源于旧版浏览器（如IE8及更早）对ES5/ES6+语法和API支持不足及实现差异，解决需结合降级写法、特性检测、按需polyfill和构建工具；Babel可转译新语法为ES5，配合@babel/preset-env和useBuiltIns: "usage"按目标浏览器自动注入必要垫片；应通过API存在性检测（如'fetch' in window）替代UA判断；polyfill宜按需加载，优先使用polyfill.io或core-js/stable局部导入；对addEventListener、classList、console.log、CSS自定义属性等需针对性处理。

JavaScript浏览器兼容性问题主要出现在旧版浏览器（如IE8及更早版本）对ES5、ES6+语法和API的支持不足，以及不同浏览器对某些特性的实现差异。解决思路是：降级写法 + 特性检测 + 按需垫片（polyfill） + 构建工具辅助。

用Babel转译新语法

ES6+的箭头函数、解构、async/await等在老浏览器中直接报错。Babel能将现代JS语法转换为ES5兼容代码。

• 配置.babelrc或babel.config.js，指定目标浏览器（如"ie": "11"）
• 搭配@babel/preset-env自动按需引入polyfill（注意不建议全局注入core-js，优先用useBuiltIns: "usage"）
• Vue CLI、Create React App等脚手架默认已集成，只需调整browserslist配置

特性检测代替浏览器检测

不要用navigator.userAgent判断IE，而应检查API是否存在。例如：

• 用'fetch' in window判断是否支持Fetch API
• 用typeof Promise !== 'undefined'检测Promise
• 检测CSS属性时用'transform' in document.body.style
• 检测事件支持用'oninput' in document.createElement('input')

按需加载Polyfill

只给真正需要的用户补功能，避免拖慢现代浏览器。

• 使用polyfill.io服务：通过URL参数声明所需特性，它会返回适配当前浏览器的最小polyfill集合
• 本地方案可用core-js/stable + regenerator-runtime/runtime，但仅在入口文件顶部按需导入
• 对Array.from、Object.assign等常用方法，可单独封装轻量兼容函数，比全量polyfill更可控

避开已知兼容陷阱

有些API看似简单，实则兼容性复杂，需特别处理：

• addEventListener在IE8-用attachEvent，且事件名带on前缀、this指向不同
• classList在IE9+支持，IE8需用className字符串操作
• console.log在IE8无控制台时会报错，可用if (window.console) console.log(...)防护
• CSS自定义属性（--var）IE完全不支持，需用postcss-custom-properties编译为静态值