输入网址到得到网页响应全过程

当我们在浏览器的地址栏输入 www.baidu.com,然后回车,回车这一瞬间到看到页面中间发生了什么?

个人简单理解:

域名解析->发起TCP三次握手->建立TCP连接后发起http请求->服务器响应http请求,浏览器得到html代码->浏览器解析html代码。请求html代码中的资源(如js、css、图片等)->浏览器对页面进行渲染呈现给用户

1.域名解析

(以Chrome浏览器示例)
首先Chrome浏览器会解析 www.baidu.com这个域名对应的IP地址。怎样解析?
①Chrome浏览器会首先搜索浏览器DNS缓存(缓存时间比较短,大概只有1分钟,且只能容纳1000条缓存),查看自身缓存中是否有www.baidu.com对应的条目,而且没有过期,如果有且没有过期则解析就此结束。(可用Chrome://net-internals/#dns来查看浏览器DNS缓存记录)
②如果浏览器自身的缓存记录里没有找到对应的条目,那么Chrome会搜索操作系统自身的DNS缓存,如果找到且没有过期。则停止搜索,解析就此结束(在Windows下使用ipconfig /displaydns来查看操作系统自身dns缓存)
③如果在Windows系统的DNS缓存也没有找到,那么尝试读取hosts文件(位于C:\Windows\System32\drivers\etc),查看该文件中有没有该域名对应的IP地址,如果有则解析成功
④如果在hosts文件中也没有找到对应的条目,浏览器就会发起一个DNS的系统调用,就会向本地配置的首选DNS服务器(一般是电信运营商提供的)发起域名解析请求(通过UDP协议向DNS服务器53端口发起请求,即为递归查询,也就是本地DNS服务器必须得提供给我们该域名的IP地址),本地DNS服务器首先查找自身缓存(一般为3天),找到对应的条目,且没有过期,则解析成功。如果没有找到对应的条目,则由本地DNS服务器代浏览器发起迭代查询,首先会向根DNS服务器(全球13台根DNS服务器),根DNS服务器只负责所有的一级域,会将com域的IP地址回复给本地DNS服务器;本地DNS服务器又向com域的IP地址发起请求,com域的DNS服务器回复baidu.com这个域的DNS地址;本地DNS服务器又向baidu.com这个域名的DNS地址发起请求,baidu.com域的DNS服务器查找到结果,将结果发送给本地DNS服务器;本地DNS服务器将查询到的IP地址交给所请求的客户机。由此终于拿到了该域名所对应的IP地址

2.发起TCP三次握手

拿到域名对应的IP地址之后,User-Agent(一般是指浏览器)会以一个随机端口(1024 < 端口 < 65535)向服务器的WEB程序(常用的有httpd,nginx等)80端口发起TCP的连接请求。这个连接请求(原始的http请求经过TCP/IP4层模型的层层封包)到达服务器端后(这中间通过各种路由设备,局域网内除外),进入到网卡,然后是进入到内核的TCP/IP协议栈(用于识别该连接请求,解封包,一层一层的剥开),还有可能要经过Netfilter防火墙(属于内核的模块)的过滤,最终到达WEB程序(本文就以Nginx为例),最终建立了TCP/IP的连接。

为什么http协议要基于TCP协议来实现
目前在Internet中所有的传输都是通过TCP/IP进行的,HTTP协议作为TCP/IP模型中应用层的协议也不例外,TCP是一个端到端的可靠的面向连接的协议,所以Http基于传输层TCP协议不用担心数据传输的各种问题。

3.建立TCP连接后发起Http请求

经过TCP三次握手之后,浏览器发起了Http请求(开启tcpdump -X选项来查看)
http请求的部分内容:

GET http://www.baidu.com/index.html HTTP/1.0
User-Agent: Wget/1.12 (linux-gnu)
Host: www.baidu.com
Connection: close

第一行是请求行。其中“GET”是请求方法,表示客户端以只读方式来申请资源。常见的Http请求方法有9中:

GET 申请获取资源而不对服务器产生任何影响
HEAD 和GET方法类似,不过仅要求服务器返回头部信息,而不需要传输任何实际内容
OPTIONS 查看服务器对某个特定URL都支持哪些请求方法,也可以把URL设置为*,从而获得服务器支持的所有请求方法
TRACE 要求目标服务器返回原始HTTP请求的内容。它可用来查看中间服务器(比如代理服务器)对Http请求的影响
注:前四种方法视为安全方法,只是从服务器获得资源或信息,而不对服务器进行任何修改
PUT 上传某个资源
DELETE 删除某个资源
POST 客户端向服务器提交数据的方法。这种方法会影响服务器:服务器可能根据收到的数据动态创建新的资源,也可能更新原有的资源
PATCH 对某个资源做部分修改
注:中间这四种方法则影响服务器上的资源
CONNECT 用于某些代理服务器,它们能把请求的连接转化为一个安全隧道
注:GET、HEAD、OPTIONS、TRACE、PUT和DELETE等请求方法被认为是等幂的,即多次连续的、重复的请求和只发送一次该请求具有完全相同的效果。而POST方法则不同,连续多次发送同样一个请求可能进一步影响服务器上的资源。

http://www.baidu.com/index.html”是目标资源的URL。其中“http”是所谓的scheme,表示获取目标资源需要使用的应用层协议。其他常见的scheme还有ftp,rtsp和file等。“www.baidu.com”指定资源所在的目标主机。“index.html”指定资源文件的名称,这里指的是服务器根目录中的索引文件
“HTTP/1.0”表示客户端(wget程序)使用的HTTP的版本号是1.0,目前主流HTTP版本号是1.1
Http请求内容中的第2~4行都是Http请求的头部字段(头部字段可按照任意顺序排列)
“User-Agent: Wget/1.12(linux-gnu)”表示客户端使用的程序是wget
“Host: www.baidu.com”表示目标主机是www.baidu.com。Http协议规定Http请求中必须包含的头部字段就是目标主机名
“Connection: close”使我们执行wget命令传入的,用以告诉服务器处理完这个Http请求之后就关闭连接。在旧的Http协议中,Web客户端和Web服务器之间的一个TCP连接只能为一个Http请求服务。当处理完客户的一个Http请求之后,Web服务器就主动将TCP连接关闭了。此后同一个客户如果要再发送一个Http请求的话,必须与服务器建立一个新的TCP连接。也就是说,同一个客户的多个Http请求不能共用同一个TCP连接,这成为短连接长连接与之相反,是指多个请求可以使用同一个TCP连接:极大减少了网络上为建立TCP连接导致的负荷,同时对每次请求而言缩减了处理时间。“Connection”头部字段就是专门用来告诉对方一个请求完成之后该如何处理连接(close 立即关闭连接;keep-alive保持一段时间以处理后续请求)可用netstat命令查看浏览器和Web服务器之间的连接是否是长连接,以及该连接维护了多长时间

4.服务器端响应http请求,浏览器得到html代码

服务器端Web程序接收到http请求以后,就开始处理该请求,处理之后就返回给浏览器html文件

先来看服务器返回给客户端的Http应答报文

HTTP/1.0 200 OK
Server: BWS/1.0
Conten-Length: 8024
Content-Type: text/html;charset =gbk
Set-Cookie:BAIDUID=A5B6C72D68CF639CE8896FD79A03FBD8:FG=1; expires=Wed,04 -Jul-42 00:10:47 GMT; path=/; domain=.baidu.com
Via: 1.0 localhost (squid/3.0 STABLE18)

第一行是状态行。“HTTP/1.0”是服务器使用HTTP协议的版本号。通常服务器需要使用和客户端相同的HTTP协议版本。“200 OK”是状态码和状态信息。常见的状态码和状态信息:

1xx 信息
100 Continue 服务器收到了客户端的请求行和头部信息,告诉客户端继续发送数据部分
2xx 成功
200 OK 请求成功
3xx 重定向
301 Moved Permanently 资源被转移了,请求将被重定向
302 Found 通知客户端资源能够在其他地方找找到,但需要使用GET方法来获得
304 Not Modified 表示被申请的资源没有更新,和之前获得的相同
307 Temporary Redirect 通知客户端资源能在其他地方找到。与302不同的是,客户端可以使用原始请求方法来访问目标资源。
4xx 客户端错误
400 Bad Request 通用客户请求错误
401 Unauthorized 请求需要认证信息
403 Forbidden 访问被服务器禁止,通常是由于客户端没有权限访问该资源
404 Not Found 资源没找到
407 Proxy Authentication Required 客户端需要先获得代理服务器的认证
5xx 服务器错误
500 Internal Server Error 通用服务器错误
502 Bad Gateway 前面代理服务器联系不到后端的服务器时出现
503 Service Unavailable 暂时无法访问服务器

第2~7行是Http应答的头部字段。其表示方法与Http请求中的头部字段相同。
“Server: BWS/1.0”表示目标Web服务器程序的名字是BWS(Baidu Web Server)
“Content-Length:8024”表示目标文档的长度为8024字节。这个值与wget输出的文档长度一致。
“Content-Type: text/html;charset =gbk”表示目标文档是MIME类型。其中“text”是主文档类型,“html”是子文档类型。“text/html”表示目标文档index.html是text类型中的html文档。“charset”是text文档类型的一个参数,用于指定文档的字符编码。
“Set-Cookie: BAIDUID=A5B6C72D68CF639CE8896FD79A03FBD8:FG=1;expires=Wed,04 -Jul-42 00:10:47 GMT;path=/;domain=.baidu.com”表示服务器传送一个Cookie给客户端。其中,“BAIDUID”指定Cookie的名字,“expires”指定Cookie的生存时间,“domain”和“path”指定该Cookie生效的域名和路径。我们简单分析一下Cookie的作用

Http协议是一种无状态协议,即每个Http请求之间没有任何上下文关系。如果服务器处理后续Http请求时需要用到前面Http请求的相关信息,客户端必须重传这些信息。这样就导致Http请求必须传输更多的数据。
在交互式Web应用程序兴起之后。Http协议这种无状态特性就显得不适应了,因为交互程序通常要承上启下。因此要是用额外的手段保持HTTP连接状态。常见的解决方法就是Cookie。Cookie是服务器发送给客户端的特殊信息(通过HTTP应答的头部字段“Set-Cookie”),客户端每次向服务器发送请求的时候都需要带上这些信息(通过HTTP请求的头部字段“Cookie”)。这样服务器就可以区分不同的客户了。基于浏览器的自动登录就是用Cookie实现的。

那到底服务器端接收到http请求后是怎么样生成html文件?

① Nginx读取配置文件
Nginx在收到浏览器GET /请求时,会读取http请求里面的头部信息,根据Host来匹配自己所有的虚拟主机配置文件的server_name,匹配到虚拟主机,发现如下配置:
root /web/echo
可知道网页文件就在该目录下,例如访问http://www.baidu.com/index.html,则代表/web/echo下面有个文件叫index.html
通过这个就能得到网站首页文件,也就是我们在访问http://www.baidu.com/,nginx就会自动帮我们把index.html加到后面。
②nginx访问数据库
查询数据,填充模板生成html文件,Nginx再把这个index.html返回给浏览器,于是乎浏览器就拿到了首页的html代码,同时nginx向日志文件写入一条访问日志

5.浏览器解析html代码,并请求html代码中的资源

浏览器拿到index.html文件后,就开始解析其中的html代码,遇到js/css/image等静态资源时,就向服务器端去请求下载(会使用多线程下载,每个浏览器的线程数不一样),这个时候就用上keep-alive特性了,建立一次HTTP连接,可以请求多个资源,下载资源的顺序就是按照代码里的顺序,但是由于每个资源大小不一样,浏览器又是多线程请求资源,所以下载资源完成显示的顺序并不是代码里的顺序

浏览器在请求静态资源时(在未过期的情况下),向服务器端发起一个http请求(询问自从上一次修改时间到现在有没有对资源进行修改),如果服务器端返回304状态码(告诉浏览器服务器端没有修改),那么浏览器会直接读取本地的该资源的缓存文件

6.浏览器对页面进行渲染呈现给用户

最后,浏览器利用自己内部的工作机制,把请求到的静态资源和html代码进行渲染,呈现给用户

…一次完整的Http事务宣告完成

参考资料:Linux高性能服务器编程

  • 6
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值