Optimización del rendimiento de la interfaz. Parte 1. Ruta de procesamiento crítica

Hola. Mi nombre es Nick y soy desarrollador front-end (aplausos líquidos). Además de escribir código, enseño en la Escuela de Programadores de hh.ru.

Las grabaciones de nuestras conferencias del curso 2018-2019 se pueden ver en youtube

Este año tuve una conferencia sobre la optimización del rendimiento de la interfaz y decidí convertirla a formato de texto. El material resultó ser extenso, ya que la conferencia duró 3 horas. Por lo tanto, obtuvimos un almanaque de texto.

Aquí hay una presentación para aquellos que son reacios a leer textos largos, pero quieren tener una comprensión básica del contenido.

Longread se puede utilizar como referencia, para no leer de una sola vez. Aquí hay una lista de los temas que cubriremos:

1. Por que pensar en el rendimiento
2. FMP, TTI + leer más en el informe
3. Ruta de procesamiento crítica, DOM, CSSOM, RenderTree
4. Pasos para mejorar el rendimiento del primer arranque y más en el informe

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