使用类或jQuery数据在dom元素上存储数据是否更快

Question

我有一个渲染循环,在每次迭代时更新许多DOM元素的状态.代码必须基于从外部数据源获得的值将表示类应用于每个元素.

例如

var animationFrames = // Result of http get request

for (var i in animationFrames) {
    var frame = animationFrames[i];

    // This function reads data from the frame variable and updates
    // the presentational layer
    updateDomElements(frame);
}

var updateDomElements = function (frame) {
    var rooms = frame.rooms;

    for (var i in rooms) {
        var room = rooms[i];

        var roomEl = $(room.id);

        if (!roomEl.hasClass(room.class)) {
            roomEl.attr("class", room.class);
        }
    }
}

我想知道在DOM中存储表示数据的最有效方法是什么？我担心每次迭代读取类字符串都会太贵.

使用jQuery data()API然后设置类会更好吗？是否有一种我没有想到的更高效的方法？

Answer 1

我找不到我的参考,但是我记得使用的$.data()是最快的(比$(selector).data()jQuery 更快.将数据存储在内存中并且不使用DOM.

与DOM的任何交互都比访问内存中的数据值慢.

编辑:在从jQuery.data()评论...这里是一个jsPerf测试的$.data()VS $(sel).data(),以及幻灯片51 此演示文稿.

编辑2:这是关于SO的另一个很好的讨论.特别是阅读patrick dw的评论!