从url到页面展现的详细过程

先来理解自己的思路

一个url包含协议、域名、端口、路径、参数

当输入完整的url之后

1、浏览器会先把url中域名解析成对应ip,
2、解析成ip之后建立与服务器的连接（三次握手）
3、与服务器建立连接之后，发送请求，
4、服务器接受请求之后，处理请求并完成响应
5、浏览器的接受数据和页面渲染,构建DOM树
6、关闭tcp连接（四次挥手）

总结成六个 现在一步一步来解析每一步要经历的过程

第一步，域名到ip

域名到ip 又称DNS解析（听上去很难，其实还好） 当你在浏览器中输入一个地址时，例如www.baidu.com，其实不是百度网站真正意义上的地址。互联网上每一台计算机的唯一标识是它的IP地址，但是IP地址并不方便记忆也不美观，它实际上充当了一个翻译的角色，实现了网址到IP地址的转换。域名是Ip的一个映射

过程如下：

1、浏览器先检查本地host文件是否有当前网站的映射， 有则调用
2、如果没有，会查找本地DNS解析器缓存，有则走缓存
3、如果没有，会查找本地DNS服务器(提供本地连接的服务商)，有则调用
4、如果没有，会迭代查询（根域名服务器 -> 顶级域 -> 第二层域 -> 子域）

迭代查询（又称递归查询）
以 www.guazi.com 为例 前面本地host文件没有找到映射的ip，本地dns解析器缓存以及本地dns服务器中都没找到，下一步会去根域名服务器中去查找顶级域名在哪里，根域名服务器知道所有的顶级域名服务器的域名和ip，所有域名查询都必须先查询根域名，那么什么是根域名呢？www.guazi.com. 最后的那个.就是根域名（ICANN有根域名列表）（根域名拓展链接： http://www.ruanyifeng.com/blog/2018/05/root-domain.html）
通过根域名找到顶级域名的ip之后，去顶级域名服务器查找二级域名服务器在哪里并告诉你二级域名对应的ip,以此类推有可能出现三级域名，直到找到输入的url域名所对应的ip,找到后把它缓存到本地，供下次查询使用，过程就是(com -> guazi.com -> www.guazi.com) 第一步就完成了。

dns解析

关于dns解析优化的知识 下一篇

第二步， 解析成ip之后建立与服务器的连接（TCP连接）

在通过第一步的DNS域名解析后，获取到了服务器的IP地址，在获取到IP地址后，便会开始建立一次连接，这是由TCP协议完成的，主要通过大家听了好多遍的三次握手进行连接

1、第一次 客户端发送syn包（syn=j）到服务器，并进入SYN_SENT状态，等待服务器确认

2、第二次 服务器收到syn包，必须确认客户的SYN（ack=j+1），同时自己也发送一个SYN包（syn=k），即SYN+ACK包，此时服务器进入SYN_RECV状态

