DEV Community: Gajanan Patil

JavaScript's queueMicrotask(): Running Code ASAP (But Not Right Now)

Gajanan Patil — Thu, 08 May 2025 11:44:32 +0000

Ever needed to run a piece of JavaScript code right after the current script finishes, but before the browser does anything else like rendering or handling timer callbacks? Meet queueMicrotask()!

It's a fundamental part of understanding JavaScript's concurrency model and the Event Loop.

What Does It Do?

In simple terms, queueMicrotask(callback) schedules a function (callback) to be executed in the microtask queue. Think of it as saying: "Run this function as soon as the current synchronous block of code is done executing, no matter what, and before handling less urgent things."

The Crucial Timing: Microtasks vs. Macrotasks

This is where queueMicrotask() shines and differs from something like setTimeout(callback, 0). Here's the general flow of the event loop:

Execute the current synchronous script/task until the call stack is empty.
Process the Microtask Queue: Execute all functions currently in the microtask queue, one by one, until the queue is empty. New microtasks added during this process are also executed before moving on.
(Optional: Perform UI rendering updates, if needed and conditions allow).
Process the Macrotask Queue: Take one task from the macrotask queue (like a setTimeout callback, setInterval, I/O operation, user interaction handler) and execute it. This execution might queue more microtasks.
Repeat from step 2.

Key takeaway: Microtasks (queueMicrotask, Promise .then/.catch/.finally) have higher priority and run before the next macrotask (setTimeout, setInterval, rendering).

Why Use It?

Fine-grained Control: Perform cleanup or follow-up actions immediately after a block of code finishes, without yielding to the browser's rendering or other macrotasks.
Consistency with Promises: Promise callbacks are handled as microtasks. Using queueMicrotask allows you to schedule work with the same timing semantics.
Frameworks/Libraries: Useful internally in frameworks or libraries to schedule updates or reactions after state changes but before the browser might repaint.

Quick Example

console.log('Start');

// Macrotask - will run much later
setTimeout(() => {
  console.log('setTimeout (Macrotask)');
}, 0);

// Microtask - runs after 'End', before setTimeout
queueMicrotask(() => {
  console.log('queueMicrotask (Microtask)');
});

// Promise.then also queues a Microtask
Promise.resolve().then(() => {
  console.log('Promise.then (Microtask)');
});

console.log('End');

/*
Expected Output:
---------------
Start
End
queueMicrotask (Microtask)
Promise.then (Microtask)
setTimeout (Macrotask)
*/

Conclusion

queueMicrotask() gives you precise control to schedule code execution immediately after the current task, bypassing the queue for larger tasks like timers or rendering. It's a powerful tool when you need that "as soon as possible, but still async" behavior, especially when working alongside Promises.

It's been 3 (tough) years since I last wrote a post on dev.to and it felt nice writing post again. Will try to maintain streak going ahead.

Get subtitles for any audio/video being played in browser

Gajanan Patil — Tue, 05 Apr 2022 19:02:17 +0000

Overview of My Submission

Browser extension that streams selected tab's audio to Deepgram's transcription service and displays result on active tab.

This extension will require a Deepgram API key for transcription. Get it from here

Submission Category:

Accessibility Advocates

Link to Code on GitHub

gajananpp / captioner

Get subtitles for any audio/video being played in browser.

Captioner

Get subtiles/captions for any audio/video being played. Deepgram hackathon submission.

Installation • Usage • Build From Source • Privacy • FAQs

Installation

This extension is published on chrome web store.

Usage

This extension will require a Deepgram API key for transcription. Get it from here

Check demo video

Build from source:

git clone https://github.com/gajananpp/captioner.git

cd captioner

npm install

npm run build

This will output extension in dist folder which you can load in your browser by following this steps.

Privacy

The only external api call this extension makes is to wss://api.deepgram.com/v1/listen passing it the audio blobs from selected audio source as payload.

FAQs

Q: With which browsers is this extension compatible ?
This extension will work with chrome and other chromium based browsers like edge, brave etc. and can be tweaked to work with firefox and other browsers.

