Skip to content

Instantly share code, notes, and snippets.

View somarlyonks's full-sized avatar
🎹
Easy

Yang somarlyonks

🎹
Easy
14 followers · 7 following
View GitHub Profile
@jesstelford
jesstelford / README.md
Last active November 14, 2023 12:26
Starving the Event Loop with Microtasks

Starving the Event Loop with microtasks

"What's the Event Loop?"

Sparked from this twitter conversation when talking about doing fast async rendering of declarative UIs in Preact

These examples show how it's possible to starve the main event loop with microtasks (because the microtask queue is emptied at the end of every item in the event loop queue). Note that these are contrived examples, but can be reflective of situations where Promises are incorrectly expected to yield to the event loop "because they're async".

  • setTimeout-only.js is there to form a baseline
@jesstelford
jesstelford / event-loop.md
Last active October 16, 2025 15:48
What is the JS Event Loop and Call Stack?

Regular Event Loop

This shows the execution order given JavaScript's Call Stack, Event Loop, and any asynchronous APIs provided in the JS execution environment (in this example; Web APIs in a Browser environment)

Given the code

@paulirish
paulirish / what-forces-layout.md
Last active December 15, 2025 09:56
What forces layout/reflow. The comprehensive list.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent