The Browser
Engine

1. The Pixel Pipeline

Understanding which properties trigger Layout vs Paint vs Composite is critical for performance.

Why `transform` and `opacity` are the only safe animations? Because they skip Layout and Paint, going straight to Composite (GPU).

2. CSS Houdini

Stop waiting for standard bodies. Write your own CSS features using Javascript Worklets.

Paint API

/* paint-worklet.js */
registerPaint('blobs', class {
  paint(ctx, size, props) {
    ctx.fillStyle = 'hotpink';
    ctx.beginPath();
    ctx.arc(size.width/2, size.height/2, 50, 0, 2*Math.PI);
    ctx.fill();
  }
});

/* style.css */
.cool-div {
  background: paint(blobs);
}

3. Shadow DOM & Encapsulation

The dawn of true modularity. :host, :host-context, and ::part allow you to build un-breakable components.