梳理本身所學的瀏覽器工做原理

瀏覽器工做原理

網上有一篇已經寫得很好了，瀏覽器工做原理。那我本身寫，是爲了看看本身學會多少。輸入和輸出仍是兩回事。

瀏覽器作了什麼？

瀏覽器解析咱們在html編輯器所寫的代碼有html、css、js。關鍵HTML怎麼解析爲DOM、CSS解析爲CSSOM、又是如何解析JavaScript的。又怎麼把它們結合在一塊兒？

瀏覽器究竟是如何工做的？首先它長的樣子，都見過好比谷歌瀏覽器，地址欄、工具欄、各類功能的控件、主屏展現。跟用戶交互的地方很少。後退、前進、刷新、主頁、地址欄、窗口頁、書籤這些。

咱們要看到某個網站內容，只有一個輸入入口，就是地址欄。在地址欄裏面輸入，某個網站地址，瀏覽器就會去處理咱們輸入的地址欄，解析IP地址、端口號，去訪問某個服務器上的資源。

在地址欄輸入一個地址，一個回車，瞬間一個網頁出如今當前瀏覽器窗口的屏幕上。一個輸入、瞬間輸出這個過程作了什麼事情？

計算機輸入-處理-輸出，都是這個過程。地址輸入-瀏覽器處理-輸出網頁。

根據極客時間的winter老師所說：
1 瀏覽器首先使用HTTP或HTTPS協議，向服務器請求頁面
2 請求回來的頁面，也就是瀏覽器收到的HTML會解析成DOM樹
3 計算DOM樹上的CSS屬性，怎麼計算？
4 最後根據CSS屬性對元素逐個進行渲染，獲得內存中的位圖
5 一個可選的步驟是對位圖進行合成，
6 合成後繪製到界面上。

從HTTP請求回來後，產生流式數據，後續的DOM樹構建、CSS計算、渲染、合成、繪製都是流式處理，不是說，必定等到所有HTML解析完畢成DOM、CSS計算完成後、渲染纔開始、合成纔開始、繪製纔開始。

不是說每個步驟的數據都要一步到位。

瀏覽器結構

用戶界面、瀏覽器引擎、呈現引擎、網絡調用、JavaScript引擎、數據庫、用戶界面後端。

如何解析請求回來的HTML代碼，DOM樹又是如何構建的？

服務端響應給個人body，如何處理，也就是HTML如何處理？

詞是如何被拆分的

看下面的一行HTML代碼

<p class="a">text text text</p>

最小標籤」<p,開始標籤裏面有屬性，不能取"<p class="a">"爲最小單元，也就是詞。那麼class="a"是第二個詞，第三個詞是>,第四個詞是text text text，第五個詞</p>

字符流拆成詞，有一套狀態機去實現的拆分紅詞。

輸入字符流，瀏覽器某個功能模塊處理字符流，輸出一個詞。輸入、處理、輸出計算機最基本模式。