Q: From where can this extension be installed ?
This…

View on GitHub

Additional Resources / Info

FAQs :-

Q: From where can this extension be installed ?
This extension is published on chrome web store. Click below to view it in chrome web store or can be built and loaded from source.

Q: Subtitles are slower than audio/video ?
Since unlike Youtube's auto-generated captions where captions are generated when video is uploaded, here it can't seek audio blobs beforehand(could be possible by checking n/w requests having media type responses) so there is a lag. Lag may get reduced by adjusting the timeslice of AudioRecorder. WIP for reducing lag.

Word game

Gajanan Patil — Wed, 30 Mar 2022 14:07:48 +0000

Overview of My Submission

Game made using Deepgram's transcription service and Phaser game framework.

Score by reading out the words you see on screen before they disappear. Try to score as high as possible before time runs out. Difficulty increases with time.

Submission Category:

Gram Gamers

Link to Code on GitHub

gajananpp / word-game

Try to get maximum words before time runs out.

Word Game

Try to get maximum words before time runs out.

Play:

https://gajananpp.github.io/word-game

Building from source:

git clone https://github.com/gajananpp/word-game.git

cd word-game

npm install

# For development
npm run dev

# For production build
npm run build
npm run preview

View on GitHub

Additional Resources / Info

Play:

https://gajananpp.github.io/word-game

Stack Used:

Deepgram STT
Phaser game framework
Sveltekit with static site adapter to deploy on Github pages

Puppeteer IDE Extension: What's new ?

Gajanan Patil — Tue, 25 Jan 2022 17:43:44 +0000

Changes

Added

Multi tabs and scripts support. Now you can store multiple scripts and keep the ones you use often, opened in tabs. Scripts will be stored in browser's storage, nothing goes outside from this extension.
Theme switch. Instead of changing theme of whole devtools window, now there is a separate theme switch for panel.

Dark Theme	Light Theme

$0 suggestion. Typing $0 in editor will give currently selected element's selector suggestion.

Logging unhandled errors in console tab of inspected window. Unhandled errors will now also be logged in inspected window's console tab along with console tab of extension panel.
Keyboard shortcuts.

Fixed

Broken editor icons issue.

More Information

gajananpp / puppeteer-ide-extension

Standalone puppeteer playground in browser's developer tools.

Puppeteer IDE Extension

A standalone extension to write and execute puppeteer scripts from browser's developer tools.

Installation • Usage • Screenshots • Build From Source • Privacy • Todo • FAQs

Installation

This extension is published on chrome web store.

Usage

This extension will add an extra tab named "Puppeteer IDE" in browser's developer tools from where you can write and execute puppeteer scripts.

Use page instance variable directly for the tab in which developer tools is opened.

On clicking Execute button, the script will be executed on the inspected tab.

The script will be auto saved as it is being edited.

Screenshots

Using $0 :-

Dark theme :-

Light theme :-

Build From Source

To build extension from source :-

git clone https://github.com/gajananpp/puppeteer-ide-extension

cd puppeteer-ide-extension

npm install

npm run dist

This will output extension in dist folder which you can load in your browser by following this steps.

…

View on GitHub

⏰ Parikshan - Compiler to measure the running time of javascript functions

Gajanan Patil — Thu, 13 Jan 2022 14:21:10 +0000

Word "parikshan" is originated from Sanskrit language meaning "examine"

Overview of My Submission

Compiles code and wraps function calls in source with Performance hooks.
Reports duration along with details like arguments, calledAt, returnedAt, functionName and location in source code (optional). In case the function returns a promise then finally handler will be attached to the promise and is reported once the finally handler is invoked.
A PerformanceObserver stores the performance entries generated by parikshan in time series collection.
Use this project's MongoDB Charts dashboard file when creating a new dashboard by importing it and connect it to collection created by parikshan.
You can check dashboard for analysis done on botbuilder example repository here.
Check project's README for usage, docs and more information.

Submission Category:

Prime Time

Link to Code

gajananpp / parikshan

🧐 Get insights from your code

⏰ Parikshan

Transpiler to measure the running time of javascript functions.

