scheduler.yield() - новий підхід до покращення продуктивності вебзастосунків

💡 Усі статті, обговорення, новини про Front-end — в одному місці. Приєднуйтесь до Front-end спільноти!

Привіт!

Можливо чули вже про експерементальну фічу scheduler.yield(), дозволяє «вклинитись» у основний потік та тимчасово перервати, щоб обробити важливіші задачі, як-от кліки чи анімації...

Записав, коротке відео на цю тему 👇

Happy codding,

Yuriy

👍ПодобаєтьсяСподобалось0
До обраногоВ обраному1
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Можливо чули вже про експерементальну фічу scheduler.yield()

Нагадує Application.ProcessMessages :)
Та наче і раніше особливо нічого не заважало розірвати задачу і перейти на наступний тік івентлупа, надаючи можливість брауpеру розгребти IO, просто в потрібний момент вклинити макрозадачу через await new Promise(resolve => setTimeout(resolve)); але мабуть це якось зробили більш оптимізованим.

codesandbox.io/...​-ulsvq?file=/src/index.js

import {antifreeze, isNeeded} from "antifreeze2";

// A function with heavy computations
const fibAsync = async(n) => {
  let a = 1n, b = 1n, sum, i = n - 2;
  while (i-- > 0) {
    sum = a + b;
    a = b;
    b = sum;
    if (isNeeded()) {      // If more than 10ms have passed since the last run of the eventloop cycle
      await antifreeze();  // let the event loop get polled
    }
  }
  return b;
};

(async (n) => {
  let ts = Date.now();
  const start = ts;
  let ticks = 0;

  const timer = setInterval(() => {
    const now = Date.now();
    console.log(`Timer tick [${now - ts}ms]`);
    ts = now;
    ticks++;
  }, 100);

  const result = await fibAsync(n);

  console.warn(`\nTimer ticks: ${ticks}\n[${Date.now() - start}ms] Fibonacci(${n}) = ${result}`);

  clearTimeout(timer);
})(500000);

Підписатись на коментарі