JavaScript Performance Tips I Discovered After Years of Coding

JavaScript is one of the most powerful and flexible programming languages out there. Whether you’re building simple websites, complex applications, or interactive user experiences, JavaScript is almost always part of the equation. But as your projects grow in size and complexity, performance becomes critical. After years of coding and working on real-world projects, I’ve discovered many practical tips to write faster and more efficient JavaScript. In this post, I’ll share some of the best performance tips that have helped me deliver smoother, quicker, and more optimized web experiences.

If you’re new here, check out my services or some of my work to see what I do.

1. Minimize DOM Manipulation

Direct manipulation of the Document Object Model (DOM) is one of the most performance-intensive operations in JavaScript. Each time you access or modify DOM elements, the browser may need to recalculate styles, layouts, and repaint the page, leading to potential performance bottlenecks, especially in complex or dynamic web applications.​

Why Minimizing DOM Manipulation Matters

  • Performance Optimization: Frequent and unnecessary DOM interactions can lead to sluggish user interfaces and increased load times.

  • Enhanced User Experience: Efficient DOM handling ensures smoother interactions, leading to better user satisfaction.

  • Improved SEO: Search engines favor websites that load quickly and provide seamless user experiences, which can positively impact your site’s search rankings.​

Best Practices to Reduce DOM Manipulation

  1. Batch DOM Updates: Instead of making multiple individual changes, group them together to minimize reflows and repaints.​

    Example:

    javascript
    // Inefficient approach
    const title = document.querySelector("h1");
    title.style.color = "red";
    title.style.fontSize = "24px";    // Optimized approach
    const title = document.querySelector(“h1”);
    title.style.cssText = “color: red; font-size: 24px;”;

  2. Utilize DocumentFragment: When adding multiple elements to the DOM, use DocumentFragment to append them all at once, reducing the number of reflows.​

    Example:

    javascript
    const fragment = document.createDocumentFragment();
    const items = ['Item 1', 'Item 2', 'Item 3'];    items.forEach(text => {
    const li = document.createElement(‘li’);
    li.textContent = text;
    fragment.appendChild(li);
    });document.querySelector(‘ul’).appendChild(fragment);

  3. Cache DOM Queries: Repeatedly querying the DOM can be expensive. Store references to frequently accessed elements.​

    Example:

    javascript
    // Instead of querying each time
    document.querySelector("#submit").addEventListener("click", submitForm);    // Cache the element
    const submitButton = document.querySelector(“#submit”);
    submitButton.addEventListener(“click”, submitForm);

  4. Avoid Layout Thrashing: Reading and writing to the DOM in quick succession can cause multiple reflows. Structure your code to perform all reads first, followed by writes.​

    Example:

    javascript
    // Inefficient
    const height = element.offsetHeight;
    element.style.height = (height + 10) + "px";    // Efficient
    const height = element.offsetHeight;
    const newHeight = height + 10;
    element.style.height = newHeight + “px”;

  5. Use Class Manipulation: Instead of altering multiple style properties individually, toggle classes to apply predefined styles.

    Example:

    javascript
    // Inefficient
    element.style.display = "none";    // Efficient
    element.classList.add(“hidden”);

    Assuming you have a CSS class .hidden { display: none; } defined.

Implementing These Practices

By adopting these strategies, you can significantly enhance the performance of your web applications. Efficient DOM manipulation not only ensures faster load times but also provides a smoother user experience, both of which are critical factors for SEO and user retention.

2. Use Event Delegation

Event delegation is a powerful JavaScript technique that enhances performance and simplifies code management. Instead of attaching individual event listeners to each child element (e.g., every button in a list), you attach a single listener to a common parent element. This listener then handles events as they bubble up from the child elements.​

Why Event Delegation Matters

  • Improved Performance: Reduces the number of event listeners, leading to better memory usage and faster execution, especially in applications with many interactive elements.

  • Simplified Code Maintenance: Centralizes event handling logic, making the codebase cleaner and easier to manage.

  • Dynamic Content Handling: Automatically manages events for elements added to the DOM dynamically, eliminating the need to add event listeners to new elements manually.(​With Code Example)

How Event Delegation Works

Event delegation leverages the concept of event bubbling in the DOM. When an event occurs on a child element, it bubbles up to its ancestors. By placing an event listener on a parent element, you can intercept these events and determine which child element triggered them using the event.target property.​

Example: Handling Button Clicks with Event Delegation

Suppose you have a list of buttons within a <ul> element, and you want to handle click events on each button. Instead of adding a click listener to every button, you can delegate the event handling to the parent <ul>:​

javascript
document.getElementById("list").addEventListener("click", function(event) {
if (event.target.tagName === "BUTTON") {
console.log("Button clicked!", event.target);
}
});

In this example, the click event listener is attached to the <ul> element with the ID list. When a button inside this list is clicked, the event bubbles up to the <ul>, and the listener checks if the event’s target is a <button> element before executing the desired logic.​

Best Practices for Event Delegation

  1. Choose the Right Parent Element: Attach the event listener to the closest common ancestor of the elements you want to monitor. This minimizes unnecessary event handling on unrelated elements.​

  2. Use Event Targeting Carefully: Utilize event.target to identify the actual element that triggered the event. Ensure you check for the correct tag name or class to avoid unintended behavior.​

  3. Handle Dynamic Elements: Event delegation is especially useful when dealing with elements that are added to the DOM after the initial page load. Since the listener is on the parent, newly added child elements will automatically be handled.​

  4. Avoid Overusing Delegation: While event delegation is powerful, it’s not always the best choice. For events that don’t bubble (like focus or blur), or when dealing with a small number of elements, attaching individual listeners might be more appropriate.​\

3. Throttle and Debounce Heavy Functions

In modern web applications, certain events like scrolling, resizing, or typing can fire numerous times per second. If you attach a function to these events without any control, it can lead to performance issues, causing laggy interfaces and a poor user experience.​

Understanding the Problem

Consider a scenario where you have a function that executes every time a user resizes the browser window. Without any regulation, this function could run hundreds of times during a single resize action, overwhelming the browser and leading to performance degradation.​

The Solution: Throttling and Debouncing

To mitigate this, JavaScript developers employ two techniques: throttling and debouncing. Both methods control how often a function is executed in response to rapid, repetitive events.​

Debouncing

Debouncing ensures that a function is executed only after a specified period of inactivity. It’s particularly useful for events that don’t need to fire continuously but rather after the user has stopped performing an action.​

Use Cases:

  • Search input fields: Triggering a search function only after the user has stopped typing.

  • Window resize events: Adjusting layout or elements only after the resizing has stopped.​

Example:

javascript
function debounce(fn, delay) {
let timeout;
return function (...args) {
clearTimeout(timeout);
timeout = setTimeout(() => fn.apply(this, args), delay);
};
}window.addEventListener(“resize”, debounce(() => {
console.log(“Window resized”);
}, 300));

In this example, the debounce function ensures that the resize event handler executes only after 300 milliseconds have passed without another resize event.​

Throttling

Throttling, on the other hand, ensures that a function is executed at most once in a specified time interval, regardless of how many times the event is triggered.​

Use Cases:

  • Scroll events: Loading more content or updating UI elements at controlled intervals during scrolling.

  • Mouse movement: Tracking cursor position without overwhelming the application with rapid updates.​

Example:

javascript
function throttle(fn, limit) {
let inThrottle;
return function (...args) {
if (!inThrottle) {
fn.apply(this, args);
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
};
}window.addEventListener(“scroll”, throttle(() => {
console.log(“Scroll event triggered”);
}, 200));

Here, the throttle function ensures that the scroll event handler executes at most once every 200 milliseconds, regardless of how frequently the scroll event fires.​

Choosing Between Debounce and Throttle

Understanding when to use each technique is crucial:(​flaco.dev)

  • Debounce: Use when the action should occur after the event has stopped firing. Ideal for scenarios like search inputs or window resizing.​

  • Throttle: Use when the action should occur at regular intervals during the event firing. Suitable for scenarios like scrolling or mouse movements.​

For a more in-depth comparison and additional examples, you might find this article helpful:​

“Debouncing and Throttling Explained Through Examples”

Implementing with Libraries

While writing your own debounce and throttle functions is educational, in production environments, it’s often better to use well-tested utility libraries like Lodash.​

Using Lodash:

javascript

import { debounce, throttle } from 'lodash';

const debouncedFunction = debounce(() => {
console.log(“Debounced function executed”);
}, 300);

const throttledFunction = throttle(() => {
console.log(“Throttled function executed”);
}, 200);

Lodash’s implementations are robust and offer additional features like options for leading and trailing execution.

4. Avoid Memory Leaks

Memory leaks occur when your application retains memory that it no longer needs, leading to performance degradation and potential crashes over time. In JavaScript, common causes of memory leaks include unremoved event listeners, global variables, and lingering references to large objects.​

Why Memory Leaks Matter

  • Performance Degradation: Accumulating unused memory can slow down your application, causing delays and unresponsiveness.

  • Increased Memory Usage: Unreleased memory consumes system resources, potentially leading to crashes or slowdowns.

  • Difficult Debugging: Memory leaks can be challenging to identify and fix, especially in complex applications.​

Best Practices to Prevent Memory Leaks

1. Remove Event Listeners When They’re No Longer Needed

Event listeners can prevent garbage collection if they reference DOM elements that are removed. Always remove event listeners when they’re no longer required.​(CodingEasyPeasy)

Example:

javascript
function handleClick() {
console.log("Button clicked");
}const btn = document.getElementById(“myBtn”);
btn.addEventListener(“click”, handleClick);// Later on
btn.removeEventListener(“click”, handleClick);

In this example, the removeEventListener method is used to detach the handleClick function from the click event of the btn element, preventing a potential memory leak.​

2. Avoid Global Variables Unless Necessary

Global variables persist for the lifetime of the application and can unintentionally hold references to objects, preventing them from being garbage collected.​matcha.fyi

Best Practice:

  • Use let and const to declare variables within the appropriate scope.

  • Encapsulate variables within functions or modules to limit their lifespan.​Codez Up+1Mbloging+1Mbloging

Example:

javascript
(function() {
let localVariable = "This is a local variable";
// localVariable is not accessible outside this function
})();

By using an immediately invoked function expression (IIFE), the localVariable is scoped locally and is eligible for garbage collection once the function execution completes.​

3. Nullify References to Large Objects When Done

Large objects or DOM elements can consume significant memory. Once they’re no longer needed, set their references to null to allow garbage collection.​

Example:

javascript

let largeObject = new Array(1000000).fill("Memory intensive data");

// After use
largeObject = null; // Now eligible for garbage collection

Setting largeObject to null removes the reference, allowing the JavaScript engine to reclaim the memory.​

4. Be Cautious with Closures

Closures can inadvertently capture variables, leading to memory leaks if not handled properly.​matcha.fyi+2Codez Up+2InfiniteJS Blog+2

Best Practice:

  • Avoid unnecessary closures that retain large objects or DOM references.

  • Ensure closures are used within the appropriate scope and are dereferenced when no longer needed.​matcha.fyi

Example:

javascript
function createClosure() {
const largeData = new Array(1000000).fill("Large data");
return function() {
console.log(largeData[0]);
};
}const closure = createClosure();
// After use
closure = null; // Dereference the closure

By setting closure to null, the reference to largeData is removed, allowing it to be garbage collected.​peerdh.com

5. Use Weak References for Temporary Data

When storing temporary data that shouldn’t prevent garbage collection, consider using WeakMap or WeakSet.​Codez Up+3Mbloging+3codeconfig.in+3

Example:

javascript
const weakMap = new WeakMap();
const obj = {};
weakMap.set(obj, "Temporary data");// After use
obj = null; // obj is eligible for garbage collection

In this example, the WeakMap does not prevent obj from being garbage collected when obj is set to null.​

Tools to Detect Memory Leaks

Regularly monitor your application’s memory usage to identify potential leaks:​

  • Chrome DevTools: Use the Memory tab to take heap snapshots and analyze memory usage over time.

  • Node.js: Use the --inspect flag to start your application and connect to Chrome DevTools for memory profiling.​matcha.fyi+1Mbloging+1

By adhering to these best practices and utilizing the appropriate tools, you can effectively manage memory in your JavaScript applications, leading to improved performance and reliability.​

5. Use Async/Await and Promises Wisely

async/await simplifies asynchronous code, making it more readable and maintainable. However, improper usage can lead to performance bottlenecks and unresponsive applications.​

Best Practices for Efficient Asynchronous Code

1. Avoid await in Loops Unless Absolutely Necessary

Using await inside loops can cause asynchronous operations to execute sequentially, negating the benefits of concurrency.​

Example:

javascript
// Sequential execution
for (let i = 0; i < 5; i++) {
await fetchData(i);
}

In this example, each fetchData(i) call waits for the previous one to complete, leading to unnecessary delays.​

Optimized Approach:

javascript
// Parallel execution
await Promise.all([...Array(5)].map((_, i) => fetchData(i)));

By using Promise.all(), all fetchData(i) calls are initiated concurrently, improving performance.​

2. Use Promise.all() for Concurrent Operations

When multiple asynchronous operations can run independently, Promise.all() allows them to execute in parallel, reducing overall execution time.​

Example:

javascript
// Fetching user and posts concurrently
const [user, posts] = await Promise.all([fetchUser(), fetchPosts()]);

This approach fetches user and post data concurrently, rather than sequentially, enhancing efficiency.​

3. Handle Errors Gracefully

Always use try/catch blocks to handle errors in asynchronous functions. Unhandled promise rejections can lead to unexpected behavior and application crashes.​

Example:

javascript
try {
const data = await fetchData();
} catch (error) {
console.error("Error fetching data:", error);
}

This ensures that any errors during the fetchData() call are caught and handled appropriately.​

4. Avoid Blocking the Main Thread

Blocking the main thread with synchronous operations can make your application unresponsive. Always prefer asynchronous methods for I/O-bound tasks.​

Example:

javascript
// Blocking the main thread
const result = await someSyncOperation(); // Avoid this

Instead, ensure that someSyncOperation() is asynchronous to prevent blocking.​Toxigon

5. Use Async Functions for Sequential Operations

When operations depend on each other, using async/await ensures that each operation completes before the next begins, maintaining the correct sequence.​

Example:

javascript
// Sequential execution
const user = await fetchUser();
const posts = await fetchPosts(user.id);

This ensures that fetchPosts() only executes after fetchUser() completes, preserving the logical flow.

6. Optimize Loops and Array Methods

Inefficient loops and array operations can significantly impact your application’s performance, especially when dealing with large datasets. Understanding when to use traditional loops versus array methods is crucial for writing efficient and maintainable code.​

Best Practices for Loop Optimization

1. Use for Loops for Performance-Critical Situations

Traditional for loops offer the best performance, particularly when iterating over large arrays. They are straightforward and have minimal overhead.​

Example:

javascript
for (let i = 0; i < items.length; i++) {
process(items[i]);
}

In performance-critical scenarios, such as processing thousands of items, this approach minimizes overhead and maximizes efficiency.​

2. Avoid Using .map() or .forEach() When a Simple for Loop Does the Job Faster

Array methods like .map() and .forEach() are convenient but can introduce additional overhead due to function calls and callbacks, which may impact performance in large iterations.​

Example:

javascript
// Less efficient
items.forEach(item => process(item));

// More efficient
for (let i = 0; i < items.length; i++) {
process(items[i]);
}

In scenarios where performance is critical, prefer traditional loops to reduce unnecessary overhead.​

3. Don’t Mutate Arrays or Objects Unless Necessary

Mutating arrays or objects during iteration can lead to unexpected behavior and performance issues. Instead, consider creating new arrays or objects to hold the modified data.​

Example:

javascript
// Avoid mutating the original array
const newItems = items.map(item => {
return { ...item, processed: true };
});

This approach ensures that the original data remains unaltered, preventing potential side effects and improving code clarity.​

4. Cache Array Length in Loops

Accessing the .length property inside a loop can be inefficient, especially in large arrays. Caching the length before the loop starts can improve performance.​LinkedIn+1Stack Overflow+1

Example:

javascript
const len = items.length;
for (let i = 0; i < len; i++) {
process(items[i]);
}

This technique reduces the number of times the .length property is accessed, leading to more efficient iteration.​

5. Use for...of for Readability When Performance Is Not a Concern

The for...of loop provides a clean and readable syntax for iterating over iterable objects like arrays. While slightly less performant than traditional for loops, it enhances code clarity.​blog.joshytheprogrammer.com+1Software Development Company | LeanyLabs+1

Example:

javascript
for (const item of items) {
process(item);
}

Use this approach when performance is not the primary concern, and readability is a priority.

7. Lazy Load Expensive Resources

Loading images, videos, or other large resources only when they’re needed—such as when they enter the viewport—can significantly improve your website’s performance.​

Why It Helps

  • Reduces Initial Page Load Time: By deferring the loading of non-essential resources, the initial page load is faster, leading to a better user experience.

  • Saves Bandwidth for the User: Users on slow or metered connections benefit from reduced data usage.

  • Improves Core Web Vitals: Techniques like lazy loading can positively impact metrics such as Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS) .​Web DevelopmentorEdge Analytics eCommerce

How to Implement Lazy Loading

1. Native Lazy Loading with loading="lazy"

Modern browsers support native lazy loading for images and iframes by using the loading attribute.​Monitor Page Speed and Core Web Vitals+2SitePoint+2Wikipedia+2

Example:

html
<img src="photo.jpg" loading="lazy" alt="Nice View" />

This approach is straightforward and requires no JavaScript. However, it’s essential to check browser compatibility .​

2. Lazy Loading with the Intersection Observer API

For more control and to support older browsers, you can use the Intersection Observer API.​

Example:

javascript

const images = document.querySelectorAll('img[data-src]');

const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.onload = () => img.classList.add(‘loaded’);
observer.unobserve(img);
}
});
}, { threshold: 0.1 });

