Performance & Rendering — Series 3

Preview — 3 of 10 questions

Which call fails?

javascript

const worker = new Worker('w.js');

worker.postMessage({ id: 1, when: new Date(), rows: new Map([['a', 1]]) }); // A
worker.postMessage([1, 2, 3]);                                             // B
worker.postMessage({ transform: (x) => x * 2 });                           // C
worker.postMessage(buffer, [buffer]);                                      // D — buffer is an ArrayBuffer

AA — Date and Map are not clonable.

BB — arrays must be converted to typed arrays first.

CC — functions cannot be structurally cloned.

DD — an ArrayBuffer cannot be transferred, only copied.

A requestAnimationFrame, a setTimeout(fn, 0) and a requestIdleCallback are all scheduled from the same click handler. Which statement is correct?

ArequestIdleCallback runs first, since idle work is prioritised to keep frames free.

BAll three run in the same task, in the order they were registered.

CsetTimeout always runs after the next paint, because timers are frame-aligned.

DThe setTimeout callback runs as the next macrotask, the rAF callback runs just before the next paint, and the idle callback runs only if time remains after that frame's work — or when its timeout expires.

Which loop forces a synchronous reflow on every iteration?

javascript

// A
for (const el of boxes) {
  const w = el.offsetWidth;
  el.style.width = w + 10 + 'px';
}

// B
const widths = boxes.map((el) => el.offsetWidth);
boxes.forEach((el, i) => (el.style.width = widths[i] + 10 + 'px'));

ANeither — reading a layout property never triggers work.

BA, because each read follows a write and forces the pending style changes to be flushed.

CB, because map allocates an intermediate array.

DBoth, equally — the browser recalculates layout after every statement.

Answer all 10 questions (7 more), see explanations for every answer, and track your score.