Fix lỗi Force layout, reflow ảnh hưởng tới performance Frontend

Tại sao nên đọc bài này?

• Tìm hiểu xem Force Layout, reflow là gì?

• Cách khắc phục, work around

Force layout

if (window.innerWidth < MOBILE_SIZE) {

Layout Thrashing means: Forcing the browser to calculate a layout that is never rendered to the screen.

Layout Thrashing happens, when you request layout information of an element or the document, while layout is in an invalidated state.

// any DOM or CSSOM change flags the layout as invalid
document.body.classList.add('foo');

// reads layout == forces layout calculation
const box = element.getBoundingClientRect();

// write/mutate
document.body.appendChild(someBox);

//read/measure
const color = getComputedStyle(someOtherBox).color;

Fuck off 🖕, đừng có đụng vào cây DOM của tao. Tụi mày nên tôn trọng và tự sửa code lại cho hợp lý đi nhá

Sửa sao cho vừa lòng Browser?

• Read layout

• Mutate DOM

// reads layout
const box = element.getBoundingClientRect();
const color = getComputedStyle(someOtherBox).color;

// write
document.body.classList.add('foo');
document.body.appendChild(someBox);

import fastdom from 'fastdom';

function resizeAllParagraphsToMatchBoxWidth(paragraphs, box) {

    fastdom.measure(() => {
        const width = box.offsetWidth;

        fastdom.mutate(() => {
            for (let i = 0; i < paragraphs.length; i++) {
                paragraphs[i].style.width = width + 'px';
            }
        });
    });
}

Lifecycle của một frame

1. Nhận input event từ user. Có thể là click, scroll, touch,…

2. JS xử lý đống event đó

3. requestAnimationFrame và Observer callback chạy (nếu có)

4. Sau khi mọi thứ đủ đầy, commit mọi thứ ra màn hình - nghĩa là mapping những thứ đã tính toán được (Div này width bao nhiêu, height bao nhiêu, position ở đâu, bla bla) ra màn hình máy tính của user

Cách debug

What forces layout/reflow. The comprehensive list.

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck. Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout.

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

Cách workaround

window.widthCached = window.innerWidth

Nguồn

What forces layout/reflow. The comprehensive list.

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck. Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout.

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

Avoid Layout Thrashing - The easy way

Layout Thrashing means: Forcing the browser to calculate a layout that is never rendered to the screen.

https://afarkas.github.io/layout-thrashing

Các bài viết “lan quyên”

Frontend performance pattern

Các pattern thường được sử dụng ở frontend để tối ưu performance Ứng dụng vào việc optimize perform cho website của bạn Thuyết phục sếp và đồng nghiệp Đầu tiên phải công nhận là khi bắt đầu thiết kế hệ thống, structure cho app nghĩa là mình đang tradeoff, mình thêm phần này và bớt phần kia, để từ đó xây dựng được một hệ thống fit nhất với problem đang giải quyết.

https://thanhle.blog/blog/frontend-performance-pattern-vi

Server side rendering với Hydration lãng phí tài nguyên như thế nào?

Tìm hiểu về cách các app React, Vue, Svelte đang làm với Sever side rendering và nó lãng phí tài nguyên như thế nào

https://thanhle.blog/blog/server-side-rendering-voi-hydration-lang-phi-tai-nguyen-nhu-the-nao

Optimize TTI và FID cho Nextjs một cách super đơn giản

Như tít: "Optimize TTI và FID cho Nextjs một cách super đơn giản" Islands Architectures cho Nextjs Before After Như bài viết trên, Hydration là quá trình khá LÃNG PHÍ TÀI NGUYÊN vì nó cần load code của component và render tới hai lần.

https://thanhle.blog/blog/optimize-tti-v%C3%A0-fid-cho-nextjs-mot-cach-super-don-gian