根本原因是浏览器移动端默认不为非合成层元素开启硬件加速，导致滚动被迫走主线程重排重绘；需用translate3d(0,0,0)+will-change动态控制GPU加速，并避免border-radius等降级属性。
为什么 marquee 或 transform: translateX() 在移动端滚动会卡顿
根本原因不是“动画太复杂”，而是浏览器在移动端默认不为非合成层元素开启硬件加速，导致滚动文字被迫走主线程重排重绘。尤其当父容器有 overflow: hidden、文字含阴影或使用了 font-smooth 等渲染增强时，帧率极易跌破 30fps。
常见错误现象包括：文字突然跳帧、滚动速度不匀速、快速滑动页面时文字直接暂停。
- 安卓 WebView（尤其旧版）对
will-change: transform支持不稳定，盲目加反而引发闪烁 - iOS Safari 对
transform: translate3d(0, 0, 0)的触发更敏感，但需确保元素不被其他 CSS（如filter）降级回软件渲染 - 文字内容动态更新（如实时新闻跑马灯）时，频繁 DOM 操作会阻塞合成器线程
用 transform: translate3d() + will-change 正确触发 GPU 加速
关键不是“加了就行”，而是加在对的时机、对的元素、配合对的清理逻辑。
推荐写法（以水平滚动为例）：
立即学习“前端免费学习笔记（深入）”；
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
.scroll-text {
transform: translate3d(0, 0, 0);
will-change: transform;
/* 必须移除可能触发重排的属性，如 width: fit-content */
}
@keyframes scroll-move {
from { transform: translate3d(100%, 0, 0); }
to { transform: translate3d(-100%, 0, 0); }
}-
translate3d(0, 0, 0)比translateZ(0)更可靠，避免 iOS 15.4+ 的部分兼容问题 -
will-change: transform建议只在动画开始前通过 JS 动态添加，动画结束后立即移除，否则长期占用 GPU 内存 - 禁止在该元素上设置
border-radius、box-shadow或background: linear-gradient()，这些会强制合成层回退
用 requestAnimationFrame 替代 CSS 动画控制滚动节奏
CSS 动画在低端 Android 设备上容易因时间函数抖动导致卡顿；而 JS 驱动可主动丢帧保节奏，更适合动态内容。
实操要点：
- 用
getBoundingClientRect()获取当前偏移，而非依赖offsetLeft（后者触发同步布局计算） - 每帧只做一次
element.style.transform = `translate3d(${x}px, 0, 0)`，避免读写交替 - 当页面进入后台（
visibilitychange）或滚动区域不可见时，必须调用cancelAnimationFrame，否则持续消耗电量
示例节选：
function animateScroll() {
if (!isInViewport(el)) return;
x -= speed;
el.style.transform = `translate3d(${x}px, 0, 0)`;
if (x < -el.scrollWidth) x = el.parentElement.clientWidth;
rafId = requestAnimationFrame(animateScroll);
}字体与文字渲染本身就在拖慢帧率
很多人忽略：文字重绘是移动端合成层最重的操作之一。系统字体（如 -apple-system, system-ui）比自定义 Web Font 渲染快 2–3 倍，且抗锯齿策略更轻量。
- 禁用
-webkit-font-smoothing: antialiased—— 它会让文字变细但显著增加光栅化耗时 - 避免
text-shadow，哪怕只是0 0 1px，也会让浏览器放弃亚像素渲染，改用整像素模糊 - 单行滚动文字建议用
white-space: nowrap+overflow: hidden，而不是靠 flex 或 grid 布局撑开，后者易触发不必要的 relayout
真正卡顿的根源，往往藏在你认为“无关紧要”的字体设置和动画外层容器的 overflow 规则里。别急着换库，先检查 getComputedStyle(el).willChange 是否真为 transform，再看 DevTools 的 Rendering 面板里有没有“Paint flashing”高频闪烁。
