必须在<head>中用同步脚本早检测关键API（如WebSocket、canvas、localStorage），失败即插入可访问的提示浮层，只对fetch、flex等高价值功能做精准降级，放弃IE8以下canvas等不可行方案。
旧浏览器打不开 HTML5 页面，不是加个 html5shiv 或改个 <meta> 就能解决的；真正有效的做法是：早检测、早拦截、只降级关键路径、明确提示用户动作。
如何在页面加载初期就判断环境是否支持
不能等 JS 执行到一半才报 Object doesn't support property or method 'fetch'——那时用户已看到白屏或错乱布局。必须在 <head> 里用同步脚本做最小能力检测：
- 检查
'WebSocket' in window、!!document.createElement('canvas').getContext、'localStorage' in window等关键 API 是否存在 - 避免用
navigator.userAgent匹配 IE —— 新版 Edge 仍带Trident字样，会误判 - 检测逻辑要放在所有 CSS 和业务 JS 之前，否则样式可能已按“不支持”状态渲染完毕
- 若检测失败，立即插入一个
<div id="compat-notice">浮层，而不是跳转或清空 body
哪些功能值得降级，哪些该直接放弃
不是所有 HTML5 特性都适合 fallback，投入产出比要算清楚：
-
canvas：IE8 及以下连getContext都没有，excanvas.js只能跑基础绘图，不支持阴影/渐变/图像缩放 —— 建议服务端识别 UA 后直接返回 SVG 示意图或静态图 -
localStorage：IE7 及以下完全不可用，userData行为已废弃且仅限 IE5.5–7；更现实的做法是try { localStorage.setItem(...) } catch(e) { /* 退到内存缓存 */ } -
fetch：IE 全系缺席，Babel 转译无效；用whatwg-fetch必须同步加载、置于所有业务代码前；如果项目已用axios，其实无需额外引入 —— 它默认 fallback 到XMLHttpRequest -
flex：IE10–11 支持旧版语法（display: -ms-flexbox），但flex: 1、gap、place-items等无等效替代 —— 复杂布局建议直接回退到float或inline-block
提示层该怎么写才真正有用
用户看到 SCRIPT5009: 'Promise' is undefined 不会修浏览器，只会关掉页面。提示层必须做到三点：可读、可操作、可访问：
立即学习“前端免费学习笔记（深入）”；
- 文字直说原因，例如“您的浏览器版本过低，无法运行本页面”，不写“不支持现代 Web 标准”这类术语
- 提供两个具体动作：“点击升级浏览器” + “查看推荐浏览器列表”，链接指向
https://browsehappy.com或国内可信渠道（如腾讯电脑管家浏览器推荐页） - 浮层用
position: fixed覆盖游戏/主区域，背景半透（rgba(0,0,0,0.7)），文字反白，按钮最小尺寸 44×44px（适配触屏） - 支持键盘聚焦：
tab可到达按钮，Enter触发跳转；关闭按钮要有aria-label="关闭兼容提示"
最容易被忽略的是检测时机和提示层的无障碍细节——很多项目把检测逻辑塞进 window.onload，结果用户已经看到几秒白屏才弹出提示；而浮层没加 role="alert" 或焦点管理，视障用户根本不知道发生了什么。