Installation • Usage • Using with MongoDB • FAQs

Converts

// index.js
greet('John')

// output/index.js
const {parikshan} = require("parikshan/build/src/parikshan");

parikshan(greet)('John');

// if compiled with -s flag then compiles to
parikshan(
  greet,
  {"start":{"line":1,"column":0},"end":{"line":1,"column":13},"filename":"index.js"}
)('John')

Installation

To install this package run:

npm i parikshan -D

or with yarn run:

yarn add parikshan -D

Usage

CLI Usage

npx parikshan@latest -h

parikshan  <files..&gt
Compiles code to performance.measure the functions

Positional Arguments:
  files  One or more files or glob patterns to compile

Options:
  -h, --help        Show help                                          [boolean]
  -v, --version     Show version number                                [boolean]

…

View on GitHub

Additional Resources / Info

Q: How was the example project shown in dashboard compiled ?

NOTE :- having Azure account is not required for this to run. So envs in .env of 43.complex-dialog can be left undefined.

# clone botbuilder samples repo
git clone https://github.com/microsoft/BotBuilder-Samples.git

# goto 43.complex-dialog example
cd BotBuilder-Samples/samples/javascript_nodejs/43.complex-dialog

# install dependencies
npm install

# install parikshan as dev dependency
npm i parikshan -D

# at the beginning of index.js, add
#
# const {initMongoPerfSubscriber} = require('parikshan')
# initMongoPerfSubscriber({
#   dbConnectionString: process.env.DB_CONN_STRING,
#   dbName: process.env.DB_NAME,
#   collectionName: process.env.DB_COLLECTION,
# })

# compile with parikshan
npx parikshan "{,!(node_modules)/**/}*.js" -s

# run compiled code
node build/parikshan/index.js

# converse with bot using botframework emulator. Check README of 43.complex-dialog for info on this.

# performance entries will be stored in collection as users are using bot.
# create your own MongoDB charts dashboard or import dashboard of this project to get insights of your code.

# Adjust refresh time in `Auto-refresh settings` of dashboard according to your need

Dashboard for analysis done on botbuilder example

Using Promise.race usefully

Gajanan Patil — Wed, 22 Dec 2021 14:16:14 +0000

When doing long running tasks like :-

DB query which may take long time
Reading big files
API which may take long time to complete
Waiting for some event

You may want to stop if the task is taking more time than usual to get completed. In that case Promise.race can be useful.

Puppeteer project uses Promise.race to handle page/network lifecycle events with timeouts during automation.

Here's an example :-

/**
 * A utility function which throws error after timeout
 * @param timeout - timeout in seconds
 * @returns - promise which gets rejected after timeout
 */
function timer(timeout) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject(new Error('❌ failed with timeout'))
        }, timeout * 1000)
    })
}

/**
 * Mock db query which take 5 seconds to complete
 * @returns - query promise
 */
function bigQuery() {
    return new Promise((resolve, reject) => {
        setTimeout(resolve, 5 * 1000)
    })
}

// race both bigQuery and timer tasks
// `Promise.race` can take multiple promises if you want to race them all
Promise.race([
    bigQuery(),
    timer(1)
]).then(() => console.log('✅ Query successful within time limit'))
    .catch(console.error)

// ==> will log '❌ failed with timeout'


// also try running above code by changing timer's timeout value to 6, you will get successful log

Promise returned by Promise.race resolve/rejects with whichever promise in array resolves/rejects first. For more info checkout MDN docs.

You can play with the above code here :-


    
/**


A utility function which throws error after timeout
@param timeout - timeout in seconds
@returns - promise which gets rejected after timeout
*/
function timer(timeout) {
return new Promise((resolve, reject) => {
    setTimeout(() => {
        reject(new Error('❌ failed with timeout'))
    }, timeout * 1000)
})
}


/**


Mock db query which take 5 seconds to complete
@returns - query promise
*/
function bigQuery() {
return new Promise((resolve, reject) => {
    setTimeout(resolve, 5 * 1000)
})
}


