image
下面通过一个简单的例子, 来观察上述渲染过程
<!...使用硬件加速后, 绘制过程将不再占用主线程, 直接在 GPU 上完成
因此, 点击按钮阻塞主线程, 也并不会影响动画, 你可以亲自试一试
使用 JS 动画
首先使用 setInterval 实现动画循环...和 requestAnimationFrame 并没有明显的区别, 我们来增加单帧内的计算量, 首先看 setInterval
function work() {
for (let i = 0..., Chrome 最早在 36 版本中就实现了其基础功能
使用 Element.animate() 可以便捷的创建动画, 并且像 CSS 动画一样, 具有调用硬件加速的能力
const $div = document.querySelector...}
)
使用 requestIdleCallback 避免主线程阻塞
不管怎么样, 长时间占用主线程都是一种很差的操作, 在阻塞期间, 动画卡顿, 用户操作事件无法响应, 我们要避免长时间阻塞的行为
如何避免呢
云服务器
ICP备案
腾讯会议
云直播
对象存储
