Dies ist Teil 2 von 4, der sich mit dem Innenleben von Chrome befasst. Im vorherigen Teil haben wir uns angesehen, wie verschiedene Prozesse und Threads mit verschiedenen Teilen des Browsers funktionieren. In diesem Beitrag werden wir uns genauer ansehen, wie die einzelnen Prozesse und Threads beim Rendern einer Website interagieren.
Teil 1
Teil 2 (aktuell)
Teil 3
Teil 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- *-, *- *-
In diesem Beitrag haben wir uns angesehen, was während der Navigation passiert und wie Ihr Webanwendungscode, wie z. B. Antwortheader und clientseitiges JavaScript, mit dem Browser interagiert. Wenn Sie die Schritte kennen, die ein Browser durchläuft, um Daten aus dem Web abzurufen, können Sie leichter verstehen, warum APIs wie das Navigation Preload entwickelt wurden. Im nächsten Beitrag werden wir untersuchen, wie der Browser mit HTML / CSS / JavaScript umgeht, um Seiten zu rendern.