Technical and Trade Schools

8 JavaScript Performance Tips I Discovered After Years of Coding

Written by Jetmal singh

JavaScript powers a huge part of the modern web but when projects grow, performance bottlenecks can really slow things down. Over the years, I’ve tackled everything from sluggish animations to pages write for us technology that felt unresponsive on mobile devices. After countless late-night debugging sessions and A/B tests, I’ve distilled eight practical tips that consistently make my apps faster and smoother. Whether you’re building a small widget or a full-scale single‑page application, these practices will help your code run leaner and meaner.

Minimize DOM Access

Every time you read or write to the DOM, the browser may trigger layout and paint operations. These can be expensive, especially inside loops.

  • Batch updates: Collect all DOM changes, then apply them in one go rather than one at a time.

  • Use DocumentFragment: When inserting many elements, build them in a DocumentFragment off‑screen, then append it once.

  • Cache references: Rather than repeatedly calling document.querySelector or traversing from document.body, grab the element once and reuse it.

// Instead of this:
for (let i = 0; i < items.length; i++) {
container.appendChild(createItem(items[i]));
container.classList.add('updated');
}// Do this:
const fragment = document.createDocumentFragment();
items.forEach(item => fragment.appendChild(createItem(item)));
container.appendChild(fragment);
container.classList.add(‘updated’);

Debounce and Throttle Expensive Events

Listening to window resize, scroll, or mousemove events can fire dozens of times per second. If your handlers do heavy work, the page will stutter.

  • Debounce: Delay execution until the event stops firing (good for search inputs or resize).

  • Throttle: Ensure the handler runs at most once every N milliseconds (good for scroll, mousemove).

function throttle(fn, wait) {
let last = 0;
return (...args) => {
const now = Date.now();
if (now - last >= wait) {
last = now;
fn(...args);
}
};
}window.addEventListener(‘scroll’, throttle(handleScroll, 100));

Leverage requestAnimationFrame for Animations

Using setTimeout or setInterval for animations can cause frame drops because they aren’t synced with the browser’s rendering cycle.

  • Use requestAnimationFrame: The browser calls your function right before it’s about to repaint, keeping animations smooth at 60 fps when possible.

  • Cancel when not needed: If your animation leaves the viewport or the user switches tabs, cancel the frame loop to save CPU.

let rafId;

function animate() {
// update positions, styles, etc.
rafId = requestAnimationFrame(animate);
}

// start
rafId = requestAnimationFrame(animate);

// stop
cancelAnimationFrame(rafId);

Avoid Memory Leaks by Cleaning Up

Long‑running single‑page apps can accumulate unused event listeners, large in‑memory caches, or forgotten timers, leading to degraded performance over time.

  • Remove listeners: Always call removeEventListener when a component unmounts or a feature is disabled.

  • Clear intervals/timeouts: Store your timer IDs so you can cancel them.

  • Null out references: If you hold large data structures, explicitly free references when they’re no longer needed.

// Example in a component-like structure
function init() {
window.addEventListener('resize', onResize);
const timerId = setInterval(doHeavyWork, 1000);return () => {
window.removeEventListener(‘resize’, onResize);
clearInterval(timerId);
};
}

Use Modern JavaScript Features Wisely

ES6+ features like arrow functions, const/let, and spread operators improve readability, but some (especially in older browsers) can be transpiled into slower code.

  • Measure polyfill impact: Before including a heavy polyfill (e.g., for Proxy), check if you really need it for your target browsers.

  • Prefer native methods: Methods like Array.prototype.map are optimized in modern engines—use them over manual loops when appropriate.

Lazy‑Load Non‑Critical Resources

Don’t force your users to download every script, image, or stylesheet up front. Use lazy‑loading to split your work:

  • Code splitting: Tools like Webpack or Rollup let you break your code into chunks that load on demand (e.g., when a user navigates to a particular section).

  • Dynamic import(): Modern browsers support dynamically loading modules right when you need them.

  • Intersection Observer: For images and heavy DOM sections, only load or render them when they scroll into view.

// Lazy‑load a module when a button is clicked
button.addEventListener('click', async () => {
const { default: extraFeature } = await import('./extraFeature.js');
extraFeature.init();
});

Compress and Cache Assets

A fast network transfer means your JS files arrive sooner in the user’s browser.

  • Gzip or Brotli: Enable server‑side compression for all text resources.

  • Cache headers: Serve your scripts with long max-age and use fingerprinted filenames so browsers cache them aggressively.

  • Minify and tree‑shake: Remove unused code and whitespace with your bundler to shrink file sizes.

Profile and Optimize Hotspots

You can’t fix what you can’t measure. Use the browser’s dev tools to spot trouble:

  1. Performance panel: Record CPU usage, frame rate, and paint events. Look for large “scripting” blocks.

  2. Memory profiler: Take heap snapshots to see if your memory footprint is growing.

  3. Network tab: Check which assets are largest or slowest to load.

Once you identify a hotspot—whether it’s a slow loop, a big module, or a repeated DOM read—focus your optimization efforts there rather than guessing.

Final Thoughts

Over the years, applying these tips has transformed my projects from sluggish experiments into fast, polished applications that users enjoy. Remember:

  • Always measure before you optimize.

  • Keep your code clean and modular so you can target specific areas.

  • Balance performance gains against development complexity—sometimes a simple tweak is all you need.

Start with the low‑hanging fruit—compression, caching, and batched DOM updates—then dive deeper if performance still lags. With each improvement, your users will thank you with faster loads, smoother interactions, and less frustration.

0 Comments

0 Shares

Leave a Reply