从输入一个URL到页面渲染的流程简介

 

从输入URL到页面加载，简单来说分为以下几个过程：

  1. 输入URL
  2. DNS解析
  3. TCP连接
  4. 发送HTTP请求
  5. 服务器处理请求并返回HTTP报文
  6. 解析渲染页面
  7. 连接结束

具体过程如下：

  1. 首先，在浏览器地址栏中输入URL。

域名解析。实现网址到IP地址的转换。
当发送一个url请求时，不管这个url是web页面的url还是web页面上的每个资源的url，浏览器都会开启一个线程处理该请求，同时在远程DNS服务器上启动一个DNS查询，这能使浏览器获得请求对应的IP地址．

浏览器缓存 – 浏览器会缓存DNS记录一段时间。 有趣的是，操作系统没有告诉浏览器储存DNS记录的时间，这样不同浏览器会储存个自固定的一个时间（2分钟到30分钟不等）。
系统缓存 – 如果在浏览器缓存里没有找到需要的记录，浏览器会做一个系统调用（windows里是gethostbyname）。这样便可获得系统缓存中的记录。
路由器缓存 – 接着，前面的查询请求发向路由器，它一般会有自己的DNS缓存。
ISP DNS 缓存 – 接下来要check的就是ISP缓存DNS的服务器。在这一般都能找到相应的缓存记录。
递归搜索 – 你的ISP的DNS服务器从跟域名服务器开始进行递归搜索，从.com顶级域名服务器到Facebook的域名服务器。一般DNS服务器的缓存中会有.com域名服务器中的域名，所以到顶级服务器的匹配过程不是那么必要了。
　３.TCP连接，与浏览器建立tcp三次握手。

第一次握手：建立连接时，客户端发送syn包（syn=j）到服务器，并进入SYN_SENT状态，等待服务器确认；SYN：同步序列编号（Synchronize Sequence Numbers）。
第二次握手：服务器收到syn包，必须确认客户的SYN（ack=j+1），同时自己也发送一个SYN包（syn=k），即SYN+ACK包，此时服务器进入SYN_RECV状态；
第三次握手：客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK(ack=k+1），此包发送完毕，客户端和服务器进入ESTABLISHED（TCP连接成功）状态，完成三次握手。

４.浏览器向web服务器发送http请求

发送HTTP请求的过程就是构建HTTP请求报文并通过TCP协议中发送到服务器指定端口(HTTP协议80/8080, HTTPS协议443)。HTTP请求报文是由三部分组成: 请求行, 请求报头和请求正文。

５.服务器处理请求并返回HTTP报文

HTTP响应报文也是由三部分组成: 状态码, 响应报头和响应报文。

６.浏览器解析渲染页面

          1 解析HTML，构建DOM树
          2 解析CSS，生成CSS规则树
          3 合并DOM树和CSS规则树，生成render树
          4 布局render树（渲染的基础设施）
          5 绘制render数、树，即绘制页面像素信息
          6 GPU将各层合成，结果呈现在浏览器窗口中。
７.连接结束，四次挥手。

客户端没有数据发送时就需要断开连接，以释放服务器资源。


 

Render树 

http://www.nowamagic.net/academy/detail/48110557