Question

我练习视差，所以在滚动期间我需要元素的偏移顶点和高度。而且我知道，当你＆＃34;得到＆＃34;它会触发每次布局。这种风格属性，因此它会影响整体性能。我决定使用函数为每个元素设置自定义属性，并在窗口调整大小时更新它：

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-”前缀。

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

Answer 2

当你谈论表演时：

当您在$(this)回调中的三个位置使用each时，最好将其存储在变量中。它也可以避免一些开销。

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

@Pointy提到的其他事情。

Answer 3

参加晚会 - 但我的袖子里有一些基准。

对于原始Element.getAttribute，它永远不会导致重排。在某些浏览器中，它仍然比访问缓存数据慢得多，而在其他浏览器中则不是（jsPerf）。

然而，jQuery的$().attr总是慢于原生Element.getAttribute（jsPerf）。使用其他函数包装DOM方法可能会阻止浏览器进行优化 - I’ve already run across this thing。

正如其他人所指出的那样，$().data应该比$().attr快得多。这是一个jsPerf，但由于网络问题，我无法访问结果。

javascript getAttribute会影响性能还是触发布局？

3 个答案: