瀏覽器的整體渲染過程

2022-07-15 15:51:12 字數 942 閱讀 7090

瀏覽器會根據尖括號識別出標籤,每乙個標籤都有starttag和endtag,其中的文字也會被解析出來

這些開始結束tokens將會以棧的方式,進行規則匹配,構建出nodes間的層級關係。

屬性也會被解析出來

當你訪問乙個**的時候,你會發現頁面有時不是一下子被渲染出來的, 當拿到一段html的時候,這段html便開始構建dom,下一段html可能還在網路中穿梭,dom的這種即使構建的機智,給我們帶來了很好的使用者體驗

同html,css檔案也會被解析成文件模型,它有自己的一套規則,另外,他內部還有繼承機制,這裡暫跳過細節

css是不是和html一樣,也是從網路中獲取一點就解析一點呢?不是的,css中對於同乙個元素的同乙個樣式,如果選擇器權重相同,後面的樣式會覆蓋前面的樣式,如果是取到一點就解析一點,如果前面的資源載入慢,頁面就會以錯亂的樣式來渲染,所以,css是阻塞的。

render tree 其實就是dom 和 cssom 的綜合,不過,display為none的節點不會出現在渲染樹中:

布局就是根據render tree中的樣式規則,計算出每一塊的實際寬高色值等樣式。

舉個栗子:

將layout翻譯成畫素點

瀏覽器渲染過程

瀏覽器的渲染過程 第一步 html經過html parser p s 解析為dom tree 第二步 css根據css規則經過css解析器解析為style rules cssom tree 第三步 兩棵樹經過attachment結合為 render tree 形成一棵大樹,此時它還是一棵迷茫的樹,不...

瀏覽器渲染過程

1.頁面準備 2.重定向 在header定義了重定向才會有這個過程,如果沒有就不會產生這個過程 關於重定向的分析 4.dns解析 把網域名稱解析成ip,如果直接用ip位址訪問,不會產生這個過程 5.tcp連線 6.request header 請求頭資訊 7.request body 請求體資訊,比...

瀏覽器渲染過程

這個過程可以大致分為兩個部分 網路通訊和頁面渲染。輸入url按下回車之後,瀏覽器會去瀏覽器快取中尋找該url的ip 沒有的話去系統快取中找,還是沒有的話去路由器快取中尋找 再沒有就去系統host檔案中找,還是沒有最後只能去請求dns伺服器,然後dns給乙個ip給瀏覽器 瀏覽器根據這個ip位址,向伺服...