优化 jQuery 以避开 Safari：“这个网页正在消耗大量能量……”

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，但这需要 .modalBody 和 .modalLeft 元素是 .fa-times-rectangle 的兄弟姐妹或后代，考虑到上下文，这似乎不太可能。

另外请注意，您不需要多个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 设置动画，这也会导致性能问题。