DEV Community: vunguyeen

Using Web Workers to Handle Heavy Tasks in the Browser

vunguyeen — Wed, 07 May 2025 09:35:06 +0000

Introduction

In modern web applications, performance is a critical factor that directly affects the user experience. One of the main causes of lagging or UI blocking is due to heavy tasks being executed directly on the main thread.

To address this issue, JavaScript provides the Web Workers API, which allows running code in parallel in a separate thread, helping avoid blocking the main thread and improving application performance.

1. What are Web Workers?

Web Workers are a browser API that allows you to execute JavaScript in a separate thread from the main application thread.

Web Workers can communicate with the main thread via postMessage.
Ideal for handling: heavy computation, data analysis, image processing, file compression, etc.

2. Why use Web Workers?

Benefits:

No UI blocking: since it doesn't run on the main thread.
Better UX: the UI remains responsive while the task is being processed.
Improved performance for complex calculations.

Without Web Workers:

The UI can easily freeze when processing large JSON files, long loops, or complex algorithms.
Users may think the app crashed if there's no response.

3. Example: Using Web Workers to Calculate Factorial

Suppose you need to calculate factorial (n!) of large numbers — this can be a task that slows down or freezes the UI if processed on the main thread. Web Workers help offload this task to a separate thread, ensuring a smooth UI.

We’ll build a simple example including:

A Web Worker file to calculate factorial.
A React (TSX) component with an input box, a button to send data to the worker, and <p> tags to display the result.

`factorialWorker.ts` – Worker file

self.onmessage = function (e) {
  const number = e.data;
  const result = factorial(number);
  self.postMessage(result);
};

function factorial(n: number): BigInt {
  let result = BigInt(1);
  for (let i = 2; i <= n; i++) {
    result *= BigInt(i);
  }
  return result;
}

export {};

`FactorialCalculator.tsx` – React component

import React, { useState, useRef } from "react";

const FactorialCalculator: React.FC = () => {
  const [input, setInput] = useState<number>(100000);
  const [result, setResult] = useState<number | null>(null);
  const [loading, setLoading] = useState(false);
  const [totalTime, setTotalTime] = useState(0);
  const workerRef = useRef<Worker | null>(null);

  const handleCalculate = () => {
    setResult(null);
    setTotalTime(0);
    setLoading(true);
    const startTime = performance.now(); // Start timing

    const worker = new Worker(new URL("@src/worker/factorialWorker", import.meta.url));
    workerRef.current = worker;

    worker.postMessage(input);

    worker.onmessage = (e: MessageEvent<number>) => {
      const endTime = performance.now(); // End timing
      setTotalTime(endTime - startTime); // Calculate total time in milliseconds

      setResult(e.data);
      setLoading(false);
      worker.terminate();
    };
  };

  return (
    <div>
      <input
        type="number"
        value={input}
        onChange={(e) => setInput(Number(e.target.value))}
        placeholder="Enter a positive integer"
      />
      <button onClick={handleCalculate} disabled={loading}>
        {loading ? "Calculating..." : "Calculate Factorial"}
      </button>
      {result !== null && <p>Result: {result}</p>}
      {totalTime > 0 && <p>Calculation time: {totalTime.toFixed(3)} ms</p>}
    </div>
  );
};

export default FactorialCalculator;

Result:

Without Web Worker	With Web Worker

As you can see, using a Web Worker results in a much smoother UI compared to not using one.

4. Notes When Using Web Workers

You cannot access the DOM from inside a worker file.
Make sure postMessage communication is clear and avoids race conditions.
You can use Comlink to simplify communication.

5. When Should You Use Web Workers?

Scenario	Should You Use a Worker?
Heavy computation like encryption, file compression	✅ Yes
Processing large JSON files (>1MB)	✅ Yes
Simple UI updates	❌ No
Fetch API, server calls	❌ No (just use async/await 😄)

6. Other Advanced Options

SharedWorker: share a worker across multiple tabs.
Service Worker: handles requests, caching – different from Web Worker.
OffscreenCanvas: render canvas inside a worker (great for graphics).

Conclusion

Web Workers are a powerful tool to improve performance in modern web applications. Offloading heavy tasks from the main thread helps keep the UI smooth and user-friendly. Consider using Web Workers when you notice your browser lagging during complex operations.

Visit my blog at: vunguyenit.site