// race both bigQuery and timer tasks
// Promise.race can take multiple promises if you want to race them all
Promise.race([
    bigQuery(),
    timer(1)
]).then(() => console.log('✅ Query successful within time limit'))
    .catch(console.error)

// ==> will log '❌ failed with timeout'

// also try running above code by changing timer's timeout value to 6, you will get successful log

💡 Let me know in comments other cool ideas using `Promise.race`

See my projects on Github.

How to use built-in Proxy object in javascript

Gajanan Patil — Sat, 18 Dec 2021 16:02:57 +0000

Proxy object allows you to add custom get, set, delete behaviour on your existing object.

Here is one useful way of using Proxy, which will allow us to query json array with value rather than index.


// our array
const items = [
    {
        id: '123',
        name: 'phone'
    },
    {
        id: '789',
        name: 'tablet'
    },
    {
        id: '1011',
        name: 'laptop'
    }
]

// define custom hooks
const handlers = {
    get: (target, prop) => {
        return target.find(item => item.name === prop)
    }
}

// create proxy object
const customItems = new Proxy(items, handlers)

// now you can access our array with name instead of index 😀
console.log(customItems['laptop'])  
// logs => { id: '1011', name: 'laptop'}

For more in depth information check out MDN guide or comment below in case of doubt.

You can play with the above code here :-


    // our array
const items = [
    {
        id: '123',
        name: 'phone'
    },
    {
        id: '789',
        name: 'tablet'
    },
    {
        id: '1011',
        name: 'laptop'
    }
]

// define custom hooks
const handlers = {
    get: (target, prop) => {
        return target.find(item => item.name === prop)
    }
}

// create proxy object
const customItems = new Proxy(items, handlers)

// now you can access our array with name instead of index 😀
console.log(customItems['laptop'])
// logs => { id: '1011', name: 'laptop'}

💡 Post your cool ideas with `Proxy` in comments.

Write, test and execute automation scripts from browser's developer tools

Gajanan Patil — Tue, 14 Dec 2021 13:00:53 +0000

Puppeteer IDE extension is a standalone extension which allows you to write and execute puppeteer scripts from developer tools. It is not required to start browser with remote debugging or have nodejs or any other service installed for this extension to work.

Installation

This extension is published on chrome web store. Click here to view extension on chrome web store.

On adding extension to browser, it will add Puppeteer IDE tab in developer tools. On switching to this tab, it will by default have one test script which you can execute right away.

This extension can be used with other chromium based browsers like edge, brave etc.

Example GIF :-

Usage

You can access puppeteer's page instance variable directly for the tab in which developer tools is opened. On clicking Execute button, the script will be executed on the inspected tab.

The script will be auto saved as you are editing it.

The editor will take the theme of developer tools. You can change developer tool's theme by following this guide.

Light theme screenshot :-

Dark theme screenshot :-

Privacy

This extension is standalone, it won't make any external API calls in the background. You can inspect the network of extension/page and source code.

For more information, checkout this project's Github Repo.

gajananpp / puppeteer-ide-extension

Standalone puppeteer playground in browser's developer tools.

Puppeteer IDE Extension

A standalone extension to write and execute puppeteer scripts from browser's developer tools.

Installation • Usage • Screenshots • Build From Source • Privacy • Todo • FAQs

Installation

This extension is published on chrome web store.

Usage

This extension will add an extra tab named "Puppeteer IDE" in browser's developer tools from where you can write and execute puppeteer scripts.

Use page instance variable directly for the tab in which developer tools is opened.

On clicking Execute button, the script will be executed on the inspected tab.

The script will be auto saved as it is being edited.

Screenshots

Using $0 :-

Dark theme :-

Light theme :-

Build From Source

To build extension from source :-

git clone https://github.com/gajananpp/puppeteer-ide-extension

cd puppeteer-ide-extension

npm install

npm run dist

This will output extension in dist folder which you can load in your browser by following this steps.

…

View on GitHub

Use Puppeteer in browser extension

Gajanan Patil — Mon, 06 Dec 2021 19:46:08 +0000

Problem

