1. 减少DOM操作频率
将多次修改节点的操作合并为一次 → 例如先创建完整元素再插入页面 → 观察控制台是否仍有重排（Reflow）提示。此方法降低渲染消耗（如对比频繁与批量操作的帧率），提升动画流畅度（需避免强制同步布局），但可能增加内存占用（建议及时释放变量）。
2. 使用事件委托替代单个监听
在父元素添加统一事件处理器 → 通过`e.target`判断具体子元素 → 测试动态列表的响应速度。此操作减少内存泄漏（如对比每个元素独立监听与委托模式），提升大规模页面性能（适合列表类场景），但需注意事件冒泡逻辑（避免误触发）。
3. 优化循环中的计算与引用
将数组长度缓存到变量 → 避免循环内重复调用`arr.length` → 用局部变量存储频繁访问的属性值。此调整降低CPU负载（如对比优化前后执行时间），加快长任务处理（需避免全局变量污染），但可能增加代码复杂度（建议添加注释说明）。
4. 异步加载非关键资源
在``标签添加`defer`或`async`属性 → 将耗时任务拆分为Web Workers → 检查网络面板的加载顺序。此方法防止阻塞渲染（如对比同步与异步脚本的加载时间），优先显示页面内容（需管理Worker通信），但可能改变执行顺序（需测试逻辑正确性）。
5. 利用浏览器缓存存储数据
通过`localStorage`保存用户偏好设置 → 读取时优先从缓存获取 → 对比直接计算的性能差异。此技术减少重复运算（如对比实时计算与缓存读取的速度），提升高频操作响应（需清理过期数据），但占用存储空间（建议限制数据大小）。