javascript - 使用类或 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 test $.data() 与 $(sel).data() 以及 this presentation 的第 51 张幻灯片.

编辑2:这是另一个nice discussion here on SO 。特别是阅读 patrick dw 的评论!