QuerySelector of javascript VS Find()of Jquery

Question

在性能基础上javascript的QuerySelector()或Jquery的Find()最好在代码中使用像速度和有效访问Dom Elements这样的因素

element = document.querySelector(selectors);

要么

element= $(document).find(selectors);

Answer 1

querySelector更高效.它不需要库也不需要构造jQuery对象.

警告,以下内容会阻止您的浏览器,具体取决于您的计算机规格:

const t0 = performance.now();
for (let i = 0; i < 1e6; i++) {
  const div = document.querySelector('div');
}
const t1 = performance.now();
for (let i = 0; i < 1e6; i++) {
  const div = $(document).find('div');
}
const t2 = performance.now();

console.log('querySelector: ' + (t1 - t0));
console.log('jQuery: ' + (t2 - t1));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>some div</div>

也就是说,选择单个元素的性能很少会发生 - 例如,如果它是在嵌套循环中完成的话,它只会被考虑,并且在一秒钟内完成数千次.