Clever Geek Handbook

フロントエンドのパフォーマンスを最適化します。パート1。重要なレンダリングパス

こんにちは。私の名前はニックです。フロントエンドの開発者です（感動的な拍手）。コードを書くことに加えて、私はhh.ru School ofProgrammersで教えています。



2018-2019年度の講義の記録はyoutubeで見ることができます



今年、フロントエンドのパフォーマンスの最適化について講義し、テキスト形式に変換することにしました。講義が3時間だったので、資料が大きいことがわかりました。したがって、テキストアルマナックを取得しました。





これは、長く読むのは気が進まないが、内容の基本を理解したいという人のためのプレゼンテーションです。



一度に読まないように、Longreadを参照として使用できます。取り上げるトピックのリストは次のとおりです。



  1. パフォーマンスについて考える理由
  2. FMP、TTI +レポートで詳細を読む
  3. 重要なレンダリングパス、DOM、CSSOM、RenderTree
  4. レポートの初回起動パフォーマンスなどを改善するための手順


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



More articles:


All Articles