Can we allow JS functions to opt-in to be prempted?
An expensive synchronous function will jank the UI:
function expensive() {}
Justin Fagnani justinfagnani
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| async function findIndexAsync(promises, predicate) { | |
| let i = 0; | |
| for await (const p of asyncIterate(promises)) { | |
| if (predicate(p)) { | |
| return i; | |
| } | |
| i++; | |
| } | |
| } |
justinfagnani
/ example-worker.ts
Created
August 7, 2018 14:12
ModuleWorker - Easily access and call exports of a JS module in a Worker
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export const a = 'hello'; | |
| export const f = (a: any, b: any, c: any) => { | |
| return { | |
| a, b, c | |
| }; | |
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import {LitElement, html} from 'lit-element'; | |
| import {UseWindowSize} from './useWindowSize.js'; | |
| class extends UseWindowSize()(LitElement) { | |
| render() { | |
| return html` | |
| <p> | |
| width: ${window.innerWidth} | |
| height: ${window.innerHeight} | |
| </p> |
justinfagnani
/ index.html
Last active
January 2, 2019 22:41
— forked from jridgewell/index.html
Text data vs nodeValue #jsbench #jsperf (http://jsbench.github.io/#b962f11b0802e9be42b4b0a660520727) #jsbench #jsperf
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <title>Text data vs nodeValue #jsbench #jsperf</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script> | |
| <script src="./suite.js"></script> | |
| </head> | |
| <body> | |
| <h1>Open the console to view the results</h1> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import lottie from './lib/lottie-import.js'; | |
| export class LottiePlayerElement extends HTMLElement { | |
| get src(): string | null { | |
| return this.getAttribute('src'); | |
| } | |
| set src(v: string | null) { | |
| if (v == null) { |
justinfagnani
/ index.html
Last active
September 5, 2019 17:31
— forked from jridgewell/index.html
Directive Implementations (https://jsbench.github.io/#4f3d62eb97bd1c992a5257d34fcebea0) #jsbench #jsperf
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <title>Directive Implementations</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script> | |
| <script src="./suite.js"></script> | |
| </head> | |
| <body> | |
| <h1>Open the console to view the results</h1> |
justinfagnani
/ index.html
Created
December 14, 2019 04:02
— forked from jridgewell/index.html
Creating an TreeWalker, DOM element, and setting a walker's currentNode #jsbench #jsperf (https://jsbench.github.io/#26a49a6033a8a5de00d00e05bf2cb275) #jsbench #jsperf
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <title>Creating an TreeWalker, DOM element, and setting a walker's currentNode #jsbench #jsperf</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script> | |
| <script src="./suite.js"></script> | |
| </head> | |
| <body> | |
| <h1>Open the console to view the results</h1> |
justinfagnani
/ README.md
Last active
February 8, 2020 05:38
This is a reproduction for https://bugs.chromium.org/p/chromium/issues/detail?id=1050221
To reproduce:
- Download gist
- run
npm i - run
npm start
Chrome will start, cycle through some async tasks, and print the duration to the document and the terminal running node. On my laptop it takes ~500ms.
Next, run npm start again, bug switch back to the terminal as soon as Chrome launches. There should be enough time to put Chrome in the background before the task completes. The tasks should either never start or never complete. If you put Chrome in the foreground, the tasks will finish quickly.
justinfagnani
/ Async Module Initialization.md
Last active
January 26, 2021 08:24
Async Module Initialization with Inline Modules
Modules may need to load non-JS resources that would clearly categorized as dependencies - the module is not truly ready until those resources are (example: templates for UI components). Loading APIs, like fetch() are asynchronous, and there is currently no way to make a module wait for asynchronous calls.
Top-level await, which would block execution within a module on a await expression, has been proposed as a way to solve this problem. It has a critical problem as highlighted here by Rich Harris.