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

我在练习视差，所以在滚动过程中我需要元素的偏移和高度。我知道，每次当你得到这个样式属性时，它都会触发布局，所以它会影响整体性能。我决定使用函数为每个元素设置自定义属性，并在调整窗口大小时进行更新：

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%肯定这是一个好方法，但我需要确定。

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

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

这不涉及DOM-jQuery在其自己的数据结构中维护这些值。当它们第一次从特定元素引用时，它将读取data-*属性，但不会在DOM中更新它们。还应使用以下数据进行参考：

请注意，在使用.dataAPI时，您删除了数据前缀

---

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

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

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

这不涉及DOM-jQuery在其自己的数据结构中维护这些值。当它们第一次从特定元素引用时，它将读取data-*属性，但不会在DOM中更新它们。还应使用以下数据进行参考：

请注意，在使用.dataAPI时，您删除了数据前缀

---

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

当您谈论性能时：

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

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

---

@Pointy提到的其他事项。

当您谈论性能时：

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

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

---

@Pointy提到的其他事情。

晚会迟到了，但我有一些基准

至于raw Element.getAttribute，它不会导致回流。在某些浏览器中，它仍然比访问缓存数据慢得多，而在其他浏览器中则不然

但是，jQuery的$.attr总是比原生元素.getAttribute慢得多。可能用另一个函数包装DOM方法会阻止浏览器进行优化

---

正如其他人指出的，$.data应该比$.attr快得多。尽管由于网络问题，我无法访问结果，但这里有一个解决方案。

晚会迟到了，但我有一些基准

至于raw Element.getAttribute，它不会导致回流。在某些浏览器中，它仍然比访问缓存数据慢得多，而在其他浏览器中则不然

但是，jQuery的$.attr总是比原生元素.getAttribute慢得多。可能用另一个函数包装DOM方法会阻止浏览器进行优化

---

正如其他人指出的，$.data应该比$.attr快得多。尽管由于网络问题，我无法访问结果，但这里有一个解决方案。

而不是var height=$this.attrdata height；，使用var height=$this.dataheight；。jQuery有一个数据属性的getter/setter。@我认为获取HTML5数据属性的.attr和.data方法都是合法的。唯一的问题是，.data不允许写入OP在本例中不需要但很好知道的操作，并且它在运行时获取值，对属性值的动态更改不会反映在.data中，但会反映在.attr中。@Terry:什么时候开始不允许写操作了？从什么时候开始，它就不能反映DOM的最新状态了？这太傻了…@Cerbrus它确实允许写入，但不修改DOM：它改为写入jQuery数据对象。为什么这是一个问题？如果使用的是数据属性，通常希望以任何方式使用相同的库获取/设置它。而不是var height=$this.attrdata height；，使用var height=$this.dataheight；。jQuery有一个数据属性的getter/setter。@我认为获取HTML5数据属性的.attr和.data方法都是合法的。唯一的问题是.data不允许写入OP在这种情况下不需要的内容，但是很好

---

要知道，并且它在运行时获取值，对属性值的动态更改不会反映在.data中，而是会反映在.attr中。@Terry:什么时候开始不允许写操作了？从什么时候开始，它就不能反映DOM的最新状态了？这太傻了…@Cerbrus它确实允许写入，但不修改DOM：它改为写入jQuery数据对象。为什么这是一个问题？如果您使用的是数据属性，您通常希望以任何方式使用相同的库获取/设置它。1我知道.data api，但我不知道它的工作方式有所不同。Thx的答案，我会用这个。2我知道调整大小，稍后我将使用去盎司功能，提供的代码更像是概念证明。@NikolayTalanov OK:祝你好运！！1我知道.data api，但我不知道它的工作方式有所不同。Thx的答案，我会用这个。2我知道调整大小，稍后我将使用去盎司功能，提供的代码更像是概念证明。@NikolayTalanov OK:祝你好运！！