images.forEach(img => observer.observe(img));

This script observes each image and loads it when it enters the viewport. It’s particularly useful for implementing infinite scrolling and other advanced lazy loading techniques .​Audrey Hal

3. Using Placeholders and Low-Resolution Images

To enhance user experience, consider displaying a low-resolution placeholder or a blurred version of the image until the full image is loaded.​

Example:

html
<img src="placeholder.jpg" data-src="high-res.jpg" class="lazy" alt="High Resolution Image" />

This technique provides a smoother visual transition and can be implemented using the Intersection Observer API .​

Best Practices

  • Prioritize Above-the-Fold Content: Ensure that critical images are loaded immediately to avoid layout shifts.

  • Test Across Browsers: Verify that your lazy loading implementation works across different browsers and devices.

  • Monitor Performance: Use tools like Google Lighthouse to assess the impact of lazy loading on your website’s performance.​

Implementing lazy loading can significantly enhance your website’s performance, leading to faster load times and a better user experience.​

 

8. Compress and Minify Your Code

Minifying your JavaScript files involves removing unnecessary characters—such as whitespace, comments, and newline characters—without changing the code’s functionality. This process reduces file size, leading to faster load times and improved performance.​runebook.dev+1Wikipedia+1

Why It Matters

  • Faster Load Times: Smaller file sizes mean quicker downloads, enhancing user experience.

  • Reduced Bandwidth Usage: Efficient use of network resources, beneficial for users with limited data plans.

  • Improved SEO: Search engines favor fast-loading websites, potentially boosting your rankings.​

