Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

谈选择器性能简直是耍流氓

  最近经常有人和我说 .a-b.a.b 快,这个结论理论上确实没问题,但那些老把选择器性能挂在嘴边的人有几个自己做个测试的呢?以前雅虎团队搞的 CSS 选择器性能研究相关文章在网络上传,于是大家脑子里就出现了个「选择器性能」的概念,但我觉得更多的是误会吧。
  很多人仅仅是「听说这样很慢」而已,至于这个结论是否正确,或者具体慢多少之类的问题完全懒得思考。选择器确实有性能问题,但不在于多一个或少一个基本选择器。.a-b.a.b 能差多少?没有数据,说再多都是废话,于是我们可以做如下测试: <button>div {color:blue;}</button>
<button>.div {color:green;}</button>
<button>.div.item {color:orange;}</button>
<button>[class^="div"] {color:red;}</button>
<button>[class*="tem"] {color:purple;}</button>
<style></style>
<script>
var s=[];
for(var i=0;i<65536;i++){
  s.push('<div class="div item">'+i+'</div>');
};
document.write(s.join(''));
document.onclick=function(e){
  e=e.target;
  if(e.tagName!='BUTTON') return;
  var rules=e.textContent;
  var style=document.querySelector('style');
  var timestamp=Date.now();
  style.textContent=rules;
  setTimeout(function(){
    console.log('%c'+(Date.now()-timestamp),rules.match(/color:\w+/)[0]);
  });
};
</script>


  以上是 Mac 上的测试,实际上这些测试的结果都是差不多的,数据都在误差范围内(我记得去年还是前年测试的时候属性选择器会慢很多,貌似目前已经被浏览器优化掉了,也可能是平台问题)。所以,不要再纠结一两个类选择器的性能差异,比起具体样式对性能的影响(特别是会触发 layout 的样式),选择器的性能根本就可以忽略不计。
网名:
54.226.58.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^