从 URL 到页面加载完成发生了什么

前言

“从 URL 输入到页面加载完成发生了什么” 是一个老生常谈的话题，希望通过本次整理，能对这个过程有一个大致的了解。文中部分内容比较简略，如2->3步骤中的请求过程，这些内容还有待扩展。本文最后的参考文章也比较经典（概括性较高），建议阅读部分。

横线包裹区域是对部分名词进行的解释，对名词熟悉的则可以直接跳过。鉴于Markdown语法限制，横线不是十分明显，见谅。

从 URL 到页面加载 大致流程如下：

1. 地址栏输入URL
2. 域名解析
3. 服务器处理请求
4. 浏览器处理响应
5. 浏览器绘制网页

<br />

1、输入URL

---

URL : Uniform / Universal Resource Locator ， 即统一资源定位符。
它实际上就是网站网址。浏览器就是靠URL来查找资源位置。

可以把URL分割成几个部分：协议、网络地址、资源路径。

• 传送协议： URL包含协议部分，是浏览器和www万维网之间的沟通方式，它会告诉浏览器正确在网路上找到资源位置。最常见的网络传输协议的是HTTP协议（超文本传输协议）（ https则是进行加密的网络传输）；其他也还有ftp 、file、 https、mailto 、git 等。还有自定义的协议（私有协议），例如tencent。不同协议有不同的通讯内容格式。
• 网络地址： 指示该连接网络上哪一台计算机，可以是域名或者IP地址，可以包括端口号；
• 资源路径： 指示从服务器上获取哪一项资源。

例如： http://www.quaro.com/question/123456/
协议部分：http
网络地址：www.quaro.com 
资源路径：/question/123456/

更多更详细的URL解释可以参考：
什么是URL
统一资源定位符 -- 维基百科

---

<br />

2、浏览器根据域名进行IP寻址

为了便于辨识，我们一般通过域名来访问，但是每个域名对应的IP才是我们真正要访问的对象。

IP分为局域网IP和全网IP。每台计算机的本机IP都是127.0.0.1（即localhost）。浏览器并不能识别URL是什么，因此从输入URL开始，浏览器就要做域名解析，也就是IP寻址的工作。

---

IP 地址：IP 协议为互联网上的每一个网络和每一台主机分配的一个逻辑地址。IP 地址如同门牌号码，通过 IP 地址才能确定一台主机位置。服务器本质也是一台主机，想要访问某个服务器，必须先知道它的 IP 地址。

域名 DN（domain name ）：域名是为了识别主机名称和组织机构名称的一种具有分层的名称。
IP 地址由四个数字组成，中间用点号连接，在使用过程中难记忆且易输错，所以用我们熟悉的字母和数字组合来代替纯数字的 IP 地址，比如我们只会记住 www.baidu.com （百度域名） 而不是 220.181.112.244（百度的其中一个 IP 地址）。

计算机域名系统 DNS （ Domain Name System or Domain Name Service）： 它是由域名解析器和域名服务器组成的。 域名服务器是指保存有该网络中所有主机的域名和对应IP地址，并具有将域名转换为IP地址功能的服务器。
每个域名都对应一个或多个提供相同服务的服务器的 IP 地址，只有知道服务器 IP 地址才能建立连接，所以需要通过 DNS 把域名解析成一个 IP 地址。

---

<br />

DNS解析就是访问域名计算出相应的IP地址，其中DNS查找过程如下：

• 浏览器缓存 — 对于近期内有在浏览器登录过的网站，本地浏览器会缓存DNS记录一段时间 并直接查找到IP地址。但操作系统并没有告诉浏览器每一个DNS记录缓存的存活时间，所以浏览器自己会缓存它们固定的一段时间。

• 操作系统缓存 — 如果浏览器缓存中没有找到对应的记录，浏览器就会做一次系统请求（Windows系统中是根据名称从c盘下的 host 文件中获得IP地址）。

• 路由缓存 — 请求会在你的路由器上继续进行，路由一般都会有自己的DNS缓存。

• ISP DNS缓存 — 从网络服务商（比如电信）的DNS缓存信息中查找。（DNS劫持）

• 递归查找 — 以上三种查找方法还没查找到目标URL对应的IP的话，就会向根域名DNS服务器查找目标URL的对应IP，根域名服务器会向下级服务器转送请求，层层下发，直至找到对应IP为止。

  
  DNS循环查找图表

DNS 域名解析过程

引自 程序师视野

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

• 域名与 URL 是两个概念：域名是一台或一组服务器的名称，用来确定服务器在 Internet 上的位置；URL 是统一资源定位符，用来确定某一个文件的具体位置，例如，zhihu.com 是 知乎 的域名，根据这个域名可以找到知乎的服务器， zhihu.com/people/Compile 是 URL ，可以根据这个 URL 定位我的知乎主页；