Tools for Minification

1. Terser

Terser is a modern JavaScript minifier that supports ES6+ syntax. It’s widely used in production builds due to its efficiency and compatibility.​survivejs.com+2Squash+2Syntackle+2

Integration with Webpack:

To set up Terser with Webpack:

  1. Install Terser Webpack Plugin:

    bash
    npm install terser-webpack-plugin --save-dev

  1. Configure Webpack:

    javascript

    const TerserPlugin = require('terser-webpack-plugin');

    module.exports = {
    mode: ‘production’,
    optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
    },
    };

This configuration enables minification using Terser during the production build. ​webpack

2. UglifyJS

UglifyJS is one of the original JavaScript minifiers, known for its speed and effectiveness. However, it has limited support for ES6+ syntax.​

Usage:

bash
npm install uglify-js -g
uglifyjs yourfile.js -o yourfile.min.js

While still useful for older codebases, UglifyJS is less suitable for modern JavaScript applications. ​

3. Online Minifiers

For quick tasks or small projects, online minifiers can be convenient:​

  • Minify JS Online: Offers a user-friendly interface for minifying JavaScript code. ​

  • Terser Online: Provides an online version of the Terser minifier for immediate use.​

These tools are ideal for one-off minification tasks but may lack the customization options needed for larger projects.​

