Ini adalah bagian 2 dari 4 yang membahas cara kerja Chrome. Di bagian sebelumnya, kita melihat bagaimana proses dan utas yang berbeda bekerja dengan berbagai bagian browser. Dalam posting ini, kita akan melihat lebih dekat bagaimana setiap proses dan utas berinteraksi untuk membuat situs web.
Bagian 1
Bagian 2 (saat ini)
Bagian 3
Bagian 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- *-, *- *-
Dalam posting ini, kita melihat apa yang terjadi selama navigasi dan bagaimana kode aplikasi web Anda, seperti header respon dan JavaScript sisi klien, berinteraksi dengan browser. Mengetahui langkah-langkah yang dilakukan browser untuk mengambil data dari web membuatnya lebih mudah untuk memahami mengapa API seperti Preload Navigasi dikembangkan. Di posting berikutnya, kita akan mendalami bagaimana browser menangani HTML / CSS / JavaScript untuk merender halaman.