Question

我认为减少掉document.querySelector，document.getElementById等等的数量是一个好习惯（这是什么合适的术语？）。但是，我网站的每个页面上都有许多不同的脚本运行。这就是为什么我想在每一页上“ const body = document.body”。这是个好主意吗？

以防万一，我的意思不是很清楚，我相信以下示例会有所帮助：

HTML：

<body>
  <header></header>
  <nav></nav>
  <main></main>
  <footer></footer>
</body>

实践A

const header = document.querySelector('header');    
const nav = document.querySelector('nav'); 
const main = document.querySelector('main'); 
const footer = document.querySelector('footer');

实践B

const body = document.body;
const header = body.querySelector('header');
const nav = body.querySelector('nav');
const main = body.querySelector('main');
const footer = body.querySelector('footer');

感谢您的帮助。

Answer 1

差异确实很小，我认为这不值得解决，但是实践B在我的浏览器中是ever-so-slightly faster（Brave 0.66.61 Chromium：74.0.3729.131（官方构建）dev （64位））。

两个测试（每个测试有4个查询）都在大约.000008秒（每秒120,000次）中运行，因此，除非您执行数十万次，否则不会有任何区别。

Answer 2

通常，您总是可以假设进入DOM树的深度越小，JS要做的工作就越少。因此，如果将DOM节点存储在变量中，然后从该节点访问其子节点，则它总是比从根节点执行它更快。但是，由于body只是第一级节点，因此除非您执行数十万个DOM查询并进行第二次更新，否则我认为不会显着提高性能。

希望有帮助！

记录每一页是否都是好习惯？

2 个答案: