也沒什麼好講的,這裡面的水有些深了,我只能寫些淺薄的東西啦~
講一下過程吧!
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...