移动端网页动效优化核心是减少低端机计算、绘制与合成负担，需三步：用prefers-reduced-motion主动降级、仅保留transform/opacity动画、控制节奏与规模，并同步降级JS及第三方动效。
移动端网页动效精简，核心不是“删动画”，而是让浏览器在低端机上少计算、少绘制、少合成。重点落在三件事：用系统偏好主动降级、只保留 GPU 友好属性、避免隐式开销。
用 prefers-reduced-motion 全局拦截，而非等 JS 加载后才响应
用户在 iOS 开启“降低动态效果”或 Android 启用“移除动画”时，@media (prefers-reduced-motion: reduce) 会立即生效——比任何 JS 都早。必须用它做第一道防线：
-
重置所有动画源头：设
animation: none !important和transition: none !important，别写0s或all 0s，后者仍触发解析 -
清空 transform 和 opacity 的连续变化：加
transform: none !important和opacity: 1 !important，防止某些 WebView 对残留位移或透明度变化仍尝试合成 -
禁用 will-change：设
will-change: auto !important，避免低配机因图层预分配而显存吃紧
只保留 transform + opacity 动画，其他一律剔除
低端安卓（尤其是 Android 5–7 WebView）和旧款 iPhone 对非合成属性极其敏感。只要动画中混入一个非安全属性，整条动画就退回 CPU 渲染：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
必须删除：
top/left、width/height、margin/padding、background-color、box-shadow、filter: blur()、border-radius动画 -
仅允许：
transform: translateX()/scale()/rotate()和opacity—— 它们不触发布局与重绘，只走合成管线 -
注意陷阱：同一动画里同时写
transform和left，或给transform加box-shadow过渡，都会让加速失效
控制动画节奏与规模，从源头减负
功耗高不只是因为“有动画”，更因为频繁、冗长、大面积的图层操作：
- 时长压缩：将默认 300–500ms 动画缩短至 200–250ms，既保留交互反馈感，又减少 GPU 持续工作时间
-
禁用多关键帧复杂曲线：避开自定义
cubic-bezier(0.68, -0.55, 0.27, 1.55)等高计算量缓动；优先用ease-out或steps(1, end)（适合加载指示器、开关切换） -
限制提层范围：不用
translate3d(0,0,0)全局加在 loading 类上；只对正在运动的单个元素，在动画开始前 1 帧临时加will-change: transform，结束后立刻设回auto
第三方组件与 JS 动画必须同步降级
CSS 媒体查询拦不住 JS 控制的 requestAnimationFrame 或第三方库内置动效：
-
监听系统偏好变化：用
window.matchMedia('(prefers-reduced-motion: reduce)')判断，并在change回调中跳过动画逻辑（如跳过scrollIntoView({ behavior: 'smooth' })，改用behavior: 'auto'） -
覆盖 UI 库默认行为：例如 Bootstrap 的
.collapse、Ant Design 的Modal，需手动覆写其transition相关 CSS，或通过配置项关闭动效 -
懒加载动效兜底：iOS Safari 存在 IntersectionObserver 延迟触发问题，应在
DOMContentLoaded后延迟 16ms 主动调用observer.takeRecords()，避免首屏动画卡顿
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
