前言

当用户在浏览器的地址栏输入一个链接，比如www.baidu.com之后，按下回车键，页面就会加载出来。貌似很容易，但是这背后的工作原理其实没有看上去那么简单，大致可以分成以下几个步骤。

1.浏览器识别URL

什么是URL？
url即统一资源定位器，基本URL包含模式（或称协议）、服务器名称（或IP地址）、路径和文件名。格式可以分成两部分。

• 第一部分：模式/协议（scheme）：它告诉浏览器如何处理将要打开的文件。最常用的模式是超文本传输协议（Hypertext Transfer Protocol，缩写为HTTP），这个协议可以用来访问网络。其他协议如下：

http	超文本传输协议资源
https	用安全套接字层传送的超文本传输协议
ftp	文件传输协议
mailto	电子邮件地址
ldap	轻型目录访问协议
file	当地电脑或网上分享的文件
news	Usenet新闻组
gopher	Gopher协议
telnet	Telnet协议

• 第二部分
  文件所在的服务器的名称或IP地址，后面是到达这个文件的路径和文件本身的名称。服务器的名称或IP地址后面有时还跟一个冒号和一个端口号。它也可以包含接触服务器必须的用户名称和密码。路径部分包含等级结构的路径定义，一般来说不同部分之间以斜线（/）分隔。询问部分一般用来传送对服务器上的数据库进行动态询问时所需要的参数。
  有时候，URL以斜杠“/”结尾，而没有给出文件名，在这种情况下，URL引用路径中最后一个目录中的默认文件（通常对应于主页），这个文件常常被称为 index.html 或 default.htm

2. DNS系统完成域名查询

IP地址是网络上标识站点的数字地址，为了方便记忆，采用域名来代替IP地址标识站点地址。域名解析就是域名到IP地址的转换过程。域名的解析工作由DNS服务器完成。

• 查询浏览器缓存。不同的浏览器存储DNS记录的时间是不同的，一般在30秒到2分钟（打开 chrome://net-internals/#dns查看chrome缓存）。
• 查询系统缓存。若浏览器缓存中没找到，浏览器则会做系统调用（windows里是gethostbyname）进行查询。它会查询本地Host文件，Host的位置因系统而异。
• 若Host文件也没有，则向DNS服务器发出查询请求，DNS服务器一般为路由器或 ISP 的缓存 DNS 服务器。
  ISP的缓存DNS服务器进行递归查询，从根域名服务器查到顶级域名服务器再查到权限域名服务器。最后得到目标域名的IP地址。
  到此已经获得了目标域名的IP地址。接下来就是通过 Socket 发送数据

3.浏览器和服务器之间建立TCP连接

TCP/IP 定义了电子设备如何连入因特网，以及数据如何在它们之间传输的标准。协议采用了4层的层级结构，每一层都呼叫它的下一层所提供的协议来完成自己的需求。

利用TCP/IP通信时，是通过分层顺序和对方通信的。发送端从应用层往链路层，接收端从链路层往应用层。

4.浏览器发出请求

建立连接后，浏览器会发送一个HTTP请求，HTTP请求包含的信息可以分成如下三部分：

• 请求行（包含请求的方法、URL地址和协议版本）
• 请求头（Request Header）
• 请求正文

这时，我们在回过头来看在TCP协议上发送HTTP请求的过程，即：

• 客户端在应用层发送HTTP请求
• 在传输层（TCP协议）对HTTP请求进行封装，加入了端口号等信息
• 在网络层（IP协议）增加了IP地址
• 在链路层加入了网卡的MAC地址
  到此，一个发向对方的请求就封装好了，进入下一部分

5. 服务器响应请求，将数据传输给浏览器

事实上，在进入服务器之前，可能还会先经过负责负载均衡的机器，其目的为将请求合理地分配到多个服务器上，在经过了负载均衡后，请求真正地到了服务器的Web Server，比如 Apache，Node.JS等。
服务器收到客户请求之后，进行了处理，需要把结果返回，也就是返回一个HTTP响应。HTTP响应与HTTP请求类似，也包含三个部分，在此不再赘述。

6. TCP连接释放

7. 浏览器进行页面的加载

这个过程即浏览器显示HTML的过程。

渲染引擎一边解析HTML，一边将标签用来构建DOM树。当他解析到CSS文件或<style>时，它又会开始解析这些样式，渲染引擎并不是全部解析完HTML，再构建DOM树，构建和布局Render树的，这些都是逐步完成的。解析一部分，就显示一部分,带来更好的用户体验。
当解析到需要获取其他地址的标签如<img>时，浏览器又会发起一个HTTP请求，进行之前提到过的DNS查询等等一系列操作。但是对于这种静态文件，很可能在浏览器缓存中就有，不需要和服务器进行交互。完成渲染之后，页面也就这样展现在用户面前了。