javascript - javascript 的 QuerySelector VS Jquery 的 Find()

Question

关于 javascript 的性能基础 QuerySelector() 或 Jquery 的 Find() 更适合在代码中使用 speed 和高效访问 Dom 元素

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>

也就是说，选择单个元素的性能几乎无关紧要 - 我认为只有在嵌套循环中完成并且在一秒钟内完成数千次时才需要考虑。