-
discarded状态无法被监听，因其发生时JS引擎已终止；还原依赖freeze/pagehide保存状态+pageshow时结合document.wasDiscarded、persisted和navigationtype综合判断冷启动并恢复。
-
transition-delay不生效通常因CSS覆盖、状态未变化或写法错误；须在初始状态定义完整transition，避免仅在hover中设置delay，且确保属性可过渡、值发生改变。
-
要实现导航栏初始透明、滚动后变色，应使用rgba()控制background-color透明度而非opacity；通过监听scroll事件并用requestAnimationFrame节流切换CSS类（如nav-transparent/nav-scrolled），配合transition实现平滑过渡；注意文字对比度、移动端fixed适配及首屏视觉锚点。
-
本文详解在Flexbox布局中，如何确保嵌套的.parent和.item元素正确继承并占满.root的最小高度（如min-height:350px），重点解决因display层级缺失导致flex-grow失效的问题。
-
直接写CSS易致样式不一致，因命名、重置、单位等无统一规范；CSS框架通过集中定义变量与约束消费实现一致性，Tailwind适合精细控制，Bootstrap适合快速原型，自建原子类适配现有SCSS架构；老页面应双轨并行、渐进替换，并注意作用域、构建配置及团队协作规范。
-
JavaScript展开运算符（...）用于将可迭代对象或对象展开为独立元素或属性，支持数组合并与浅拷贝、函数传参、对象合并与解构、类数组转换等，但仅浅层展开且不支持null/undefined。
-
直接写死颜色和尺寸导致Loading动画难维护，因主题切换或尺寸调整需多处同步修改且无法响应深色模式；应使用CSS变量配合外部控制动画属性，避免在@keyframes中直接引用变量或错误使用calc()。
-
<picture>必须包含末尾的<img>且带src属性，否则图片不显示；浏览器按顺序匹配<source>的type和media，最后回退到<img>的src作为fallback。
-
del标签语义上表示内容已被删除，浏览器默认渲染为删除线；它强调“曾存在但已移除”，需配合datetime属性增强可追溯性，不可与仅表过时的s标签混用。
-
前端缓存策略需平衡性能与一致性，核心包括：1.浏览器HTTP缓存（Cache-Control、ETag）和ServiceWorker实现网络资源缓存；2.内存缓存如函数记忆化与单例对象减少重复计算；3.本地存储（localStorage、IndexedDB）持久化数据并管理过期；4.结合时间戳、版本号或WebSocket实现实时更新机制，确保数据有效性。
-
<em>表示强调语气，用于传达重读、反讽或情绪张力；<i>表示非常规语义的特殊状态，如外文词、科技术语、船名等，不暗示强调。
-
<time>标签必须设置符合ISO8601标准的datetime属性（如2026-04-17或2026-04-17T04:38:00+08:00），否则退化为普通容器，导致结构化数据失效、屏幕阅读器无法识别、插件无法提取时间。
-
EdgeLegacy（≤79）完全不支持datalist，因其EdgeHTML引擎从未实现该HTML5规范，输入框无下拉建议、DOM忽略datalist、JS无法获取list属性，须用JS模拟下拉组件。
-
静态分页是用CSS+JS切割DOM实现的前端模拟分页，不依赖服务端或数据库；通过querySelectorAll获取条目、按pageSize切分二维数组chunks，再动态替换容器内容并绑定按钮控制翻页。
-
Less中calc()无法实现响应式图片裁剪，因编译时静态求值且不支持运行时尺寸计算；应使用变量+媒体查询预设padding-top或aspect-ratio，并避免用小数形式aspect-ratio。
