JavaScript Performance Optimization Techniques
Learn how to write faster and more efficient JavaScript code.
Minimize DOM Access
DOM operations are expensive:
// Bad - multiple DOM reads
for (let i = 0; i < 1000; i++) {
document.getElementById('list').innerHTML += '
';}
// Good - batch updates
let html = '';
for (let i = 0; i < 1000; i++) {
html += '
';}
document.getElementById('list').innerHTML = html;
Use Event Delegation
// Instead of adding listeners to each item
document.getElementById('list').addEventListener('click', (e) => {
if (e.target.tagName === 'LI') {
handleClick(e.target);
}
});
Debounce and Throttle
Limit function execution frequency:
function debounce(fn, delay) {
let timeout;
return (...args) => {
clearTimeout(timeout);
timeout = setTimeout(() => fn(...args), delay);
};
}
Lazy Loading
Load resources only when needed:
- Use loading="lazy" for images
- Dynamic imports for code splitting
Memory Management
- Remove event listeners when done - Clear intervals and timeouts - Avoid memory leaks with closures