难度级别:中高级及以上 提问概率:70%
回答这道题,首先要说的就是,浏览器在每一帧动画里大概做了什么事情。首先浏览器会执行Javascript,或是操作DOM元素,紧接着需要对DOM元素进行样式计算,当计算完成后,就需要针对DOM元素的位置以及大小,做出相应的布局。注意,这里的布局只是计算阶段,紧接着就需要计算布局对DOM元素做绘制工作,这些工作包括边框、色值等等。最后再将以上一系列工作渲染到页面上。
但需要注意的是,在布局这一步,因为我们的页面元素大部分都是相对定位的,一旦某个元素的位置、大小、边距发生了变化,就会引起其他元素一连串的变化,也就是我们常说的回流。在整个动画执行过程中,重新布局和绘制的工作所需时间短,那么动画就会更加流畅,反之,这两项工作所需时间长,那么动画就会显得卡顿。
我们知道,浏览器大概每16.6ms会进行一帧动画,意思就是以上这一系列工作每一帧都要在16.6ms内做完,否则就会显得卡顿了。