هذا هو الجزء 2 من 4 الذي يلقي نظرة على أعمال Chrome الداخلية. في الجزء السابق ، نظرنا في كيفية عمل العمليات والخيوط المختلفة مع أجزاء مختلفة من المتصفح. في هذا المنشور ، سنلقي نظرة فاحصة على كيفية تفاعل كل عملية وخيط لعرض موقع ويب.

الجزء 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- *-, *- *-

في هذا المنشور ، نظرنا إلى ما يحدث أثناء التنقل وكيف يتفاعل كود تطبيق الويب الخاص بك ، مثل رؤوس الاستجابة وجافا سكريبت من جانب العميل ، مع المتصفح. إن معرفة الخطوات التي يمر بها المتصفح لجلب البيانات من الويب يجعل من السهل فهم سبب تطوير واجهات برمجة التطبيقات مثل التنقل المسبق. في المنشور التالي ، سوف نتعمق في كيفية تعامل المتصفح مع HTML / CSS / JavaScript لعرض الصفحات.