有一些疑惑想请教老师

Question

老师我有几个问题想请教一下老师

首先第一个这张图
这张图是我使用translate动画之后通过chrome Devtool调试发现，当动画一直在运行的时候。translate首次进行的元素也发生了重绘，只是之后不进行了绘制。请问老师即使使用transform当元素首次发生变换的时候也会发生重绘但是之后并不会是这样吗。
还有就是，我的疑问是在chrome devtool前一段时间中，每次浏览器刷新都会关于translate变化更新进而计算样式等等。可是到了后边我发现并不会而只是出现一段灰色的task，即使动画在移动那么也并不会重新计算样式。请问老师为什么前几次translate需要计算而之后就不需要了呢？

其次就是第二个问题，我在调试过程中发现我明明没有写一些mouseover事件，可是莫名奇妙就出现了mouseover事件然后导致了发生重新绘制，请问老师这是为什么？浏览器默认行为吗

Answer 1

提问者 hy_wang 2021-02-02 20:22:37

老师是这样的

Answer 2

提问者 hy_wang 2021-02-02 20:16:26

请老师看下～

Answer 3

Mr_Max 2021-01-31 23:13:29

同学你好！

第一个问题，你另一个问题的例子其实可以解释，使用willChange后只触发一次transform也是不会发生重绘的。你可能要检查一下你运行环境的硬件加速问题。一般用户的环境都有GPU，浏览器默认也是使用硬件加速的。你描述你的DevTools的不确定状态我也无法解释，考虑更新一下你的浏览器？

第二个问题，浏览器不会自己触发事件的，你要定位一下这些事件触发的原因和代码位置。自己一定要对自己的代码有十足的了解和把握。: )

• 提问者 hy_wang #1

  老师你好，我第一个问题是一个非常简单的html文件。可是他都存在这个mouseout Event，文件里并没有这个呀。。我都要疯掉了。。

• Mr_Max 回复 提问者 hy_wang #2

  你第一个问题里也会自动出现mouseout event吗？看看你的chrome是不是装了什么插件触发的。

• 提问者 hy_wang 回复 Mr_Max #3

  老师我换了一个电脑还是不行呀还有事件

点开查看后面4条评论