本文介绍一种基于时间戳比对与批量 JSON 响应的 AJAX 方案，实现 HTML 表格、图表等区块的按需更新，避免固定轮询导致的冗余加载、页面抖动及资源浪费。
本文介绍一种基于时间戳比对与批量 json 响应的 ajax 方案，实现 html 表格、图表等区块的**按需更新**，避免固定轮询导致的冗余加载、页面抖动及资源浪费。
在实时数据展示场景中（如聊天监控页），频繁全量刷新多个 DOM 区域不仅浪费带宽和服务器资源，还易引发 UI 跳动——尤其是当某区块内容高度动态变化时，会推移下方元素，干扰用户操作（如误点链接或中断阅读）。你当前使用的 $.load() 每 10 秒无条件重载全部区块，虽功能可用，但缺乏数据变更感知能力。真正的优化方向是：只更新真正变化的内容。
✅ 推荐方案：单请求 + 时间戳校验 + JSON 分块响应
核心思路是将四次独立请求合并为一次，并通过客户端维护各区块的「最后更新时间戳」，服务端仅返回有变更的数据。这显著降低 HTTP 开销，提升响应效率与用户体验。
1. 前端：维护时间戳并发起智能请求
// 初始化各区块的时间戳（单位：毫秒）
let timestamps = {
graph: 0,
chat: 0,
watchers: 0,
time: 0
};
function fetchUpdates() {
const params = new URLSearchParams({
update: 'all',
ts_graph: timestamps.graph,
ts_chat: timestamps.chat,
ts_watchers: timestamps.watchers,
ts_time: timestamps.time
});
$.ajax({
url: 'myscript?' + params.toString(),
method: 'GET',
dataType: 'json',
success: function(response) {
// 响应结构示例：{ "graph": { "html": "...", "ts": 1718234567890 }, "chat": null, ... }
Object.keys(response).forEach(key => {
if (response[key] && response[key].html) {
$(`#${key === 'graph' ? 'concurrentChart' : key}`).html(response[key].html).fadeIn('slow');
timestamps[key] = response[key].ts || Date.now(); // 更新本地时间戳
}
});
},
error: function() {
console.warn('Failed to fetch updates; retrying next cycle.');
}
});
}
// 每 10 秒执行一次（可进一步根据响应动态调整，如无更新则延长至 15s）
setInterval(fetchUpdates, 10000);
2. 后端（PHP）：按需生成变更数据
if ($_SERVER['REQUEST_METHOD'] === 'GET' && isset($_GET['update']) && $_GET['update'] === 'all') {
$now = time();
$response = [];
// 封装一个通用检查函数
$checkAndUpdate = function($key, $lastTs, $generatorFn) use ($now, &$response) {
$data = $generatorFn();
$currentTs = $data['timestamp'] ?? $now; // 假设 generator 返回含 timestamp 的数组
if ($currentTs > $lastTs) {
$response[$key] = [
'html' => $data['html'],
'ts' => $currentTs
];
}
};
$checkAndUpdate('graph', (int)$_GET['ts_graph'], fn() => ['html' => latestChatViewerCountGraph(), 'timestamp' => getGraphLastModified()]);
$checkAndUpdate('chat', (int)$_GET['ts_chat'], fn() => ['html' => latestChatsGetChatTable($dbCriteria), 'timestamp' => getChatLastModified()]);
$checkAndUpdate('watchers', (int)$_GET['ts_watchers'], fn() => ['html' => latestChatsGetWatchersHTML($dbCriteria), 'timestamp' => getWatchersLastModified()]);
$checkAndUpdate('time', (int)$_GET['ts_time'], fn() => ['html' => latestChatCurrentTimeImage($ChrisTime), 'timestamp' => time()]);
header('Content-Type: application/json');
echo json_encode($response);
exit;
}
⚠️ 关键注意事项
- 防止布局跳动：对 .concurrentChart, .chats 等容器设置固定高度或 min-height，或使用 CSS contain: layout 隔离渲染影响；图表类区域建议采用 SVG/Canvas + 数据驱动更新，而非整块 HTML 替换。
- 错误降级处理：AJAX 失败时不应中断轮询，而应记录日志并静默重试，避免 UI 冻结。
- 时间戳精度：确保后端时间戳来源统一（如数据库 UNIX_TIMESTAMP(updated_at)），避免客户端/服务端时钟偏差导致漏更。
- 缓存控制：在 PHP 响应头中添加 Cache-Control: no-cache，禁用浏览器缓存干扰时间戳逻辑。
该方案将请求次数从 4→1，传输体积从多次 HTML 片段→精简 JSON，同时赋予前端“决策权”——仅当数据真实变更时才触发 DOM 更新与动画，兼顾性能、体验与可维护性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
