I get a lot of questions around web performance, and specifically, around the relative performance between different approaches. That includes things like…
- Should I use
- Should I use a
- Should I attach events on individual elements or use event delegation?
Caring about web performance is great! More developers in our industry should.
But focusing on tiny optimizations like this too early in the process can derail you from actually writing working code.
And unless you’re writing code that runs tens of thousands of operations a second, these small performance differences aren’t likely to make any perceivable difference on performance, anyways.
getElementById() is more than twice as fast as the
querySelector() method. But the
querySelector() method can still run 7 million operations per second in the latest version of Chrome. That’s not slow, even if it’s slower than another method. Switching methods is unlikely to yield any meaningful performance gains unless you’re doing incredibly high volume operations.
So what kinds of things do matter for performance?
- Memory allocation. The more data you store in memory (active variables, event listeners, and so on), the slower your site gets, especially on older devices.