javascript - 优化 jQuery 以避免 Safari : “This webpage is using significant energy...”

Question

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

This webpage is using significant energy. Closing it may improve the responsiveness of your 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 设置动画，这也会导致性能问题。