Reputation: 3934
I'm working on a Single Page App and we are having a conversation with the QA person whereas we should fill in the page with ID on each section of the page to write more specific tests.
I was wondering if there is a "best practice" or a known limit on how many IDs can be present in a single html page at any given time.
We could potentially end up with hundreds at a time. Will it bloat up the browser?
(please let me know if there is a better place to ask this question)
Upvotes: 2
Views: 1438
Reputation: 21638
Here I am getting a single element from the DOM, then I add 5000 elements with ids to the DOM and then select the 1000th one. As you can see 5000 is easy for the browser so I would say that is more than enough for any page. Feel free to play with the numbers and see where performance starts to degrade or make the DOM more complex that a heap of unstyled spans.
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>
I just updated it to work in IE and it was still sub millisecond.
Upvotes: 1
Reputation: 2603
Instead of adding extra ID's, you could add class names that end up minified on Production, or, what I see as a better version, create your own data attribute. For example:
<button class='login __qa-login-confirm-button'>
// Using data attribute:
<button class='login' data-qa='login-confirm-button'>
Class names are usually switched to something of the sort by most SPA frameworks.
<button class='ax1 vbw'>
// Or, using data attribute, the data-qa could be stripped down in Prod:
<button class='ax1'>
Using your own data- attribute would require a bit more work on the deployment to remove them, but has the added benefit of no overhead for your application and being more clear and less error-prone (for example, in the SPA we develop, sometimes a class name that is meant for QA is accidentally edited or deleted).
Upvotes: 1