Best Practices

  • Automate Minification: Integrate minification into your build process using tools like Webpack or Gulp.

  • Use Source Maps: Generate source maps to aid in debugging minified code.

  • Remove Console Statements: Configure your minifier to drop console logs and other development-only code.

  • Test After Minification: Always test your application after minification to ensure functionality remains intact.​minify-js.com+2Squash+2Wikipedia+2

By implementing these minification techniques, you can enhance your website’s performance, leading to a better user experience and potentially improved search engine rankings.

9. Profile and Benchmark Your Code

Identifying and addressing performance bottlenecks is crucial for delivering a fast and responsive user experience. Chrome DevTools provides powerful tools to analyze and optimize your web application’s performance.​

Why It Matters

Profiling your code helps you:​Monitor Page Speed and Core Web Vitals+2This Dot Labs+2Arunangshu Das Blog+2

  • Identify Performance Bottlenecks: Pinpoint areas where your application may be lagging.

  • Optimize Resource Usage: Ensure efficient use of CPU, memory, and network resources.

  • Enhance User Experience: Deliver a smoother and more responsive application.​

How to Use Chrome DevTools Performance Panel

1. Open DevTools

  • Press F12 (Windows/Linux) or Cmd + Option + I (Mac) to open Chrome DevTools.

  • Alternatively, right-click on your webpage and select Inspect.​

