瀏覽器的載入 解析 渲染

2021-08-04 22:04:55 字數 858 閱讀 4666

1.瀏覽器在載入外部css檔案和檔案時是同步載入還是非同步載入?

2.瀏覽器的載入和渲染時同時進行的還是先載入完成再渲染?

下面的是我查到的一些資料和自己的一些理解:

瀏覽器載入和解析html頁面過程

1.使用者輸入url,瀏覽器向伺服器發出請求,伺服器返回html檔案

2.瀏覽器開始載入html**,發現標籤內有乙個link標籤引用外部css資源

3.瀏覽器又發出css檔案的請求,伺服器返回這個css檔案(這個過程是同步的,瀏覽器會等到css檔案載入完再往下載入)

4.瀏覽器繼續載入html中部分**,並且css檔案已經到手可以開始渲染頁面了

6.伺服器返回檔案,由於占用了一定面積,影響了後面段落的布局,此時瀏覽器開始需要回過頭來重新渲染這部分**。

7.瀏覽器載入標籤,如果沒有非同步屬性設定則同步載入檔案,並馬上執行

8.如果js改變了原本的布局則瀏覽器又開始回流重繪

總結: 瀏覽器載入是自上而下載入的

瀏覽器的渲染過程

1.瀏覽器會將html解析成乙個dom樹,dom樹的構建過程是乙個深度遍歷過程(當前節點的所有子節點構建好才會去構建當前結點的下乙個兄弟節點)

2.將css解析成css rule true

3.根據dom樹和cssom來構建rendering tree(渲染樹和dom樹類似但不同,例如:, display:none,等無法顯示的東西不會出現在渲染樹中,注意:visibility:hiden還是會出現的)

4.有了渲染樹,瀏覽器就開始計算每個節點在螢幕中的位置

5.最後就是遍歷render樹,繪製每個節點

個人理解這樣可能在瀏覽器渲染的過程中會產生多次回流重繪,不知道這樣理解是否正確,希望大家有更好的理解可分享。

瀏覽器載入 解析 渲染的過程

恢復內容開始 最近看一些前端的面試題,發現很多公司都會問到瀏覽器載入,解析,渲染相關的問題。這篇隨筆整理一下這些知識,便於理解瀏覽器是怎麼工作的。首先,前端在大多數開發過程中並沒有用到這些知識,那我們為什麼還要去理解瀏覽器的執行過程?事實上,對瀏覽器的理解能幫助前端開發者更好的實現最佳頁面。比如,瀏...

瀏覽器解析 渲染機制

主要分為兩種,在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 瀏覽器...

瀏覽器載入和渲染分析

瀏覽器載入和渲染分析 原文 最近一直在做前端js開發,為了更清楚的顯示頁面元素的載入順序,動手寫了乙個程式,程式對頁面中的每個元素都延遲5秒。在ie6下檢視loader.jsp這個頁面,使用httpwatch來檢測頁面元素的載入。從下面的圖中可以看到載入順序。ie6首先載入了頁面loader.jsp...