从URL输入到页面展现到底发生什么？

前言

打开浏览器从输入网址到网页呈现在大家面前，背后到底发生了什么？经历怎么样的一个过程？先给大家来张总体流程图，具体步骤请看下文分解！

一、URL到底是啥

二、域名解析（DNS）

1.IP地址

IP地址是指互联网协议地址，是IP Address的缩写。IP地址是IP协议提供的一种统一的地址格式，它为互联网上的每一个网络和每一台主机分配一个逻辑地址，以此来屏蔽物理地址的差异。IP地址是一个32位的二进制数，比如127.0.0.1为本机IP。
域名就相当于IP地址乔装打扮的伪装者，带着一副面具。它的作用就是便于记忆和沟通的一组服务器的地址。用户通常使用主机名或域名来访问对方的计算机，而不是直接通过 IP 地址访问。因为与 IP 地址的一组纯数字相比，用字母配合数字的表示形式来指定计算机名更符合人类的记忆习惯。但要让计算机去理解名称，相对而言就变得困难了。因为计算机更擅长处理一长串数字。为了解决上述的问题，DNS 服务应运而生。

2.什么是域名解析

DNS 协议提供通过域名查找 IP 地址，或逆向从 IP 地址反查域名的服务。DNS是一个网络服务器，我们的域名解析简单来说就是在DNS上记录一条信息记录。

例如   220.114.23.56（服务器外网IP地址）80（服务器端口号）

3. 浏览器如何通过域名去查询URL对应的IP呢

• 浏览器缓存：浏览器会按照一定的频率缓存DNS记录。
• 操作系统缓存：如果浏览器缓存中找不到需要的DNS记录，那就去操作系统中找。
• 路由缓存：路由器也有DNS缓存。
• ISP的DNS服务器：ISP是互联网服务提供商(Internet Service Provider)的简称，ISP有专门的DNS服务器应对DNS查询请求。

4. 总结

浏览器通过向DNS服务器发送域名，DNS服务器查询到与域名相对应的IP地址，然后返回给浏览器，浏览器再将IP地址打在协议上，同时请求参数也会在协议搭载，然后一并发送给对应的服务器。下一步就到了服务器处理阶段的工作。

三、服务器处理响应请求

1. 服务器

2.MVC后台处理阶段

后台开发现在有很多框架，但大部分都还是按照MVC设计模式进行搭建的。
MVC是一个设计模式，将应用程序分成三个核心部件：模型（model）-- 视图（view）--控制器（controller），它们各自处理自己的任务，实现输入、处理和输出的分离。

1、视图（view）

它是提供给用户的操作界面，是程序的外壳。

2、模型（model）

模型主要负责数据交互。在MVC的三个部件中，模型拥有最多的处理任务。一个模型能为多个视图提供数据。

3、控制器（controller）

它负责根据用户从"视图层"输入的指令，选取"模型层"中的数据，然后对其进行相应的操作，产生最终结果。控制器属于管理者角色，从视图接收请求并决定调用哪个模型构件去处理请求，然后再确定用哪个视图来显示模型处理返回的数据。
这三层是紧密联系在一起的，但又是互相独立的，每一层内部的变化不影响其他层。每一层都对外提供接口（Interface），供上面一层调用。
至于这一阶段发生什么？简而言之，首先浏览器发送过来的请求先经过控制器，控制器进行逻辑处理和请求分发，接着会调用模型，这一阶段模型会获取redis db以及MySQL的数据，获取数据后将渲染好的页面通过视图返回给浏览器，最后浏览器通过渲染引擎将网页呈现在用户面前。因此，下一步就来到浏览器处理阶段

四、浏览器的处理

浏览器拿到响应文本HTML后，以chrome浏览器为例，介绍下浏览器渲染机制

chrome浏览器渲染机制

处理 HTML 标记并构建 DOM 树。
处理 CSS 标记并构建 CSSOM 树。
将 DOM 与 CSSOM 合并成一个渲染树（render 树）。
根据渲染树来布局，以计算每个节点（也就是每个Element）的几何位置,这又叫layout和reflow过程。
最后通过调用操作系统Native GUI的API绘制,将各个节点绘制到屏幕上。
于是就来到了绘制网页的最后阶段。

五、绘制网页

浏览器根据html和css计算得到渲染树之后，将渲染好的页面图像显示出来，即绘制网页，并开始响应用户的操作。

六、后记