更改字体大小时的性能问题答案

【问题标题】：Performance issue while changing font size更改字体大小时的性能问题
【发布时间】：2021-08-14 16:20:51
【问题描述】：

我已将这段代码放在一起，但在掌握它时遇到了问题。当您用光标靠近它们时，我想让单个文本行单独增长。近处的线最大，离得越远的线越小。我有点作品，但不提及性能问题，它并不是完全想要的效果。它运行不顺畅。有没有办法优化代码？

(function() {

  jQuery(document).mousemove(function(e) {
    jQuery(".post__text__content").each( function() {
      $element  = jQuery(".post__text__content");
      mY = e.pageY;
      mX = e.pageX;
      distance = calculateDistance($element, mX, mY);
      fontsize = 80 - distance / 10 ;
      jQuery(this).css("font-size", fontsize)
    })
  });

  function calculateDistance(elem, mouseX, mouseY) {
    return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));
  }

})();

【问题讨论】：

没有 HTML，很难看出它应该如何工作，但由于$element = jQuery(".post__text__content"); 看起来它不会工作 - 所以你所有的计算都将基于单个元素。只需将该行更改为jQuery(this)，它某事更接近您所描述的：jsfiddle.net/5saycp6k
要优化它，找到所有不变的计算/查找，例如elem.offset().left elem.width()（取决于您的HTML）并将它们存储为单个变量（如果都相同） ) 或作为对 elem 的查找，elem.data(width, elem.width()) 这将（*应该）比计算更快的查找
另一个潜在的改进（未测试）是使用类而不是 .css("font-size") - 它可能不那么准确，但有一些过渡效果会更快/更平滑
我也会尝试去抖动你的fontsize 值。只需在某处寻找去抖动功能即可。
我已经编写了代码笔codepen.io/tads_r/pen/OJpgKOX 是的，必须有 jQuery(this) 才能工作。我将在添加的课程中看到过渡。既然我相信 CSS 比 JS 快，那会加快速度吗？

标签： javascript jquery font-size mousemove

【解决方案1】：

似乎上课是要走的路。工作顺利，并具有预期的效果。

我对其进行了一些更改，并将类添加到主要元素及其旁边的元素中。

(function() {
    
  jQuery(".post__text__content").hover(
    function () {
      jQuery(this).prev().addClass("sub_text");
      jQuery(this).addClass("main_text");
      jQuery(this).next().addClass("sub_text");
    },
    function () {
      jQuery(this).prev().removeClass("sub_text");
      jQuery(this).removeClass("main_text");
      jQuery(this).next().removeClass("sub_text");
    }
  );

})();

这是一支工作笔： https://codepen.io/tads_r/pen/WNpKRKw

【讨论】：