Optimierung der Frontend-Leistung. Teil 1. Kritischer Renderpfad

Guten Tag. Mein Name ist Nick und ich bin ein Front-End-Entwickler (flüssiger Applaus). Neben dem Schreiben von Code unterrichte ich an der hh.ru School of Programmers.

Die Aufzeichnungen unserer Vorlesungen aus dem Studienjahr 2018-2019 können auf youtube eingesehen werden

Dieses Jahr hatte ich einen Vortrag über die Optimierung der Front-End-Leistung und beschloss, ihn in ein Textformat umzuwandeln. Das Material erwies sich als groß, da die Vorlesung 3 Stunden dauerte. Deshalb haben wir einen Textalmanach bekommen.

Hier ist eine Präsentation für diejenigen, die Longread nicht lesen möchten, aber ein grundlegendes Verständnis des Inhalts haben möchten.

Longread kann als Referenz verwendet werden, um nicht in einer Sitzung zu lesen. Hier ist eine Liste der Themen, die wir behandeln werden:

1. Warum über Leistung nachdenken?
2. FMP, TTI + lesen Sie mehr im Bericht
3. Kritischer Renderpfad, DOM, CSSOM, RenderTree
4. Schritte zur Verbesserung der Leistung beim ersten Start + mehr im Bericht

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