【计网】从输入 URL 到显示页面发生了什么?

一共分为以下几个过程

  • 输入网址, 浏览器分析超链指向页面的 URL
  • 浏览器向 DNS 请求解析出域名的 IP 地址 
  • 浏览器向服务器发送一个 HTTP 请求(建立 TCP 连接)
  • 服务器的永久重定向响应
  • 服务器处理请求
  • 服务器返回一个 HTTP 响应(TCP 连接释放)
  • 浏览器发送请求获取嵌入在 HTML 中的资源显示 HTML

1.输入地址

用户输入url,例如http://www.90sec.com。其中http为协议,www.90sec.com为网络地址。浏览器会智能匹配地址,从历史记录、书签或缓存中查找,如果找到了,会在你还没有按“enter”之前,就从缓存中调出页面显示出来。

2.浏览器向 DNS 请求解析出域名的 IP 地址

(1)请求发起后,浏览器首先要做的事情就是解析这个域名,一般来说,浏览器会首先查看本地硬盘的 hosts 文件,看看其中有没有和这个域名对应的规则,如果有的话就直接使用 hosts 文件里面的 ip 地址。

(2)如果在本地的 hosts 文件没有能够找到对应的 ip 地址,浏览器会发出一个 DNS请求到本地DNS服务器 。本地DNS服务器一般都是你的网络接入服务器商提供,比如中国电信,中国移动。

(3)查询你输入的网址的DNS请求到达本地DNS服务器之后,本地DNS服务器会首先查询它的缓存记录,如果缓存中有此条记录,就可以直接返回结果,此过程是递归的方式进行查询。如果没有,本地DNS服务器还要向DNS根服务器进行查询。

(4)根DNS服务器没有记录具体的域名和IP地址的对应关系,而是告诉本地DNS服务器,你可以到域服务器上去继续查询,并给出域服务器的地址。这种过程是迭代的过程。

(5)本地DNS服务器继续向域服务器发出请求,在这个例子中,请求的对象是.com域服务器。.com域服务器收到请求之后,也不会直接返回域名和IP地址的对应关系,而是告诉本地DNS服务器,你的域名的解析服务器的地址。

(6)最后,本地DNS服务器向域名的解析服务器发出请求,这时就能收到一个域名和IP地址对应关系,本地DNS服务器不仅要把IP地址返回给用户电脑,还要把这个对应关系保存在缓存中,以备下次别的用户查询时,可以直接返回结果,加快网络访问。

图解:

【计网】从输入 URL 到显示页面发生了什么?

3.浏览器向服务器发送一个 HTTP 请求(建立 TCP 连接)

(1)知道域名对应的IP地址之后,浏览器会以一个随机端口(1024<端口<65535)向服务器的WEB程序(常用的有httpd,nginx等)80端口发起TCP的连接请求。

(2)连接请求到达服务器端后(这中间通过各种路由设备,局域网内除外),进入到网卡,然后是进入到内核的TCP/IP协议栈(用于识别该连接请求,解封包,一层一层的剥开),还有可能要经过Netfilter防火墙(属于内核的模块)的过滤,最终到达WEB程序,最终建立了TCP/IP的连接。详情:TCP的三次握手及四次挥手详解

(3)建立了TCP连接之后,发起一个http请求。一个典型的 http request header 一般需要包括请求的方法,一般的浏览器只能发起 GET 或者 POST 请求。详情:HTTP协议详解

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

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

(2)重定向原因:

  • 网站调整(如改变网页目录结构);

  • 网页被移到一个新地址;

  • 网页扩展名改变(如应用需要把.php改成.Html或.shtml)。

(3)什么时候进行301或者302跳转呢?

当一个网站或者网页24—48小时内临时移动到一个新的位置,这时候就要进行302跳转,而使用301跳转的场景就是之前的网站因为某种原因需要移除掉,然后要到新的地址访问,是永久性的。

(4)之后浏览器会跟踪重定向地址,然后发送另一个http请求

5.服务器处理请求

后端从在固定的端口接收到TCP报文,就会对TCP连接进行处理,对HTTP协议进行解析,并按照报文格式进一步封装成HTTP Request对象,供上层使用。

注:有些大网站会将你的请求到反向代理服务器中

6.服务器返回一个 HTTP 响应(TCP 连接释放)

经过之前的步骤,服务器收到了浏览器的请求,也处理了请求,之后会返回结果,即返回一个HTPP响应。

7.浏览器显示 HTML

在浏览器没有完整接受全部HTML文档时,它就已经开始显示这个页面了,在浏览器显示HTML时,它会注意到需要获取其他地址内容的标签。这时,浏览器会发送一个获取请求来重新获得这些文件。比如需要获取外图片,CSS,JS文件等,



本人才疏学浅,若有错,请指出
谢谢!

参考资料:从输入url到页面展示到底发生了什么