问题本质是HTML5页面混用ES6+语法导致旧浏览器报错白屏，因旧JS引擎不支持let、const等语法；需Babel转译+core-js补丁配合，并兼顾HTML5标签与CSS兼容性。
HTML5 本身是标记语言规范，不直接执行 JavaScript；真正影响兼容性的不是 HTML5，而是你在 HTML 中引入的 ES6+ 代码——比如用 let、const、箭头函数、Promise、解构赋值等写在 里的逻辑。
所以问题本质是：HTML5 页面里混用了 ES6 语法，导致旧浏览器（如 IE11、老安卓 WebView、部分 iOS 9/10 Safari）直接报错或白屏。这不是 HTML5 的锅，是 JS 运行时环境不支持。
为什么 ES6 代码在旧浏览器里会挂？
因为旧浏览器的 JavaScript 引擎（如 IE11 的 Chakra、Android 4.4 的 WebKit）压根不认识 const、=>、class 这些语法，遇到就抛 SyntaxError: Unexpected token，脚本中断，后续 DOM 操作、事件绑定全失效。
典型现象包括：
立即学习“前端免费学习笔记（深入）”；
- 页面空白，控制台报红：「
Uncaught SyntaxError: Unexpected identifier」 - 按钮点击无响应（事件监听器根本没注册成功）
- iOS 9 Safari 加载视频页后
video.play()报错，实际是前面某处let导致整段 script 崩溃
Babel + core-js 是最稳的转译+补丁组合
不能只靠 Babel 转语法，也不能只靠 core-js 补 API —— 两者必须配合。Babel 处理 async、?.、模块导入这些“写法”，core-js 补 Array.from、Promise、Object.assign 这些“运行时能力”。
推荐配置（babel.config.js）：
module.exports = {
presets: [
['@babel/preset-env', {
targets: { ie: '11', android: '4.4', ios: '9' },
useBuiltIns: 'usage',
corejs: { version: 3, proposals: true }
}]
]
};关键点：
-
useBuiltIns: 'usage'→ 只注入你代码里真用到的 polyfill，避免全量加载core-js/stable带来 100KB+ 开销 -
targets必须明确写死，不能留空或只写last 2 versions，否则 Babel 默认忽略 IE11 - 如果用了
import 'core-js/stable'全局引入，记得删掉 —— 它和useBuiltIns: 'usage'冲突，会导致重复注入
别漏掉 HTML5 标签和 CSS 的兼容性连带问题
ES6 兼容只是冰山一角。当你的项目同时用 HTML5 语义标签（）+ Flex/Grid + ES6，旧浏览器可能三重崩溃：
- IE8 不识别
→ 样式不生效（需html5shiv） - IE10 不支持
display: flex新语法 → 布局错乱（需 Autoprefixer 输出display: -ms-flexbox） - IE11 支持
let但不支持Promise→ JS 半截崩（需core-js补）
最小安全兜底方案（针对 IE9–11）：
真正难的不是加几个 polyfill，而是判断哪些用户还卡在旧环境里。如果统计显示 IE11 占比已低于 0.3%，那就不该为它牺牲现代语法体验；但如果项目面向政企内网（大量 Windows 7 + IE11），就得接受构建体积增加 15–20KB、首屏 JS 执行慢 30ms 的代价。兼容性从来不是技术问题，是取舍问题。
