これは、Chromeの内部動作を確認する4のパート2です。で前の部分、私たちはさまざまなプロセスやスレッドがブラウザの別の部分でどのように動作するかを見ました。この投稿では、各プロセスとスレッドがどのように相互作用してWebサイトをレンダリングするかを詳しく見ていきます。

パート1

パート2（現在）

パート3

パート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 — *-. , ; , .

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

この投稿では、ナビゲーション中に何が発生するか、および応答ヘッダーやクライアント側JavaScriptなどのWebアプリケーションコードがブラウザーとどのように相互作用するかについて説明しました。ブラウザがWebからデータをフェッチするために実行する手順を知っていると、NavigationPreloadなどのAPIが開発された理由を簡単に理解できます。次の投稿では、ブラウザがHTML / CSS / JavaScriptを処理してページをレンダリングする方法について詳しく説明します。