javascript - javascript getAttribute 是否影响性能或触发布局？

Question

我正在练习视差，所以在滚动过程中我需要元素的 offsetTop 和高度。而且我知道，当您“获得”此样式属性时，它每次都会触发布局，因此它会影响整体性能。我决定为每个具有功能的元素设置自定义属性，并在窗口调整大小时更新它:

function setAttrs() {
  $sections.each(function() {
    var offsetTop = $(this).offset().top,
        height = $(this).height();
    $(this).attr({"data-offset": offsetTop, "data-height": height});
  });
}

setAttrs();

$(window).on("resize", function() {
  setAttrs();
});

所以，我的问题是 - 滚动处理程序中的属性 getter 是否会以某种方式影响性能？像这样:

var height = $(this).attr("data-height");

我 90% 确定这是个好方法，但我需要确定。

Answer 1

首先，这并不是设置 data-* 属性值的最佳方式:

$(this).data({ offset: offsetTop, height: height });

这不会触及 DOM - jQuery 在其自己的数据结构中维护值。当首次从特定元素引用属性时，它将读取 data-* 属性，但不会在 DOM 中更新它们。还应使用 .data() 进行引用:

var savedHeight = $(this).data("height");

请注意，在使用 .data() API 时删除“data-”前缀。

其次，您在“调整大小”处理程序中对 DOM 执行的任何操作都会影响性能，因为浏览器会以交互方式调整窗口大小时快速触发“调整大小”。确保您的“调整大小”处理程序最多每 50 或 100 毫秒只执行一次工作通常是个好主意。有几种不同的方法可以做到这一点，具体取决于您要达到的效果。