Question

我创建了一个已经在桌面浏览器上工作的小网站。但是当我在iPhone上测试这个网站时，我注意到动画排队等等。我没有完美地工作。有人能给我一个暗示，为什么iOS浏览器这么慢？！或者iPhone上的图形引擎是不是很强大，无法处理这个问题？

以下是导致我头疼的代码：

<script>
        $(function(){
            $('#switch0').on('change', function(){
            if ($(this).is(':checked')) 
            {
                $('table,#middletable').css({'border-color':'#00ff00' , 'color': '#00ff00' });
                $('.rot,.blau').fadeTo(0,0);
                $('.gruen').fadeTo(0,100);
                $("#switch1, #switch2").prop("checked", false); 
                $("td.not_neo").addClass('center_1');
                $("td.center_1").removeClass('not_neo');
                document.getSelection().removeAllRanges();   
            }
                else 
            {   
                $('table,#middletable').css({'border-color':'#009df7' , 'color': '#009df7'});
                $('.gruen').fadeTo(0,0);
                $('.blau').fadeTo(0,100);
                $("#switch1").prop("checked", true);
                $("td.center_1").addClass('not_neo');
                $("td.center_1").removeClass('center_1');
                document.getSelection().removeAllRanges();

            }
            }); 
        });
</script>

提前感谢您的帮助！

Answer 1

我在我的iPhone X上检查了它，它似乎运行正常，没有任何滞后。

我认为你的iPhone速度慢的原因是因为动画的流畅性不仅取决于代码的质量，还取决于用户设备的性能。过时的浏览器和速度较慢的设备可能是iPhone动画速度慢的两个原因。

虽然有一些方法可以提高动画的效果。

您可以通过优化代码来提高动画的性能。您可以通过限制DOM操作，密切关注动画队列，确保队列不会被卡住，缩小代码，保持动画缩短以及准确链接连续动画来实现此目的。
尽可能使用CSS动画而不是jQuery动画。 JavaScript动画很快，但jQuery会降低它的速度。
- CSS动画比jQuery动画更快的原因之一是CSS中的动画利用硬件加速 - 利用GPU的强大功能来提高动画性能。
同样，您也可以使用Velocity.js或GSAP来改进jQuery动画。这两个库都可以使用或不使用jQuery。 Velocity使用与jQuery animate方法相同的API，GSAP提供了自己的jQuery插件。
使用jQuery 3.0或更高版本，因为它使用原生JavaScript requestAnimationFrame方法。

iOS上的jquery动画排队和慢

1 个答案: