属性声明样式与类名声明样式是否存在明显的性能差异？

Question

为什么说声明样式推荐使用class不推荐用[style]这种方式，一个常见的说法是说选择[style]的渲染性能没有.class好，这里我做了浏览器的渲染速度测试。

css

      .one {
        width: 100px;
        height: 50px;
        box-shadow: 1px 1px 1px 1px;
        margin: 50px;
      }

      .two {
        background: lavenderblush;
      }

      .three {
        color: lightblue;
        font-size: 15px;
      }
      [one] {
        width: 100px;
        height: 50px;
        box-shadow: 1px 1px 1px 1px;
        margin: 50px;
      }

      [two] {
        background: lavenderblush;
      }

      [three] {
        color: lightblue;
        font-size: 15px;
      }

.class

      let box = document.getElementById('box');
      let tpl = '';
      for (let i = 0; i < 5000; i++) {
        tpl += `<div class="one">div<p class="two">p</p><span class="three">span</span><i></i><em></em></div>`;
      }
      box.innerHTML = tpl;

[style]

      let box = document.getElementById('box');
      let tpl = '';
      for (let i = 0; i < 5000; i++) {
        tpl += `<div one>div<p two>p</p><span three>span</span><i></i><em></em></div>`;
      }
      box.innerHTML = tpl;

通过chrome的performance观察发现Rendering的速度是差不多的。
那么在实践中是什么样的呢？是否真的存在明显的性能差异？
是否有相关文档可以查阅呢？

Answer 1

请看这篇2014年的英文文章。测试的结论是：

sweating over the selectors used in modern browsers is futile; most selection methods are now so fast it’s really not worth spending much time over.

翻译成中文就是：

在现代浏览器中纠结于使用哪种选择器毫无意义；绝大多数的选择方式都非常之快，根本不值得花费大量时间研究。

Answer 2

谢邀！
我对此问题没有深入研究。个人认为属性选择器和类选择器各有优缺点，在适当的时候使用适当的选择器即可。
类选择器在于可控，在需要的地方加上类名，不需要考虑是什么标签。
属性选择器在于全面，不需要手动添加类名。比如用属性选择器给所有的图片设置最大宽度为100%。如果用类名，你必须要预先设置类名。