2. Navigate to the Performance Tab

  • Click on the Performance tab within DevTools.

  • If it’s not visible, click the >> icon to find it under additional tabs. ​NitroPack

3. Start Recording

  • Click the Record button (a circular red icon) to begin capturing performance data.

  • Interact with your website as a user would—scroll, click buttons, or navigate through pages.

  • Click Stop when you’ve captured enough data.​NitroPackDEV Community

4. Analyze the Performance Report

  • CPU Utilization Timeline: Shows how busy the CPU is with different types of tasks.

  • Filmstrip: Displays screenshots of your page at different points in time.

  • Flame Chart: Visualizes the stack trace of your JavaScript code execution.​Monitor Page Speed and Core Web Vitals

5. Utilize Insights

  • In the Insights tab, DevTools provides actionable suggestions to improve performance.

  • Hover over items to see corresponding events in the trace. ​Chrome for Developers

6. Simulate Different Environments

  • Use the Capture Settings to simulate mobile CPU throttling and network conditions.

  • This helps understand how your application performs under various real-world scenarios. ​Chrome for DevelopersNitroPack

Best Practices

  • Test in Incognito Mode: Extensions can interfere with performance measurements.

  • Record Multiple Sessions: Capture data under different conditions to get a comprehensive view.

  • Compare with Real-World Data: Use the Field Data feature to compare your local metrics with real-user experiences. ​Monitor Page Speed and Core Web VitalsNitroPack

