彻底理解从输入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服务器采用的不是这一个默认端口，就需要写明服务器所用的端口。常见的协议默认端口如下：

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

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

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

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

具体来说：

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

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

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

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

递归查找

本地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图解