瀏覽器的渲染過程 或者從URL到頁面渲染的過程

2022-04-03 09:42:03 字數 544 閱讀 5086

從url到頁面渲染的過程

1、當使用者輸入url提交到dns網域名稱解析 找到真正的ip 向伺服器發起請求

2、伺服器進過解析交給後台處理完成返回資料,瀏覽器接受資料檔案(html、js、css、 等資源)

3、瀏覽器載入到資源(html、css、js、等)後進行語法解析建立相應的內部資料結構(dom)

4、最後載入解析資源的檔案 渲染頁面

渲染頁面的過程:

1、解析html得到乙個dom樹

2、解析css形成cssom樹

3、然後cssom樹和dom樹整合成render樹

4、根據render樹的計算出每個元素的大小顏色等資訊形成布局render樹(layout)

5、繪製 根據計算好的資訊繪製整個頁面

回流reflow   :  回流也叫重排 就是等瀏覽器發現某個部分發生了變化影響了布局後,需要倒回來重新計算渲染,這過程就叫回流。

重繪repaint:  就是乙個元素的外觀(顏色、背景等)發生了改變但是 沒有改變布局的情況下,只會引起瀏覽器螢幕的部分重畫。

解析html過程中的問題

從輸入 URL 到瀏覽器渲染完成

首先,判斷是不是https的,如果是,則https其實是http ssl tls 兩部分組成,也就是在http上又加了一層處理加密資訊的模組。服務端和客戶端的資訊傳輸都會通過tls進行加密,所以傳輸的資料都是加密後的資料。進行三次握手,建立tcp連線。第一次握手 建立連線。客戶端傳送連線請求報文段,...

從輸入url到瀏覽器載入過程

從輸入url到頁面載入發生了什麼 最近在進行前端面試方面的一些準備,看了網上許多相關的文章,發現有乙個問題始終繞不開 在瀏覽器中輸入url到整個頁面顯示在使用者面前時這個過程中到底發生了什麼。仔細思考這個問題,發現確實很深,這個過程涉及到的東西很多。這個問題的回答真的能夠很好的考驗乙個web工程師的...

瀏覽器渲染過程

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