HTML5 提供五种实时数据更新机制：一、WebSocket 实现双向通信；二、SSE 支持服务器单向推送；三、定时轮询兼容老旧环境；四、Fetch+AbortController 提升请求可控性；五、MutationObserver 监听 DOM 变更驱动更新。
如果网页需要在不刷新页面的情况下动态获取最新数据，HTML5 提供了多种机制来实现数据的实时更新。以下是几种常用的技术方案：
一、使用 WebSocket 建立双向通信
WebSocket 协议允许客户端与服务器之间建立持久化的全双工连接，服务器可主动向客户端推送数据，避免轮询开销。
1、在 HTML 页面中创建 WebSocket 实例，指定服务端 WebSocket 地址，例如 new WebSocket(“wss://example.com/ws”)。
2、监听 onopen 事件，在连接成功后发送初始化请求或订阅消息。
立即学习 “ 前端免费学习笔记（深入）”；
3、绑定 onmessage 事件 处理器，接收服务器推送的 JSON 格式数据，并通过 DOM 操作更新页面元素内容。
4、监听 onerror 和 onclose 事件，处理连接异常与重连逻辑。
二、利用 Server-Sent Events（SSE）实现单向流式推送
SSE 是一种基于 HTTP 的服务器向 浏览器 单向推送文本数据的技术，适用于不需要客户端频繁回传数据的场景，如实时通知、日志流、股票行情等。
1、服务端设置响应头为 Content-Type: text/event-stream 并保持连接长期打开。
2、在 前端JavaScript 中创建 EventSource 对象，指向支持 SSE 的接口地址，例如 new EventSource(“/events”)。
3、监听 message 事件，解析 event: message 类型的数据，提取 data 字段并更新对应 UI 区域。
4、可选监听自定义事件类型（如 event: stock-update），提升消息分类处理能力。
三、采用定时轮询（Polling）配合 Ajax 请求
在不支持 WebSocket 或 SSE 的老旧环境或受限网络中，可通过周期性发起 HTTP 请求拉取最新数据，是最基础且兼容性最强的方式。
1、使用 setInterval 设置固定间隔（如 3000 毫秒），触发一次 fetch() 或 XMLHttpRequest 请求。
2、请求 URL 应包含防缓存参数，例如添加时间戳：/api/data?_t=1712345678901。
3、成功响应后解析 JSON 数据，比对本地缓存版本号或时间戳，仅当数据有变化时执行 DOM 更新操作。
4、在页面卸载前调用 clearInterval 清除轮询定时器，防止内存泄漏。
四、结合 Fetch API 与 AbortController 实现可控请求
现代浏览器中，可利用 AbortController 控制 fetch 请求生命周期，配合轮询或条件触发策略，提升实时更新过程中的响应性与资源利用率。
1、声明 const controller = new AbortController() 实例，并将 signal 属性传入 fetch 选项。
2、在收到新数据或页面切换时，调用 controller.abort() 中止当前未完成的请求。
3、每次新请求前生成新的 AbortController 实例，确保信号隔离。
4、在 catch 块中判断是否因中止抛出错误，忽略该类异常，避免干扰正常错误处理流程。
五、使用 MutationObserver 监听 DOM 变化触发后续更新
当实时数据已通过其他方式写入特定 DOM 节点（如隐藏的 data 属性或预置容器），可通过 MutationObserver 监测其变动，进而驱动视图同步或二次计算。
1、选定目标节点，例如 document.getElementById(“live-data-container”)。
2、创建 MutationObserver 实例，回调函数 中检查 mutation.type === “attributes” 或 “childList”。
3、配置观察选项：启用 attributeFilter: [“data-value”] 或 childList: true 及 subtree: true。
4、调用 observe() 方法启动监听，后续任何匹配变更都将触发回调并执行 UI 刷新逻辑。
