最近给一个项目做code review, 看到代码里大量用到了querySelector或者querySelectorAll 来检索元素，而检索条件仅仅是元素的class或者ID。
当我问了为什么不用 document.getElementById 和 document.getElementsByClassName 他们只说这样方便，跟使用jQuery差不多。确实jQuery是一个优秀的库，给我们带来了很多好处，甚至影响了DOM API的定制，然而不是所有类似的东西都是最优的, 性能是最高的，尤其是在某些特定情况下。下面我们从几个方面比较一下querySelector和传统API，
可读性
看下面这两组方法，很明显，传统的命名比querySelector更容易让程序员理解。
返回值
querySelector 和 getElementById 没有区别，都是返回一个元素，所以不用担心。
但另外一组方法，他们的返回值就有区别了，
先看代码：
执行结果：
querySelectorAll 返回的是NodeList
getElementsByClassName 返回的是HTMLCollection
尽管NodeList基本上和HTMLCollection挺像，但他们是有区别的。HTMLCollection 仅仅包含元素节点。而NodeList不仅包含元素节点，还包含了诸如文字，注释等特殊节点。
最重要的性能
从measurethat.net看到了这两种方法吧性能比较，传统的方法性能是最好的。详细信息，可以参阅下列文章。
Benchmark: getElementById VS querySelector (simple comparison) - MeasureThat.net
https://www.measurethat.net/Benchmarks/Show/16208/2/getelementbyid-vs-queryselector-simple-comparison
Benchmark: getElementsByClassName VS querySelectorAll (simple comparison) - MeasureThat.net
https://www.measurethat.net/Benchmarks/Show/16209/0/getelementsbyclassname-vs-queryselectorall-simple-compa
懒人可以直接看结果截图如下，数值越高说明每秒执行次数越多，性能越好