时间戳

首页 > 解决方案 > 一个html页面中有多少个ID？

javascript - 一个html页面中有多少个ID？

问题描述

我正在开发一个单页应用程序，我们正在与 QA 人员进行对话，而我们应该在页面的每个部分填写带有 ID 的页面以编写更具体的测试。

我想知道在任何给定时间单个html页面中可以存在多少个ID是否存在“最佳实践”或已知限制。

我们可能一次有数百个。它会膨胀浏览器吗？

（如果有更好的地方问这个问题，请告诉我）

标签： javascripthtmlcss

解决方案

在这里，我从 DOM 中获取单个元素，然后将 5000 个具有 id 的元素添加到 DOM，然后选择第 1000 个元素。如您所见，5000 对于浏览器来说很容易，所以我想说这对于任何页面来说都绰绰有余。随意玩弄这些数字，看看性能从哪里开始下降，或者使 DOM 变得比一堆无样式跨度更复杂。

let start = performance.now();
let div = document.getElementById('single');
console.log(performance.now() - start);

for (let i = 0; i < 5000; i++) {
  let span = document.createElement('span');
  span.id = 'test_' + i;
  span.innerText = i + ' ';
  document.body.appendChild(span);
}

start = performance.now();
div = document.getElementById('test_1000');
console.log(performance.now() - start);
console.log(div.innerText);
<div id="single"></div>

我刚刚更新它以在 IE 中工作，它仍然是亚毫秒。

推荐阅读