我有一个在Svelte上的项目,感觉很好。
但是当我使用我的安卓手机时,我发现点击后有很长的延迟。
根据我所知,Svelte是最快的框架,因为它使用本地JavaScript代码作为输出(没有虚拟DOM),但这里发生的事情超出了世界(难以解释)。
慢了1000000倍?怎么可能
所以我开始调试和研究。
我发现没有转换时一切都正常,速度很快。
但是当开始使用转换时,网站就会变慢。
调试
使用Chrome开发者工具
只添加transition:scale
像这样<div transition:scale>
如您所见,超过80%的速度归因于缩放转换
解决方案
没有transition:scale
❌之前 | ✅现在 |
---|---|
3.12秒 | 5微秒 |
我不会撒谎,但是这比有动画的那个快了1000000倍。
为什么会发生这种情况
我知道解决方法,但我需要一些解释或一种方法来进行动画而不会非常缓慢。
您在顶部看到的图像是通过快速点击按钮(至少20次)得出的结果
transition
指令使用JavaScript来动画化事物,因此它不能比在JQuery中构建的类似功能更高效,因为它在主线程中运行并消耗大量CPU与布局回流。要拥有高效的过渡效果,您应该使用纯CSS以从GPU加速中受益。 - n--getComputedStyle
通常只用于获取现有/起始值 一次 。 - H.B.