Mengoptimalkan kinerja frontend. Bagian 1. Jalur Render Kritis

Halo. Nama saya Nick, dan saya adalah pengembang front-end (tepuk tangan meriah). Selain menulis kode, saya mengajar di Sekolah Programmer hh.ru.

Rekaman perkuliahan kami tahun ajaran 2018-2019 dapat dilihat di youtube

Tahun ini saya mendapat kuliah tentang mengoptimalkan kinerja front-end dan memutuskan untuk mengubahnya menjadi format teks. Materinya ternyata besar, karena waktu kuliahnya 3 jam. Oleh karena itu, kami mendapat almanak teks.

Berikut adalah presentasi bagi mereka yang enggan membaca longread, tetapi ingin memiliki pemahaman dasar tentang isinya.

Longread bisa dijadikan referensi, agar tidak terbaca sekaligus. Berikut daftar topik yang akan kami bahas:

1. Mengapa memikirkan tentang kinerja
2. FMP, TTI + baca lebih lanjut di laporan
3. Jalur render penting, DOM, CSSOM, RenderTree
4. Langkah-langkah untuk meningkatkan kinerja booting pertama + lebih banyak dalam laporan

. , layout, repaint, composite . : https://habr.com/ru/company/hh/blog/517594/

?

0.1 — gap, , , \.

, , \\ , " ". , ( windows) - . . , , , ", , ".

. - ( ) , . : “ ", . .

0.1 ? , " ".

“30 seconds to mars — hurricane”. - 9:30. , .

1 — . - . 1 — . , .

, : , , , , , ( ), , . — .

1 — , , .

10 — , " " : 30 . 5 1/6 . 10 — .

— 1 10 . — , — , .. ? . . , , , , , 2007, . .

— , . , ..

:

• Walmart: 1 + 2%
• Amazon: 0,1 1%
• - ( , )

— :

, .

lighthouse hh.ru. “ ” ( mobile, desktop ):

:

1. ?
2. ?

" ".

: " ” — . “ ” . .

3 :

1. ( html )
2. ( ..)
3. SPA —

, . : FMP (First Meaningful Paint) TTI (Time to interactive), , :

: FMP == , (, ). TTI == . , , .

FMP\TTI , , ++. , .

— FMP. , " " , . C ( ) FMP , Critical render path. Critical render path — , , , , . — html, css ( - ), .

Critical render path , ?

TL&DR;

1. (DNS resolve, TCP ..);
2. HTML-;
3. HTML ;
4. DOM tree (document object model);
5. . CSS, JS ( );
6. CSS- ( JS-);
7. CSSOM tree;
8. JS-. layout, js reflow;
9. DOM tree ( );
10. Render tree;
11. (layout → paint → Composite).

:

:

Request

, DNS, IP, TCP , .. , .

Response

, , . , :

, , text/html, "navigate" ( ServiceWorker) html DOM.

, :

DOM

DOM

. :

. , .

html . CSS, JS , DOM, ( css preload + rel stylesheet). , JS, .

, , . , , . , head, , . DOM :

CSSOM

, meta title style ( link). DOM, CSS, , CSS. :

(head) CSSOM , . , .

CSSOM , RenderTree.

RenderTree

.

, . , head, . :

, . ? DevTools “DOM". , , DevTools DOM , RenderTree.

:

Elements. "" . , , , ..

RenderTree, — Layout ⇒ Paint ⇒ Composite . .

Layout ⇒ Paint ⇒ Composite , . .

, FMP TTI?

TL&DR;

1) :

1.1) . js, css. , .

1.2) , ( !)

1.3) third-party

1.4)

2) HTTP2.0 / HTTP3.0:

2.1)

2.2)

2.3) Server push

3) Brotli

4) , ETag + Service worker

:

. JS

2 : .

— , . . loadable-components react-imported-component vue .. , .

:

1. JS
2. .

. , , “” “”. .

:

1: → ,

, (index.html), 2 : Common.JS + applicant+index.JS, /applicant 4 . . HTTP2.0.

:

+: ,

+: ,

-: . HTTP2.0.

2: :

, , , . , . 1 ? Chrome.

+:

-: , HTTP2.0

-: , 1 . Service worker. .

, .

3: :

+: . JS + Common.JS

-: unused JS

-: , .

, .

- 1: , common:

. , . , 2 : Common.JS Index.JS . , Dropdown.JS Graph.JS .

, .

. TTI . JS, . ? JS .

. 30 JS , 30

JS , , - , .

, JS , , , .

, JS , .

. CSS

FMP, CSS.

react\vue\angular, , . , react- :

import './styles.css'

, JS- CSS, . common.css, applicant-page.css applicant+employer.css.

CSS , used-styles : "optimising css delivery". kashey :)

, hh.ru lighthouse:

, , .

. , . , .

, . CSS, . CSS, , popup-, JS , , rel=stylesheet JS , prefetch onload .

, FMP. , , .

third-party

hh . !

? -10 7 — third-party.

?

1. , FMP.
2. ( , popup- ) — "" . , requestIdleCallback. , .

FMP, TTI - . third-part .

TTI. , - , , , . :

1. ,
2. , ,
3. \ . .

HTTP2.0

HTTP2.0 , .

HTTP2.0

, HTTP2.0 .

, 6 , , . JS. , HTML:

:

- : . .

, TCP handshake . , - .

“ CSS \ JS ” — .

?

HTTP :

, . .

HTTP2.0

http2.0 . HTTP2.0 HPACK, . .

. , HPACK :

:

1. —
2. —

Huffman coding. .

HTTP2.0 Server push

server push . . : html , - , - css, - - JS.

(nginx):

location = /index.html {
    http2_push /style.css;
    http2_push /bundle.JS;
    http2_push /image.jpg;  
}

, :

. , -. - , nginx, http2_push .

gzip brotli. , :

hh.ru gzip . 736 657. 12%.

Brotli "" . , gzip. nginx , , . . gzip.

Brotli — ! - 3G , , lighthouse.

: lighthouse, . FMP, TTI.

, Service Worker.

, 3 :

1. last-modified expires
2. ETag
3. Cache-control

(last-modified expires) , ETag — , , 304 . , . Nginx :

location ~* ^.+\.(js|css)$ {    
        ...
    etag on;
}

Disk cache dev tools:

Cache-control — , . , cache-control: no-cache, html , . max-age, . , Cache-control:

cache-control: max-age=315360000, public

( ), . , , ..

, , v8

:

" " : cold\warm hot run. , hot run, . .

, hot run, ( ) 72 . — warm run, .

hot run, Service Worker. :

1. Service Worker;
2. Service worker fetch;
3. fetch , ;
4. .

hot run . , .

:

self.addEventListener('fetch', function(event) {
        //  ,   
    if (event.request.url.indexOf(staticHost) !== -1 && event.request.url.search(/\.(svg|png|jpeg|jpg|gif)/) === -1) {
        return event.respondWith(
                        //     
            caches.match(event.request).then(function(response) {
                if (response) {
                    return response;
                }
                                //     ,       ,   cacheStatic
                return fetch(event.request).then(function(response) {
                    caches.open(cacheStatic).then(function(cache) {
                        cache.add(event.request.url);
                    });

                    return response;
                });
            })
        );
    }
});

Critical render path ( , DNS, handshake, ..). , , . ( ..)/ : , , , .

, .

: , . , chrome 85 content-visibility, .