最核心要开启gpu加速。
建议使用requestAnimationFrame,如果用js修改元素的位置,推荐使用这个API。
定时器时间不准确,requestAnimationFrame 始终在当前帧的最后执行。
利用css3 translate进行元素移动
在 CSS3
中,可以使用 transform
属性的 translateZ
函数或 translate3d
函数来开启 GPU
加速。这些函数会创建一个新的图层,浏览器会使用 GPU
来渲染这个图层,从而提高性能。
例如,你可以使用以下代码来开启 GPU
加速:
.element {transform: translateZ(0);
}
或者:
.element {transform: translate3d(0, 0, 0);
}