前端瀏覽器解析渲染

瀏覽器內核是指瀏覽器運行最核心的程序:渲染引擎,JS引擎。渲染引擎在不同瀏覽器中是不一樣的。常見的瀏覽器內核可以分爲這四種:Trident(IE)、Gecko(火狐)、Blink(Chrome、Opera)、Webkit(Safari)。

頁面加載過程:

  • 瀏覽器根據DNS服務器得到域名IP地址
  • 向對應IP的機器發送HTTP請求
  • 服務器收到並處理返回HTTP請求
  • 瀏覽器得到返回內容

瀏覽器得到的返回內容是一堆HTML格式的字符串。
瀏覽器渲染:
1.瀏覽器解析三個東西(HTML/SVG/XHTML字符描述一個頁面的結構,瀏覽器把HTML結構字符串解析轉換DOM樹形結構;
解析CSS,產生CSS規則樹;
Javascript腳本,等到Javascript文件加載後,通過DOM API 和CSSOM API 來操作DOM Tree 和CSS Rule Tree)
2 解析完後才能後,瀏覽器引擎會通過DOM Tree和css Rule Tree 來構造Rendering Tree
3 調用造作系統的Native GUI的API繪製

構建DOM
在這裏插入圖片描述
構建CSSOM
在這裏插入圖片描述
構造Rendering Tree
出現只會包括需要現實的節點和節點的樣式
在這裏插入圖片描述
渲染過程遇到

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章