彻底理解从输入URL与页面展现

流程概述：

地址栏输入URL ——> 域名解析 ——> 服务器处理请求 ——> 浏览器处理响应 ——> 浏览器绘制网页

一.地址栏输入URL

认识URL

URL定义：
（Uniform Resource Locator），统一资源定位符，用于定位互联网上的资源，实际上就是网站网址。

URL与URI：URI 属于 URL 更低层次的抽象，是一种字符串文本标准。就是说，URI 属于父类，而 URL 属于 URI 的子类。URL 是 URI 的一个子集。二者的区别在于，URI 表示请求服务器的路径，定义这么一个资源。而 URL 同时说明要如何访问这个资源（http://）。

URL标准格式：
URL由三部分组成：资源类型、存放资源的主机域名、资源文件名。

scheme://host.domain[:port]/path/filename

• scheme - 定义因特网服务的类型。最常见的类型是 http、https、ftp等。

• host - 定义域主机（省略时取默认值，http/https的默认主机是www）

• domain - 定义因特网域名，比如w3school.com.cn

• :port - 定义主机上的端口号（省略时取默认值，http的默认端口号是80）

• path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）

• filename - 定义文档/资源的名称

例如，我的segmentfault个人主页为 https://segmentfault.com/u/je... ，其中，https表示与web服务器通讯采用https协议，segmentfault的web服务器域名为www.segmentfault.com，省略了域主机host(www)，端口号取了默认值80，/u指定了我的个人主页在服务器上的存放路径，/jerry_fe指定了我的个人主页在服务器中的文档名称。

端口号的存在意义：
一台主机常常会同时作为Web、FTP等服务器，端口编号用来告诉web服务器所在的主机要将请求交给哪个服务器。默认情况下http服务的端口为80，不需要在url中输入，如果web服务器采用的不是这一个默认端口，就需要写明服务器所用的端口。常见的协议默认端口如下：

协议类型	默认端口
http	80
ftp	21
https	443
telnet	23

认识IP地址

每个抛头露面的域名背后总有一个低调内敛的IP。
IP是因特网中每台计算机为实现相互通信而遵循的规则协议。每个处于互联网中的设备都有IP地址，每个网站就是靠服务器的IP地址来定位的。

域名可以理解成“为了方便记忆而为IP地址起的一个小名”，人们使用域名来登录网站，每个域名背后有对应的IP地址。

例如segmentfault的URL为https://segmentfault.com，其域名为 segmentfault.com，其实浏览器并不知道segmentfault.com是什么，要访问该网站，就需要查找segmentfault.com域名所代表的IP地址（即segmentfault网站服务器的IP地址），这个查找的过程即为域名解析。

二.域名解析

域名解析是一个层级查找的过程：
查找浏览器缓存 ——> 查找操作系统缓存 ——> 查找路由器缓存 ——> 查找本地DNS缓存 ——> 递归查询
（DNS：域名和IP地址相互映射的一个分布式数据库）

具体来说：

1. 查找浏览器缓存
   浏览器查找缓存中是否之前解析过并缓存了这个域名的IP地址。
   如果有，浏览器获得该IP，解析过程结束，如果没有，继续查找操作系统缓存。

2. 查找操作系统缓存
   浏览器查找操作系统hosts文件中是否有目标域名和对应的IP地址。
   如果有，浏览器获得该IP，解析过程结束，如果没有，继续查找路由器缓存。

3. 查找路由器缓存
   浏览器在路由器缓存中查找，路由器一般会有自己的DNS缓存。
   如果有，浏览器获得该IP，解析过程结束，如果没有，继续查找本地DNS缓存。

4. 查找本地DNS缓存
   网络配置中都会有"DNS服务器地址"这一项，浏览器会把这个域名发送给这里设置的DNS服务器，也就是本地区的域名服务器，通常是提供给你接入互联网的应用提供商。114.114.114.114是国内移动、电信和联通通用的DNS。
   如果有，浏览器获得该IP，解析过程结束，如果没有，继续进行递归查找。

5. 递归查找

   • 本地DNS服务器将目标域名转发到互联网上的根域

   • 根域将所要查询域名中的顶级域（比如www.baidu.com的顶级域就是com）的服务器IP地址返回给本地DNS。

   • 本地DNS根据返回的顶级域IP地址，向顶级域服务器发送目标域名，顶级域服务器再将域名中的二级域（比如www.baidu.com的二级域为baidu.com）的服务器IP地址返回给本地DNS。

   • 本地DNS根据返回的二级域IP地址，向二级域服务器发送目标域名，重复这样的过程，直到本地DNS获得完整的服务器IP地址，并返回给浏览器。
     下图展示了完整的递归查询过程：

   

浏览器获得完整的服务器IP地址后，域名解析环节完成。之后，浏览器通过IP地址查找到对应的服务器，并将用户发起的http请求发送给服务器。

三.服务器处理请求

服务器上安装了处理http请求的应用 —— web server，常见的web server产品有apache、nginx、IIS、Lighttpd等。

当web server接收到一个HTTP请求(request)，会结合配置文件，把不同请求委托给服务器上处理对应请求的程序进行处理（例如CGI脚本、JSP脚本、servlets、ASP脚本、服务器端JavaScript、或者一些其它的服务器端技术等）。不管是哪种脚本，这些服务器端(server-side)程序都会产生一个http响应(response)，例如送回一个HTML页面，来让浏览器可以展现。

完成处理过程的代码框架，大部分是按照MVC设计模式搭建的，实际处理过程如下图：

MVC的处理过程是这样的：每个用户输入的请求，首先被控制器(C)接收，控制器决定用哪个模型(M)来处理，然后模型用业务逻辑来处理用户的请求，再然后控制器决定用哪个视图模型(V)来接收模型处理后的数据，最后由该视图模型对应的视图格式化模型来返回HTML字符串给浏览器。

四.浏览器处理响应

浏览器接收到后台返回的HTML字符串后，会依次经历：加载、解析、渲染。

• 加载
  浏览器对一个html页面的加载顺序是从上而下的。
  当加载到外部css文件、图片等资源，浏览器会再发起一次http请求，来获取外部资源。
  当加载到js文件，html文档会挂起渲染（加载解析渲染同步）的线程，等待js文件加载、解析完毕才可以恢复html文档的渲染线程。

• 解析
  解析文档是指将文档转化成为有意义的代码。
  HTML解析得到的是DOM树，也称节点树，如下图：

css解析得到的是样式表对象，如下图：

js是一种动态语言，无需编译，其解析过程即为其“预编译”、“预处理”过程。
深入理解浏览器的解析过程，请参阅[浏览器的工作原理：新式网络浏览器幕后揭秘][2]

• 渲染
  构建渲染树的过程，就是将DOM树进行可视化表示。构建这棵树是为了以正确的顺序绘制文档内容。

五.浏览器绘制网页

绘制过程主要是html(结构)与css(样式)的结合，以及js(行为)动态效果的展现。
css是通过选择器与html结合的，html自身不带有任何样式。（之后会写css系列文章，欢迎围观）

主要参考文章：

基础进阶URL详解与URL编码
前端面试题：从url到页面展现，这之中发生了什么？
HTTP图解