By regularly profiling and benchmarking your code, you can proactively identify and resolve performance issues, leading to a more efficient and user-friendly application.

10. Reduce Reflows and Repaints

Reflows and repaints are browser processes that can significantly impact the performance of a webpage. Understanding these concepts and how to minimize them is essential for creating efficient and responsive web applications.​SitePointSling Academy

What Are Reflows and Repaints?

  • Reflow: Occurs when the layout of the page changes. It can be triggered by actions such as resizing the browser window, modifying the DOM, changing CSS styles, and more. During a reflow, the browser must calculate the geometry of the webpage, which can be time-consuming, especially for large documents.​Sling Academy

  • Repaint: Happens when styles like color or shadow change. While less expensive than reflows, repaints still consume computational resources and can lead to performance issues if they occur frequently.​

Why It Matters

Frequent reflows and repaints consume significant computational resources because the browser needs to stop what it’s doing to perform them. They can lead to janky animations, delayed user interface reactions, and overall sluggish performance. Therefore, minimizing these operations is imperative to enhance the user experience. ​Sling Academy

Best Practices to Minimize Reflows and Repaints

1. Batch DOM Changes

Instead of making multiple individual changes to the DOM, group them together to minimize the number of reflows and repaints.​

Example:

javascript
// Inefficient: Multiple layout calculations
element.style.width = "200px";
element.style.height = "100px";
element.style.backgroundColor = "blue";

// Optimized: Apply changes in one go
element.style.cssText = “width: 200px; height: 100px; background-color: blue;”;

This approach reduces the frequency of reflows and repaints, improving performance. ​coderspacket.com

2. Use Document Fragments

When adding multiple elements to the DOM, use a DocumentFragment to perform the operations offscreen, and then append the fragment to the DOM in one operation. This reduces reflows and repaints.​Gist+2W3docs+2FMENNEN+2

Example:

javascript
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
const div = document.createElement('div');
div.textContent = `Item ${i}`;
fragment.appendChild(div);
}
document.getElementById('container').appendChild(fragment);

This technique minimizes layout recalculations by performing DOM manipulations offscreen. ​FMENNEN

