老生常談 - 從輸入URL到頁面加載的過程(詳細版)

從輸入URL到頁面加載的過程

之前一直都是直接看一下總結的八股文章,對于實際的整個鏈路并不是特別熟悉,這次花了一天多的時間看了很多資料,對于整個頁面加載的流程有了自己的理解,從前端開始訪問的瀏覽器多線程、緩存等問題,到計算機網絡的各層協議的處理,再到服務器接收請求的整個過程,都進行了一些了解,原始文檔是在飛書中寫的,所以在這邊排版可能會存在一些問題,已經修改了一部分。
文章的不足之處也請大佬在評論中指出!

1. HTTP 解析URL:

瀏覽器是多進程,瀏覽器內核是多線程,瀏覽器接收URL,瀏覽器根據解析出的協議,根據解析的內容生成HTTP請求,開辟一個網絡線程去請求資源,會先查找本地緩存是否緩存了該資源,如果有緩存資源那么直接返回資源給瀏覽器進程;如果在本地緩存中沒有查找到資源,那么直接進入網絡請求流程;

2. DNS(應用層協議) 解析:

如果輸入的是域名,需要將域名解析成對應的 IP 地址,如果請求協議是HTTPS,那么還需要建立SSL/TLS連接(TLS的四次握手在TCP的三次握手之后);(DNS的解析過程見問題5) 通過DNS獲取到IP之后,就可以把HTTP的傳輸工作交給操作系統中的協議棧。
[圖片]

應用程序(瀏覽器)通過調用 Socket 庫,來委托協議棧工作。協議棧的上半部分有兩塊,分別是負責收發數據的 TCP 和 UDP 協議,這兩個傳輸協議會接受應用層的委托執行收發數據的操作。
協議棧的下面一半是用 IP 協議控制網絡包收發操作,在互聯網上傳數據時,數據會被切分成一塊塊的網絡包,而將網絡包發送給對方的操作就是由 IP 負責的。
此外 IP 中還包括 ICMP 協議和 ARP 協議。
- ICMP 用于告知網絡包傳送過程中產生的錯誤以及各種控制信息。
- ARP 用于根據 IP 地址查詢相應的以太網 MAC 地址。
IP 下面的網卡驅動程序負責控制網卡硬件,而最下面的網卡則負責完成實際的收發操作,也就是對網線中的信號執行發送和接收操作。

3. TCP 連接:

利用IP地址和服務器通過三次握手,建立 TCP 連接(HTTP是基于TCP協議傳輸的)(詳細內容見問題15)

TCP 的連接狀態查看,在 Linux 可以通過 netstat -napt 命令查看

4. 向服務器發送 HTTP 請求:

連接建立之后,瀏覽器端會構建請求行、請求頭等信息,并把和該域名相關的 Cookie 等數據附加到請求頭中,然后向服務器發送構建的請求信息。
五層協議棧:從應用層的發送http請求,到傳輸層通過三次握手建立tcp/ip連接,再到網絡層的ip尋址,再到數據鏈路層的封裝成幀,最后到物理層的利用物理介質傳輸。

  1. HTTP報文(請求方式+URL+數據)
  2. 傳輸層添加TCP頭部(源端口號+目的端口號)
  3. IP 增加 IP報文頭部(協議號(06表示協議為TCP) + 源IP地址 + 目的IP地址)
  4. 添加以太網頭部(MAC地址):接收方 MAC 地址、發送方 MAC 地址 ARP協議通過廣播的方式幫我們找到MAC地址
  5. 網卡將包轉為電信號通過網線發出
  6. 交換機:電信號到達網線接口,交換機里的模塊進行接收,將電信號轉換為數字信號,校驗完成之后,如果是發送給自己的則將包放入緩沖區,接下來查詢接收方MAC地址,交換機根據 MAC 地址表查詢 MAC 地址,然后將信號發送到相應的端口。

如果沒有在MAC地址表中查詢到指定的MAC地址,就將接收方MAC地址置為廣播地址,將包發送到除了源端口之外的所有端口。

  1. 路由器:這一步轉發的工作原理和交換機類似,也是通過查表判斷包轉發的目標
    在這里插入圖片描述

5. 服務器處理請求,返回 HTTP 響應:

  1. Nginx可以處理靜態請求,也可以將動態請求轉發;
  2. Gateway網關處理,用于處理請求的路由、認證、授權等;
  3. 應用服務器服務器處理:請求被轉發到后端服務器,執行相應的邏輯;
  4. 應用服務器生成HTTP響應。

6. 瀏覽器解析并渲染頁面:遇到外鏈資源的情況下,會單獨開啟一個線程去下載資源;

7. 斷開連接:TCP 四次揮手,連接結束

參考文檔:

  1. 從輸入URL到頁面加載的過程?如何由一道題完善自己的前端知識體系! | Dailc的個人主頁
  2. 一文讀懂網關概念+Nginx正反向代理+負載均衡+Spring Cloud Gateway
  3. 在瀏覽器輸入 URL 回車之后發生了什么(超詳細版)

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/167772.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/167772.shtml
英文地址,請注明出處:http://en.pswp.cn/news/167772.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

5-11一個球從100米自由落下

#include<stdio.h> int main(){double down100;double back down/2;int n;//次數for(n2;n<10;n){downdownback*2;backback/2; }printf("第10次落地經過%f米\n",down);printf("第10次反彈%f米\n",back);return 0;}

href和src的區別

1、請求資源類型不同 &#xff08;1&#xff09; href是Hypertext Reference的縮寫&#xff0c;表示超文本引用。用來建立當前元素和文檔之間的鏈接。常用的有&#xff1a;link、a。 &#xff08;2&#xff09;在請求 src 資源時會將其指向的資源下載并應用到文檔中&#xff0…

分布式事務seata的AT模式介紹

分布式事務seata的AT模式介紹 seata是阿里開源的一款分布式事務解決方案&#xff0c;致力于提供高性能和簡單易用的分布式事務服務。Seata 將為用戶提供了 AT、TCC、SAGA 和 XA 事務模式&#xff0c;本文主要介紹AT模式的使用。 seata安裝 下載seata服務&#xff0c;官方地址…

測試數據不會造?可以用這個工具Faker

在測試過程中&#xff0c;大家應該都遇到過各種各樣的數據構造問題。e.g. 構造一批通訊錄、構造一批用戶三要素(姓名手機號身份證)、構造一批銀行卡數據…… 這時候&#xff0c;測試數據大多數可能是這樣的: 張三, 130 0000 0001 李四, 130 0000 0002 王五, 130 0000 0003 …

【C/PTA —— 11.函數2(課外實踐)】

C/PTA —— 11.函數2&#xff08;課外實踐&#xff09; 一.函數題6-1 計算A[n]1/(1 A[n-1])6-2 遞歸實現順序輸出整數6-3 自然數的位數(遞歸版)6-4 分治法求解金塊問題6-5 漢諾塔6-6 重復顯示字符(遞歸版)6-7 顯示平行四邊形(右)(遞歸版) 二.編程題7-2 N階樓梯上樓問題 一.函數…

python實現存款日利息計算器(窗口界面形式)

輸入存款金額&#xff0c;7日年化收益率&#xff0c;輸出每日利息 完整源碼如下&#xff1a; import tkinter as tk from tkinter import messageboxdef calculate_interest():deposit float(entry_deposit.get())interest_rate float(entry_interest_rate.get())daily_int…

【數據結構】二叉排序樹(c風格、結合c++引用)

目錄 1 基本概念 結構體定義 各種接口 2 二叉排序樹的構建和中序遍歷 遞歸版單次插入 非遞歸版單次插入 3 二叉排序樹的查找 非遞歸版本 遞歸版本 4 二叉排序樹的刪除&#xff08;難點&#xff09; 1 基本概念 普通二叉排序樹是一種簡單的數據結構&#xff0c;節點的值…

戲說二十三種設計模式_用故事的方式就是讓你一定能懂

創建型模式 1、FACTORY—追MM少不了請吃飯了&#xff0c;麥當勞的雞翅和肯德基的雞翅都是MM愛吃的東西&#xff0c;雖然口味有所不同&#xff0c;但不管你帶MM去麥當勞或肯德基&#xff0c;只管向服務員說“來四個雞翅”就行了。麥當勞和肯德基就是生產雞翅的Factory 工廠模式&…

Cortex-M與RISC-V區別

環境 Cortex-M以STM32H750為代表&#xff0c;RISC-V以芯來為代表 RTOS版本為RT-Thread 4.1.1 寄存器 RISC-V 常用匯編 RISC-V 關于STORE x4, 4(sp)這種寄存器前面帶數字的寫法&#xff0c;其意思為將x4的值存入sp4這個地址&#xff0c;即前面的數字表示偏移的意思 反之LOA…

【LM358AD運放方波振蕩器可控輸出幅值】2022-2-25

緣由仿真如何縮小方波振蕩電路方波幅值?-有問必答-CSDN問答

使用Pytorch從零開始構建LSTM

長短期記憶&#xff08;LSTM&#xff09;網絡已被廣泛用于解決各種順序任務。讓我們了解這些網絡如何工作以及如何實施它們。 就像我們一樣&#xff0c;循環神經網絡&#xff08;RNN&#xff09;也可能很健忘。這種與短期記憶的斗爭導致 RNN 在大多數任務中失去有效性。不過&a…

發送一個網絡數據包的過程解析

在 ip_queue_xmit 中&#xff0c;也即 IP 層的發送函數里面&#xff0c;有三部分邏輯。第一部分&#xff0c;選取路由&#xff0c;也即我要發送這個包應該從哪個網卡出去。 這件事情主要由 ip_route_output_ports 函數完成。接下來的調用鏈為&#xff1a;ip_route_output_port…

改進YOLOv8 | YOLOv5系列:RFAConv續作,即插即用具有任意采樣形狀和任意數目參數的卷積核AKCOnv

RFAConv續作,構建具有任意采樣形狀的卷積AKConv 一、論文yolov5加入的方式論文 源代碼 一、論文 基于卷積運算的神經網絡在深度學習領域取得了顯著的成果,但標準卷積運算存在兩個固有缺陷:一方面,卷積運算被限制在一個局部窗口,不能從其他位置捕獲信息,并且其采樣形狀是…

Matlab進階繪圖第33期—雙曲面圖

在《Matlab論文插圖繪制模板第56期—曲面圖&#xff08;Surf&#xff09;》中&#xff0c;我分享過曲面圖的繪制模板。 然而&#xff0c;有的時候&#xff0c;需要在一張圖上繪制兩個及以上的曲面圖&#xff0c;且每個曲面圖使用不同的配色方案。 在Matlab中&#xff0c;一張…

C++基礎入門(超詳細)

話不多說&#xff0c;序言搞起來&#xff1a; 自從開始學老師布置的任務后&#xff0c;目前還是OpenCV&#xff0c;哈~哈。我就莫名問老師&#xff1a;“以后編程是用C還是python&#xff1f;”&#xff0c;果然還是太年輕&#xff0c;老師說&#xff1a;“兩們都要精通”。唉&…

set和map + multiset和multimap(使用+封裝(RBTree))

set和map 前言一、使用1. set(1)、模板參數列表(2)、常見構造(3)、find和count(4)、insert和erase(5)、iterator(6)、lower_bound和upper_bound 2. multiset3. map(1)、模板參數列表(2)、構造(3)、modifiers和operations(4)、operator[] 4. multimap 二、封裝RBTree迭代器原理R…

9.輸出國際象棋盤【2023.11.24】

1.問題描述 要求輸出國際象棋棋盤。 2.解決思路 國際象棋棋盤由64個黑白相間的格子組成&#xff0c;分為8行*8列。用i控制行&#xff0c;j控制列&#xff0c;根據ij的和的變化來控制輸出黑方格還是白方格。 3.代碼實現 #include<stdio.h> int main(){for(int i0;i&…

各操作系統之間的關系

請移步知乎&#xff1a; 操作系統UNIX、WINDOWS、LINUX、MC OS的聯系與區別 - 知乎 (zhihu.com) 移動端的android操作系統就人盡皆知啦&#xff0c;基于linux內核。 完畢。 適用領域&#xff1a; windows,macos:主要面向個人計算機市場 Linux、Windows Server:隨著互聯網的…

基于廣義正態分布算法優化概率神經網絡PNN的分類預測 - 附代碼

基于廣義正態分布算法優化概率神經網絡PNN的分類預測 - 附代碼 文章目錄 基于廣義正態分布算法優化概率神經網絡PNN的分類預測 - 附代碼1.PNN網絡概述2.變壓器故障診街系統相關背景2.1 模型建立 3.基于廣義正態分布優化的PNN網絡5.測試結果6.參考文獻7.Matlab代碼 摘要&#xf…

網絡安全—自學

1.網絡安全是什么 網絡安全可以基于攻擊和防御視角來分類&#xff0c;我們經常聽到的 “紅隊”、“滲透測試” 等就是研究攻擊技術&#xff0c;而“藍隊”、“安全運營”、“安全運維”則研究防御技術。 2.網絡安全市場 一、是市場需求量高&#xff1b; 二、則是發展相對成熟…