瀏覽器的關鍵渲染路徑深入解析

2021-09-23 07:06:41 字數 748 閱讀 9911

在in面試被cto問到的問題,謹以此翻譯來表達對自己知識匱乏的鄙視。

當瀏覽器接收到從伺服器傳送過來的html頁面資訊,在將其繪畫渲染到螢幕上之前會有許多的步驟要做。瀏覽器繪製頁面需要做的這一系列行為我們稱為關鍵渲染路徑。

了解crp的知識對於你理解如何提公升**渲染效率非常有用,crp總共有六步:

1、構造dom樹

dom(document object model)樹是乙個表示全解析過的html頁面的物件。從根節點元素開始,會逐個建立頁面中的每個元素/文字節點。元素包裹的其他元素會被作為子元素節點,並且每個節點會包含其全部的屬性。例如:標籤會有href屬性與其節點關聯。 舉個例子:

lorem ipsum dolor sit amet

可以看關於頁面載入時的事件日誌,以下是我們獲得的:

傳送請求:傳送get請求index.html

解析html然後傳送請求:開始解析html並構建dom,然後傳送get請求style.css和main.js。

解析樣式表:根據style.css生成cssom

執行計算指令碼:執行main.js

布局:基於html的元視窗標籤,生成布局

基於Webkit的瀏覽器關鍵渲染路徑介紹

瀏覽器是如何將html js css image等資源渲染成視覺化的頁面的呢?本文簡單介紹一下渲染過程中涉及到的關鍵步驟。該過程分為四步 模型物件的構建 渲染樹構建 布局 繪製。瀏覽器獲取到html css檔案後,需要對其進行解析,抽象成dom和cssom物件,然後提供相應的js api,方便開發者...

瀏覽器解析 渲染機制

主要分為兩種,在head之間是否有外聯的css 一 head標籤之間有外聯css chrome 版本 31.0.1650.63 safari 版本 5.1.7 7534.57.2 firefox 24.0 這裡沒有ie哦 1 當瀏覽器load完一條url時就會提取頁面中外聯的js和css 2 瀏覽器...

瀏覽器的載入 解析 渲染

1.瀏覽器在載入外部css檔案和檔案時是同步載入還是非同步載入?2.瀏覽器的載入和渲染時同時進行的還是先載入完成再渲染?下面的是我查到的一些資料和自己的一些理解 瀏覽器載入和解析html頁面過程 1.使用者輸入url,瀏覽器向伺服器發出請求,伺服器返回html檔案 2.瀏覽器開始載入html 發現標...