3. Avoid Inline Styles

Excessive use of inline styles can trigger reflows and repaints. Instead, modify styles using CSS classes.​

Example:

javascript
// Inefficient: Inline style changes
element.style.width = "200px";
element.style.height = "100px";

// Optimized: Add or remove CSS classes
element.classList.add(“new-styles”);

This approach allows the browser to apply styles more efficiently, reducing layout recalculations. ​

4. Minimize Layout Thrashing

Layout thrashing occurs when JavaScript code reads layout information, modifies an element’s style, and then reads layout information again. This can cause multiple forced reflows, leading to performance issues. To avoid layout thrashing, group all DOM read operations together and then perform all write operations separately. ​FMENNEN+1W3docs+1

Example:

javascript
// Inefficient: Reading layout information after style changes
element.style.width = "200px";
console.log(element.offsetHeight); // Causes reflow

// Optimized: Group read and write operations
const width = element.offsetWidth;
element.style.width = `${width + 20}px`;

By grouping read and write operations, you minimize the number of reflows and repaints.​W3docs

5. Use CSS Transform and Opacity for Animations

CSS properties like transform and opacity can be animated without triggering reflows, as they do not affect layout.​

Example:

javascript
// Efficient: Animating transform and opacity
element.style.transition = "transform 0.5s, opacity 0.5s";
element.style.transform = "translateX(100px)";
element.style.opacity = "0.5";

This approach allows for smooth animations without impacting layout performance. ​

By implementing these best practices, you can significantly reduce reflows and repaints, leading to improved performance and a better user experience.

 

11. Avoid Unnecessary Libraries

In modern web development, it’s tempting to rely on third-party libraries to expedite development. However, indiscriminate use of these libraries can introduce significant performance overheads. Many libraries offer functionalities that are already available in native JavaScript or can be implemented with minimal code.​

Why It Matters

  • Reduced Page Load Time: Every additional library increases the size of your JavaScript bundle, leading to longer download times.

  • Improved Performance: Native JavaScript methods are often faster and more efficient than their library counterparts.

  • Enhanced Maintainability: Relying less on external libraries reduces the complexity of your codebase and potential compatibility issues.​

Best Practices

1. Leverage Native JavaScript Features

Modern browsers support a wide array of native JavaScript functionalities that can replace the need for many libraries:​screwlewse.com

  • DOM Manipulation: Methods like document.querySelector(), addEventListener(), and classList provide robust solutions for DOM interactions.

  • HTTP Requests: The fetch() API offers a native way to make asynchronous HTTP requests.

  • Storage: localStorage and sessionStorage provide client-side storage solutions without the need for external libraries.​

By utilizing these native features, you can achieve the desired functionality without the added weight of external libraries.​

2. Consider Micro-Libraries or Utility Functions

If you find that a specific functionality is missing in native JavaScript, consider using lightweight, single-purpose libraries or writing your own utility functions. For instance, instead of importing a full-featured date manipulation library, you might use a smaller library like date-fns or implement the required functionality yourself.​

However, be cautious of micro-libraries that offer minimal functionality. While they may seem convenient, they can introduce unnecessary dependencies and increase your bundle size. It’s essential to evaluate whether the benefits outweigh the costs.​

3. Evaluate the Necessity of Each Library

Before adding a new library to your project, ask yourself:​

  • Does this library provide functionality that cannot be achieved with native JavaScript?

  • Is the library actively maintained and compatible with your project’s requirements?

  • Will the library introduce significant overhead in terms of size and performance?​

By carefully assessing the need for each library, you can prevent unnecessary bloat and maintain optimal performance.​LogRocket Blog

4. Use Modular Imports

If you must use a library, prefer those that support modular imports. This allows you to import only the specific functions you need, rather than the entire library, reducing your bundle size.​codesmith.io

Example:

javascript
// Instead of importing the entire lodash library
import _ from 'lodash';

// Import only the specific function you need
import debounce from ‘lodash/debounce’;

This approach ensures that only the necessary code is included in your project, minimizing overhead.​

5. Monitor and Remove Unused Code

Over time, your project may accumulate unused libraries or functions. Regularly audit your codebase to identify and remove these unused dependencies. Tools like Webpack’s Tree Shaking feature can help eliminate dead code and reduce your bundle size.​arxiv.org

Additionally, consider using tools like Bundlephobia to analyze the size and impact of the libraries you’re using.​

By thoughtfully selecting and managing your dependencies, you can create a more efficient and maintainable codebase, leading to improved performance and a better user experience.

12. Store Data Wisely

Client-side storage mechanisms like localStorage and sessionStorage offer convenient ways to persist data in the user’s browser. However, indiscriminate use can lead to performance bottlenecks and potential security risks. Understanding when and how to use these storage options is crucial for building efficient and secure web applications.​

Why It Matters

  • Performance: Excessive or inefficient use of browser storage can slow down your application, especially if large amounts of data are stored or frequently accessed.

  • Security: Data stored in localStorage and sessionStorage is accessible via JavaScript and is vulnerable to cross-site scripting (XSS) attacks.

  • User Experience: Improper handling of storage data can lead to inconsistent application states or unexpected behavior.​devyukti.com+1Gyata+1

Best Practices

1. Use Appropriate Storage for Data Lifespan

  • localStorage: Ideal for data that needs to persist across sessions, such as user preferences or theme settings.

  • sessionStorage: Suitable for data that should only persist during a single session, like form inputs or temporary states.​devyukti.com

For example, storing a user’s preferred language setting can be done in localStorage, while a shopping cart’s contents can be stored in sessionStorage to ensure they are cleared when the session ends.​

2. Limit the Amount of Stored Data

Both localStorage and sessionStorage typically offer around 5MB of storage per origin. Storing large amounts of data can impact performance and may exceed storage limits, leading to errors. It’s advisable to store only essential data and consider alternative storage solutions, like IndexedDB, for larger datasets.​TheLinuxCode+2devyukti.com+2Gyata+2

3. Avoid Storing Sensitive Information

Never store sensitive data, such as passwords, credit card numbers, or personal identification information, in localStorage or sessionStorage. These storage options are not encrypted and are vulnerable to XSS attacks. For sensitive information, use secure HTTP-only cookies or server-side storage mechanisms.​Gyatadevyukti.com

4. Implement Expiration Mechanisms

Data in localStorage persists indefinitely unless manually cleared. Implementing expiration mechanisms ensures that outdated or unnecessary data is removed, preventing stale information from affecting the user experience.​

Example:

javascript
const data = { value: 'some data', timestamp: Date.now() };
localStorage.setItem('myData', JSON.stringify(data));

function isDataExpired() {
const storedData = JSON.parse(localStorage.getItem(‘myData’));
return Date.now() – storedData.timestamp > 86400000; // 24 hours in milliseconds
}

if (isDataExpired()) {
localStorage.removeItem(‘myData’);
}

5. Use Descriptive Keys

To avoid conflicts and enhance maintainability, use clear and descriptive keys when storing data. Prefixing keys with your application’s name or module can help prevent collisions.​The Daily Frontend 🗞️+1Savannah Software Solutions+1The Daily Frontend 🗞️

Example:

javascript
localStorage.setItem('myApp-userSettings', JSON.stringify({ theme: 'dark' }));

6. Handle Storage Errors Gracefully

Operations on localStorage and sessionStorage can fail if the storage limit is exceeded or if the storage is unavailable. Always wrap storage operations in try-catch blocks to handle potential errors gracefully.​

Example:

javascript
try {
localStorage.setItem('key', 'value');
} catch (e) {
if (e.name === 'QuotaExceededError') {
console.error('Storage limit exceeded');
} else {
console.error('Storage error:', e);
}
}

7. Monitor Storage Usage

Regularly monitor your application’s storage usage to ensure it remains within acceptable limits. This can help identify potential issues before they impact performance or functionality.​

By following these best practices, you can effectively utilize client-side storage to enhance your application’s performance and user experience while maintaining security and reliability.

Final Thoughts

Performance is a journey, not a destination. It’s something I’ve improved at by constantly testing, learning, and adapting. These tips are just the start. What matters most is building the habit of thinking about performance as you code—not as an afterthought.

If you’re looking for help optimizing your website or building fast, modern applications, feel free to get in touch, or explore what I offer. You can also take a look at my previous projects for real-world examples.

Thanks for reading! If you found this helpful, feel free to share or bookmark it for later. You can find more resources and blog posts on my homepage.

Written by Sabian ZH, freelance web developer and founder of Marlis Marketing.

Leave a Reply

Your email address will not be published. Required fields are marked *