Code Monkey home page Code Monkey logo

queue-microtask's Introduction

queue-microtask ci npm downloads javascript style guide

fast, tiny queueMicrotask shim for modern engines

  • Use queueMicrotask in all modern JS engines.
  • No dependencies. Less than 10 lines. No shims or complicated fallbacks.
  • Optimal performance in all modern environments
    • Uses queueMicrotask in modern environments
    • Fallback to Promise.resolve().then(fn) in Node.js 10 and earlier, and old browsers (same performance as queueMicrotask)

install

npm install queue-microtask

usage

const queueMicrotask = require('queue-microtask')

queueMicrotask(() => { /* this will run soon */ })

What is queueMicrotask and why would one use it?

The queueMicrotask function is a WHATWG standard. It queues a microtask to be executed prior to control returning to the event loop.

A microtask is a short function which will run after the current task has completed its work and when there is no other code waiting to be run before control of the execution context is returned to the event loop.

The code queueMicrotask(fn) is equivalent to the code Promise.resolve().then(fn). It is also very similar to process.nextTick(fn) in Node.

Using microtasks lets code run without interfering with any other, potentially higher priority, code that is pending, but before the JS engine regains control over the execution context.

See the spec or Node documentation for more information.

Who is this package for?

This package allows you to use queueMicrotask safely in all modern JS engines. Use it if you prioritize small JS bundle size over support for old browsers.

If you just need to support Node 12 and later, use queueMicrotask directly. If you need to support all versions of Node, use this package.

Why not use process.nextTick?

In Node, queueMicrotask and process.nextTick are essentially equivalent, though there are subtle differences that don't matter in most situations.

You can think of queueMicrotask as a standardized version of process.nextTick that works in the browser. No need to rely on your browser bundler to shim process for the browser environment.

Why not use setTimeout(fn, 0)?

This approach is the most compatible, but it has problems. Modern browsers throttle timers severely, so setTimeout(…, 0) usually takes at least 4ms to run. Furthermore, the throttling gets even worse if the page is backgrounded. If you have many setTimeout calls, then this can severely limit the performance of your program.

Why not use a microtask library like immediate or asap?

These packages are great! However, if you prioritize small JS bundle size over optimal performance in old browsers then you may want to consider this package.

This package (queue-microtask) is four times smaller than immediate, twice as small as asap, and twice as small as using process.nextTick and letting the browser bundler shim it automatically.

Note: This package throws an exception in JS environments which lack Promise support -- which are usually very old browsers and Node.js versions.

Since the queueMicrotask API is supported in Node.js, Chrome, Firefox, Safari, Opera, and Edge, the vast majority of users will get optimal performance. Any JS environment with Promise, which is almost all of them, also get optimal performance. If you need support for JS environments which lack Promise support, use one of the alternative packages.

What is a shim?

In computer programming, a shim is a library that transparently intercepts API calls and changes the arguments passed, handles the operation itself or redirects the operation elsewhere. – Wikipedia

This package could also be described as a "ponyfill".

A ponyfill is almost the same as a polyfill, but not quite. Instead of patching functionality for older browsers, a ponyfill provides that functionality as a standalone module you can use. – PonyFoo

API

queueMicrotask(fn)

The queueMicrotask() method queues a microtask.

The fn argument is a function to be executed after all pending tasks have completed but before yielding control to the browser's event loop.

license

MIT. Copyright (c) Feross Aboukhadijeh.

queue-microtask's People

Contributors

aleclarson avatar benlesh avatar feross avatar karlhorky avatar yunyu avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

queue-microtask's Issues

Accept function arguments?

I realize that this would be a deviation from the standard, but any interest in accepting arguments to be passed to the callback? For example...

queueMicrotask(myFunction, something) // Calls myFunction(something) as a microtask

This functionality is available with setTimeout/setImmediate and can help make code more readable.

I'm happy to submit a PR, just let me know.

globalThis

