从输入URL到页面加载完成的过程详解

时间：2018年3月27日14:03:05

《我的博客地图》

    对于经历过多次面试的前端工程师来说，这个问题肯定会遇到过，而且每次都回答的不同，因此，把这个问题拿出来单独讨论，不仅对于自己的知识有所积累，同时也有助于广度的学习。

    用到的技术：浏览器技术、http、网络服务等

    比如，我们要访问：http://www.baidu.com，过程如下：

1、浏览器从URL中解析出服务器主机名（文本形式的域名），www.baidu.com

2、浏览器通过 域名服务器（DNS，domain name system）将服务器的主机名转换成服务器的IP地址，119.75.217.109（域名-IP地址，相互映射的存储在分布式数据库中）；

补充：DNS解析流程

第一步：浏览器将会检查缓存中有没有这个域名对应的解析过的IP地址，如果有，该解析过程将会结束。浏览器缓存域名也是有限制的，包括缓存的时间、大小，可以通过TTL属性来设置。
第二步：如果用户的浏览器中缓存中没有，操作系统会先检查自己本地的hosts文件是否有这个网址映射关系，如果有，就先调用这个IP地址映射，完成域名解析。
第三步：如果hosts里没有这个域名的映射，则查找本地DNS解析器缓存，是否有这个网址映射关系，如果有，直接返回，完成域名解析。
第四步：如果hosts与本地DNS解析器缓存都没有相应的网址映射关系，首先会找TCP/ip参数中设置的首选DNS服务器，在此我们叫它本地DNS服务器，此服务器收到查询时，如果要查询的域名包含在本地配置区域资源中，则返回解析结果给客户机，完成域名解析，此解析具有权威性。
第五步：如果要查询的域名不由本地DNS服务器区域解析，但该服务器已缓存了此网址映射关系，则调用这个IP地址映射，完成域名解析，此解析不具有权威性。
第六步：如果本地DNS服务器、本地区域文件与缓存解析都失效，则根据本地DNS服务器的设置（是否设置转发器）进行查询，如果未用转发模式，本地DNS就把请求发至13台根DNS，根DNS服务器收到请求后会判断这个域名(.com)是谁来授权管理，并会返回一个负责该顶级域名服务器的一个IP。本地DNS服务器收到IP信息后，将会联系负责.com域的这台服务器。这台负责.com域的服务器收到请求后，如果自己无法解析，它就会找一个管理.com域的下一级DNS服务器地址给本地DNS服务器。当本地DNS服务器收到这个地址后，就会找域名域服务器，重复上面的动作，进行查询，直至找到域名对应的主机。
第七步：如果用的是转发模式，此DNS服务器就会把请求转发至上一级DNS服务器，由上一级服务器进行解析，上一级服务器如果不能解析，或找根DNS或把转请求转至上上级，以此循环。不管是本地DNS服务器用是是转发，还是根提示，最后都是把结果返回给本地DNS服务器，由此DNS服务器再返回给客户机。

3、浏览器从URL中解析出端口号，默认80

4、浏览器建立一条与Web服务器的TCP连接，浏览器发起到119.75.217.109端口80的连接

    TCP，Transmission Control Protocol，传输控制协议，将 请求报文 和 响应报文 从一个地方搬移到另一个地方。TCP可以提供的功能，无差错的数据传输、按序传输、未分段数据流。

5、通过建立的连接发送一条请求报文，浏览器向服务器发送一条HTTP GET请求报文

6、服务器向浏览器回送一条HTTP响应报文

7、浏览器关闭连接

8、解析文档

    Web应用程序：Web浏览器、Web服务器、代理、缓存、网关、隧道、Agent代理

9、页面渲染的过程出现的问题

    JS阻塞加载：浏览器在加载JS的时候会阻塞浏览器的DOM渲染