屏幕闪烁并非HTML函数导致，而是JavaScript高频操作DOM或CSS属性引发重排重绘，使合成器帧提交异常，尤其在60Hz显示器上表现为闪烁或撕裂。
不是硬件问题，是浏览器渲染层在高负载下触发了强制重绘或合成异常——HTML 本身没有函数，更不会直接控制屏幕刷新。
为什么高负载时屏幕会闪烁
所谓“HTML函数导致闪烁”，实际是 JavaScript 高频操作 DOM 或 CSS 属性（如 width、top、backgroundColor）引发连续重排（reflow）+ 重绘（repaint），进而让合成器（compositor）频繁提交帧，GPU 渲染节奏被打乱。尤其在低刷新率显示器（60Hz）上，帧率抖动会直观表现为闪烁或撕裂。
- 用
innerHTML循环更新列表，每次都会触发完整布局计算 - 在
scroll或resize回调里直接改style.left，等于每像素位移都触发重排 - 动画中混用
transform（GPU 加速）和height（CPU 计算），导致图层分裂与频繁合成 - 未启用
will-change: transform提前提示合成器提升图层，但又做了大量 transform 动画
如何快速定位是否为渲染问题
打开 Chrome DevTools → Rendering 面板（F12 → ⚙️ → More Tools → Rendering），勾选以下三项：
-
Paint flashing：看闪烁区域是否与 JS 操作的 DOM 节点强相关 -
Layer borders：检查是否意外创建了过多图层（比如每个卡片都独立分层） -
FPS meter：观察帧率是否持续低于 45fps，且伴随Long frame提示
如果上述现象明显，而换用纯 CSS 动画（如 @keyframes opacity）后闪烁消失，基本可锁定为 JS 渲染滥用。
立即学习“前端免费学习笔记（深入）”；
避免闪烁的实操建议
核心原则：把视觉变化交给合成器，别让主线程反复计算布局。
- 动画优先用
transform和opacity，禁用top/left/width/height - 高频更新场景（如拖拽、滚动）加节流：
requestAnimationFrame+ 时间戳判断，而非setTimeout或setInterval - 批量 DOM 修改用
DocumentFragment，避免逐个appendChild - 复杂列表渲染考虑虚拟滚动（virtualized list），而非一次性挂载全部节点
- 确认 GPU 加速已生效：在 DevTools 的
Elements面板选中元素，右侧Styles查看rendering标签页是否有Composited标记
最容易被忽略的是：闪烁未必发生在你写的代码行上——它可能是第三方库（比如某个图表组件）内部强制重排引起的，所以要先用 Paint flashing 锁定区域，再逆向查 DOM 路径和监听器。
