Performance & Rendering — Series 2

Preview — 3 of 10 questions

What is the logging order?

javascript

console.log('Main thread: start');

const worker = new Worker('heavy-calc.js');
worker.postMessage(40);

worker.onmessage = (e) => {
  console.log('Main thread: result', e.data);
};

console.log('Main thread: continues immediately');

A"start" → "continues immediately" → "result ..."

B"result ..." → "start" → "continues immediately"

CThe main thread pauses at worker.postMessage(40) until the worker responds

D"start" → "result ..." → "continues immediately"

Which statement correctly describes requestIdleCallback(callback)?

AIt runs callback immediately, synchronously, before continuing execution.

BIt guarantees callback runs within 1 millisecond.

CIt schedules callback to run only during a period when the browser's main thread is otherwise idle, deprioritized below rendering and user input.

DIt is a direct alias for setTimeout(callback, 0).

Which of these two ways to move element 100px to the right is generally more performant for animation, and why?

javascript

// Approach 1
element.style.left = '100px';

// Approach 2
element.style.transform = 'translateX(100px)';

AApproach 2 (transform), because it can typically be handled by the compositor alone, skipping layout and paint.

BThey are equally performant — the browser optimizes both identically.

CApproach 1 (left), because percentage-based positioning is cheaper than pixel-based transforms.

DApproach 1 (left), because transform requires JavaScript recalculation on every frame.

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