“天龙八步”细说浏览器输入URL后发生了什么

本文摘要：
1.DNS域名解析；
2.创建TCP链接；
3.发送HTTP请求；
4.服务器处理请求；
5.返回响应结果；
6.关闭TCP链接；
7.浏览器解析HTML；
8.浏览器布局渲染；
总结

输入网址

当咱们在浏览器输入网址并回车后，一切从这里开始。

1、DNS域名解析

咱们在浏览器输入网址，其实就是要向服务器请求咱们想要的页面内容，全部浏览器首先要确认的是域名所对应的服务器在哪里。将域名解析成对应的服务器IP地址这项工做，是由DNS服务器来完成的。

客户端收到你输入的域名地址后，它首先去找本地的hosts文件，检查在该文件中是否有相应的域名、IP对应关系，若是有，则向其IP地址发送请求，若是没有，再去找DNS服务器。通常用户不多去编辑修改hosts文件。

DNS服务器层次结构

 

浏览器客户端向本地DNS服务器发送一个含有域名www.cnblogs.com的DNS查询报文。本地DNS服务器把查询报文转发到根DNS服务器，根DNS服务器注意到其com后缀，因而向本地DNS服务器返回comDNS服务器的IP地址。本地DNS服务器再次向comDNS服务器发送查询请求，comDNS服务器注意到其www.cnblogs.com后缀并用负责该域名的权威DNS服务器的IP地址做为回应。最后，本地DNS服务器将含有www.cnblogs.com的IP地址的响应报文发送给客户端。

从客户端到本地服务器属于递归查询，而DNS服务器之间的交互属于迭代查询。

正常状况下，本地DNS服务器的缓存中已有comDNS服务器的地址，所以请求根域名服务器这一步不是必需的。

2、创建TCP连接

费了一顿周折终于拿到服务器IP了，下一步天然就是连接到该服务器。对于客户端与服务器的TCP连接，必然要说的就是『三次握手』。

三次握手

客户端发送一个带有SYN标志的数据包给服务端，服务端收到后，回传一个带有SYN/ACK标志的数据包以示传达确认信息，最后客户端再回传一个带ACK标志的数据包，表明握手结束，链接成功。

上图也能够这么理解：

客户端：“你好，在家不，有你快递。”

服务端：“在的，送来就行。”

客户端：“好嘞。”

3、发送HTTP请求

与服务器创建了链接后，就能够向服务器发起请求了。这里咱们先看下请求报文的结构（以下图）：

请求报文

在浏览器中查看报文首部（以google浏览器为例）：

 

请求行包括请求方法、URI、HTTP版本。首部字段传递重要信息，包括请求首部字段、通用首部字段和实体首部字段。咱们能够从报文中看到发出的请求的具体信息。具体每一个首部字段的做用，这里不作过多阐述。

4、服务器处理请求

服务器端收到请求后的由web服务器（准确说应该是http服务器）处理请求，诸如Apache、Ngnix、IIS等。web服务器解析用户请求，知道了须要调度哪些资源文件，再经过相应的这些资源文件处理用户请求和参数，并调用数据库信息，最后将结果经过web服务器返回给浏览器客户端。

服务器处理请求

5、返回响应结果

在HTTP里，有请求就会有响应，哪怕是错误信息。这里咱们一样看下响应报文的组成结构：

响应报文

在响应结果中都会有个一个HTTP状态码，好比咱们熟知的200、30一、40四、500等。经过这个状态码咱们能够知道服务器端的处理是否正常，并能了解具体的错误。

状态码由3位数字和缘由短语组成。根据首位数字，状态码能够分为五类：

状态码类别

6、关闭TCP链接

为了不服务器与客户端双方的资源占用和损耗，当双方没有请求或响应传递时，任意一方均可以发起关闭请求。与建立TCP链接的3次握手相似，关闭TCP链接，须要4次握手。

4次握手

上图能够这么理解：

客户端：“兄弟，我这边没数据要传了，咱关闭链接吧。”

服务端：“收到，我看看我这边有木有数据了。”

服务端：“兄弟，我这边也没数据要传你了，咱能够关闭链接了。”

客户端：“好嘞。”

7、浏览器解析HTML

准确地说，浏览器须要加载解析的不只仅是HTML，还包括CSS、JS。以及还要加载图片、视频等其余媒体资源。

浏览器经过解析HTML，生成DOM树，解析CSS，生成CSS规则树，而后经过DOM树和CSS规则树生成渲染树。渲染树与DOM树不一样，渲染树中并无head、display为none等没必要显示的节点。

要注意的是，浏览器的解析过程并不是是串连进行的，好比在解析CSS的同时，能够继续加载解析HTML，但在解析执行JS脚本时，会中止解析后续HTML，这就会出现阻塞问题，关于JS阻塞相关问题，这里不过多阐述,后面会单独开篇讲解。

8、浏览器布局渲染

根据渲染树布局，计算CSS样式，即每一个节点在页面中的大小和位置等几何信息。HTML默认是流式布局的，CSS和js会打破这种布局，改变DOM的外观样式以及大小和位置。这时就要提到两个重要概念：replaint和reflow。

replaint：屏幕的一部分重画，不影响总体布局，好比某个CSS的背景色变了，但元素的几何尺寸和位置不变。

reflow： 意味着元件的几何尺寸变了，咱们须要从新验证并计算渲染树。是渲染树的一部分或所有发生了变化。这就是Reflow，或是Layout。

因此咱们应该尽可能减小reflow和replaint，我想这也是为何如今不多有用table布局的缘由之一。

最后浏览器绘制各个节点，将页面展现给用户。

总结

本文系统地讲述从浏览器从输入域名到最终页面展现的总体流程。篇幅所限，本文的每一步讲述其实并不全面，因此后面我会单独就域名解析、HTTP请求/响应、浏览器的解析、渲染等内容单独开篇讲解，感兴趣的朋友也能够关注个人我的博客 。

更多技术分享，欢迎关注『网站建设运维百科』

参考：

http://igoro.com/archive/what-really-happens-when-you-navigate-to-a-url/

http://taligarsiel.com/Projects/howbrowserswork1.htm

https://www.zhihu.com/question/34873227

图片制做工具：Axure、PS、 Ulead GIF Animator、 ProcessOn