Dispositivo Chrome Modern Web Browser (Parte 3/4)

Esta é a parte 3 de 4 sobre como os navegadores funcionam. Anteriormente, vimos a arquitetura e a navegação de multiprocessadores. Neste post, vamos dar uma olhada no que está acontecendo dentro do * processo de renderização.





Parte 1

Parte 2

Parte 3 (atual)

Parte 4



Sobre recursos de tradução
  • , , .. () . — , - . : *-, *-. , , , , , .
  • , , , , . "" , .


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



*- -



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



*- — HTML, CSS JavaScript -, .



imagem



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



imagem

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.



imagem

3: CSS



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



(Layout)



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



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



imagem



4:



imagem



5: DOM *-



— . , , , , ; , .



CSS , . , . Chrome . , BlinkOn Conference .



imagem

6: -





DOM, . , . , , , .



, z-index, HTML, .



imagem



7: , ,



imagem



8: HTML, z-index



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



imagem



9: *- *-



=



, , , . , - *-, .



imagem



10: DOM+, *- *-



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



imagem

11:



, , , , JavaScript.



imagem



12: , - JavaScript



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



imagem



13: JavaScript



* (Compositing)



= ?



imagem



14.



, , , , ? (rasterizing).



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



= *



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



, DevTools Layers.



imagem



15. *



=



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



imagem



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



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



=



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



imagem



17. *- GPU



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



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



*- (draw quads)



, .



*- (compositor frame)



*-, .



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



imagem



18. *- *-. *- GPU



, . *- JavaScript. . , .





*. , .



*- , , , , .



Parte 1

Parte 2

Parte 3 (atual)

Parte 4




All Articles