html 頁面中有多少個 ID？

Question

我正在開發一個單頁應用程序，我們正在與 QA 人員進行對話，而我們應該在頁面的每個部分填寫帶有 ID 的頁面以編寫更具體的測試。

我想知道在任何給定時間單個 html 頁面中是否存在“最佳實踐”或已知限制。

我們可能一次有數百個。 它會膨脹瀏覽器嗎？

（如果有更好的地方問這個問題，請告訴我）

Answer 1

您可以添加 class 名稱，而不是添加額外的 ID，這些名稱最終會在生產中縮小，或者，我認為這是一個更好的版本，創建您自己的數據屬性。 例如：

在開發模式下：

<button class='login __qa-login-confirm-button'>

// Using data attribute:
<button class='login' data-qa='login-confirm-button'>

Class 名稱通常被大多數 SPA 框架切換為某種名稱。

生產中：

<button class='ax1 vbw'> 

// Or, using data attribute, the data-qa could be stripped down in Prod:
<button class='ax1'>

使用您自己的 data- 屬性將需要更多的部署工作來刪除它們，但具有額外的好處，即您的應用程序沒有開銷，並且更清晰且不易出錯（例如，在我們開發的 SPA 中，有時用於 QA 的 class 名稱被意外編輯或刪除）。

Answer 2

在這里，我從 DOM 中獲取單個元素，然后將 5000 個具有 id 的元素添加到 DOM，然后將 select 添加到第 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 中工作，它仍然是亞毫秒。