html5新增api需理解场景与坑：localstorage同源共享（协议不同即隔离），sessionstorage标签页级隔离；fetch默认不拒http错误码、不带cookie；intersectionobserver需调rootmargin防ios闪动；filereader大文件用分块读取。
HTML5 新增的 API 不是拿来背的，面试官真问起来，光列名字没用——得知道哪个 API 在什么场景下用、为什么不用旧方案、踩过哪些坑。
localStorage 和 sessionStorage 的区别不只是“关不关页面”
很多人记成“localStorage 永久保存，sessionStorage 关闭标签页就清空”，这在多数情况下没错，但漏了关键细节：
-
sessionStorage是**标签页级隔离**的：同一个页面开两个标签页，它们的sessionStorage完全不共享，哪怕 URL 一模一样 -
localStorage同源共享，但**不同协议（httpvshttps）算不同源**，数据互不可见 - 两者都只能存字符串，
JSON.stringify()存、JSON.parse()取是标配操作，直接setItem('user', {name: 'a'})会静默转成"[object Object]" - 写入超限（通常 5MB 左右）会抛
QuotaExceededError，不是所有浏览器提示一致，得 try-catch
fetch 替代 XMLHttpRequest 的真实代价
fetch 看似更简洁，但默认行为和 XMLHttpRequest 有本质差异，不处理好反而更容易出错：
-
fetch**只在网络错误时 reject**，HTTP 状态码如 404、500 仍算 resolve，必须手动检查response.ok或response.status - 默认不带 cookie，要发带凭证的请求得显式加
credentials: 'include'，且服务端必须响应Access-Control-Allow-Credentials: true - 没有原生 progress 事件，上传进度需用
XMLHttpRequest或ReadableStream+tee()手动拆流 - 超时不是内置选项，得靠
AbortController配合signal参数实现
IntersectionObserver 处理懒加载时的边界陷阱
用 IntersectionObserver 做图片懒加载很常见，但实际部署常遇到“图片闪一下才加载”或“滚动到底部图片不触发”：
- 别依赖默认
rootMargin，尤其在 iOS Safari 下，建议设为'0px 0px 200px 0px'提前触发，避免用户滚动停住时刚好卡在临界点 -
isIntersecting为false时不一定代表元素已移出视口——可能是 observer 自身被销毁、或元素被display: none，需结合intersectionRatio判断是否真不可见 - 监听多个目标时，不要在
callback里反复调用unobserve()+observe()，容易因 DOM 重排导致重复回调；应先unobserve所有，再批量observe - 服务端渲染（SSR）页面中，首次 hydration 前 DOM 已存在，但 JS 还没执行，此时 observer 尚未启动，需要确保初始化时机在 DOM ready 之后
File API 读取大文件时的内存与体验问题
FileReader 的 readAsDataURL 看似方便，但对 >10MB 的文件极易引发卡顿甚至崩溃：
-
readAsDataURL会把整个文件转成 base64 字符串，体积膨胀约 33%，内存占用翻倍，移动端尤其敏感 - 优先用
readAsArrayBuffer+Blob.slice()分块读取，配合Promise.all控制并发数（比如每次最多 3 块），避免阻塞主线程 - 用户选择文件后，别立刻读取——先用
file.type和file.size做校验，过滤掉不支持的类型或超限文件，减少无效解析 - 读取完成后的 ArrayBuffer 转换为图片预览，要用
URL.createObjectURL(new Blob([buffer], {type: file.type}))，而不是拼 data URL，后者无法被浏览器缓存且 GC 更慢
这些 API 的坑不在文档里，而在你第一次在 Safari 上发现 localStorage 满了不报错、在 Chrome 里 fetch 401 却没进 catch、或者用户滑到页面底部图片集体空白的时候。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
