querySelector为什么会存在性能问题？

Question

querySelector相较getElement系列。。。为什么会存在性能问题？我看网上没有很好的解答。既然存在性能问题，为什么很多库里面也大量使用该方法？

Answer 1

querySelector 选择符选出来的元素及元素数组是静态的，而 getElement 这种方法选出的元素是动态的。

静态的就是说它不会随着 dom 操作而改变，动态的 dom 变了也会跟着变

至于问什么很多库在用，可能是因为方便吧，毕竟 getElement 要选的层级多又是id又是class的，很麻烦，querySelector 的话用css选择器就可以了，到底用哪个看个人选择了

Answer 2

感觉应该是 querySelector 支持通用选择器的写法，而 getElemet(s)ByXXX 系列则一开始就限制了能使用的选择器类型，这会导致前者每次都需要完整得解析整个选择器文本（过程中需要检查是否有语法错误）然后再去 DOM 树里找，而后者一开始就知道你给它的选择器文本是不是有效的。

Answer 3

理论上经过优化的querySelector命令应该和渲染引擎中CSS选择器使用相同的代码，只要CSS的速度有多快querySelector的速度就有多快，当然这只是理论上