H5新增了哪些API？h5新增的api有哪些

HTML5 作为 Web 开发的重要里程碑，不仅重新定义了语义化标签，更引入了大量强大的原生 API，极大地丰富了浏览器端的功能边界，使得 Web 应用能够接近甚至超越原生应用的能力，这些新增 API 涵盖了多媒体处理、数据存储、地理位置、设备感知、离线应用以及性能监控等多个维度，彻底改变了前端开发的格局。

在多媒体领域,HTML5 引入了 <audio> 和 <video> 标签，配合相关的 JavaScript API，开发者无需依赖 Flash 等第三方插件即可在网页中嵌入音频和视频内容，这不仅简化了开发流程，还提高了页面的加载速度和兼容性，Canvas API 允许通过 JavaScript 绘制 2D 图形，甚至结合 WebGL 实现高性能的 3D 渲染，广泛应用于数据可视化、在线游戏和图像处理等领域。

在数据存储方面,HTML5 提供了比 Cookie 更强大、容量更大的本地存储方案，LocalStorage 用于持久化存储键值对数据，除非用户手动清除，否则数据不会过期；SessionStorage 则用于会话级别的存储，页面关闭后数据即被清除，对于需要结构化存储大量数据的应用，IndexedDB API 提供了一个事务型的数据库系统，支持异步操作，能够存储复杂的对象和二进制数据，为构建复杂的离线 Web 应用奠定了基础。

地理位置 API（Geolocation API）是另一个备受关注的功能，它允许网页获取用户的当前位置信息，如经纬度、海拔和速度等，这一功能在地图服务、本地搜索和基于位置的社会网络应用中发挥着关键作用，设备感知相关的 API 如 DeviceOrientation 和 DeviceMotion，能够读取设备的加速度计和陀螺仪数据，使得网页应用能够响应用户的物理动作，增强交互体验。

在网络通信方面,WebSocket API 实现了浏览器与服务器之间的全双工通信通道，解决了传统 HTTP 请求-响应模式在高实时性场景下的局限性，广泛应用于即时通讯、在线股票行情和多人在线游戏等场景，Web Workers 允许在后台线程运行脚本，而不会阻塞用户界面，从而提升了复杂计算任务的执行效率。

离线应用方面,Application Cache（虽已逐渐被 Service Workers 取代，但在早期 HTML5 中是重要组成部分）和 Service Workers API 使得网页能够在无网络连接的情况下继续运行或提供缓存内容，极大地提升了用户体验和网络鲁棒性，Service Workers 还可以拦截网络请求，实现更精细的缓存策略和推送通知功能。

在性能监控和优化方面,Performance API 提供了详细的页面加载时间和资源计时信息，帮助开发者诊断性能瓶颈，Navigation Timing API 和 Resource Timing API 是其中的重要组成部分，Fetch API 作为 XMLHttpRequest 的现代替代品，基于 Promise，语法更简洁，功能更强大，成为现代前端网络请求的事实标准。

为了更清晰地展示这些 API 的分类与功能，以下表格进行了简要归纳：

这些 API 的引入，不仅提升了 Web 应用的功能丰富度，还推动了 Web 标准向更开放、更强大的方向发展，随着技术的演进，许多 API 仍在不断迭代和优化，为开发者提供了更多创新的可能性。

相关问答 FAQs

Q1: HTML5 的 LocalStorage 和 SessionStorage 有什么区别？

A: LocalStorage 和 SessionStorage 都是 HTML5 提供的客户端存储机制，但它们的生命周期不同，LocalStorage 中的数据是持久化的，除非用户手动清除或代码中显式删除，否则数据会一直保留在浏览器中，即使关闭浏览器或重启计算机也不会丢失，而 SessionStorage 中的数据仅在当前会话期间有效，当页面会话结束（即关闭标签页或窗口）时，数据会被自动清除，LocalStorage 在所有同源标签页之间共享数据，而 SessionStorage 仅在同一个标签页内有效。

Q2: 为什么现代前端开发推荐使用 Fetch API 而不是 XMLHttpRequest？

A: Fetch API 是 XMLHttpRequest 的现代替代品，主要优势在于其基于 Promise 的设计，使得异步代码的编写更加简洁和易读，避免了“回调地狱”的问题，Fetch 的 API 设计更加一致和直观，支持更丰富的配置选项，如请求头、方法、模式等，Fetch 与 Service Workers 等现代 Web 技术集成得更好，便于实现拦截和缓存策略，虽然 Fetch 在某些边缘情况（如默认不发送 Cookie）下需要额外配置，但其整体性能和可维护性优于传统的 XMLHttpRequest。