Because of 92b2739 (where you refactored code to use globalThis) support of node versions older than v12 where dropped (because older node versions doesn't have support of globalThis), which is a breaking change, so you should either:

  • Update major version of your package instead of updating minor version (should be 2.0.0 instead of 1.2.0) and remove version 1.2.0 and 1.2.1 from npm repository
  • Do not use globalThis

If you will not do that a lot of packages that has your package as dependency will fail. I faced this issue right now.
Could you please fix this. Thank you :)

Not compatible with strict mode

This package doesn't work when used with a bundler that enforces strict mode – switching to typeof globalThis.queueMicrotask would fix it

[ issue ] - ReferenceError: globalThis is not defined

node version: 11
os: Linux 4e384c3fd858 4.4.0-141-generic #167-Ubuntu SMP Wed Dec 5 10:40:15 UTC 2018 x86_64 x86_64 x86_64 GNU/Linux
yarn version: v1.13.0

[12:29:25]Step 5/9: Gulp (Command Line) (3s)
[12:29:25][Step 5/9] Content of /opt/buildagent/temp/agentTmp/custom_script6562944589522696064 file: yarn build
[12:29:25][Step 5/9] Starting: /opt/buildagent/temp/agentTmp/custom_script6562944589522696064
[12:29:25][Step 5/9] in directory: /opt/buildagent/work/f109404eb773f13c
[12:29:25][Step 5/9] yarn run v1.13.0
[12:29:25][Step 5/9] warning ../../../../package.json: No license field
[12:29:25][Step 5/9] $ NODE_ENV=production node_modules/.bin/gulp
[12:29:28][Step 5/9] (node:2710) ExperimentalWarning: queueMicrotask() is experimental.
[12:29:28][Step 5/9] ReferenceError: globalThis is not defined
[12:29:28][Step 5/9]     at Object.<anonymous> (/opt/buildagent/work/f109404eb773f13c/node_modules/queue-microtask/index.js:5:25)
[12:29:28][Step 5/9]     at Module._compile (internal/modules/cjs/loader.js:816:30)
[12:29:28][Step 5/9]     at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)
[12:29:28][Step 5/9]     at Module.load (internal/modules/cjs/loader.js:685:32)
[12:29:28][Step 5/9]     at Function.Module._load (internal/modules/cjs/loader.js:620:12)
[12:29:28][Step 5/9]     at Module.require (internal/modules/cjs/loader.js:723:19)
[12:29:28][Step 5/9]     at require (internal/modules/cjs/helpers.js:14:16)
[12:29:28][Step 5/9]     at Object.<anonymous> (/opt/buildagent/work/f109404eb773f13c/node_modules/run-parallel/index.js:4:24)
[12:29:28][Step 5/9]     at Module._compile (internal/modules/cjs/loader.js:816:30)
[12:29:28][Step 5/9]     at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)
[12:29:28][Step 5/9]     at Module.load (internal/modules/cjs/loader.js:685:32)
[12:29:28][Step 5/9]     at Function.Module._load (internal/modules/cjs/loader.js:620:12)
[12:29:28][Step 5/9]     at Module.require (internal/modules/cjs/loader.js:723:19)
[12:29:28][Step 5/9]     at require (internal/modules/cjs/helpers.js:14:16)
[12:29:28][Step 5/9]     at Object.<anonymous> (/opt/buildagent/work/f109404eb773f13c/node_modules/@nodelib/fs.scandir/out/providers/async.js:5:13)
[12:29:28][Step 5/9]     at Module._compile (internal/modules/cjs/loader.js:816:30)
[12:29:28][Step 5/9] info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
[12:29:28][Step 5/9] error Command failed with exit code 1.
[12:29:28][Step 5/9] Process exited with code 1
[12:29:28][Step 5/9] Process exited with code 1 (Step: Gulp (Command Line))
[12:29:28][Step 5/9] Step Gulp (Command Line) failed
ReferenceError: globalThis is not defined

I'm getting this error

Uncaught TypeError: Illegal invocation in Chrome

When using this library in Chrome with a bundler, I get an Uncaught TypeError: Illegal invocation when running it. You can replicate this without the library by assigning queueMicrotask to a field in an object in the Chrome console:

image

queueMicrotask should be bound to window if present. This is not an issue in Node.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.