Navigateur Web moderne Chrome (partie 3/4)

Ceci est la troisième partie de 4 sur le fonctionnement des navigateurs. Plus tôt, nous avons examiné l'architecture et la navigation multiprocesseurs. Dans cet article, nous examinerons ce qui se passe dans le processus de rendu *.





Partie 1

Partie 2

Partie 3 (actuelle)

Partie 4



À propos des fonctionnalités de traduction
  • , , .. () . — , - . : *-, *-. , , , , , .
  • , , , , . "" , .


*- . *- , . , "" Web Fundamentals .



*- -



*- , . *- , . JavaScript , web worker *- (service worker). *- (compositor threads) *- (raster threads) *- .



*- — HTML, CSS JavaScript -, .



image



1: *- , worker , *-, *-





= DOM



HTML-, (HTML) Document Object Model (DOM).



DOM — , API, - JavaScript.



HTML- DOM HTML. , HTML . , </p> HTML. , Hi! <b>I'm <i>Chrome</b>!</i> ( b i) , Hi! <b> <i></i></b><i>!</i>. , HTML . , , " " HTML.



=



- , , CSS JavaScript. . , , DOM, "preload scanner ". HTML- , <img> <link>, preload scanner , HTML-, *- *-.



image

2: HTML DOM



= JavaScript



HTML- <script>, HTML , JavaScript . ? JavaScript , , document.write(), DOM ( HTML ). HTML , JavaScript, HTML-. , JavaScript, V8 .





, - , . JavaScript document.write(), async defer <script>. JavaScript . JavaScript , . <link rel="preload"> — , , . Resource Prioritization – Getting the Browser to Help You.





DOM , , , CSS. CSS DOM. , CSS-. CSS DevTools.



image

3: CSS



CSS, DOM . <h1> , <h2>, . , . , CSS Chrome, .



(Layout)



*- , . , . " " — , , .



. DOM *- (layout tree), , x y . *- DOM, , , . display: none, *- (, visibility: hidden *-). , - p::before{content: "Hi!"}, *-, DOM-.



image



4:



image



5: DOM *-



— . , , , , ; , .



CSS , . , . Chrome . , BlinkOn Conference .



image

6: -





DOM, . , . , , , .



, z-index, HTML, .



image



7: , ,



image



8: HTML, z-index



, *- (*-, Paint Records). *- — " , , ". <canvas> JavaScript, .



image



9: *- *-



=



, , , . , - *-, .



image



10: DOM+, *- *-



, . 60 ; , . , , "" ("janky").



image

11:



, , , , JavaScript.



image



12: , - JavaScript



requestAnimationFrame() JavaScript () . JavaScript. JavaScript Web Workers, .



image



13: JavaScript



* (Compositing)



= ?



image



14.



, , , , ? (rasterizing).



, viewport. , . Chrome , . , * (compositing).



= *



* — , , "-" (*-, compositor thread). , , , — . , .



, DevTools Layers.



image



15. *



=



, , *- *- ( "Update Layer Tree" Performance DevTools). , (, -), , , will-change CSS.



image



16. *- (layout tree) *- (layer tree)



, * , , . , , . Stick to Compositor-Only Properties and Manage Layer Count.



=



*- *-. *- . , , *- *- (raster threads). *- GPU.



image



17. *- GPU



*- *-, viewport ( ) . , , .



, *- , *- (draw quads), *- (compositor frame).



*- (draw quads)



, .



*- (compositor frame)



*-, .



IPC- *- *-. *UI- *- *- . *- GPU . , *- *- GPU.



image



18. *- *-. *- GPU



, . *- JavaScript. . , .





*. , .



*- , , , , .



Partie 1

Partie 2

Partie 3 (actuelle)

Partie 4




All Articles