URL常见协议:
- http:超文本传输协议访问远程网络资源,https为安全版本的http。
- file:访问本地计算机资源。
- mailto:访问电子邮箱地址。
- ftp:访问远程FTP服务器上的文件资源,默认端口21。
03、建立连接3.1、DNS域名解析
DNS 域名解析系统(Domain Name System) 是用来解析域名的(domain name),把域名解析为计算机能够识别的IP 地址(IP address)。
- 域名 面向用户:为了便于人们使用,易于识别、记忆,相当于是对IP地址的装饰,如www.baidu.com。
- IP地址 面向机器:是网络IP协议提供的逻辑地址,固定长度的数字符号,给机器用的,IPv4 是 32 位,IPv6 是 128 位。ping www.baidu.com //14.215.177.38
DNS 系统中保存了一张域名、IP 地址的映射表,记录了互联网上所有的域名和IP的数据。但实际的上这张表不是在单一服务器上,他是分布式存储在全球很多地方。所以域名解析的过程,就是在这些分布式的DNS服务器上去检索,直到找到域名对应的IP地址。
- 本地缓存,如hosts文件、浏览器的域名缓存、系统域名缓存、路由器缓存。缓存是个好东西,最近解析过的域名会被缓存起来,所以第二次再打开网页更快了,当然这里还有其他原因,如HTTP连接缓存、已下载的资源缓存等。
- 公共域名服务器,一般是网络服务商ISP(internet server provider )提供的的DNS servers,如如中国电信、中国移动。或本机设置的DNS,如阿里、百度、Google提供的DNS服务器。
- 根服务器:这是整个互联网的核心服务器,属于顶级域名服务器,全球共13台。这里存了所有DNS服务器的索引,在这里查找对应的主域名服务器。
- 域名服务器,如.com为顶级域名服务器,到该服务器继续查找,如此递归/迭代查询,直到找到对应IP返回给客户端。
3.2、常用公共DNS服务器DNS 是基于 UDP协议 通信的。
在实际网页中,可能有来自多个站点的资源,不仅有自己网站的网页内容,还有A网站的图片、B网站的JS库,C网站的CSS库等,就意味着每一个域名都要先经过DNS查询获取具体的IP地址。
DNS服务器 | IP地址 |
阿里 DNS: | 223.5.5.5 、 223.6.6.6 |
百度 DNS: | 180.76.76.76 |
Google DNS: | 8.8.8.8 、 8.8.4.4 |
360 DNS: | 101.226.4.6 、 123.125.81.6 |
腾讯云DNS | 183.60.83.19 |
114DNS | 114.114.114.114、114.114.115.115 |
完成一次 HTTP 请求后,服务器并不是马上断开与客户端的连接。在 HTTP/1.1 的header中Connection: keep-alive 是默认启用的,表示持久连接,以便后续请求可以复用HTTP连接。实际一个网页往往有多个请求(图片、CSS、JS),后面的请求就不用重新建立网络连接了,从而节约开销,提高加载速度。
但是一直保持TCP连接,是有开销的,特别是大并发场景时的服务端,因此长链接也是有一定限制的,如果长时间都没有请求就关闭了。另外如果一方意外断开了,如浏览器被强制关闭了,服务端也不可能一直等着,这就需要一个保活探测机制,类似心跳来判断对方是否还活着。
在反向代理软件 Nginx 中,持久连接超时时间默认值为 75 秒,如果 75 秒内没有新到达的请求,则断开与客户端的连接。同时,浏览器每隔 45 秒会向服务器发送 TCP keep-alive 探测包,来判断 TCP 连接状况,如果没有收到 ACK 应答,则主动断开与服务器的连接。
04、请求、响应数据
浏览器构造HTTP报文:请求头部header 请求包体body,然后发送HTTP请求。示例中的“https://www.baidu.com/s?wd=china”请求为GET,参数在URL上,请求头body没有数据。关于HTTP协议及请求、应答过程更多可看上一篇 HTTP协议图文简述。
请求HTTP报文:
GET /s?wd=china HTTP/1.1
Accept: text/HTML,application/xhtml xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6
Connection: keep-alive
Host: www.baidu.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) chrome/107.0.0.0 Safari/537.36 Edg/107.0.1418.35
sec-ch-ua: "Microsoft Edge";v="107", "Chromium";v="107", "Not=A?Brand";v="24"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
响应HTTP报文:服务器监听80、443等WEB端口,当监听收到客户端的请求后响应处理,把网页数据放在HTTP报文的包体body中,返回给客户端。服务端的实际处理过程要复杂的多,可能还涉及负载均衡、反向代理、网关、WEB服务器、应用服务器、数据库,及CDN等。
- 如下示例,响应头header中有些是百度自定义扩展的字段。
HTTP/1.1 200 OK
Bdpagetype: 3
Bdqid: 0xadfe12d00008e897
Cache-Control: private
Connection: keep-alive
Content-Encoding: br
Content-Type: text/html;charset=utf-8
Date: Fri, 25 Nov 2022 09:37:39 GMT
Server: BWS/1.1
Set-Cookie: delPer=0; path=/; domain=.baidu.com
Set-Cookie: BD_CK_SAM=1;path=/
Set-Cookie: PSINO=6; domain=.baidu.com; path=/
Set-Cookie: BDSVRTM=26; path=/
Strict-Transport-Security: max-age=172800
Vary: Accept-Encoding
X-Frame-Options: sameorigin
X-Ua-Compatible: IE=Edge,chrome=1
Transfer-Encoding: chunked
- 响应内容:就是HTML字符串内容,共计7084行,这些内容在下一步由浏览器渲染引擎进行解析,并最终渲染展示出来。
<!DOCTYPE html>
<!--STATUS OK-->
<html class="">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta content="always" name="referrer">
<meta name="theme-color" content="#ffffff">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="icon" sizes="any" mask href="//www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg">
<link rel="search" type="application/opensearchdescription xml" href="/content-search.xml" title="百度搜索" />
<title>china_百度搜索</title>
</head>
<body>
</body>
</html>
05、浏览器解析、渲染
解析服务端返回的HTML网页数据,并进行渲染,这个过程的5个关键步骤:①构建DOM ➤ ②构建CSS规则树 ➤ ③构建渲染树 ➤ ④布局 ➤ ⑤绘制。
✍️画个图大概就是这样: