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
- , , .. () . — , - . : *-, *-. , , , , , .
- , , , , . "" , .
-: URL , . , , — .
*- (browser process)
, , , *-. *- , *UI- (UI thread), , *- (network thread), , *- (storage thread), . URL , *UI- *-.
1: , *- *UI-, *- *-
= 1.
, , *UI- " URL?". Chrome , *UI- , , , .
1-bis: *UI- , URL-
= 2.
Enter, *UI- . , *- , DNS TLS .
2: *UI- *- mysite.com
*- , , HTTP 301. *- *UI-, . URL-.
= 3.
(payload, ) , *- . 'Content-Type' , , , MIME-. " ", . , , 'content-type/payload'
3: , Content-Type ,
HTML-, *-, zip- - , , , .
4: *- , HTML
SafeBrowsing. , , *- . , Cross Origin Read Blocking (CORB), , *-.
= 3. *-
, *- , , *- *UI-, . *UI- *- -.
5: *-, *UI- *-
, . *UI- URL *- 2, , . *UI- *- . , , *- , *- . , , .
= 4.
, *- , IPC *- *- . , *- HTML-. *- , *- , .
, . , "" "" , . / , .
6: IPC *- *-,
= .
*- . , , . *- "" , IPC *- ( , ). *UI- .
"" , JavaScript .
7: IPC- *- *- , "".
! , URL ? , , . , , , beforeunload.
beforeunload " ?" . , JavaScript , *-, *- *-, .
: beforeupload. , , . , , , , .
8: IPC- *- *-, ,
*- (, JavaScript window.location = "https://newsite.com"
), *- beforeupload. , . , *- *-.
, , *- , *- , . , Page Lifecycle API.
9: 2 IPC- *- *-, *-
Service Worker (*-)
service worker. *- — ; - , . *- , .
, *- — JavaScript-, *-. , *- *-?
*- , *- ( The Service Worker Lifecycle). , *- *-, *- URL, *UI- *-, *-. *- , , .
10: - \-
11: *UI- *- *- *-; *- *-
(Navigation Preload)
, *- *- , *- . Navigation Preload — *-. , ; , .
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.