Otimizando o desempenho do front-end. Parte 1. Caminho de renderização crítico

Olá. Meu nome é Nick e sou um desenvolvedor front-end (aplausos líquidos). Além de escrever códigos, eu ensino na Escola de Programadores hh.ru.



As gravações das nossas palestras do ano letivo 2018-2019 podem ser vistas no youtube



Este ano tive uma palestra sobre otimização de desempenho front-end e decidi convertê-la para o formato de texto. O material acabou sendo extenso, pois a palestra teve duração de 3 horas. Portanto, temos um almanaque de texto.





Aqui está uma apresentação para aqueles que relutam em ler uma leitura longa, mas desejam ter uma compreensão básica do conteúdo.



Longread pode ser usado como referência, para não ler de uma vez. Aqui está uma lista dos tópicos que cobriremos:



  1. Por que pensar sobre desempenho
  2. FMP, TTI + leia mais no relatĂłrio
  3. Caminho crítico de renderização, DOM, CSSOM, RenderTree
  4. Etapas para melhorar o desempenho da primeira inicialização e mais no relatório


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




All Articles