[解決済み] htmlページのIDはいくつまでならOKですか？

質問事項

Single Page Appを制作しているのですが、より具体的なテストを書くために、ページの各セクションにIDを記入した方が良いのではないか、という話をQA担当者としています。

1 つの html ページに常に存在できる ID の数について、"best practice" または既知の制限があるかどうかを知りたいと思いました。

一度に何百という数になる可能性があります。ブラウザが肥大化するのでは？

(この質問をするのに良い場所があれば教えてください)

解決方法を教えてください。

ここでは、DOMから1つの要素を取得しています。次に、DOMに5000個の要素をidで追加し、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で動くようにアップデートしたら、やっぱりサブミリ秒になった。