此篇僅是我在學習時所筆記下來的，一方面是分享給大家一起學習，一方面也做個紀錄，如有錯誤請不吝賜教～ （字醜請忽略ＸＤ）
網際網路
是透過TCP/IP協議來傳輸資料，讓資料可以安全的在client端與server端之間傳輸，tcp在建立連線時會進行三次媒合，當每次接收到數據包就會發送ack確認來提供可靠性。此外，為了保證數據包到達且排列正確，一開始會在網路層進行分包，分包後傳輸的鏈路不一样，因此也會不同時間到達，TCP會依據數據包上的序列號來排序重组，如没有接受到接收方的ack確認，會再重新發送。
壹、TCP/IP
- 是一種面向連接的可靠字節流服務協議
- 有四層分層
- 應用層：提供特定應用程序的協議HTTP(瀏覽器)、FTP(檔案)、IMAP(郵件)
- 網路控制層：發送數據包到server端上指定的端口號的應用程序
- 網路層：使用IP地址將數據包發送到特定的server端上
- 鏈路層：將二進制數據包与網路信號相互轉換
貳、網路傳輸 todo
- PC
- Modem
- local ISP 網際網路提供商
- regional ISP 經過多個主幹網路
- NSP 網路服務提供商，大型網路，賣頻寬给ISP
- NAP 每个NSP連接到至少三个網路訪問點
- ISP NSP所有網路提供都攜帶路由器，每個路由有當前子網路ip的路由表，當底增向上層發送數據時候，找不到會依次向上找，可能由一個主幹網络跳到另外一個主幹網络。
瀏覽器的運作
這邊的瀏覽器皆以Chrome為例子，在2008年，Google以Safari開源项目WebKit作為內核。
壹、瀏覽器結構
- 主要可以分為用戶介面、瀏覽器引擎(存取資料模組)、渲染引擎(網路、JS解析器…等小模組)，而渲染引擎常被稱作是瀏覽器的內核，不同瀏覽器的內核也會不一樣。
貳、Process & Thread
- 當我們啟動一個程序時，就創建一個進程(process)，而一個進程包含數個線程(thread)，同時會為該進程分配内存空間來存取狀態，關閉時則釋放空間。
- process可以啟用更多的process，但每個process都是互相獨立的，所以是靠通信管道IPC來進行傳遞。
- process又可以將任務分成多個更小的任務給thread來執行，同一個process下的thread是可以直接互相傳遞共享數據。
參、Browser running
- 在最初期的時候瀏覽器並不是多進程結構，但由於一個進程還有許多線程任務，因此會造成不穩定且效能低會有容易卡死的狀況，在安全上也會有取得一個線程就可以取得整的進程數據的疑慮。
- 為了解決上述問題，現在瀏覽器都採用多進程結構，而你的瀏覽器需要使用到多少process是取決時你啟動chrome時所選擇的模型，一般是預設為Process-per-site-instance，此預設下會在每一個不同的站點不同的頁面都創建process。
- 當你使用預設會創建多個process因此會很佔內存空間，但卻是最安全的。
- chrome會在每一個iframe都創建一個process
肆、Browser rendering
- 當你在瀏覽器輸入網址後，瀏覽process的ui tread會抓取你所輸入內容，ui thread會要求發出網路請求，此時network thread開始執行DNS lookup、建立連線，而當連線成功、資料傳輸完畢後，browser process利用IPC將資料傳遞給render process以進行頁面渲染。
- render process的主要tread會將HTML解析成DOM結構，DOM是一種可以讓JS互相溝通的結構。
- HTML會先經過tokeniser進行解析標記Tag，之後依照tag進行DOM tree建構，而建構DOM tree時會產生Document，因此可以利用JS來操控Document對DOM tree進行更動。
- 在HTML會調用一些額外的資源，不過並不會引響DOM的生成，但如果解析時遇上了script tag時會轉而向JS先進行解析，因為JS可以在調用Document來操作DOM tree，所以建議把script放在合適的位置或是使用非同步加載(async、defer)。
- 之後main tread會解析css到對應的節點上，並且開始利用計算好的樣式來生成layout tree，使其每個節點都記錄各自的座標位置及大小，而layout tree和DOM tree的節點是不對應的，但layout tree跟之後要渲染出來的節點會是對應的。
- 再來會經過Pain紀錄每個節點的繪製順序，利用遍歷layout tree生成layer tree。
- 知道以上訊息後會傳送到compositor thread，compositor thread會將每個圖層切分成多個tiles丟給raster tread，tread raster會將tiles丟到GPU進行raster完成後，compositor thread會把所有的draw quads包成compositor frame。
- 最後將compositor frame利用IPC傳送到browser process，browser process再傳送到GPU之後就會可以渲染到螢幕上了。
- 假如我們改變了一個位置屬性就會重新進行style -> layout -> paint，因此重排或重繪都會佔用main process，可以利用transform來進行優化。
- JS的執行也會佔用main process，因此你如果一直進行重排重繪跟大量的JS運行，瀏覽器會需要在每一幀進行計算，此時如果有大量的JS運行，就會搶佔主線權而沒有即時歸還主線，就會導致來不及渲染而lag的情況。
- 優化手段可用requestAnimationFrame api將JS切為更小的執行在主線使其不會來不及歸還主線權，react fiber也是利用此api來進行許多的優化。
