HTML5 API 测验¶
本页检查语义元素、浏览器存储、Worker、实时通信、离线缓存和平台安全边界。 先独立作答,再查看页面后半部分的答案。
题目¶
article、section和div的主要区别是什么?- 为什么不能因为希望文字更小就从
h2跳到h5? localStorage和sessionStorage的生命周期有何不同?- 为什么不应在 Web Storage 中保存长期访问令牌?
- Web SQL 当前是什么状态,新项目应使用什么替代?
- IndexedDB 的结构迁移应在哪个事件中进行?
- 为什么不能只根据单个 IndexedDB 请求的
success判断事务已经提交? - Application Cache 当前是什么状态,应使用什么替代?
- Web Worker 能否直接修改页面 DOM?应如何返回计算结果?
- 大型
ArrayBuffer如何减少主线程与 Worker 间的复制成本? - SSE 连接断开后,浏览器原生
EventSource通常会怎样处理? - 为什么不建议把 SSE 或 WebSocket 的长期令牌放入 URL?
- WebSocket 服务端为什么需要校验
Origin? - WebSocket 重连为什么应使用指数退避和随机抖动?
fetch()收到 HTTP 404 时,Promise 一定会拒绝吗?- 取消 Fetch 请求是否保证服务器撤销已经开始的业务操作?
- CORS 能否代替身份认证和服务端授权?
- Cache API 与 IndexedDB 各自适合保存什么?
- Service Worker 为什么不能简单缓存所有 GET 响应?
- 从浏览器存储读取的数据是否可以直接写入
innerHTML?
场景题¶
- 新闻页面只需要服务器向浏览器推送文字更新,应优先考虑 SSE 还是 WebSocket?为什么?
- 协作编辑器需要客户端和服务器高频双向发送操作,应选择哪种连接?
- 用户退出账户时,实时连接、本地数据库和私有缓存应如何处理?
- 一个页面通过客户端隐藏按钮来限制管理员功能,这个方案缺少什么关键控制?
- 旧站点仍有
.appcache文件。仅删除 HTML 的manifest属性是否足够?
答案¶
article是可独立分发的完整内容,section是有主题且通常有标题的章节,div是没有额外语义的通用容器。- 标题级别表达文档结构,不负责视觉字号;样式应由 CSS 控制。
localStorage通常跨会话保留,sessionStorage通常随当前标签页会话结束而清除。- 任意同源脚本和 XSS 代码都可能读取 Web Storage,长期令牌会扩大账户接管风险。
- Web SQL 非标准且已废弃;新项目应使用 IndexedDB。
- 在打开数据库请求的
upgradeneeded事件及其版本升级事务中进行。 - 单个请求成功后事务仍可能因后续请求或约束错误中止,应以事务完成事件为准。
- Application Cache 已从平台移除;使用 Service Worker 配合 Cache API。
- 不能。Worker 使用
postMessage()把结果发送给主线程,由主线程更新 DOM。 - 把缓冲区放入 transferable 列表转移所有权;转移后发送方不能继续使用原缓冲区。
- 它通常会自动重连,并可携带最后事件 ID;应用仍需设计状态提示和服务端重放策略。
- URL 可能进入日志、历史记录、监控和 Referer,从而泄露长期凭据。
- 防止恶意网站利用用户 Cookie 建立跨站 WebSocket;同时仍需认证和消息级授权。
- 避免服务恢复时大量客户端同时重连形成流量风暴,并限制资源消耗。
- 不一定。404 通常仍解析为已完成的
Response,代码需要检查response.ok或状态码。 - 不保证。请求取消可能发生在服务端已经执行操作之后,关键操作需幂等和状态确认。
- 不能。CORS 只控制浏览器脚本读取跨源响应,服务器仍须认证和授权每个操作。
- Cache API 保存请求/响应用于网络缓存;IndexedDB 保存结构化记录、索引和业务离线数据。
- 响应可能含隐私数据、禁止存储、快速过期或来自不可信来源,还涉及配额和账户切换。
- 不可以。存储内容仍是不可信数据,纯文本应使用
textContent,富文本需严格清理。 - 优先 SSE,因为需求是单向文本推送,并能利用 HTTP、自动重连和事件 ID。
- 选择 WebSocket,因为它提供持久的全双工通信。
- 关闭连接和定时器,清理与账户关联且不应保留的数据库记录与缓存,并重置内存状态。
- 缺少服务端授权。隐藏按钮只是界面控制,用户仍可直接构造请求。
- 不足。还需迁移离线策略、处理旧缓存与更新、验证回退行为,并测试现有用户升级路径。
复习时可从 HTML5 语义元素、IndexedDB、 Service Worker 与 Cache API 和 浏览器平台安全边界 开始。