video和audio元素必须用多种格式兜底，否则在Safari、Firefox或旧版Edge上大概率静音或黑屏；需按兼容性优先级排列顺序，视频推荐MP4(H.264+AAC)放首位、WebM次之，音频推荐MP3与AAC双源，且每个必须带精确type属性并匹配服务器MIME类型。
video 和 audio 元素必须用多种格式兜底，否则在 Safari、Firefox 或旧版 Edge 上大概率静音或黑屏
HTML 原生多媒体不是“写上就跑”。浏览器对编解码器的支持差异极大：mp4（H.264/AAC）在 Safari 和 IE/Edge 里基本可用，但 Firefox 默认不支持；webm（VP8/VP9 + Vorbis/Opus）被 Chrome、Firefox、Edge 支持，Safari 直到 15.4 才开始有限支持；ogg 音频在 Firefox 和 Chrome 可用，Safari 完全不认。
所以单写一个
- 必须按兼容性优先级排列
mp4在前，内部系统 Firefox 主导就webm优先 - 音视频都得提供至少两种格式，比如视频用
mp4+webm，音频用mp3+ogg - 不要依赖
canplaythrough事件做加载完成判断——它在部分 Android WebView 下永远不触发，改用loadeddata+duration是否有效来确认
localStorage 存书签和阅读进度很香，但别存大体积 HTML 片段或 base64 图片
localStorage 的实际容量因浏览器而异：Chrome 约 10MB，Safari 移动端仅 5MB 且容易被系统清理，iOS 上还可能因页面后台挂起导致写入失败。
如果把整页渲染后的 DOM 字符串或一张 2MB 的 SVG 插图塞进 localStorage.setItem('page_12', htmlStr)，轻则卡顿，重则直接抛 QuotaExceededError。
- 只存结构化小数据：当前页码、高亮坐标（
{page: 7, top: 124, height: 22}）、笔记摘要（截断到 200 字以内） - 图片资源走
indexedDB或服务端 CDN，前端只存 URL 和版本哈希 - 每次写入前用
JSON.stringify(obj).length预估大小，超 500KB 就拒绝存
iframe 嵌套交互式 3D 模型或 SVG 动画时，跨域策略和事件通信常被忽略
很多电子书会嵌第三方 WebGL 查看器（如 Sketchfab）或自研 Canvas 动画模块，习惯用 iframe 隔离。但默认情况下：
-
iframe内脚本无法调用父页的history.pushState()，翻页状态不同步 - 父页监听不到
iframe里的click或message，除非显式加allow-scripts和allow-same-origin（后者仅限同域） - 若模型托管在另一域名，必须双方都配好
postMessage协议，且父页要用event.origin校验来源，否则 XSS 风险极高 - iOS Safari 对
iframe内requestFullscreen()有额外限制，需手动加webkitallowfullscreen属性
离线缓存不能只靠 manifest，现代方案得组合 Service Worker + Cache API + navigationPreload
applicationCache 已废弃，Chrome 94+、Firefox 85+ 完全移除支持，但仍有老项目残留 cache.manifest 文件，上线即报错。真实离线场景下：
- 必须用
Service Worker控制资源缓存，且注册逻辑要放在if ('serviceWorker' in navigator)判断后 - 静态资源（HTML/CSS/JS/字体）走
Cache API的cache.addAll()，动态内容（章节 JSON、用户笔记）走indexedDB - 开启
navigationPreload能缓解首屏白屏——它让 SW 在缓存未命中时并发请求网络，避免阻塞 - 注意：SW 更新机制是“新脚本安装后，下次页面打开才激活”，所以版本号变更必须体现在 SW 脚本 URL 中（如
sw.js?v=2.3.1），否则用户永远用旧缓存
工程维护最麻烦的不是功能实现，而是媒体资源路径漂移和版本冲突。一个 
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