• IP 地址与域名不是一一对应的关系：可以把多个提供相同服务的服务器 IP 设置为同一个域名，但在同一时刻一个域名只能解析出一个 IP地址；同时，一个 IP 地址可以绑定多个域名，数量不限；

引用出处：从输入 URL 到页面加载完成的过程中都发生了什么 - - 知乎专栏

注： 其实这中间的过程还十分复杂，比如还要发送HTTP请求；经历TCP协议的三次握手过程，若一方收不到确认信号，协议会要求重新发送信号再建立连接。 篇幅限制，请求过程暂不展开。
<br />

3、服务器处理请求

服务器上会有安装用于接收处理请求的应用 —— web server（常见的web server产品有apache、nginx等），并且决定采用哪种方法来处理这个请求。一个请求处理是一个进程（PHP, Ruby,...），包括读取请求和形成HTML响应。

当服务器与主机建立了连接之后，主机便开始与服务器进行通信。网页请求是一个单向请求的过程，即是一个主机向服务器请求数据，服务器返回相应的数据的过程。

---

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

什么是web server

---

<br />
浏览器根据 URL 内容生成 HTTP 请求，请求中包含请求文件的位置、请求文件的方式等。

服务器响应请求，将数据（可能是根据HTML协议组织的网页，包含页面的布局、文字等）返回给浏览器。这时可以使用浏览器的F12，感受一下服务器的返回值；
若资源路径指示的资源不存在，服务器就会返回的 404 NOT FOUND

如果返回的是一个页面，根据页面里一些外链的URL，例如图片的地址，它会按照之前的步骤以及第二步中忽略的请求部分再次获取。
<br />

4、网站处理

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

---

MVC是一种架构模式，这个模式认为，程序不论简单或复杂，从结构上看，都可以分成三层。
：模型（model）-- 视图（view）--控制器（controller），它们各自处理自己的任务，实现输入、处理和输出的分离。

1. 最上面的一层： 视图（view）
   视图是直接面向用户的一层，是前端工作的主力部分。（程序的外壳）

2. 最底下的一层： 模型（model）
   模型是将实际开发中的业务规则和所涉及的数据格式模型化，应用于模型的代码只需写一次就可以被多个视图重用。在MVC的三个部件中，模型拥有最多的处理任务。一个模型能为多个视图提供数据。

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

谈谈MVC模式 - - 阮一峰's blog

---

<br />

MVC处理过程.png

图 引自彻底理解从输入URL与页面展现 - - SegmentFault

• 首先，控制器（controller）接收用户请求，并决定调用哪种模型来进行处理。

• 然后，模型（model）用业务逻辑来处理用户的请求并返回数据。

• 最后，控制器（controller）用相应的视图格式化模型返回html字符串给浏览器，浏览器呈现网页给用户。这部分完成后，就要开始接下来的浏览器处理部分。

<br />

五、浏览器处理

现代浏览器渲染页面的过程是这样的：解析HTML以构建DOM树 –> 构建渲染树 –> 布局渲染树 –> 绘制渲染树。

下面两个步骤就是从解析到布局渲染树的过程。

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

2. 解析、渲染
   解析的过程，其实就是生成解析树，即DOM树。DOM树是由DOM元素及属性节点组成，加上CSS解析的样式对象和js解析后的动作实现。而渲染，就是将DOM树进行可视化表示。

<br />

六、网页展现

浏览器通过上面步骤计算得到渲染树，是DOM树的可视化表示，构建渲染树使页面以正确的顺序绘制出来，

浏览器下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染同时进行。

• 解析html成DOM树
• 解析html中的css，构建渲染树。完成后浏览器开始布局渲染树并绘制到屏幕。
• 解析JavaScript，解析到的时候执行。（JS的解析由浏览器中的JS解析引擎完成）

这些地址都要经历一个和HTML读取类似的过程。所以浏览器会在DNS中查找这些域名，发送请求，重定向等等。

5、6过程也比较复杂，若是详细展开可以再写一篇长文。

可以参考 ：浏览器加载网页时的过程是什么 - - ScriptJava的Blog

<br />

更多参考

what happens when you type in a URL in browser - - Stack Overflow

How the Web works - - MDN

从输入 URL 到页面加载完的过程中都发生了什么事情？ - - 果壳问答

当访问facebook这个网站的时候发生了什么 - - 译文

How browsers work （英文长文，可能需翻墙）

<br />

写在最后

以上只是一些简单的基础步骤，实际上也远比这个复杂的多，还有许多部分（如网页缓存，http请求，TCP/IP等）没有提及。而每个基础步骤本身也包含更多复杂的子步骤。而这些步骤都需要自己去总结完善，在查阅无数的资料后，自己弄的清楚明白才是最重要的。