Understanding Event Bubbling, Delegation, Propagation, and Preventing in JavaScript

vunguyeen — Tue, 22 Apr 2025 01:53:30 +0000

Understanding Event Bubbling, Delegation, Propagation, and Preventing in JavaScript

In JavaScript, event handling is an important aspect of user interaction. When an event occurs, it not only affects the target element but can also propagate through the DOM in various ways.

Four key concepts:

Event Bubbling
Event Delegation
Event Propagation
Event Preventing

1. Event Bubbling

What is Event Bubbling?

Event Bubbling is the process where an event starts from the target element and then propagates up the DOM tree to its parent elements.

Example:

When you click a <button> inside a <div>, the click event is not only triggered on the <button> but also propagates up to the <div> and other parent elements.

<div id="parent">
  <button id="child">Click me</button>
</div>

<script>
  document.getElementById("child").addEventListener("click", function () {
    console.log("Button clicked!");
  });

  document.getElementById("parent").addEventListener("click", function () {
    console.log("Div clicked!");
  });
</script>

Result:

When you click the button, the console will log:

Button clicked!
Div clicked!

This happens because the event starts from the button and bubbles up to the div.

2. Event Delegation

What is Event Delegation?

Event Delegation is a technique where you attach the event listener to the parent element rather than to each individual child element.

Why use Event Delegation?

It reduces the number of event listeners, improving performance.
It's useful when the list of elements changes dynamically (e.g., a todo list).

Example:

Instead of attaching a click event to each button, we can attach it to the parent ul element:

<ul id="menu">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

<script>
  document.getElementById("menu").addEventListener("click", function (event) {
    if (event.target.tagName === "LI") {
      console.log("You clicked:", event.target.innerText);
    }
  });
</script>

Benefits:

If you later add <li> elements, the event listener still works without needing to attach new listeners.
Helps keep the code clean and efficient.

3. Event Propagation

What is Event Propagation?

Event Propagation is the process by which events travel through the DOM in two main phases:

Capturing Phase → The event travels from document down to the target element.
Bubbling Phase → The event travels from the target element back up to document.

Example:

<div id="outer">
  <button id="inner">Click Me</button>
</div>

<script>
  document.getElementById("outer").addEventListener(
    "click",
    function () {
      console.log("Div clicked!");
    },
    true // Capture the event in the capturing phase
  );

  document.getElementById("inner").addEventListener(
    "click",
    function () {
      console.log("Button clicked!");
    }
  );
</script>

Result:

If you click the button, the log order will be:

Div clicked!
Button clicked!

The <div> event is processed first because it's in the capturing phase (with true).
Without true, the <button> event would be processed first due to the default bubbling phase.

4. Event Preventing

What is Event Preventing?

Event Preventing is used to block the default behavior of the browser, for example:

Preventing form submission when no data is entered.
Blocking <a> link navigation.
Preventing a checkbox from changing its state.

Example:

<a href="https://google.com" id="myLink">Click me</a>

<script>
  document.getElementById("myLink").addEventListener("click", function (event) {
    event.preventDefault(); // Prevent the link from redirecting
    console.log("Link clicked but not redirected");
  });
</script>

Result:

When you click the link, it does not navigate to Google because event.preventDefault() blocked the default action.

5. Conclusion

Term	Definition
Event Bubbling	The event propagates from the target element up to its parent elements.
Event Delegation	Attach the event listener to the parent element to handle events for child elements.
Event Propagation	The process of an event traveling through the DOM (Capturing → Target → Bubbling).
Event Preventing	Prevent the default browser behavior using `event.preventDefault()`.

This should provide a clearer understanding of these important JavaScript concepts and how they can help you handle events more efficiently.

Visit my blog at: vunguyenit.site

TypeScript Utility Types: Useful types

vunguyeen — Mon, 21 Apr 2025 09:36:46 +0000

1. `Partial<T>`: Makes All Properties of an Object Optional

Partial<T> is one of the most useful types when working with objects. It allows you to easily make all properties of a type optional.

Example:

interface User {
  name: string;
  age: number;
}

const updateUser = (user: Partial<User>) => {
  // You only need to pass in some properties of the user.
};

updateUser({ name: "John" });

In the example above, you can call updateUser with partial information of User, rather than having to pass all properties.

2. `Required<T>`: Makes All Properties of an Object Required

