學習筆記 瀏覽器渲染原理

2021-10-12 07:00:01 字數 1407 閱讀 3856

瀏覽器名稱

渲染引擎(核心)

ecmascript引擎(js引擎)

ie6-8

trident

jscript(ie3-8)、chakra(ie9)

firefox 3.5+

gecko

tracemonkey

chrome4+

webkit

v8safari4+

webkit

squirrelfish extreme

opera10+

presto

carakan

瀏覽器的主要元件包括:

1. 使用者介面 - 包括位址列、後退/前進按鈕、書籤目錄等,也就是你所看到的除了用來顯示你所請求頁面的主視窗之外的其他部分。

2. 瀏覽器引擎 - 用來查詢及操作渲染引擎的介面。

3. 渲染引擎 - 用來顯示請求的內容,例如,如果請求內容為html,它負責解析html及css,並將解析後的結果顯示出來。

4. 網路 - 用來完成網路呼叫,例如http請求,它具有平台無關的介面,可以在不同平台上工作。

5. ui後端 - 用來繪製類似組合選擇框及對話方塊等基本元件,具有不特定於某個平台的通用介面,底層使用作業系統的使用者介面。

6. js直譯器 - 用來解釋執行js**。

7. 資料儲存 - 屬於持久層,瀏覽器需要在硬碟中儲存類似cookie的各種資料,html5定義了web database技術,這是一種輕量級完整的客戶端儲存技術

3.2 瀏覽器渲染過程

渲染引擎的職責就是渲染,頁面渲染就是瀏覽器將所請求得到的html**根據css定義的規則顯示在瀏覽器視窗中的這個過程。

下面是渲染引擎在取得內容之後的基本流程:

解析html以構建dom樹 -> 構建render樹 -> 布局render樹 -> 繪製render樹

渲染引擎開始解析html,並將標籤轉化為內容樹中的dom節點。接著,它解析外部css檔案及style標籤中的樣式資訊。這些樣式資訊以及html中的可見性指令將被用來構建另一棵樹——render樹。

render樹由一些包含有顏色和大小等屬性的矩形組成,它們將被按照正確的順序顯示到螢幕上。

render樹構建好了之後,將會執行布局過程,它將確定每個節點在螢幕上的確切座標。再下一步就是繪製,即遍歷render樹,並使用ui後端層繪製每個節點。

以下是webkit主流程:

參考文章:

瀏覽器渲染原理

最近在開發b s 框架的專案。開發都是web頁面,也就是執行在瀏覽器上的使用者操作頁面。瀏覽器是使用者得到服務最直接的地方,後台做的好,前台也要讓使用者用著方便。這裡就研究一下瀏覽器的一些原理是如何提高使用者體驗的。首先,這裡有乙個新詞,渲染。什麼是網頁渲染呢?網頁渲染就是html 根據css定義的...

瀏覽器渲染原理

瀏覽器中輸入url到頁面返回的全過程 根據網域名稱,進行dns網域名稱解析 拿到解析的ip位址,建立tcp連線 向ip位址傳送http請求 伺服器處理請求 返回響應結果 關閉tcp連線 瀏覽器解析html 瀏覽器布局渲染 通過url向伺服器傳送請求,web服務端返回html文字 字串 拿到 後,瀏覽...

瀏覽器渲染原理

1.http請求階段 2.http響應階段 3.瀏覽器渲染階段 瀏覽器渲染頁面的機制和原理 程序 process 乙個程式就是乙個程序 執行緒 thread 棧記憶體 stack 用來提供環境 客戶端 瀏覽器 瀏覽器核心 拿到 後,瀏覽器在記憶體條中開闢出一塊棧記憶體,用來給 的執行環境,同時分配乙...