瀏覽器輸入url之後按回車(相對較全的知識詳解)

**
大家在面試中經常會遇到面試官問瀏覽器輸入url之後按回車發生了什麼,這裏我給大家整理了一份比較全的知識,希望大家喜歡

衆所周知當我們想搜索一個網站的時候會往瀏覽器的搜索輸入框中輸入url進行搜索,但是在你輸入url點回車之後瀏覽器中發生了什麼,幹了什麼呢?**

  1. 首先瀏覽器會先判斷你輸入的url是否合法,根據你輸入的url判斷是把你輸入的東西當成url處理還是當成關鍵字搜索,然後根據你輸入的內容自動完成字符編碼

  2. 在判斷完url是否合法之後,會判斷你使用的協議是http還是https。(其中關聯的知識點有http協議/HTTPS原理以及HTTPS的安全相關知識

  3. 當協議確認後瀏覽器則會判斷該解析後的url是否有命中各種緩存(瀏覽器緩存、系統緩存、路由器緩存等),如果命中緩存就會拿到緩存的數據,如果沒有命中緩存則進行下一步請求服務器(注:如果是協商緩存的話也會請求服務器)

  4. 在沒有命中緩存之後,瀏覽器會去請求服務器,而在請求服務器的時候,因爲我們基本輸入的url都是一個類似(www.baidu.com)這樣的一個url,這個時候其實服務器是不能識別這樣一串的,他能識別的是127.0.0.1這樣的一個東西,也就是我們所說的IP地址。所以我們要先向DNS服務器發送請求,查到相對應的url對應的IP地址

  5. 我們在拿到IP地址後,還需要知道對方的端口而在我們拿到服務器的IP地址後我們怎麼知道對方的MAC地址呢?通常在一個局域網內是很少的,所以我們一般會通過多個機器的中轉才能鏈接到對方,這個時候就需要我們的ARP協議了,這個協議可以通過下一中轉站的MAC地址得到下下個傳輸的中轉站的MAC

  6. 而當我們那到了服務器對應的MAC地址後,我們則會向服務器發送TCP連接請求。這個就涉及到大家知道的三次握手了。

  7. 當握手成功,則向服務器發送HTTP請求,比如我們輸入的url是www.baidu.com,則我們會想百度的服務器發送一個www.baidu.com的頁面的一個HTTP請求,服務器接收到我們的請求後就會返回數據給瀏覽器

  8. 瀏覽器接收到請求後,則會判斷該請求是否需要緩存,然後瀏覽器開始解碼,而瀏覽器拿到HTML代碼之後會幹什麼呢?首先會在內存中開闢一塊棧內存,用來給代碼的執行提供環境,同時會分配出一個主線程去一行一行的執行代碼

  9. 而我們的頁面一般都會有一些css文件的引入和圖片等帶src或link的css文件,當瀏覽器沒遇到一個就會開闢一個全新的子線程去加載資源文件,(這個時候就會有CDN等知識)同時把這些任務放進任務隊列(QUEUE TASK

  10. 當主線程自上而下的把代碼執行完後會生成一個DOM樹,當任務隊列中的css文件處理完後,會結合所有的css生成一個CSSOM樹,這個CSSOM會和DOM樹合併出一個Render Tree(渲染樹),用來渲染頁面

  11. 之後我們會用Render Tree來計算這些元素在設備視口內的確切位置和大小,也就是迴流

  12. 然後根據Render Tree和迴流得到的幾何信息得到節點的絕對像素,以及拿到節點的其他屬性,這個就是重繪

  13. 然後將這些像素髮送給GPU顯示,一般頁面渲染的速度是我們用戶設置中的如60赫茲等也就是一秒60次(注:如果在事件循環中有js未執行完,改到了頁面的DOM會觸發迴流和重繪)

到這裏整個頁面就完成了,上面主要涉及到的知識點有:

  • DNS, HTTP, HTTPS, TCP/IP, ARP等網絡相關的知識

  • 瀏覽器渲染頁面機制(DOM Tree, CSSOM Tree, Render Tree, QUEUE TASK, Event Loop, Layout, Painting, Display)

對於上面可做的優化:

  • HTTP緩存DNS緩存CDN

  • 減少HTTPq請求的次數和大小,這樣QUEUE TASK處理會快,我們頁面渲染的就快,主要:資源合併壓縮(雪碧圖,GZIP,合併CSS等文件)、圖片懶加載(原理:減少線程數)、音視頻走流文件(m3u8)

  • 減少操作DOM(原理:減少迴流重繪):1.採用vue,react等虛擬DOM、2.分離讀寫、3.樣式集中改變、4.緩存佈局信息、5、元素批量修改(文檔碎片、模版字符)、6.動畫效果應用到position爲absolute/fixed元素上、7.css3硬件加速、8.減少使用table/css的javascript表達式

大家喜歡的話可以點贊收藏,之後我會繼續發一些和上面的知識點以及一些平常大家容易忽視的知識點的文章

我的下一篇文章:
HTTPS原理以及HTTPS的安全相關知識

這篇文章能幫助大家更好的理解HTTPS

大家有什麼知識是想學的也可以評論,我會給大家出一些文章來講這些知識,因爲現在比較流行大前端,所以很多的知識都會去追求原理,而不僅僅是之前的會寫會做就性,除了這個瀏覽器中輸入url之後瀏覽器幹了什麼裏面寫到的內容,我還會插一些js的基礎知識,一般會講一些大家平時不太注意到的但是有時會坑到大家的知識,以及會寫一些VUE相關的源碼理解和思路,也歡迎大家給我建議。

以上的文章如有寫的不好的地方也感謝大家指出來,我們共同進步,知識就是用來共享的,在寫完下篇HTTPS原理以及HTTPS的安全相關知識之後我會寫一個HTTP協議的文章,預計會有三到四篇來講HTTP協議,然後會寫TCP/IP協議,在把上面的這些寫完之後我會總和上面的網絡協議給大家寫一篇計算機網絡相關的知識的總覽,幫助大家學習計算機網絡知識。

在整個瀏覽器中輸入url之後瀏覽器幹了什麼系列知識講完之後我會結合上面的知識給大家寫一篇前端優化的知識,會主要講上面寫到的知識如何優化

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章