瀏覽器渲染過程 面試

2022-05-03 03:33:11 字數 888 閱讀 8407

瀏覽器中位址列中輸入東西後,按下enter鍵,會發生什麼?

瀏覽器會判斷輸入的是乙個位址,還是乙個query。這個只說是**的情況。

瀏覽器會查詢本地快取的dns列表,以獲取主機位址,若dns快取未命中,則瀏覽器發出請求,進行查詢,查詢之後的結果快取起來。

連線主機

傳送請求

獲得乙個伺服器的響應

進行渲染

渲染過程(webkit和gecko都差不多)

解析html,得到乙個dom tree

解析css,得到cssom tree

將兩者整合成渲染數,render tree

布局(layout), 根據render tree計算每個節點的位置大小等資訊 (在草稿本上畫了個草圖)

繪製(painting )根據計算好的資訊繪製整個頁面

1、2、3非常快,但是4和5比較耗時,有三個術語:

「重排」 和 「回流」 指的是重新執行步驟4

「重繪」 指重新執行步驟5

重排意味著重新計算節點的位置大小等資訊,重新在草稿本上畫了草圖,所以一定會重繪

重繪不一定會重排,比如背景顏色改變

重排和重繪代價很高,所以瀏覽器並不會一有資訊改變就去執行重排和重繪,而是會將多個可能的重排和重繪一次執行。是的,它可能會非同步。

有兩個css屬性,display: none和visibility: hidden,前者會導致重排和重繪,後者會導致重繪。這是後者的有點,但缺點是此節點一直儲存在記憶體中,占用資源。

解析html過程中的問題

標籤的async和defer屬性可以可以改變這個情況,但是較低版瀏覽器不支援,所以最佳的實踐是,將放在前。

瀏覽器渲染過程

瀏覽器的渲染過程 第一步 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位址,向伺服...