默认 animation-timing-function 为 ease（cubic-bezier(0.25, 0.1, 0.25, 1)），导致旋转动画开头慢、中间快、结尾慢，视觉上产生卡顿或抖动；解决方法是显式设置 linear，强制匀速执行，并配合 will-change: transform 或 translatez(0) 启用 gpu 合成以避免掉帧。
用 @keyframes 定义旋转动画时，为什么转得不匀速？
默认的 animation-timing-function 是 cubic-bezier(0.25, 0.1, 0.25, 1)（即 ease），开头慢、中间快、结尾又慢，视觉上容易感觉“卡顿”或“抖动”。移动端尤其明显。
- 直接写
animation: spin 1s linear infinite，其中linear强制匀速，更符合 loading 的预期节奏 - 别用
transform: rotate(360deg)配ease-in-out—— 浏览器在首尾插值时可能触发 layout 或 repaint，增加功耗 - 确保动画元素设了
will-change: transform或transform: translateZ(0)，让浏览器提前启用 GPU 合成，避免掉帧
如何让旋转 Loading 在不同屏幕尺寸下都居中且大小适配？
纯 CSS 居中 + 响应式尺寸是最稳妥的做法，避免 JS 计算或 media query 冗余。
- 用
position: absolute+inset: 0+margin: auto实现宽高未知下的居中（需设width和height） - 尺寸推荐用
rem或vw：比如width: 2rem; height: 2rem;，配合根字体大小动态缩放；或width: 5vw; height: 5vw;，在小屏上自动缩小 - 别依赖
flex父容器居中——如果父容器没有明确高度（比如min-height: 100vh），align-items: center可能失效
使用 border 绘制环形加载器时，为什么 iOS Safari 上边缘发虚？
这是 WebKit 对 border-radius: 50% + border 组合的渲染缺陷，尤其当 border 宽度为奇数像素或非整数值时。
- 统一用偶数像素宽度，例如
border: 4px solid #ccc，避免3.5px或3px - 改用
clip-path: circle()+background方案更稳定，但兼容性略低（iOS 15.4+ 支持） - 最兼容写法：用两个同心圆（外圈
border+ 内圈background遮挡），再加transform: scale(0.99)微调抗锯齿
如何让 Loading 动画在页面空闲时暂停，节省电量？
用户切到后台标签页或锁屏后，持续动画会徒增 CPU/GPU 负担，尤其低端安卓机容易发热降频。
- 监听
document.hidden，配合animation-play-state控制：animation-play-state: paused/running - 不要用
setTimeout或requestAnimationFrame手动控制——CSS 动画本身支持原生暂停 - 注意：Safari 对
visibilitychange事件响应有延迟，建议加上pagehide和pageshow双保险
真正难的不是写出让它转起来的代码，而是让它在各种屏幕、各种系统、各种后台状态下，既不卡、不糊、不耗电，又不突然消失——这些细节堆在一起，才决定用户是不是觉得“这加载真顺”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
