Ceci est la partie 2 sur 4 qui examine le fonctionnement interne de Chrome. Dans la partie précédente, nous avons examiné comment différents processus et threads fonctionnent avec différentes parties du navigateur. Dans cet article, nous examinerons de plus près comment chaque processus et chaque fil interagissent pour rendre un site Web.

Partie 1

Partie 2 (actuelle)

Partie 3

Partie 4

À propos des fonctionnalités de traduction

, , .. () . — , - . : *-, *-. , , , , , .
, , , , . "" , .

-: 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 — *-. , ; , .

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

Dans cet article, nous avons examiné ce qui se passe pendant la navigation et comment le code de votre application Web, comme les en-têtes de réponse et le JavaScript côté client, interagit avec le navigateur. Connaître les étapes suivies par un navigateur pour récupérer des données sur le Web permet de comprendre plus facilement pourquoi des API telles que le préchargement de navigation ont été développées. Dans le prochain article, nous verrons comment le navigateur gère HTML / CSS / JavaScript pour rendre les pages.