https://github.com/edbzn/post-task-scheduler-playground

https://github.com/edbzn/post-task-scheduler-playground

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/edbzn/post-task-scheduler-playground
• Owner: edbzn
• Created: 2024-01-06T15:19:19.000Z (12 months ago)
• Default Branch: master
• Last Pushed: 2024-01-06T15:50:09.000Z (12 months ago)
• Last Synced: 2024-10-18T09:14:05.177Z (2 months ago)
• Language: HTML
• Size: 2.89 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Scheduler playground

Following the [optimize long tasks](https://web.dev/articles/optimize-long-tasks) article, here's a playground to try the browser's native scheduling API.

This example renders a list of 100,000 div elements and x4 CPU throttling.

```js

for (let i = 0; i < 100_000; i++) {

  // with scheduling

  scheduler.postTask(() => render(i))

  // without scheduling

  // render(i)

}

function render(i) {

  const item = document.createElement('div')

  item.innerText = `Item ${i}`

  item.style.display = 'inline-block'

  document.body.appendChild(item)

}

```

## Results

### without scheduling

Results in a single huge 8.35s user-blocking task (FCP 11.16s).

[base-profile.json](base-profile.json)

![base-profile](base-profile.png)

### with scheduling using `scheduler.postTask(render)`

Results in many non-blocking tasks (FCP 3.74s).

[post-task-profile.json](post-task-profile.json)

![post-task-profile](post-task-profile.png)