必须用 transform 和 opacity 替代 left、top 等属性——因前者走 GPU 合成层，后者触发重排致移动端掉帧；JS 仅控制状态切换，动画全由 CSS 实现。
直接用 transform 和 opacity 替代 JS 操作 left、top、width、height，是避免移动端掉帧最有效且必须做的一步——不是“建议”，是真机一测就暴露的硬性门槛。
为什么JS动画在移动端容易掉帧
JS 动画常靠 setInterval 或 requestAnimationFrame 不断修改元素样式（比如 el.style.left = x + 'px'），这会强制浏览器反复触发重排（reflow）和重绘（repaint）。移动端内存受限（iOS Safari 实测仅约 10MB 可用），一旦 layout 频繁发生，帧率立刻跌破 60fps，低端安卓机甚至卡在 20–30fps。而 CSS3 动画由 GPU 合成层处理，不占 JS 主线程，浏览器还能自动优化不可见区域的动画执行。
哪些CSS属性能真正避免掉帧
只有以下两类属性能稳定走合成层，不触发重排：
-
transform：包括translateX()、translateY()、scale()、rotate()；注意别混用top或margin，否则浏览器会降级回 CPU 渲染 -
opacity：透明度变化完全独立于布局，开销极低
以下属性必须避开：width、height、left、top、margin、padding、box-shadow、filter（除 blur(0) 等极简情况外）——它们都会拉起全链路渲染（Layout → Paint → Composite），真机上肉眼可见卡顿或闪动。
使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。
立即学习“前端免费学习笔记（深入）”；
transition 和 @keyframes 怎么写才不翻车
关键不在“有没有加动画”，而在“是否让浏览器真正识别为可合成动画”：
- 过渡必须写在初始 CSS 中，例如：
transition: transform 0.3s ease, opacity 0.3s ease;；不能靠 JS 临时加 class 再设transition，否则首帧常被跳过 - 用
@keyframes时，避免超过 5 个关键帧；中间帧别只改opacity而不动transform，否则部分安卓 WebView 会丢帧 - 移动端务必加
will-change: transform;（仅在动画开始前 JS 设置，结束即清空），iOS Safari 尤其依赖这个提示来提前分配合成层 - 对
position: fixed或absolute元素，补一句backface-visibility: hidden;，能防止 iOS 拉出一半时出现白边或闪烁
JS 只负责开关，不插手位移计算
JS 的唯一任务是切换状态（如加/删 is-open 类），所有位移、缩放、透明度都由 CSS 控制：
- 抽屉展开：JS 改
el.classList.add('is-open')，CSS 里写.drawer.is-open { transform: translateX(0); } - 不要在 JS 里写
el.style.transform = 'translateX(' + x + 'px)'，尤其别在滚动监听里高频赋值——这会打断合成流水线 - 若需响应式位移（如宽度随视口变），用
translateX(-100%)而非固定像素；但前提是抽屉容器有明确width声明，否则 -100% 行为不可控
最容易被忽略的是：动画结束后的清理动作。比如 will-change 必须在 transitionend 回调里立刻设回 auto，body 的 overflow: hidden 必须在抽屉收起瞬间移除（别等 transition 结束），否则用户会误触背景滚动或点击穿透。
