5 ways of Improving performance in JS or Angular apps

 1. debounceTime / debounce

If you have a searchbox that makes an API call, always use debounceTime (rxjs operator) or debounce.

Also use switchMap to cancel making outdated calls to API

checkout the example here: https://stackblitz.com/edit/base-angular-12-app-crzqez



2. Use trackBy when rendering Arrays in for loop


On click of add users button, users are assigned to a new array. Although the values are exactly the same, the list gets re-rendered.

Implement trackBy function

<div *ngFor="let u of users; trackBy: userTrackBy">
  {{ u.name }}
</div>
<button (click)="addUser()">add user</button>
export class TestTrackbyComponent {
  users = [
    { name: 'Leanne', id: 1 },
    { name: 'Ervin', id: 2 },
    { name: 'Patricia', id: 3 },
    { name: 'Kurtis', id: 4 },
    { name: 'Glenn', id: 5 },
    { name: 'Mandy', id: 6 },
    { name: 'Melissa', id: 7 },
  ];

  addUser() {
    this.users = [
      { name: 'Leanne', id: 1 },
      { name: 'Ervin', id: 2 },
      { name: 'Patricia', id: 3 },
      { name: 'Kurtis', id: 4 },
      { name: 'Glenn', id: 5 },
      { name: 'Mandy', id: 6 },
    ];
  }

  userTrackBy(index: any, user: { id: any }) {
    return user.id;
  }
}

Now, the list does not re-render.

Consider, we have a different ID added. Then, only the user with new ID will be rendered and not the whole list.

https://stackblitz.com/edit/stackblitz-starters-ymrtyn

3. Serve Images/fonts Assets from a CDN

Instead of making a request to the server everytime, setup a CDN so that the cached version is loaded after the 1st time, for every subsequent request thereby making the webpage faster

4. Render Blocking JavaScript

Ex: Adding script tags regularly will block HTML parsing when the script is downloaded and executed. So its always a good idea to place it at the end of body tag instead of placing it in the head tag.

In this case, they only begin to download after the entire HTML has been downloaded. However, because the download of these scripts starts later, elements loaded by them, such as ads, animations, or dynamic functionalities, might load later than the rest of the frontend, especially if it’s a longer script. This can result in noticeable delays and lagging UIs on slower connections, which is bad for the user experience.

Use async or defer instead.

Only difference between them:

async

defer

HTML parsing does not stop while downloading async script files.

Same

As soon as script file is downloaded, it pauses HTML parsing and executes the JS file

As soon as script file is downloaded, it continues to finish parsing the HTML file. Once complete, it executes the JS file

Green: HTML Parsing

Red: Script download

Yellow: script execution

5. Use Web workers for CPU intensive tasks

More about web workers here: https://javascripthisday.blogspot.com/2023/09/web-workers.html












Comments

Post a Comment

Popular posts from this blog

Inside the JavaScript Memory Box: Visualizing Variables, References, and Copies

Image
There is a difference in the way JavaScript refences variables based on whether they are primitive or non-primitive Primitive Types: string, number, bigint, Boolean, symbol, null, undefined Non-Primitive: Arrays, Objects Each variable in JS is stored in a memory “box” Assignments: But when another variable tries to assign this value, JS thinks “wait, is this a primitive or non-primitive? Because if it is primitive, I will create a new box for this new variable with the same content. But if it’s not, I will just create a refence to the existing box” PRIMITIVE: Analogy: Let's say you have a note that says 5. You give a copy of this note to your friend.  Friend now updates this copy to 10. But your copy still says 5 let a = 5; let b = a; b = 10; //a remains unchanged NON-PRIMITIVE: Analogy: Let's say you have a note with address "123 Elm Street". In that house lives a cat named "Tom". You give a copy of this note to your friend. Friend now goes t...
Read more

React & State Management: All Concepts

Section 1: Fundamentals 1. Counter with increment, decrement, reset — useState Remember: prev is needed when the new state depends on the old state. When you're setting a hardcoded value like 0, you just pass 0 directly. Why:  reason prev matters — if multiple state updates happen in the same render cycle, React batches them. Using prev guarantees you're working off the latest state, not a stale snapshot. 2. Toggle show/hide paragraph — useState Remember: onClick={toggle} — pass the function reference, not the call. onClick={() => toggle()} — also fine, arrow function that calls toggle when clicked. onClick={toggle()} — calls toggle immediately during render, setVisible triggers re-render, toggle calls again, infinite loop. Why: JSX evaluates expressions inside {} during render. toggle() is an expression that executes immediately. React doesn't get a chance to attach it as a handler — it just runs it right there, state updates, component re-renders, runs again. ...
Read more

React: Communication between components

Parent to Child: Props Child to Parent Callback Props (advanced props) Controlled Components useImperative hook  Nested Tree: useContext Sibling: Lift State Up PARENT TO CHILD: Props App.jsx Users.jsx <User name ={user} /> function User({ name }) {  return <h1> {name} </h1> } CHILD TO PARENT a) Callback Props (Advanced Props) Parent.jsx Child1.jsx export function Parent() {   function sayHello () {     alert(“hello triggered”)   }   <Child1 onSayHello ={ sayHello } /> } function Child1({ onSayHello }) {   return <button onClick={ onSayhello() }>          Click       </button> } b) Controlled Components Usually used in forms. Controlled components mean the parent owns the state, the child renders inputs, and every ch...
Read more