Opposite to Partial<T>, Required<T> makes all properties of an object required.

Example:

interface User {
  name: string;
  age?: number;
}

const user: Required<User> = {
  name: "John",
  age: 30,  // The age cannot be omitted anymore
};

In this example, you cannot create a User object without age.

3. `Pick<T, K>`: Select Some Properties from an Object

Pick<T, K> allows you to create a new type from an existing object with only the specified properties.

Example:

interface User {
  name: string;
  age: number;
  email: string;
}

const contactInfo: Pick<User, "name" | "email"> = {
  name: "John",
  email: "john@example.com",
};

Here, Pick helps you extract only the name and email properties of User, ignoring age.

4. `Omit<T, K>`: Remove Some Properties from an Object

Omit<T, K> is the reverse of Pick. It allows you to create a new type from an object but without certain properties.

Example:

interface User {
  name: string;
  age: number;
  email: string;
}

const userWithoutEmail: Omit<User, "email"> = {
  name: "John",
  age: 30,
};

In this example, Omit helps you create a User object without the email property.

5. `Record<K, T>`: Create an Object with a Specific Key and Value Type

Record<K, T> allows you to define an object with keys of type K and values of type T. This type is very useful when you need an object with dynamic keys.

Example:

type Role = "admin" | "user" | "guest";
const permissions: Record<Role, boolean> = {
  admin: true,
  user: false,
  guest: false,
};

In this example, Record helps create a permissions object with keys from Role and boolean values.

6. `Exclude<T, U>`: Remove Values from a Type

Exclude<T, U> helps you create a new type by removing values of type U from T. This type is useful when you need to remove specific values from a union type.

Example:

type Fruit = "apple" | "banana" | "orange";
type Citrus = Exclude<Fruit, "banana">;
// Citrus only includes "apple" and "orange"

In this example, Exclude helps you remove "banana" from the Fruit type.

7. `NonNullable<T>`: Remove `null` and `undefined`

NonNullable<T> helps you remove null and undefined from a type. This is a great way to ensure that values always have valid values.

Example:

type MyType = string | null | undefined;
type MyNonNullableType = NonNullable<MyType>;
// MyNonNullableType only includes string

NonNullable removes null and undefined from the MyType type.

Summary

TypeScript Utility Types help you write cleaner, more maintainable code and avoid unnecessary errors when working with data types.

Partial<T>: Makes all properties optional.
Required<T>: Makes all properties required.
Pick<T, K>: Selects some properties from an object.
Omit<T, K>: Removes some properties from an object.
Record<K, T>: Creates an object with specific key and value types.
Exclude<T, U>: Removes values from a type.
NonNullable<T>: Removes null and undefined.

Using the correct utility types will help you manage your data types more efficiently and optimize your code! 🚀

Visit my blog at: vunguyenit.site

Debounce vs Throttle in JavaScript: When and Why to Use Them?

vunguyeen — Mon, 21 Apr 2025 08:57:37 +0000

What are Debounce and Throttle?

When users interact with your website – like typing into a search bar, scrolling the page, or resizing the window – those actions can happen frequently and rapidly. If your JavaScript code responds to every single event immediately, performance can degrade quickly.

That’s why debounce and throttle are essential techniques to control how often a function is executed, helping your application remain smooth and responsive.

1. What is Debounce?

Debounce ensures that a function is only executed after a specific amount of time has passed without any further interaction.

In other words, if the user keeps triggering the event (e.g., typing), the function will be delayed until they stop for a set time (e.g., 300ms).

🎯 Real-world example:

In a live search feature, you don’t want to call the API every time the user types a letter. Debounce waits until the user finishes typing and then makes a single call.

function debounce(fn, delay) {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => fn(...args), delay);
  };
}

const handleSearch = debounce((query) => {
  console.log("Calling API with:", query);
}, 300);

input.addEventListener("input", (e) => {
  handleSearch(e.target.value);
});

2. What is Throttle?

Throttle limits how often a function can be called by only allowing one call per specified time interval.

🎯 Real-world example:

When tracking scroll events, you don’t want to run your logic dozens of times per second. Throttle ensures your function runs at regular intervals – say every 200ms – no matter how often the user scrolls.

function throttle(fn, interval) {
  let lastTime = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastTime >= interval) {
      lastTime = now;
      fn(...args);
    }
  };
}

