扫码关注官方订阅号
用setTimeout和CSS3(以及jQuery的animate())做逐帧动画,性能差异有多大?
人生最曼妙的风景,竟是内心的淡定与从容!
个人观点是:动画性能 css3 ? js > jQuery
js > jQuery的原因
jQuery 不能避免 layout thrashing (有人喜欢将其翻译为“布局颠簸”,会导致多余relayout/reflow),因为它的代码不仅仅用于动画,它还用于很多其他场景。jQuery的内存消耗较大,经常会触发垃圾回收。而垃圾回收触发时很容易让动画卡住。jQuery使用了setInterval而不是 reqeustAnimationFrame(RAF),因为 RAF 会在窗口失去焦点时停止触发,这会导致jQuery的bug。(目前jQuery已经使用了RAF)
css ? js这个性能比较就需要看js代码的质量了
具体可以看以下这篇文章http://zencode.in/19.CSS-vs-JS%E5%8A%A8%E7%94%BB%EF%BC%9A%E8%B0%81%E6%9B%B4%E5%BF%AB%EF%BC%9F.html#rd?sukey=fa67fe3435f5c4beacbfe457b9a035532d6e1e4d69f86587f15a4829bebd01e24cce697d32314a28aafad42df5d6f8e5
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
个人观点是:动画性能 css3 ? js > jQuery
js > jQuery的原因
jQuery 不能避免 layout thrashing (有人喜欢将其翻译为“布局颠簸”,会导致多余relayout/reflow),因为它的代码不仅仅用于动画,它还用于很多其他场景。
jQuery的内存消耗较大,经常会触发垃圾回收。而垃圾回收触发时很容易让动画卡住。
jQuery使用了setInterval而不是 reqeustAnimationFrame(RAF),因为 RAF 会在窗口失去焦点时停止触发,这会导致jQuery的bug。(目前jQuery已经使用了RAF)
css ? js
这个性能比较就需要看js代码的质量了
具体可以看以下这篇文章
http://zencode.in/19.CSS-vs-JS%E5%8A%A8%E7%94%BB%EF%BC%9A%E8%B0%81%E6%9B%B4%E5%BF%AB%EF%BC%9F.html#rd?sukey=fa67fe3435f5c4beacbfe457b9a035532d6e1e4d69f86587f15a4829bebd01e24cce697d32314a28aafad42df5d6f8e5