折线图性能优化需用requestanimationframe替代setinterval以同步屏幕刷新率，结合时间戳对齐与数据截取；颜色通过css自定义属性动态控制；横轴时间用服务端偏移校准；canvas需按devicepixelratio缩放适配高分屏。
折线图数据刷新卡顿：用 requestanimationframe 替代 setinterval
实时折线图如果每秒用 setinterval 强刷一次，容易在低配服务器或高并发监控页上掉帧，表现为曲线跳跃、时间轴错位。浏览器对 setinterval 的定时精度不保证，尤其在页面后台运行时可能被节流甚至暂停。
- 改用
requestAnimationFrame驱动绘图循环，它和屏幕刷新率同步（通常 60fps），动画更顺滑 - 只在有新数据到达时才触发重绘，避免空转；配合
performance.now()做时间戳对齐，防止累积误差 - 注意：不要在
requestAnimationFrame回调里做耗时操作（如遍历上千点数据），先用Array.slice(-200)截取最新点再渲染
let lastTime = 0;
function renderLoop(timestamp) {
if (timestamp - lastTime >= 1000 / 30) { // 限制最低 30fps
updateChart(); // 只更新视口内可见数据点
lastTime = timestamp;
}
requestAnimationFrame(renderLoop);
}
requestAnimationFrame(renderLoop);
折线颜色与服务器状态强绑定：用 CSS 自定义属性动态控制
监控仪表里“CPU > 90%”要立刻变红、“磁盘满”要闪烁黄，硬编码颜色值会让后续加告警等级或主题切换变得困难。CSS 自定义属性（--status-color）配合 JS 注入，是最轻量的解耦方式。
- 在根元素设置默认色：
:root { --status-color: #4CAF50; }，各状态用 JS 动态改document.documentElement.style.setProperty('--status-color', '#f44336') - Canvas 绘图时读取
getComputedStyle(document.documentElement).getPropertyValue('--status-color')，避免颜色值散落在 JS 和 CSS 两处 - 别用
style.color直接写内联样式——Canvas 没有 color 属性，且无法被 CSS 变量覆盖
横轴时间刻度错乱：用 Date.now() + 服务端时间偏移校准
前端用 Date.now() 生成 X 轴时间点，但服务器时钟和浏览器本地时间总有毫秒级偏差，尤其跨地域部署时，折线图会出现“数据点向左/右漂移”现象，比如明明是 14:00:00 的峰值，图上标成 13:59:58。
- 首次加载时请求一次服务端接口（如
/api/time），拿到服务器当前毫秒时间戳，计算偏移量：offset = serverTime - Date.now() - 所有时间点统一用
Date.now() + offset生成，确保 X 轴和后端日志时间对齐 - 每 5 分钟重新校准一次 offset，防止长时间运行后漂移放大（NTP 同步本身也有抖动）
移动端缩放失真：Canvas 画布尺寸必须用 devicePixelRatio 缩放
在 iPhone 或高分屏安卓设备上，折线图线条模糊、锯齿严重，甚至坐标轴文字糊成一片——根本原因是 Canvas 的 width/height 属性没按设备像素比缩放，导致浏览器自动插值拉伸。
- 获取设备像素比：
const dpr = window.devicePixelRatio || 1 - 设置 canvas DOM 尺寸为设计宽高，再用
canvas.width = designWidth * dpr和canvas.height = designHeight * dpr设置真实画布分辨率 - 绘图前调用
ctx.scale(dpr, dpr)，否则所有坐标需手动乘 dpr，极易漏掉 - 注意：
resize事件里也要重算，否则横竖屏切换后立即模糊
真实项目里最容易被忽略的是时间偏移校准和 DPR 缩放的组合影响——服务器时间不准 + 高分屏缩放 + setInterval 刷新，三者叠加会让折线图在凌晨三点左右突然“跳帧”，排查时容易误判为后端推送延迟。
