一文讲透从输入URL到浏览器显示页面发生了什么

这是一个老生常谈的话题,今天我们再来详细想分析一波。

1.浏览器对用户输入的网址(域名)做初步的格式化检查,域名是一个逻辑概念
2.浏览器对用户输入的网址默认进行https补全。
3.浏览器将网址通过DNS协议解析成具体的IP地址

PS:DNS(Domain Name System),域名系统,是一个联机分布式数据库系统,并采用客户服务器方式,DNS大多数名字都在本地解析,少量解析需要在网络上,因此它的效率很高。IP地址的解析是由许多的域名服务器程序共同完成的。

1).查询浏览器的DNS缓存,可以使用 chrome://net-internals/#dns 来查看,如果没有下一步

2).查询操作系统的DNS缓存,以Windows系统为例,可以在命令行下使用 ipconfig /displaydns 来进行查看,如果没有下一步

3).读取hosts文件(位于C:\Windows\System32\drivers\etc),查看有没有该域名对应的IP地址,如果没有下一步

4).联网向浏览器发起一个DNS的系统调用,向本地配置的ISP(互联网服务提供者)发起域名解析请求,通过的是UDP协议向DNS的53端口发起请求,这个请求是递归的请求,也就是的DNS服务器必须得提供给我们该域名的IP地址,ISP的DNS服务器首先查找自身的缓存,找到对应的条目,且没有过期,则解析成功。如果没有找到对应的条目,则有ISP的DNS代我们的浏览器发起迭代DNS解析请求,它首先是会找根域的DNS的IP地址,这个DNS服务器都内置13台根域的DNS的IP地址(这里的13台根域名服务器其实并不真是13台,而是13个ip地址,采用任播技术,我们可以在全球设立这些ip的镜像站点,你访问到的ip并不是唯一的那台主机),找到根域的DNS地址后,就会向其发起请求,例如www.cnblogs.com这个域名(www是三级域名,cnblog是二级,com是顶级),根域发现这是一个顶级域com域的一个域名,于是就告诉ISP的DNS我不知道这个域名的IP地址,但是我知道com域的IP地址,你去找它,于是ISP的DNS就得到了com域的IP地址,又向com域的IP地址发起了请求,请问www.cnblogs.com这个域名的IP地址是多少?com域这台服务器告诉运营商的DNS我不知道www.cnblogs.com这个域名的IP地址,但是我知道www.cnblogs.com这个域的DNS地址,你去找它去,于是ISP的DNS又向www.cnblogs.com这个域名的DNS地址(这个一般就是由域名注册商提供的,像万网,新网等)发起请求(请问www.cnblogs.com这个域名的IP地址是多少?),这个时候cnblogs.com域的DNS服务器一查,果真在我这里,于是就把找到的结果发送给ISP的DNS服务器,这个时候运营商的DNS服务器就拿到了www.cnblogs.com这个域名对应的IP地址,并返回给Windows系统内核,内核又把结果返回给浏览器,终于浏览器拿到了www.cnblogs.com对应的IP地址,该进行一步的动作了。

DNS解析
4.发起TCP的3次握手

大概的过程就是:

  • 第一次握手: A给B打电话说,你可以听到我说话吗?
  • 第二次握手: B收到了A的信息,然后对A说: 我可以听得到你说话啊,你能听得到我说话吗?
  • 第三次握手: A收到了B的信息,然后说可以的,我要给你发信息啦!

  在三次握手之后,A和B都能确定这么一件事: 我说的话,你能听到; 你说的话,我也能听到。 这样,就可以开始正常通信了。

5.发送Http请求

Http请求报文携带各种头部信息,大致分为三个部分:请求行、请求头、请求体。

请求行一般包括:服务器协议版本,状态码(2XX,表示处理成功; 4XX,表示客户端的错误; 5XX,表示服务器内部出错)

请求头一般包括:此次响应的时间、此次响应返回的文件长度、文件类型等等

请求体一般包括:服务器返回给客户端的文件、数据等(当请求时POST的时候才会有请求体)

6.服务器处理后响应给客户端HTML文件
7.浏览器解析html代码。

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

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

8.浏览器渲染页面

渲染的过程大致分为:

  1. 转换: 浏览器从磁盘或网络读取 HTML 的原始字节,并根据文件的指定编码(如 UTF-8)将它们转换成各个字符。
  2. Tokenizing: 浏览器将字符串转换成 W3C HTML5 标准规定的各种tokens,例如,“”、“”,以及其他尖括号内的字符串。每个token都具有特殊含义和一组规则。
  3. 词法分析: 发出的标记转换成定义其属性和规则的“对象”。
  4. DOM 构建: 最后,由于 HTML 标记定义不同标记之间的关系(一些标记包含在其他标记内),创建的对象链接在一个树数据结构内,此结构也会捕获原始标记中定义的父项-子项关系:HTML 对象是 body 对象的父项,bodyparagraph对象的父项,依此类推。

整个流程最终输出是页面的文档对象模型 (DOM),浏览器对页面进行的所有进一步处理都会用到它。


 上一篇
判断奇偶 判断奇偶
最近在知乎上看到一位大佬分享了一道面试题,题目很简单,但对基础考察的淋漓尽致,很有启发意义,分享给大家。 题目:判断一个数的是奇数。 相当一部分人会这样写: public boolean Odd(int i){ if(i%2 =
2019-03-12 统行
下一篇 
深入理解分而治之与快速排序 深入理解分而治之与快速排序
一.分而治之分而治之(divide and conquer,D&C)是一种解决问题的重要的策略。它不仅是一种递归式的解决方法,更是一种分析问题的思维模式,尤其在程序设计中反映着一个人的算法内功,其重要性不言而喻。 下面我们先来假设这
2019-02-28 统行
  目录