从输入一个网址到浏览器显示页面经历的全过程笔记

原文地址:https://www.toutiao.com/i6794820979836060163/?timestamp=1584062472&app=news_article&group_id=6794820979836060163&req_id=202003130921120100140470790493AC5A

  1. 输入网址
  2. DNS解析获取域名对应的IP地址
  3. 建立TCP连接
  4. web浏览器向web服务器发送HTTP请求
  5. 服务器的永久重定向响应
  6. web服务器做出应答
  7. 浏览器显示 HTML
  8. web服务器关闭TCP连接

1、输入网址

浏览器会在用户输入url时查找历史信息对其补全或直接显示缓存在本地的网页。

2、DNS解析获取域名对应的IP地址

用户发起请求后,浏览器会解析这个url,将其转换为ip地址。

第一步:查看hosts文件,如果hosts文件里面配置了url和ip的关系,则直接使用里面的ip地址。hosts文件存储在操作系统的如下目录中,打开后可手动配置。下图的示例中,左边是ip地址,右边是url。

Hosts

第二步:浏览器向本地DNS服务器(用网络运营商提供,如中国移动等)发送一个DNS请求。DNS (Domain Name System)是域名系统,用来将域名解析成ip地址。

DNS

第三步:本地DNS在收到请求后查询缓存,如果没有命中,还会向根DNS服务器发送请求。

第四步:根DNS服务器不直接存储解析数据,而是返回一个域服务器地址,本地DNS服务器转而向域服务器发送查询请求。

第五步:本地DNS服务器继续向域服务器(例如.com域服务器)发出请求,返回的是一个解析服务器的地址。

第六步:本地DNS服务器向域名的解析服务器发出请求,获得域名与ip的映射关系。在返回数据时,本地DNS会进行缓存。

3、建立TCP连接

浏览器会首先与服务器依照三次握手和四次挥手建立TCP连接(根据OSI七层协议,低层次的协议需要率先建立连接,只有建立了TCP连接才能使用HTTP协议)。

三次握手和四次挥手:https://www.toutiao.com/i6795125147612217867/?group_id=6795125147612217867?group_id=6795125147612217867?group_id=6795125147612217867

4、浏览器向服务器发送HTTP请求

一个典型的http request header一般需要包括请求的方法,例如GET或者POST等,不常用的还有PUT和DELETE、HEAD、OPTION以及TRACE方法,一般的浏览器只能发起GET或者POST请求。

HTTP的请求信息主要包含三部分内容:

  • 请求方法URI协议/版本
  • 请求头(Request Header)
  • 请求正文(Request Body)

URI和URL的区别:https://blog.csdn.net/qq_32595453/article/details/80563142

一个完整的HTTP请求如下所示:

// 请求行:方法URL议/版本
GET/sample.jsp HTTP/1.1
// 请求头:存储浏览器语言和连接状态等信息
Accept:image/gif.image/jpeg,*/
Accept-Language:zh-cn
Connection:Keep-Alive
Host:localhost
User-Agent:Mozila/4.0(compatible;MSIE5.01;Window NT5.0)
Accept-Encoding:gzip,deflate

// 请求正文:以空行和请求头分隔,存储请求参数和他们对应的值
username=jinqiao&password=1234

以Chrome浏览器为例,按F12打开控制台,选择标签页中的Network,然后选择一个请求。下图展示的就是一个Http Request Header和他发送给服务器的参数。

Http Request Header
Http Request Body

5、服务器的永久重定向响应

服务器给浏览器响应一个301永久重定向响应,这样浏览器就会访问“http://www.google.com/” 而非“http://google.com/”。

重定向原因:

  • 网站调整(如改变网页目录结构);
  • 网页被移到一个新地址;
  • 网页扩展名改变(如应用需要把.php改成.Html或.shtml)。

此时如果不进行重定向的话,用户会得到一个404报错信息。之后,浏览器根据服务器返回的重定向地址继续请求网站信息。

6、web服务器做出应答

和HTTP请求一样,HTTP响应信息也主要包含三个部分:

  • 状态行
  • 响应头(Response Header)
  • 响应正文(Response Body)
// 状态行:包括协议版本、数字形式的状态代码、及相应的状态描述,以空格分隔
HTTP/1.1 200 OK
// 响应头:存储日期和内容长度等信息
Date: Sat, 31 Dec 2005 23:59:59 GMT
Content-Type: text/html;charset=ISO-8859-1
Content-Length: 122

// 响应正文:以空行和响应头分隔,存储cookie,html,image,后端返回的请求数据等
<html>
<head>
<title>http</title>
</head>
<body>
<!-- body goes here -->
</body>
</html>

7、浏览器显示HTML

网页是根据服务器返回的html文件显示的,显示过程中需要进行渲染。以webkit为例,渲染的过程包括:解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树。

渲染完成后,浏览器会发送请求获取嵌入在HTML中的资源(如图片、音频、视频、CSS、JS等),这个过程和上面发送请求的过程是一样的。

8、web服务器关闭TCP连接

是否关闭TCP连接可以通过参数配置(connection:keep-alive)。新版本的协议也会通过默认持久连接来节省带宽。TCP连接关闭后,一次浏览器显示页面的交互就结束了。

补充:

上面的内容将整个交互中的各部分系统简单分成了浏览器和后端服务器(这个服务器会返回html和其他的业务请求信息)。然而,越来越多的系统开始采用前后端分离的架构,这时候在交互的细节上就会稍有不同。

一般来说,分离后的前端服务和后端服务是两个独立的Java应用程序。前端负责接收浏览器的请求,如果是页面加载,则直接将信息返回给浏览器;如果有业务逻辑处理要求或数据库访问要求,前端则会向后端服务器发送请求。

此时,后端服务器只会收到前端发来的请求,处理完请求后也会直接将结果返回给前端,不会和浏览器产生直接的交互。

而浏览器可以将前端和后端统一看作一个服务器,不去关心他们内部的交互和实现逻辑。现实场景中,后端服务器的架构一般会更加复杂。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,732评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,496评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,264评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,807评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,806评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,675评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,029评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,683评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,704评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,413评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,016评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2 343