canvas 渲染须用 requestanimationframe 而非 setinterval，避免掉帧卡顿；grid 布局替代 float/absolute 实现响应式大屏；echarts 初始化前需确保容器尺寸稳定；拖拽布局推荐 sortablejs。
Canvas 渲染要配 requestAnimationFrame，别用 setInterval
Canvas 动态看板掉帧、卡顿，90% 是因为用了 setInterval 或 setTimeout 驱动重绘。它们不和屏幕刷新同步，容易累积延迟或跳帧。
正确做法是用 requestAnimationFrame 形成闭环帧循环：
- 每帧只做三件事：检查数据是否就绪、计算需更新的区域、调用
ctx.clearRect()和绘制逻辑 - 开头加
if (!isDataReady) return跳过空帧，避免无意义重绘 - 结尾必须再调用
requestAnimationFrame(draw)，否则动画会停 - 用
performance.now()记录上一帧耗时，持续 >16ms 时可降级（比如关闭光晕、减少粒子数）
Grid 布局写大屏，别碰 float 和 absolute
用 float 或 position: absolute 排大屏，换分辨率就错位，改一个尺寸全崩。Grid 是目前最稳的方案。
实操要点：
- 根容器设
height: 100vh; width: 100vw;，再用grid-template-rows和grid-template-columns划分区域（如1fr 2fr 1fr） - 用
grid-area给模块命名（如"header"、"chart-left"），再用grid-template-areas可视化排布 - 字体大小用
clamp(14px, 4vw, 28px)，避免写死像素值 - Safari 旧版对
transform: scale()兼容差，缩放时建议加will-change: transform并设transform-origin: 0 0
ECharts 初始化前必须等容器尺寸稳定
常见报错 "Cannot initialize ECharts instance before container is ready"，根本原因是 DOM 挂载了但容器还没渲染出宽高。
别在 DOMContentLoaded 或组件 mounted 里直接初始化图表：
- 确保容器有固定宽高（不能只设
width: 100%且父级没高） - 用
getBoundingClientRect()检查容器offsetWidth和offsetHeight是否非零再 init - 监听
window.resize，并在回调里调用图表实例的resize()方法 - 图表数据更新优先用
setOption({ series: [...] }, false)，第二个参数设false表示不重绘配置项，只更新数据
拖拽布局得靠 SortableJS，原生 drag/drop 坑太多
HTML 原生 dragstart/dragover 默认被阻止，必须手动 event.preventDefault()；Firefox 和 Safari 对 grid 容器拖拽行为不一致；drop 事件拿不到可靠位置索引。
推荐直接上 SortableJS：
- CDN 引入：
https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js - 容器加
id="dashboard"，每张卡片加class="card"和唯一data-id -
onEnd回调里用Array.from(el.children).map(el => el.dataset.id)获取新顺序 - 顺序存进
localStorage.setItem('dashboardLayout', JSON.stringify(orderList))，页面加载时读取并重建 DOM
拖拽只管位置，卡片内容要按 data-id 主动拉配置——别把接口地址硬编码进拖拽逻辑里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
