Run results for: JavaScript Parsing HTML5 data Attributes

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Safari/537.36

Browser: Chrome 97

Operating system: Windows

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
getAttribute and setAttribute	523681.4 Ops/sec
jQuery data() method	352869.2 Ops/sec
HTML5 dataset API	428344.8 Ops/sec

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>

<div id="msglist" data-user="bob" data-list-size="5" data-maxage="180"></div>

Tests:

getAttribute and setAttribute
var msglist = document.getElementById("msglist"); var show = msglist.getAttribute("data-list-size"); msglist.setAttribute("data-list-size", +show+3);
jQuery data() method
var msglist = $("#msglist"); var show = msglist.data("list-size"); msglist.data("list-size", +show+3);
HTML5 dataset API
var msglist = document.getElementById("msglist"); var show = msglist.dataset.listSize; msglist.dataset.listSize = +show+3;

Run results for: JavaScript Parsing HTML5 data Attributes

https://www.sitepoint.com/use-html5-data-attributes/

getAttribute and setAttribute

jQuery data() method

HTML5 dataset API