Question

我在网页上遇到Safari警告消息，但是我只使用了少量自定义jQuery。

此网页消耗大量能量。关闭它可以提高Mac的响应速度。

我在下面包含了我的jQuery，有人可以建议这可能是原因吗？我看不到其中任何会占用大量资源并导致出现警告的特定内容。

我可以优化此代码以减少对用户的影响吗？

<script>
  jQuery(document).ready(function() {
    jQuery('.fa-user-o').click(function() {
      jQuery('#modalBkg').fadeIn(300);
    });
  });

  jQuery(document).ready(function() {
    jQuery('.fa-times-rectangle').click(function() {
      jQuery('#modalBkg').fadeOut(300);
    });
  });
</script>

<script>
  jQuery(document).ready(function() {
    jQuery('.fa-align-justify').click(function() {
      jQuery('.aby-sticky-menu').slideToggle();
    });
  });
</script>

<script>
  jQuery(function($) {
    $(document).on('click', 'li.vc_tta-tab a,li.vc_tta-tab,.vc_tta-panel-title', function() {
      $('html, body').stop();
    });

  });
</script>

<script>
  jQuery(".fa-times-rectangle").mouseover(function() {
    jQuery(".modalBody, .modalLeft").animate({
      opacity: 0.4
    });
  }).mouseleave(function() {
    jQuery(".modalBody, .modalLeft").animate({
      opacity: 1
    });
  });
</script>

Answer 1

这里的主要问题是您使用mouseover，它会向鼠标移动到附加事件的元素上的每个像素触发一次。与动画结合使用时，对系统的要求可能很高。更好的解决方法是改为使用mouseenter，这可以通过使用hover()

来实现

使用CSS甚至比使用CSS更好，但这需要.modalBody和.modalLeft元素是.fa-times-rectangle的兄弟姐妹或后代，在上下文中这似乎不太可能。 / p>

还要注意，您不需要多个script标签，可以将它们组合为一个。同样，您不需要多个document.ready事件处理程序，将它们组合为一个。

以上所述，请尝试以下操作：

<script>
  jQuery(function($) {
    $('.fa-user-o').click(function() {
      $('#modalBkg').fadeIn(300);
    });

    $('.fa-align-justify').click(function() {
      $('.aby-sticky-menu').slideToggle();
    });

    $(document).on('click', 'li.vc_tta-tab a, li.vc_tta-tab, .vc_tta-panel-title', function() {
      $('html, body').stop();
    });

    $(".fa-times-rectangle").click(function() {
      $('#modalBkg').fadeOut(300);
    }).hover(function() {
      $(".modalBody, .modalLeft").animate({
        opacity: 0.4
      });
    }, function() {
      $(".modalBody, .modalLeft").animate({
        opacity: 1
      });
    });
  });
</script>

顺便说一句，我将检查对$('html, body').stop()的调用是否实际上在做什么，因此是否需要。这样做似乎很奇怪，因为这意味着您要对整个body进行连续动画处理，这也会导致性能问题。

优化jQuery以避免Safari：“此网页耗费了大量精力...”

1 个答案: