“Boosting UI Performance: Best Practices and Strategies” – Saurav Kumar

Reading Time: 10 minutes

As a JavaScript developer, there are several key considerations you should make when writing logic for a high-performance user interface. Here are some of the most important ones:

Reduce the number of DOM manipulations: Manipulating the DOM can be a very slow operation, so you should try to reduce the number of times you access or modify it. One way to do this is to cache DOM elements that you’ll be accessing frequently, instead of looking them up every time.
Use event delegation: Instead of attaching event listeners to every element on the page, you can use event delegation to attach a single event listener to a parent element and listen for events as they bubble up. This can improve performance by reducing the number of event listeners attached to the page.
Avoid unnecessary re-renders: When updating the UI, try to avoid unnecessary re-renders. For example, if you’re updating a list of items, only update the items that have changed instead of re-rendering the entire list.
Use requestAnimationFrame: Use requestAnimationFrame instead of setInterval or setTimeout for animations and other time-based updates. This can help ensure that your updates are synchronized with the browser’s rendering process, leading to smoother animations and better performance. requestAnimationFrame is a browser API that allows you to schedule an animation or render update for the next frame of the browser’s rendering pipeline. It can be used to improve the performance of animations and ensure that they are rendered at the optimal time.
Minimize network requests: Minimize the number of network requests your app makes. This can be achieved by optimizing images and other assets, caching data locally, and reducing unnecessary requests.
Optimize for mobile: Make sure your UI is optimized for mobile devices, which typically have slower processors and less memory than desktops. This means avoiding heavy animations, minimizing the use of large images and videos, and optimizing for touch-based interactions.

By taking these considerations into account, you can create a high-performance user interface that provides a great user experience.

Here are some techniques you can use to reduce the number of DOM manipulations in your application:

Use the Angular Change Detection mechanism: Angular provides a powerful change detection mechanism that automatically updates the view when data changes. By using this mechanism, you can avoid manually updating the DOM and improve performance.
Use the ng-container directive: The ng-container directive allows you to group multiple elements together without actually creating an additional element in the DOM. This can help reduce the number of elements in the DOM and improve performance.
Use the ngIf and ngSwitch directives: The ngIf and ngSwitch directives allow you to conditionally render elements in the DOM based on certain conditions. This can help reduce the number of elements in the DOM and improve performance.
Use the trackBy function: When working with ngFor loops, use the trackBy function to track changes to individual items in the loop. This can help Angular identify which elements have changed and avoid unnecessary DOM updates.
Use the Renderer2 service: When you do need to manipulate the DOM, use the Renderer2 service provided by Angular. This service provides a platform-agnostic way of interacting with the DOM and can help improve performance.

By using these techniques, you can reduce the number of DOM manipulations in your Angular application and improve performance.

Here are some of the most effective ways to reduce re-render of your application:

Use the OnPush change detection strategy: The OnPush change detection strategy tells Angular to only check for changes when input properties have changed or when an event is triggered. This can help reduce the number of unnecessary re-renders and improve performance.
Use the async pipe: When working with observables in your Angular application, use the async pipe instead of manually subscribing and unsubscribing to the observable. The async pipe automatically subscribes and unsubscribes to the observable, which can help reduce the number of unnecessary re-renders.
Use pure pipes: Pure pipes are stateless functions that transform input values into output values. They only re-run when the input value changes, which can help reduce the number of unnecessary re-renders.
Use ngDoCheck() hook: If you need to perform custom change detection logic, you can use the ngDoCheck() lifecycle hook. This hook allows you to implement your own change detection algorithm and can help reduce the number of unnecessary re-renders.
Use ChangeDetectorRef: If you need to manually trigger change detection in your Angular application, you can use the ChangeDetectorRef service. This service allows you to manually trigger change detection for a component or its children, which can help reduce the number of unnecessary re-renders.

Here’s how you can use event delegation in your application by using the Angular event binding syntax and handling events at the component level.

Here are the steps to implement event delegation in your Angular application:

Add an event listener to the parent element: Add an event listener to a parent element using the Angular event binding syntax. For example, you can add a click event listener to a parent element like this:

<div (click)="handleClick($event)">
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
</div>

Handle the event at the component level: In the component class, implement the handleClick() method to handle the click event. You can use the $event object to get information about the event, such as the target element.

export class MyComponent {
  handleClick(event: MouseEvent) {
    const target = event.target as HTMLElement;
    if (target.nodeName === 'BUTTON') {
      // Handle button click here
    }
  }
}

Conditionally handle the event: In the handleClick() method, you can conditionally handle the event based on the target element. For example, you can check if the target element is a button element and perform some action accordingly.

By using event delegation, you can reduce the number of event listeners in your Angular application and improve performance.

Here’s how you can minimize network requests in your application by using several techniques. Here are some of the most effective ones:

Use HTTP Interceptors: HTTP Interceptors allow you to intercept HTTP requests and responses and add custom logic. You can use interceptors to cache responses, modify headers, or add authentication tokens, which can help reduce the number of network requests.
Use lazy loading: Lazy loading allows you to load parts of your application on demand. By loading only the necessary components and modules, you can reduce the initial load time and the number of network requests.
Use server-side rendering (SSR): Server-side rendering allows you to render your Angular application on the server before sending it to the client. This can help reduce the initial load time and the number of network requests.
Use HTTP caching: HTTP caching allows you to cache responses from your server and reuse them for subsequent requests. By caching responses, you can reduce the number of network requests and improve performance.
Use WebSockets: WebSockets allow you to establish a persistent connection between the client and the server. By using WebSockets, you can reduce the number of HTTP requests and improve performance.
Optimize images and assets: Optimize images and assets by compressing them and using appropriate file formats. This can help reduce the size of network requests and improve performance.

By using these techniques, you can minimize network requests in your Angular application and improve performance.

Optimizing the performance of a React application is a crucial part of the development process, and it involves several techniques to ensure that the application is fast and responsive for the user. Here are some ways to optimize the performance of your React application:

First Paint: The first paint is a crucial metric for the user experience, and it determines how quickly the user can see the initial content of the application. You can optimize the first paint time of your React application by using server-side rendering (SSR) or static site generation (SSG) techniques.

SSR involves rendering the initial HTML on the server and then sending it to the client, which reduces the time it takes for the user to see the content. SSG involves pre-rendering the entire website at build time, which can improve the performance by reducing the number of requests to the server.

User Interaction: User interaction is a critical aspect of any application, and the performance of the application can significantly impact the user experience. You can optimize user interaction in your React application by using virtual DOM, avoiding unnecessary re-renders, and minimizing network requests.

The virtual DOM is a lightweight representation of the actual DOM, which allows React to update only the necessary parts of the UI when changes occur. You can avoid unnecessary re-renders by using the shouldComponentUpdate lifecycle method, which compares the previous and current props and state to determine if the component needs to update.

Network Performance: Network performance is another critical factor that affects the performance of a React application. You can optimize network performance by using code splitting, lazy loading, and caching.

Code splitting involves splitting your code into smaller chunks and loading them on demand, which can reduce the initial load time of your application. Lazy loading allows you to load parts of your application on demand, which can reduce the number of requests to the server and improve performance. Caching involves storing data locally or on the server, which can reduce the number of requests and improve the performance.

Fast Rerender: Fast rerender is a critical aspect of any React application, and it ensures that the UI is fast and responsive when the user interacts with it. You can optimize fast rerender by using memoization, useCallback, and useMemo.

Memoization involves caching the results of expensive function calls, which can improve the performance by reducing the number of times the function is called. useCallback and useMemo are hooks that allow you to memoize functions and values, which can reduce unnecessary re-renders.

Overall, optimizing the performance of a React application involves several techniques, including server-side rendering, virtual DOM, code splitting, and memoization. By applying these techniques, you can ensure that your application is fast, responsive, and provides an excellent user experience.

Here are some code snippets that demonstrate how to implement the optimization techniques I mentioned earlier:

Server-Side Rendering: Server-side rendering involves rendering the initial HTML on the server and then sending it to the client. Here’s an example of how to implement server-side rendering in a React application using the ReactDOMServer module:

import React from 'react';
import ReactDOMServer from 'react-dom/server';

function App() {
  return <div>Hello, world!</div>;
}

const html = ReactDOMServer.renderToString(<App />);

console.log(html); // <div data-reactroot="">Hello, world!</div>

Virtual DOM: The virtual DOM is a lightweight representation of the actual DOM, which allows React to update only the necessary parts of the UI when changes occur. React uses VDOM internally, hence example is mere representation. Here’s an example of how to use the virtual DOM in a React application:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

In the above example, the useState hook creates a state variable called count and a function called setCount, which updates the state variable. The handleClick function updates the state variable count when the user clicks the button. React uses the virtual DOM to update only the necessary parts of the UI when the state variable count changes.

Code Splitting: Code splitting involves splitting your code into smaller chunks and loading them on demand. Here’s an example of how to implement code splitting in a React application using the React.lazy function:

