---只有程序员才懂的幽默---
世界上最遥远的距离，是我在if里，你在else里，虽然经常一起出现，但却永不结伴执行。
今天在测试时发现了一个有趣的问题：关于自定义属性dataset和setAttribute两个的性能的比较，一般情况下我们会使用dataset，肯定是性能更优才会使用，但经过一轮测试下来，我们需要注意了，setAttribute的性能要高于dataset的。
测试环境为：Google Chrome版本 54.0.2840.99 m
代码如下：
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>index</title>
<style type="text/css">
*{margin:0; padding:0;}
</style>
</head>
<script>
document.addEventListener('DOMContentLoaded',function(){
var oBtn=document.getElementsByTagName('input')[0];
oBtn.onclick = function(){
console.time('abc');
for(var i=0; i<20000; i++){
this.setAttribute('a'+Math.random(),Math.random()); //584ms 727ms
//this.dataset['a'+Math.random()] = Math.random(); //716ms 845ms
}
console.timeEnd('abc');
};
},false);
</script>
<body>
<input type="button" value="LOL" data-job="game" data-personA="剑圣" data-map="德拉诺之王" />
</body>
</html>
备注是两次不同时间段测试的结果，都是setAttribute的性能更优。
因浏览器版本不同，性能优化程度不同、以及后续作者的不断优化，我们需随时关注两个代码的性能问题，目前仍推荐使用dataset。
网友评论