为啥我的代码仅在 Safari 桌面上运行缓慢？

Posted 2023-02-21

【中文标题】为啥我的代码仅在 Safari 桌面上运行缓慢？

【英文标题】：Why is my code slow in safari desktop only?为什么我的代码仅在 Safari 桌面上运行缓慢？

【发布时间】：2021-02-08 05:02:13

【问题描述】：

我正在构建一个使用一些动画/库的网站，AOS、simpleParallax 和 slick 是主要的。该网站似乎在除 Safari 桌面之外的所有地方都可以正常运行。它在 Chrome、Firefox、Microsoft edge、Opera 中运行良好，在移动设备上的 Safari 中也运行良好，但在 Safari 桌面上运行非常缓慢且不稳定。

这是我用于“服务”和“常见问题”页面上的滑块的功能

// slider
 (function () 
        var work = $('.js-work'),
            sliderWork = work.find('.js-work-slider');

        sliderWork.slick(
            slidesToShow: 3,
            slidesToScroll: 1,
            dots: false,
            arrows: true,
            prevArrow: sliderWork.parents('.js-work').find('.js-prev'),
            nextArrow: sliderWork.parents('.js-work').find('.js-next'),
            speed: 900,
            adaptiveHeight: true,
            autoplay: true,
            autoplaySpeed: 10000,
            responsive: [
                breakpoint: 1024,
                settings: 
                    slidesToShow: 3
                
            , 
                breakpoint: 768,
                settings: 
                    slidesToShow: 3,
                    focusOnSelect: true,
                    vertical: true,
                    verticalSwiping: true
                
            ]
        );
    )();

这是整个网站使用的视差效果

// parallax effect
(function () 
    var parallax = $('.js-parallax');
    if (parallax.length) 
        parallax.each(function () 
            var _this = $(this),
                scale = _this.data('scale'),
                orientation = _this.data('orientation');

            new simpleParallax(_this[0], 
                scale: scale,
                orientation: orientation,
                overflow: true,
                delay: .6,
                transition: 'cubic-bezier(0,0,0,1)'
            );
        );
    
)();

这是网页主标题上用于 AOS 的 CSS 示例。 AOS 在整个网站上都被大量使用，但我不会说它的使用量过多。

.main__title[data-aos] p span 
  -webkit-transform: translateY(105%);
  -ms-transform: translateY(105%);
  transform: translateY(105%);
  -webkit-transition: -webkit-transform 0.8s;
  transition: -webkit-transform 0.8s;
  -o-transition: transform 0.8s;
  transition: transform 0.8s;
  transition: transform 0.8s, -webkit-transform 0.8s;


.main__title[data-aos].aos-animate p span 
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);


.main__title[data-aos].aos-animate p:first-child span:first-child 
  -webkit-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  transition-delay: 0.2s;


.main__title[data-aos].aos-animate p:first-child span:nth-child(2) 
  -webkit-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  transition-delay: 0.4s;


.main__title[data-aos].aos-animate p:nth-child(2) span:first-child 
  -webkit-transition-delay: 0.6s;
  -o-transition-delay: 0.6s;
  transition-delay: 0.6s;


.main__title[data-aos].aos-animate p:nth-child(2) span:nth-child(2) 
  -webkit-transition-delay: 0.8s;
  -o-transition-delay: 0.8s;
  transition-delay: 0.8s;


.main__title[data-aos].aos-animate p:nth-child(3) span:first-child 
  -webkit-transition-delay: 1s;
  -o-transition-delay: 1s;
  transition-delay: 1s;
 

我几乎不知道如何解决这个问题，它在移动设备上的 safari 中运行良好，但在桌面上完全损坏，这似乎很奇怪。请记住，这个网站仍在进行中，而且我是一个初学者，但我真的很想在进一步研究之前找到这个问题的解决方案。

如果有人能够指出我可能做错了什么，或者可以解释 Safari 可能与其他浏览器不同的操作方式，我将不胜感激！

这里是项目https://secure-hollows-07774.herokuapp.com/

【问题讨论】：

我在您之前的问题的评论中解释过，这不太可能是由您的滑块引起的。我会复制粘贴到这里。

您的延迟问题是由您处理动画的方式引起的。当您滚动时，您会为每个触发的滚动事件（每个像素移动都会触发）更改翻译等。例如，您在主背景上有 0.6 秒的延迟（滚动时向左移动的绿色形状）。当您由于滚动而每 0.1 秒更改一次平移时，您会排队等待所有重叠的动画负载，这会导致延迟。如果您限制滚动速率以匹配您的动画速度，它将解决问题。我会使用 0.3 秒的油门和 0.3 秒的动画来使其流畅。

对不起，我不确定我是怎么错过你的第一条评论的，所以你是说我应该在我的代码中引入一个节流函数？然后更改我的视差函数中的“延迟”以匹配 300 的油门？谢谢你的时间，我很感激

是的，尝试一下，我的意思是不能保证是原因，但过去有过类似的问题，我有 90% 的信心是它。试一试，如果它仍然不起作用，我会为你进一步研究。

@GrahamRitchie 我尝试了 lodash 油门，但似乎并没有解决问题。我不完全确定问题出在视差上，因为我可以删除视差功能，但它仍然非常滞后，而且“关于”页面使用视差功能 6 次，并且与“服务”相比运行平稳，并且视差只使用一次的“常见问题”页面

【参考方案1】：

刚刚在 Safari 上尝试过，我觉得它很棒。也许尝试清除浏览器中的 cookie？

【讨论】：

真的吗？这很奇怪，我已经尝试清除 cookie 和缓存，但仍然没有运气。我之前也把它发给了几个朋友，他们在 Safari 上运行它并说它超级慢。我很困惑

这真的很奇怪。它不仅加载速度快，而且动画非常流畅。

如果您还没有尝试这个，也许可以试试？ discussions.apple.com/thread/…

谢谢，我会试试的。这听起来像是解决我的问题的解决方案，但我仍然担心它在其他人的计算机上会很慢。我知道它对你很有效，但其他人说它很慢。如果你不介意我问，你用的是什么电脑

2016 MB Pro - 如果您愿意，我也可以在 2013 iMac 上试用它吗？