On Page Performance

In this lesson we'll learn:

• How to read a flamegraph
• Find page jank
• Paint rectangles
• Check your applications FPS
• Understand scripting, rendering and painting
• Find slow functions
• Web vitals

Pragmatic Approaches

• Use requestAnimationFrame
• Use Web Workers
• Use a framework
• Reduce complexity

requestAnimationFrame

// Read
var h1 = element1.clientHeight;

// Write (invalidates layout)
element1.style.height = (h1 * 2) + 'px'

// Read (triggers layout)
var h2 = element2.clientHeight;

// Write (invalidates layout)
element2.style.height = (h2 * 2) + 'px'

// Read (triggers layout)
var h3 = element3.clientHeight;

// Write (invalidates layout)
element3.style.height = (h3 * 2) + 'px'

Enter requestAnimationFrame()

function repeatOften() {
  // Do whatever
  requestAnimationFrame(repeatOften);
}
requestAnimationFrame(repeatOften);

After watching the layout thrashing video, head over to the layout thrashing exercise

Web Workers

You can invoke a worker from any JavaScript file like this:

// script.js
const input = document.querySelector("#input");
const display = document.querySelector("#display");

if (window.Worker) {
  const myWorker = new Worker("worker.js");

  input.onchange = function () {
    myWorker.postMessage(input.value);
    console.log("Message posted to worker");
  };

  myWorker.onmessage = function (e) {
    display.textContent = e.data;
    console.log("Message received from worker");
  };
} else {
  console.log("Your browser doesn't support web workers.");
}

And then just create a worker.js file like this:

// worker.js
onmessage = function (e) {
  console.log("Worker: Message received from main script");
  const result = e.data;
  console.log("Worker: Posting message back to main script");
  postMessage(`Worker received ${result} from the main script`);
};

Running DevTools on Node.js apps

Try killing the current process and running

node --inspect server/server.js

Exercise

Now try to play around with the Performance tab yourself on this page.