Dispositivo de navegador da web Chrome moderno (Parte 2/4)

Esta é a parte 2 de 4 que examina o funcionamento interno do Chrome. Na parte anterior, vimos como diferentes processos e threads funcionam com diferentes partes do navegador. Nesta postagem, veremos mais de perto como cada processo e thread interagem para renderizar um site.





Parte 1

Parte 2 (atual)

Parte 3

Parte 4



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


-: URL , . , , — .



*- (browser process)



, , , *-. *- , *UI- (UI thread), , *- (network thread), , *- (storage thread), . URL , *UI- *-.



imagem



1: , *- *UI-, *- *-





= 1.



, , *UI- " URL?". Chrome , *UI- , , , .



imagem



1-bis: *UI- , URL-



= 2.



Enter, *UI- . , *- , DNS TLS .



imagem



2: *UI- *- mysite.com



*- , , HTTP 301. *- *UI-, . URL-.



= 3.



(payload, ) , *- . 'Content-Type' , , , MIME-. " ", . , , 'content-type/payload'



imagem



3: , Content-Type ,



HTML-, *-, zip- - , , , .



imagem



4: *- , HTML



SafeBrowsing. , , *- . , Cross Origin Read Blocking (CORB), , *-.



= 3. *-



, *- , , *- *UI-, . *UI- *- -.



imagem



5: *-, *UI- *-



, . *UI- URL *- 2, , . *UI- *- . , , *- , *- . , , .



= 4.



, *- , IPC *- *- . , *- HTML-. *- , *- , .



, . , "" "" , . / , .



imagem



6: IPC *- *-,



= .



*- . , , . *- "" , IPC *- ( , ). *UI- .



"" , JavaScript .



imagem



7: IPC- *- *- , "".





! , URL ? , , . , , , beforeunload.



beforeunload " ?" . , JavaScript , *-, *- *-, .



: beforeupload. , , . , , , , .

imagem



8: IPC- *- *-, ,



*- (, JavaScript window.location = "https://newsite.com"), *- beforeupload. , . , *- *-.



, , *- , *- , . , Page Lifecycle API.



imagem



9: 2 IPC- *- *-, *-



Service Worker (*-)



service worker. *- — ; - , . *- , .



, *- — JavaScript-, *-. , *- *-?



*- , *- ( The Service Worker Lifecycle). , *- *-, *- URL, *UI- *-, *-. *- , , .



imagem



10: - \-



imagem



11: *UI- *- *- *-; *- *-



(Navigation Preload)



, *- *- , *- . Navigation Preload — *-. , ; , .



imagem



12: *UI- *-, *- *-





Nesta postagem, vimos o que acontece durante a navegação e como o código do seu aplicativo da web, como cabeçalhos de resposta e JavaScript do lado do cliente, interage com o navegador. Saber as etapas pelas quais um navegador passa para buscar dados da web torna mais fácil entender por que APIs como o Navigation Preload foram desenvolvidas. No próximo post, veremos como o navegador lida com HTML / CSS / JavaScript para renderizar páginas.



Parte 1

Parte 2 (atual)

Parte 3

Parte 4




All Articles