JS中获取data-price属性值的最快方法

嘿，这个问题我太有发言权了！你想要的那种像div[0].id一样高性能的写法完全存在，而且思路和你提到的最优方案一致——直接访问原生DOM元素的属性，完全绕开冗余的封装层，性能拉满。

针对data-price这种自定义数据属性，原生DOM提供了dataset对象来专门处理这类属性，你只需要这么写：

div[0].dataset.price

这种写法和div[0].id属于同一性能梯队，都是直接读取DOM对象的内存属性，是最快的实现方式。

不同写法的性能对比 #

给你整理下各类获取方式的性能差异（数据来自专业性能测试）：

理想语法（性能最优）

div[0].id: 48ms // 最快的实现方式
div[0].dataset.price: 性能与上述写法几乎一致

替代语法（性能较慢）

div.attr('data-price'): 1545ms // 最慢的方式，因为jQuery做了大量封装处理
div[0].getAttribute('data-price'): 74ms // 比直接访问属性多了一层API调用

为啥直接访问属性这么快？核心原因是：div.attr()是jQuery的封装方法，内部要处理兼容性、参数校验等一堆逻辑，开销自然大；getAttribute是标准DOM API，需要调用方法来获取属性值，多了一层调用栈；而直接访问dataset.price或者id这类属性，是直接读取DOM对象在内存中的属性值，没有额外开销，所以性能最优。

内容的提问来源于stack exchange，提问作者Michael