Recently in one of the projects, I had to do some automation on web pages through extension. So i wanted to leverage puppeteer api instead of forming and executing raw devtool commands through chrome.debugger extension api directly or dispatching events on target elements through content scripts as some web pages discards the untrusted events.

Solution

To achieve this, I created a puppeteer transport package which will allow you to use puppeteer in your browser extension's background_page(v2)/service_worker(v3). This package internally uses chrome.debugger api for communicating with Chrome Devtools Protocol.

You can check repo here. Repo contains v2 extension/v3 extension examples which you can load in your browser to test.

Usage

Since the target is attached using chrome.debugger api, browser doesn't need to be started using remote debugging flag.

Here is an example code snippet :-

import puppeteer from 'puppeteer-core/lib/cjs/puppeteer/web';
import { ExtensionDebuggerTransport } from 'puppeteer-extension-transport';

const run = async (tabId: number) => {
  const extensionTransport = await ExtensionDebuggerTransport.create(tabId);
  const browser = await puppeteer.connect({
    transport: extensionTransport,
    defaultViewport: null,
  });

  // use first page from pages instead of using browser.newPage()
  const [page] = await browser.pages();

  await page.goto('https://wikipedia.org');

  const screenshot = await page.screenshot({
    encoding: 'base64',
  });
  console.log(`data:image/png;base64,${screenshot}`);

  const englishButton = await page.waitForSelector('#js-link-box-en > strong');
  await englishButton?.click();

  const searchBox = await page.waitForSelector('#searchInput');
  await searchBox?.type('telephone');
  await page.keyboard.press('Enter');

  await page.close();
};

chrome.commands.onCommand.addListener(command => {
  if (command === 'test') {
    chrome.tabs.create(
      {
        active: true,
        url: 'https://www.google.co.in',
      },
      tab => (tab.id ? run(tab.id) : null)
    );
  }
});

Execution :-

With this, from extension you can do :-

automation
monitor and handle page/network lifecycle events
profiling/crawling of web pages
any other thing you would like to use puppeteer for

You can find reference docs for package here.

For more information checkout :-
https://github.com/gajananpp/puppeteer-extension-transport

DEV Community: Gajanan Patil

JavaScript's queueMicrotask(): Running Code ASAP (But Not Right Now)

What Does It Do?

The Crucial Timing: Microtasks vs. Macrotasks

Why Use It?

Quick Example

Conclusion

Get subtitles for any audio/video being played in browser

Overview of My Submission

Submission Category:

Link to Code on GitHub

gajananpp / captioner

Get subtitles for any audio/video being played in browser.

Captioner

Installation

Usage

Build from source:

Privacy

FAQs

Additional Resources / Info

FAQs :-

Word game

Overview of My Submission

Submission Category:

Link to Code on GitHub

gajananpp / word-game

Try to get maximum words before time runs out.

Word Game

Play:

Building from source:

Additional Resources / Info

Play:

Stack Used:

Puppeteer IDE Extension: What's new ?

Changes

Added

Fixed

More Information

gajananpp / puppeteer-ide-extension

Standalone puppeteer playground in browser's developer tools.

Puppeteer IDE Extension

Installation

Usage

Screenshots

Build From Source

⏰ Parikshan - Compiler to measure the running time of javascript functions

Overview of My Submission

Submission Category:

Link to Code

gajananpp / parikshan

🧐 Get insights from your code

⏰ Parikshan

Installation

Usage

CLI Usage

Additional Resources / Info

Using Promise.race usefully

💡 Let me know in comments other cool ideas using Promise.race

How to use built-in Proxy object in javascript

💡 Post your cool ideas with Proxy in comments.

Write, test and execute automation scripts from browser's developer tools

Installation

Usage

Privacy

gajananpp / puppeteer-ide-extension

Standalone puppeteer playground in browser's developer tools.

Puppeteer IDE Extension

Installation

Usage

Screenshots

Build From Source

Use Puppeteer in browser extension

Problem

Solution

Usage

💡 Let me know in comments other cool ideas using `Promise.race`

💡 Post your cool ideas with `Proxy` in comments.