canvas局部刷新必须计算脏区，不能全屏clearrect：每次状态变更调用markdirty记录最小包围矩形，合并多区域后用math.floor对齐像素坐标清除，含半透明时改用离屏缓存+drawimage合成。
Canvas局部刷新必须算脏区，不能只清画布
大屏展示常用canvas绘图，但直接ctx.clearRect(0, 0, width, height)会导致明显闪烁——GPU重填整个帧缓冲区，尤其在4K/60Hz场景下肉眼可辨。防闪烁的核心是只动真正变的部分。
- 每次状态变更（如某仪表盘指针转动、某区域数值更新）时，调用
markDirty(x, y, w, h)记录最小包围矩形，而非立即绘制 - 多个变更合并为一个联合矩形：
dirtyRect = { x: Math.min(a.x, b.x), y: Math.min(a.y, b.y), width: Math.max(a.x+a.w, b.x+b.w) - Math.min(a.x, b.x), height: Math.max(a.y+a.h, b.y+b.h) - Math.min(a.y, b.y) } -
clearRect(dirtyRect.x, dirtyRect.y, dirtyRect.width, dirtyRect.height)前务必Math.floor()对齐像素，避免 sub-pixel 清除引发抗锯齿抖动 - 若脏区内含阴影或半透明叠加，
clearRect会破坏混合效果——此时必须用离屏缓存：把静态底图预先画到offscreenCanvas，重绘时先drawImage对应脏区，再叠带动态内容
iframe加载本地文件要加时间戳，否则刷新无效
大屏常嵌iframe展示实时日志、传感器原始文本等本地.txt文件，但iframe.src = iframe.src在file://协议下大概率不生效——浏览器强缓存，内容根本没换。
- 必须动态拼接防缓存参数：
const url = new URL(iframe.src); url.searchParams.set('t', Date.now()); iframe.src = url.toString(); - 只选本地文件
iframe：document.querySelectorAll('iframe[src^="file:///"]')，避免误刷广告或监控视频流iframe - Firefox对
file://路径更敏感，若报错“SecurityError”，确认文件路径未跨盘符（如C:\不能读D:\），且未启用“严格隐私模式” - 定时刷新间隔别设太密（如
100ms），file://读取无HTTP队列控制，高频触发可能卡死渲染线程
表格局部刷新慎用innerHTML，优先replaceChildren
大屏监控表格（如设备状态表、告警列表）频繁更新时，用innerHTML替换整张<tbody>会销毁所有事件监听器，导致“点击查看详情”按钮失灵；且若后端返回未转义的字段，直接插入等于开XSS后门。<ul>
<li>用<code>replaceChildren()替代：tbody.replaceChildren(...rows)，它不解析HTML字符串，不执行内联脚本，还能保留已绑定的父级事件委托
<tr>用<code>document.createElement('tr')构建，字段值用textContent设文本，彻底切断XSS链路let isFetching = false锁，点击分页按钮前检查并设为true，finally里重置；同时用AbortController取消上一个未完成请求replaceChildren当前屏内<tr>
<h3>HTMX局部刷新必须显式设hx-target，否则改错地方</h3>
<p>大屏用HTMX做按钮触发刷新（如“切换地图模式”）时，常见现象是新内容塞进<code><button></button>标签内部，而不是目标图表容器——因为没写hx-target，HTMX默认更新触发元素自身。
- 容器和触发器必须分离：
<div id="map-container" hx-target="#map-container" hx-swap="innerHTML"></div>，按钮放在外面 -
hx-swap="innerHTML"比outerHTML安全：后者会把整个<div id="map-container">标签重复嵌套，DOM层级错乱<li>后端Flask路由返回的必须是纯HTML片段，不含<code>、，否则浏览器解析出错，空白或布局崩塌 - 若容器初始为空，HTMX首次请求可能因
hx-target找不到节点而静默失败——确保id="map-container"的<div>在页面加载时已存在（哪怕内容为空）<p>大屏局部刷新最易被忽略的点：脏区计算和防缓存参数不是“锦上添花”，而是“不加就失效”的硬性条件。Canvas不标脏区=必然闪烁，iframe不加时间戳=永远显示旧文本，HTMX不设<code>hx-target=刷新内容消失在按钮里。这些不是配置项，是执行前提。