const handleScroll = throttle(() => {
  console.log("Scroll position:", window.scrollY);
}, 200);

window.addEventListener("scroll", handleScroll);

3. When to Use Debounce vs Throttle?

Use Case	Choose	Reason
Typing in search input	`debounce`	Wait until the user stops typing
Window resize	`debounce`	Avoid frequent layout recalculations
Scroll tracking	`throttle`	Limit how often logic runs
Mouse move tracking	`throttle`	Prevent performance issues
Input validation	`debounce`	Reduce unnecessary validations

4. Quick Comparison

	Debounce	Throttle
How it works	Waits for inactivity before running function	Runs function at regular intervals
Execution rate	Once, after delay	Many times, but limited
Think of it like	“Wait until user stops”	“Run every X ms”
Best for	Search, resize	Scroll, drag, mouse movement

5. Using Lodash to Improve Debounce and Throttle

Lodash provides ready-made debounce and throttle functions, making it easier to use without needing to implement the algorithms from scratch.

🎯 How to Use Lodash with Debounce

Lodash provides a debounce function that is simple to use, allowing you to just pass in the function you want to call and the delay time. For example:

import { debounce } from "lodash";

const handleSearch = debounce((query) => {
  console.log("Calling API with:", query);
}, 300);

input.addEventListener("input", (e) => {
  handleSearch(e.target.value);
});

🎯 How to Use Lodash with Throttle

Similar to debounce, Lodash also provides a throttle function to limit the frequency of function execution:

import { throttle } from "lodash";

const handleScroll = throttle(() => {
  console.log("Scroll position:", window.scrollY);
}, 200);

window.addEventListener("scroll", handleScroll);

Using Lodash helps you save time and avoid errors when re-implementing debounce and throttle functions. Moreover, Lodash also supports many other useful utilities like type checking, array and object manipulation, making your code more concise and easier to maintain.

6. Conclusion

Debounce and throttle are powerful techniques that help you control how often your functions execute, making your web apps more efficient and user-friendly.

Next time you're working with real-time inputs or high-frequency events, consider whether your code needs a bit of “restraint” — and let debounce or throttle handle it for you!

Discover more exciting blogs at: vunguyenit.site

DEV Community: vunguyeen

Using Web Workers to Handle Heavy Tasks in the Browser

Introduction

1. What are Web Workers?

2. Why use Web Workers?

Benefits:

Without Web Workers:

3. Example: Using Web Workers to Calculate Factorial

factorialWorker.ts – Worker file

FactorialCalculator.tsx – React component

4. Notes When Using Web Workers

5. When Should You Use Web Workers?

6. Other Advanced Options

Conclusion

Understanding Event Bubbling, Delegation, Propagation, and Preventing in JavaScript

Understanding Event Bubbling, Delegation, Propagation, and Preventing in JavaScript

1. Event Bubbling

2. Event Delegation

3. Event Propagation

4. Event Preventing

5. Conclusion

TypeScript Utility Types: Useful types

1. Partial<T>: Makes All Properties of an Object Optional

2. Required<T>: Makes All Properties of an Object Required

3. Pick<T, K>: Select Some Properties from an Object

4. Omit<T, K>: Remove Some Properties from an Object

5. Record<K, T>: Create an Object with a Specific Key and Value Type

6. Exclude<T, U>: Remove Values from a Type

7. NonNullable<T>: Remove null and undefined

Summary

Debounce vs Throttle in JavaScript: When and Why to Use Them?

What are Debounce and Throttle?

1. What is Debounce?

🎯 Real-world example:

2. What is Throttle?

🎯 Real-world example:

3. When to Use Debounce vs Throttle?

4. Quick Comparison

5. Using Lodash to Improve Debounce and Throttle

🎯 How to Use Lodash with Debounce

🎯 How to Use Lodash with Throttle

6. Conclusion

`factorialWorker.ts` – Worker file

`FactorialCalculator.tsx` – React component

1. `Partial<T>`: Makes All Properties of an Object Optional

2. `Required<T>`: Makes All Properties of an Object Required

3. `Pick<T, K>`: Select Some Properties from an Object

4. `Omit<T, K>`: Remove Some Properties from an Object

5. `Record<K, T>`: Create an Object with a Specific Key and Value Type

6. `Exclude<T, U>`: Remove Values from a Type

7. `NonNullable<T>`: Remove `null` and `undefined`