Done in 0.0166666666 seconds

I'm Alex, nice to meet you!

@alexnmoldovan

Co-Founder @JSHeroes

✍ freecodecamp.org/news/author/alexnm/

No Servus 🇷🇴Timișoara!

Open Source Engineer @teleportHQ

http://bit.ly/revojs-alex

"We will build sites that perform badly"

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

Browser Rendering Pipeline

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...

Audit Time!

1. DOM Access

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"
    }
}

1. DOM Access

2. JavaScript

Avoid Long Running Handlers

Event Throttling

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

Passive Event Listeners

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

1. DOM Access

2. JavaScript

3. Animations

JavaScript Animations

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

https://itnext.io/javascript-raf-requestanimationframe-456f8a0d04b0