"We will build sites that perform badly"

"We shouldn't be afraid of getting our hands dirty"

JavaScript

Style Calc

Layout

Paint

Composite

📜

💅

🎨

📚

📏

1 second = 60 frames

1/60 = 0.0166666666s

= 16 ms for rendering

16 ms

10ms

In an ideal world...

javascript logic

business logic

event handlers

data fetching

dom diffing

data processing

...

16 ms

10ms

40ms

In the real world...

Multiple DOM accesses

https://areknawo.com/dom-performance-case-study/

for (let index = 0; index < newsItems.length; index++) {
    const newsBox = document.createElement('div')

    /* ... */

    const newsItemsList = document.getElementById('news-items-list')
    newsItemsList.appendChild(newsBox)
}

Involuntarily Layout Trigger

https://gist.github.com/paulirish/5d52fb081b3570c81e3a

const header = document.getElementById('header')

function handleScroll() {
    if (window.scrollY > 50) {
        header.style.position = "fixed"
    }
}

Forced Synchronous Layout = FSL

FSL = Layout Trashing

const header = document.getElementById('header')

function handleScroll() {
    if (window.scrollY > 50) {
        header.style.position = "fixed"
    }
}

Avoid Long Running Handlers

Event Throttling

https://css-tricks.com/the-difference-between-throttling-and-debouncing/

Passive Event Listeners

addEventListener('touchstart', onTouchStart, {passive: true});

JavaScript Animations

 function animateBox() {
    /* ... */
    offset = offset + step
    box.style.marginLeft = offset + "px";
    /* ... */
    requestAnimationFrame(animateBox);
} function animateBox() {
    /* ... */
    offset = offset + step
    box.style.marginLeft = offset + "px";
    /* ... */
    requestAnimationFrame(animateBox);
} function animateBox() {
    /* ... */
    offset = offset + step
    box.style.marginLeft = offset + "px";
    /* ... */
    requestAnimationFrame(animateBox);
} function animateBox() {
    /* ... */
    offset = offset + step
    box.style.marginLeft = offset + "px";
    /* ... */
    requestAnimationFrame(animateBox);
}