从输入URL到页面展示，浏览器的经历

打开浏览器，在地址框输入URL，按下回车键，页面就会展示在我们面前。今天这篇文章就来简单讲讲，页面展示背后究竟发生了什么。

未命名文件.png

一、什么是URL？

URL（Uniform Resource Locator）统一资源定位器，是计算机Web网络相关的术语，就是网页地址的意思。当您访问百度网站时你的浏览器上就会显示“http://www.baidu.com”，那么这个就是百度网站的URL了。

IP地址

为了便于记忆或辨识，人们使用URL来登录网站，每个URL背后有对应的IP地址。每个网站就是靠IP来定位的。IP是因特网中的每台连接到网络的计算机为实现相互通信而遵循的规则协议。IP分为局域网IP和全网IP。每台计算机的本机IP都是127.0.0.1（即localhost）。浏览器并不能识别URL是什么，因此从输入URL开始，浏览器就要做域名解析，也就是IP寻址的工作。

二、IP寻址过程简述

DNS的概念

DNS（Domain Name System，域名系统），因特网上作为域名和IP地址相互映射的一个分布式数据库，能够使用户更方便的访问互联网，而不用去记住能够被机器直接读取的IP数串。通过主机名，最终得到该主机名对应的IP地址的过程叫做域名解析（或主机名解析）。

1. 输入URL后，浏览器会从浏览器自身缓存中查找是否有目标域名和对应的IP地址，查找是否有目标域名和对应的IP地址。
2. 从电脑C盘的hosts文件查找是否有存储DNS信息。
3. 从路由器的缓存DNS信息中查找。
4. ISP DNS缓存查找，从网络服务商（比如电信）的DNS缓存信息中查找。
5. 经由以上几种方法还没查找到目标URL对应的IP的话，就会向根域名DNS服务器查找目标URL的对应IP，根域名服务器会向下级服务器转送请求，层层下发，直至找到对应IP为止

经过以上IP寻址的过程，目标URL查找到对应的IP地址之后，通过IP地址查找到对应的服务器，浏览器将用户发起的http请求发送给服务器。下一步就到了服务器处理阶段的工作。

三、服务器处理用户请求

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

web server 担任管控的角色，对于不同用户发送的请求，会结合配置文件，把不同请求委托给服务器上处理对应请求的程序进行处理（例如CGI脚本，JSP脚本，servlets，ASP脚本，服务器端JavaScript，或者一些其它的服务器端技术等），然后返回后台程序处理产生的结果作为响应。

四、网站处理阶段

网站处理，就是实际后台处理的工作。后台开发现在有很多框架，但大部分都还是按照MVC设计模式进行搭建的。

MVC是三个单词的首字母缩写，它们是Model（模型）、View（视图）和Controller（控制）。

这个模式认为，程序不论简单或复杂，从结构上看，都可以分成三层。

1）最上面的一层，是直接面向最终用户的"视图层"（View）。它是提供给用户的操作界面，是程序的外壳。

2）最底下的一层，是核心的"数据层"（Model），也就是程序需要操作的数据或信息。

3）中间的一层，就是"控制层"（Controller），它负责根据用户从"视图层"输入的指令，选取"数据层"中的数据，然后对其进行相应的操作，产生最终结果。

总结而言，首先控制器接收用户的请求，并决定应该调用哪个模型来进行处理，然后模型用业务逻辑来处理用户的请求并返回数据，最后控制器用相应的视图格式化模型返回html字符串给浏览器，浏览器呈现网页给用户。因此，下一步就来到浏览器处理阶段。

五、浏览器处理阶段

通过后台处理返回的html字符串结果会被浏览器读取解析，对应就是html页面加载、解析、渲染的工作。

1、加载

浏览器对一个html页面的加载顺序是从上而下的，并在加载过程并行进行解析渲染处理。在这个过程中遇到link标签、image标签、script标签时，浏览器会再次向服务器发送请求获取css文件、图片资源、js文件，并执行js代码，同步进行加载解析。

2、解析、渲染

解析的过程，其实就是生成解析树，即dom树。dom树是由dom元素及属性节点组成，加上css解析的样式对象和js解析后的动作实现。而渲染，就是将DOM树进行可视化表示。下一步就来到了绘制网页的工作阶段。

六、绘制页面

浏览器通过上面步骤计算得到渲染树，是DOM树的可视化表示，构建渲染树使页面以正确的顺序绘制出来，遵循一定的渲染规则，经过一系列的渲染工作，实现网站页面的绘制，由此最终完成了页面展示。