按需加载是唯一可行路径：默认语言（如en）预编译进主包，其余语言通过import()动态加载，失败时降级至en；IE11需手动设置语义标签display:block并避免依赖flexbox核心布局。
怎么让语言包不拖慢首屏加载
按需加载是唯一可行路径，硬塞全部语言包进主包等于主动放弃性能。关键不是“能不能切”，而是“切到哪一级”。
- 默认语言（如
en）必须预编译进主包，避免白屏等待；其他语言全部走import()动态加载 - Webpack/Vite 会自动把
import('./locales/zh.json')拆成独立 chunk，但需确认构建配置中json文件被识别为模块（Vite 默认支持，Webpack 需Asset Modules或json-loader） - 别在
useEffect或mounted里无条件加载当前 locale —— 用户没切换时，zh.json就不该发请求 - 错误处理必须包含降级：加载失败时回退到
en，而不是卡住或显示undefined
IE11 还要支持？HTML5 语义标签怎么不崩
IE11 是兼容性分水岭：它认识 <header> 但不给默认样式，也不触发 CSS 渲染逻辑，光靠 html5shiv 不够。
-
html5shiv只解决“元素能被创建”，还得手动加display: block—— 否则<section>在 IE11 里是内联行为，会挤成一行 - 条件注释在 IE10+ 已失效，
<!--[if lt IE 9]>对 IE11 无效；真要兼容 IE11，得用特性检测或 UA 字符串判断（虽不推荐，但现实有时没得选） -
normalize.css对 IE11 支持尚可，但必须放在所有自定义样式之前；若用了postcss-preset-env，记得关掉stage: 4以上特性，否则生成的 CSS 可能含 IE11 不认的语法 - 别依赖
flexbox布局做核心结构 —— IE11 的 Flex 实现有多个已知 bug（如flex-wrap失效、min-width忽略），用display: table或 float 保底更稳
Modernizr 检测后，CSS 类名怎么不生效
Modernizr 自动给 <html> 加类（如 flexbox / no-flexbox），但很多人写选择器时漏了层级或拼写。
- CSS 规则必须写成
.flexbox .container { ... }，不能只写.container.flexbox { ... }—— Modernizr 加的类在根元素上，不是组件自身 - 检查浏览器开发者工具的
<html>标签，确认类名确实存在；如果没出现，说明 Modernizr 脚本没执行成功（常见于脚本加载顺序错、被 defer 阻塞） -
no-*类名是布尔值反向表达，比如no-webp表示“不支持 webp”，此时应写.no-webp .image { background-image: url(...png); } - 不要和 CSS-in-JS 库混用 —— 如 Emotion 的
css函数无法读取<html>上的类，得改用全局 class 或 JS 判断
表单 placeholder 在 IE9 怎么 fallback
IE9 支持 placeholder 属性但不渲染，且原生事件不触发，纯 CSS 无法修复。
立即学习“前端免费学习笔记（深入）”；
- 不能只靠
::-ms-input-placeholder—— 这只是伪元素样式，不解决“输入后 placeholder 不消失”问题 - 需监听
focus/blur手动控制value和className，例如：input.addEventListener('focus', () => { if (input.value === input.getAttribute('placeholder')) input.value = ''; }) - 若用 jQuery，
jquery.placeholder.js仍可用，但注意它默认绑定document.ready，动态插入的表单需手动调用$('input').placeholder() - 服务端永远要做二次校验 —— placeholder 是纯前端提示，IE9 下用户删掉 placeholder 文字后提交空值，后端照样得拦
<nav> 在 IE11 里仍是 inline，样式来不及生效。这种坑没法靠单一方案填平，得在初始化阶段就兜底重置语义标签的 display。 