import React, { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

In the above example, the React.lazy function creates a new component called LazyComponent, which is loaded on demand when the user accesses the component. The Suspense component shows a loading spinner while the component is being loaded.

Memoization: Memoization involves caching the results of expensive function calls. Here’s an example of how to use memoization in a React application using the useMemo hook:

import React, { useState, useMemo } from 'react';

function fibonacci(n) {
  if (n <= 1) {
    return n;
  }

  return fibonacci(n - 1) + fibonacci(n - 2);
}

function Fibonacci() {
  const [n, setN] = useState(0);
  const result = useMemo(() => fibonacci(n), [n]);

  function handleChange(e) {
    setN(parseInt(e.target.value));
  }

  return (
    <div>
      <input type="number" value={n} onChange={handleChange} />
      <p>{result}</p>
    </div>
  );
}

In the above example, the fibonacci function calculates the Fibonacci sequence, which is an expensive operation. The useMemo hook caches the result of the function call and only recalculates it when the value of n changes. This improves the performance of the application by reducing the number of times the function is called.

Amazon, like many other large-scale web applications, uses a variety of application code-level techniques to build a fast-performing UI. Here are some of the techniques Amazon employs:

Code Splitting: Amazon uses code splitting to split their application code into smaller chunks that can be loaded on demand, which reduces the initial load time and improves the perceived performance of the website.
Memoization: Amazon uses memoization to cache the results of expensive function calls, which reduces the time required to compute the same result multiple times.
Virtualization: Amazon uses virtualization techniques, such as React’s virtual DOM, to minimize the number of DOM updates required, which reduces the time required to update the UI and improves the perceived performance of the website.
Debouncing and Throttling: Amazon uses debouncing and throttling techniques to limit the number of events generated by the user, such as scroll and resize events, which reduces the number of unnecessary updates to the UI and improves the perceived performance of the website.
Avoiding Synchronous Operations: Amazon avoids synchronous operations, such as synchronous XHR requests, which can block the main thread and reduce the perceived performance of the website.
Efficient Data Structures: Amazon uses efficient data structures, such as hash tables and binary search trees, to store and access data, which reduces the time required to search and manipulate data.
Optimal Algorithms: Amazon uses optimal algorithms, such as sorting and searching algorithms, to perform complex operations efficiently, which reduces the time required to perform these operations.
Progressive Web Apps: Amazon uses progressive web app techniques, such as service workers and caching, to provide an app-like experience to users, which reduces the time required to load the website on subsequent visits and improves the perceived performance of the website.

These are just a few of the application code-level techniques Amazon uses to build a fast-performing UI. By employing a combination of these techniques, Amazon is able to provide a fast and responsive user experience for its customers.

Code splitting is a technique used to split large chunks of code into smaller, more manageable pieces, which can be loaded on-demand as needed. This can improve the performance of a web application by reducing the initial load time and improving the perceived performance.

Here are examples of code splitting in React and Angular:

Code Splitting in React

In React, code splitting can be achieved using the dynamic import() function. Here’s an example:

import React, { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;

In this example, we’re using the lazy() function to dynamically import the LazyComponent component when it’s needed. We’re also using the Suspense component to show a loading indicator while the component is being loaded.

Code Splitting in Angular

In Angular, code splitting can be achieved using the loadChildren property in the route configuration. Here’s an example:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'lazy',
    loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

In this example, we’re using the loadChildren property to dynamically load the LazyModule module when the user navigates to the /lazy route. The import() function is used to load the module asynchronously.

Both React and Angular provide ways to implement code splitting, making it easier to manage large codebases and improve the performance of web applications.

Debouncing and throttling are techniques used to limit the number of times a function is executed in a given time period. This can improve the performance of a web application by reducing the number of unnecessary updates to the UI.

Here are examples of debouncing and throttling in React and Angular:

Debouncing and Throttling in React

In React, debouncing and throttling can be achieved using the lodash library. Here’s an example of debouncing an input event:

import React, { useState } from 'react';
import { debounce } from 'lodash';

function App() {
  const [value, setValue] = useState('');

  const handleInputChange = debounce((event) => {
    setValue(event.target.value);
  }, 500);

  return (
    <div>
      <input type="text" onChange={handleInputChange} />
      <p>Value: {value}</p>
    </div>
  );
}

export default App;

In this example, we’re using the debounce() function from the lodash library to limit the number of times the handleInputChange() function is called in a 500-millisecond time period.

Debouncing and Throttling in Angular

In Angular, debouncing, and throttling can be achieved using the rxjs library. Here’s an example of throttling a scroll event:

import { Component, HostListener } from '@angular/core';
import { throttleTime } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  template: `
    <div [style.height.px]="height" [style.background-color]="color"></div>
  `
})
export class AppComponent {
  height = 0;
  color = 'red';

  @HostListener('window:scroll')
  onScroll() {
    this.height = window.scrollY;
    this.color = 'blue';
    this.throttledUpdate();
  }

  throttledUpdate = throttleTime(() => {
    console.log('Updating...');
  }, 500);
}

In this example, we’re using the throttleTime() operator from the rxjs/operators module to limit the number of times the throttledUpdate() function is called in a 500 millisecond time period.

Both React and Angular provide ways to implement debouncing and throttling, making it easier to limit the number of times a function is executed in a given time period and improve the performance of web applications.

Code Splitting in React

Code Splitting in Angular

Debouncing and Throttling in React

Debouncing and Throttling in Angular

Leave a Reply Cancel reply