3、第三次 客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK(ack=k+1）

成功之后客户端和服务器进入ESTABLISHED（TCP连接成功）状态，完成三次握手

三次握手.png

客户端：我要请求数据可以吗？

服务器：可以的

客户端：好的

为啥需要三次握手

谢希仁著《计算机网络》中讲“三次握手”的目的是“为了防止已失效的连接请求报文段突然又传送到了服务端，因而产生错误”。

第三步：与服务器建立连接之后，发送请求

1.请求报文由请求行（request line）、请求头（header）、请求体四个部分组成,如下图所示：

• 请求方法包含 8 种：GET、POST、PUT、DELETE、PATCH、HEAD、OPTIONS、TRACE。

• URL 即请求地址，由 <协议>：//<主机>：<端口>/<路径>?<参数> 组成

• 协议版本即 http 版本号

2. 请求头包含请求的附加信息，由关键字/值对组成，每行一对，关键字和值用英文冒号“:”分隔。

请求头部通知服务器有关于客户端请求的信息。它包含许多有关的客户端环境和请求正文的有用信息。其中比如：

Host，表示主机名，虚拟主机；

Connection,HTTP/1.1 增加的，使用 keepalive，即持久连接，一个连接可以发多个请求；

User-Agent，请求发出者，兼容性以及定制化需求。

推荐一个网址 https://juejin.im/post/5c808d4bf265da2de33f4e5f

3. 请求体，可以承载多个请求参数的数据，包含回车符、换行符和请求数据，并不是所有请求都具有请求数据。

name=tom&password=1234&realName=tomson

第四步 服务器接受请求之后，处理请求并完成响应

1. 服务器
   服务器是网络环境中的高性能计算机，它侦听网络上的其他计算机（客户机）提交的服务请求，并提供相应的服务，比如网页服务、文件下载服务、邮件服务、视频服务。而客户端主要的功能是浏览网页、看视频、听音乐等等，两者截然不同。

每台服务器上都会安装处理请求的应用——==web server==。常见的 web server 产品有 apache、nginx、IIS 或 Lighttpd 等。

web server 担任管控的角色，对于不同用户发送的请求，会结合配置文件，把不同请求委托给服务器上处理相应请求的程序进行处理

例如 CGI 脚本，JSP 脚本，servlets，ASP 脚本，服务器端 JavaScript，或者一些其它的服务器端技术等，

然后返回后台程序处理产生的结果作为响应。

2.后台处理

后台开发现在有很多框架，但大部分都还是按照 MVC 设计模式进行搭建的。

MVC 是一个设计模式，将应用程序分成三个核心部件：模型（model）-- 视图（view）--控制器（controller），它们各自处理自己的任务，实现输入、处理和输出的分离。

• 视图： 它是提供给用户的操作界面，是程序的外壳
• 模型： 模型主要负责数据交互。在 MVC 的三个部件中，模型拥有最多的处理任务。一个模型能为多个视图提供数据。
• 控制器： 它负责根据用户从"视图层"输入的指令，选取"模型层"中的数据，然后对其进行相应的操作，产生最终结果。控制器属于管理者角色，从视图接收请求并决定调用哪个模型构件去处理请求，然后再确定用哪个视图来显示模型处理返回的数据

简而言之，首先浏览器发送过来的请求先经过控制器，控制器进行逻辑处理和请求分发，接着会调用模型，这一阶段模型会获取 redis db 以及 MySQL 的数据，获取数据后将渲染好的页面，响应信息会以响应报文的形式返回给客户端，最后浏览器通过渲染引擎将网页呈现在用户面前。

http 响应报文

响应报文由响应行（request line）、响应头部（header）、响应主体三个部分组成

响应行包含：协议版本，状态码，状态码描述

• 1xx：指示信息--表示请求已接收，继续处理。
• 2xx：成功--表示请求已被成功接收、理解、接受。
• 3xx：重定向--要完成请求必须进行更进一步的操作。
• 4xx：客户端错误--请求有语法错误或请求无法实现。
• 5xx：服务器端错误--服务器未能实现合法的请求。

响应头部包含响应报文的附加信息，由 名/值 对组成

响应主体包含回车符、换行符和响应返回数据，并不是所有响应报文都有响应数据

第五步 浏览器的接受数据和页面渲染,构建DOM树

浏览器拿到响应文本 HTML 后，接下来介绍下浏览器渲染机制

dom解析.png

• 根据 HTML 解析出 DOM 树
• 根据 CSS 解析生成 CSS 规则树
• 结合 DOM 树和 CSS 规则树，生成渲染树
• 根据渲染树计算每一个节点的信息
• 根据计算好的信息绘制页面

1. 根据 HTML 解析 DOM 树

    根据 HTML 的内容，将标签按照结构解析成为 DOM 树，DOM 树解析的过程是一个深度优先遍历。即先构建当前节点的所有子节点，再构建下一个兄弟节点。
    在读取 HTML 文档，构建 DOM 树的过程中，若遇到 script 标签，则 DOM 树的构建会暂停，直至脚本执行完毕。

2. 根据 CSS 解析生成 CSS 规则树

    解析 CSS 规则树时 js 执行将暂停，直至 CSS 规则树就绪。
    浏览器在 CSS 规则树生成之前不会进行渲染。

3. 结合 DOM 树和 CSS 规则树，生成渲染树

    DOM 树和 CSS 规则树全部准备好了以后，浏览器才会开始构建渲染树。
    精简 CSS 并可以加快 CSS 规则树的构建，从而加快页面相应速度。

4. 根据渲染树计算每一个节点的信息（布局）

    布局：通过渲染树中渲染对象的信息，计算出每一个渲染对象的位置和尺寸
    回流：在布局完成后，发现了某个部分发生了变化影响了布局，那就需要倒回去重新渲染。

5. 根据计算好的信息绘制页面

    绘制阶段，系统会遍历呈现树，并调用呈现器的“paint”方法，将呈现器的内容显示在屏幕上。
    重绘：某个元素的背景颜色，文字颜色等，不影响元素周围或内部布局的属性，将只会引起浏览器的重绘。
    回流：某个元素的尺寸发生了变化，则需重新计算渲染树，重新渲染。

第六步 关闭tcp连接（四次挥手）

四次挥手.png

发起方向被动方发送报文，Fin、Ack、Seq，表示已经没有数据传输了。并进入 FIN_WAIT_1 状态。(第一次挥手：由浏览器发起的，发送给服务器，我请求报文发送完了，你准备关闭吧)

被动方发送报文，Ack、Seq，表示同意关闭请求。此时主机发起方进入 FIN_WAIT_2 状态。(第二次挥手：由服务器发起的，告诉浏览器，我请求报文接受完了，我准备关闭了，你也准备吧)

被动方向发起方发送报文段，Fin、Ack、Seq，请求关闭连接。并进入 LAST_ACK 状态。(第三次挥手：由服务器发起，告诉浏览器，我响应报文发送完了，你准备关闭吧)

发起方向被动方发送报文段，Ack、Seq。然后进入等待 TIME_WAIT 状态。被动方收到发起方的报文段以后关闭连接。发起方等待一定时间未收到回复，则正常关闭。(第四次挥手：由浏览器发起，告诉服务器，我响应报文接受完了，我准备关闭了，你也准备吧)