經典面試題之URL到頁面載入的過程

2022-07-14 09:27:17 字數 1641 閱讀 2774

也沒什麼好講的,這裡面的水有些深了,我只能寫些淺薄的東西啦~

講一下過程吧!

1、輸入url(完整的url包括協議、網域名稱、埠號、路徑等)

2、瀏覽器查詢當前的url是否存在快取,並對比快取是否過期(這裡會涉及到伺服器返回的狀態碼304,強制快取cache-control、expires,對比快取last-modified、etag(資源實體標識,是雜湊字串)等)

3、dns解析(網域名稱解析):網域名稱解析過程就是通過網域名稱去查詢與之對應的伺服器ip的過程

(1)瀏覽器先檢查本地hosts檔案是否有這個url對映的ip,有就呼叫這個ip位址,完成網域名稱解析

(2)如果沒有找到,則去找本地dns解析器快取,查詢到則返回

(3)再沒找到,就去查詢本地dns伺服器,找到返回

(4)如果還沒找到,就向根網域名稱伺服器查詢,沒找到就**給下級,層層查詢,直達查詢到ip

4、建立tcp連線(三次握手建立連線)

(1)第一次握手,建立連線,瀏覽器發生syn包給伺服器,等待伺服器確認;

(2)第二次握手,伺服器收到syn包,確認瀏覽器syn包,並傳送syn+ack包給瀏覽器;

(3)第三次握手,瀏覽器收到伺服器syn+ack包,向伺服器傳送確認包,傳送完畢,建立連線;

完成三次握手,瀏覽器和伺服器就可以開始傳送資料啦~

5、瀏覽器向伺服器傳送http請求

http1.0請求方法:get  post head

http1.1新增請求方法:options  put delete  trace  connect

6、伺服器響應http請求(包含狀態碼、響應頭、響應體)

(1)常見狀態碼:

200:請求資料成功,並返回

304:資源未修改,可用快取資源

400:客戶端請求語法錯誤

401:請求需要身份認證

403:伺服器收到請求,但拒絕提供服務

404:請求資源不存在

405:請求方法被伺服器禁止

500:伺服器錯誤

(2)響應體返回給瀏覽器的資源(html、css、js、等)

7、瀏覽器渲染頁面

(1)解析html構建dom和cssom樹,構建dom樹期間,如果遇到js,阻塞dom樹和cssom樹的構建,優先載入js檔案(js會阻塞頁面載入,所以一般放到html底部進行載入),再載入dom樹和cssom樹

(2)構建渲染樹(render tree)

(4)頁面渲染過程的重繪(repaint)和重排(reflow),頁面渲染完畢後,如若js操作了dom,瀏覽器會對頁面進行重繪和重排

重排(reflow),也叫layout(回流):元素的內容、結構、位置或尺寸發生變化時,需要重新計算樣式和渲染樹,會觸發重排

重繪(repaint):元素發生改變,如背景顏色、邊框顏色、文字顏色等,會觸發重繪

所以重排比重繪成本高

暫時寫這些吧,有不對或缺失的歡迎補充~

經典面試題 從輸入URL到頁面載入發生了什麼

最近面試的時候有面試官問了這個在輸入 的視窗中輸入url後發生了什麼過程,這個問題當時也是把我問住了,所以我特地查詢了一下資料後來總結一下 具體的發生了一下幾個過程 1 瀏覽器的位址列輸入url並按下回車。2 瀏覽器查詢當前url是否存在快取,並比較快取是否過期。3 dns解析url對應的ip。dn...

經典面試題之賦值操作

題目 var a var b a a.x a console.log a.x console.log b.x 答案 alert a.x undefined alert b.x 講解 估計大部分人對a.x undefined存在疑問。這裡將原則總結為一句話 的執行順序,先從左到右掃瞄變數,再從右到左進...

經典的c 面試題

1.介紹一下stl,詳細說明stl如何實現vector。answer stl 標準模版庫,standard template library.它由容器演算法迭代器組成。stl有以下的一些優點 可以方便容易地實現搜尋資料或對資料排序等一系列的演算法 除錯程式時更加安全和方便 即使是人們用stl在uni...