Ссылки для презентации "Планировщик задач: не замораживаем страницу" HolyJS 2022

links - task scheduler - do not freeze the page 2022.md

Планировщик задач: не замораживаем страницу

Event loop

• Михаил Башуров. Иван Тулуп. Асинхронщина в JS под капотом https://www.youtube.com/watch?v=JrmDTZPsla4
• Филипп Робертс. Что за чертовщина такая event loop? https://www.youtube.com/watch?v=8aGhZQkoFbQ
• Джейк Арчибальд. В цикле https://www.youtube.com/watch?v=cCOL7MC4Pl0&t=424s
• Демо: Влияние JS на UI страницы (воспроизведение видео, выделение текста): https://event-loop-tests.glitch.me/while-true-test.html

Метрики скорости: TTI, TBT

• Addy Osmani. Are long JavaScript tasks delaying your Time to Interactive? https://web.dev/long-tasks-devtools/
• First Contentful Paint: https://web.dev/first-contentful-paint/
• Time to Interactive: https://web.dev/interactive/
• Total Blocking Time: https://web.dev/lighthouse-total-blocking-time/

Про setTimeout(0)

• Ограничение в 4мс на минимальную задержку setTimeout в спецификации: https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#timers
• David Baron. setTimeout with a shorter delay: https://dbaron.org/log/20100309-faster-timeouts
• The difference between microtasks and tasks: https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide#microtasks

Ленивая гидрация:

• Vue:
  • https://github.com/maoberlehner/vue-lazy-hydration
  • https://github.com/znck/lazy-hydration
• React: https://github.com/hadeeb/react-lazy-hydration

Qwik

• Overview:
  • Video: https://www.youtube.com/watch?v=0dC11DMR3fU
  • Docs: https://qwik.builder.io/docs/overview/
• Qwik + React:
  • Video: https://www.youtube.com/watch?v=fLH28rDu97I
  • Docs: https://qwik.builder.io/qwikcity/integrations/react/

React 18+

• Automatic batching with createRoot: reactwg/react-18#21
• Selective Hydration: reactwg/react-18#37
• Progressive Hydration Demo: https://codesandbox.io/s/cocky-bhaskara-itowoo
• Streaming Server Rendering with Suspense: https://www.youtube.com/watch?v=pj5N-Khihgc
• Описание на русском и немного о миграции на новый режим рендеринга: https://habr.com/ru/company/yandex/blog/514016/

Планировщики задач

• React:
  • NPM: https://www.npmjs.com/package/scheduler
  • GitHub: https://github.com/facebook/react/blob/9cdf8a99edcfd94d7420835ea663edca04237527/packages/scheduler/src/forks/Scheduler.js#L599-L630
• Google Maps: https://github.com/WICG/scheduling-apis/blob/main/misc/userspace-schedulers.md#case-study-1-maps-job-scheduler
• LRT: https://github.com/dfilatov/lrt

Браузерные API

• navigator.scheduling.isInputPending():
  • Спецификация: https://wicg.github.io/is-input-pending/
  • Поддержка браузерами: https://caniuse.com/mdn-api_scheduling_isinputpending
• scheduler.postTask():
  • Спецификация: https://wicg.github.io/scheduling-apis/
  • Поддержка браузерами: https://caniuse.com/mdn-api_scheduler_posttask
  • Описание на MDN: https://developer.mozilla.org/en-US/docs/Web/API/Scheduler/postTask
• Оптимизация long tasks с использованием isInputPending() и postTask(): https://web.dev/optimize-long-tasks/
• Better JS scheduling with isInputPending(): https://web.dev/isinputpending/