应使用addEventListener替代内联事件、requestAnimationFrame替代定时器、classList控制样式、insertAdjacentHTML安全插入DOM，并重视动画时机与边界处理。
用 addEventListener 替代内联事件，避免 HTML 和逻辑耦合
直接写 onclick="doSomething()" 看似简单，但后期维护难、无法批量绑定、调试不便。真实项目中应把行为和结构分离。
实操建议：
立即学习“Java免费学习笔记（深入）”；
- HTML 里只留语义化结构，比如
<button id="toggle">切换</button> - JS 中用
document.getElementById('toggle').addEventListener('click', handler)绑定 - 若需绑定多个同类元素（如一排卡片），优先用事件委托：
container.addEventListener('click', e => { if (e.target.matches('.card-btn')) { ... } })
用 requestAnimationFrame 做平滑动画，别用 setTimeout 或 setInterval
滚动、缩放、淡入淡出等视觉变化，如果靠定时器驱动，容易卡顿、掉帧、不同步屏幕刷新率。
实操建议：
立即学习“Java免费学习笔记（深入）”；
- 动画逻辑写在函数里，用
requestAnimationFrame(animate)启动，而不是setInterval(animate, 16) - 每次回调中计算当前帧状态（如位置、透明度），再更新
style.transform或style.opacity - 记得在动画结束时清除：用
cancelAnimationFrame(id)防止内存泄漏
用 classList 控制样式切换，少碰 style 属性
直接改 element.style.color = 'red' 会覆盖 CSS 文件里的其他声明，且难以复用、不利于主题切换。
实操建议：
立即学习“Java免费学习笔记（深入）”；
- 把视觉状态映射为 class，例如
.is-loading、.is-expanded - 用
element.classList.add('is-active')、.toggle('is-hidden')、.contains('is-disabled')操作 - 需要动态生成样式？用
CSSStyleSheet.insertRule()，而非拼接style字符串
异步加载内容后，确保 DOM 已就绪再操作节点
fetch 数据回来再 innerHTML += ... 很常见，但若插入的 HTML 含 <script> 或依赖子元素初始化（如第三方组件），容易执行失败或错位。
实操建议：
立即学习“Java免费学习笔记（深入）”；
- 用
insertAdjacentHTML('beforeend', htmlStr)替代innerHTML +=，更安全、不重绘已有节点 - 若插入后需对新节点绑定事件，不要提前查 DOM；应在插入后立即用
querySelector定位新元素再addEventListener - 避免在
fetch().then()里直接操作尚未挂载的节点；先确认父容器已存在于document中
