从 URL 输入到页面展现的过程

　1. 从 URL 输入到页面展现背后发生了什么事？

　2. 一次完整的 HTTP 事务是怎么一个过程？

　3. 浏览器是如何渲染页面的？

　4. 浏览器的内核有哪些？分别有什么代表的浏览器？

　5. 刷新页面，js 请求一般会有哪些地方有缓存处理？

1 相关概念简述

首先，打开你最常浏览的一个网站，在最上方的地址栏里，你将会看到一连串的字符。例如知乎：

https://www.zhihu.com/people/Oli-Zhao/columns

上边这一连串的字符，就叫做 URL（Uniform Resource Locator 统一资源定位符），实际上就是我们通常叫的“网址”。

1.1 URL 的作用

在茫茫网络世界中，我们的浏览器是靠一个个 URL 来查找资源的具体位置的。

1.2 URL 的组成部分（用以下例子说明）

https://www.zhihu.com/people/Oli-Zhao/columns

1.2.1 协议部分

https

它是浏览器和 WWW 万维网之间的沟通方式，它会告诉浏览器在网络世界中找到资源的正确位置。 常见的协议有：HTTP（最常见的网络传输协议）、HTTPS（进行加密的网络传输协议）、File（本地文件夹协议）、FTP、Telnet 等。

1.2.2 网络地址部分

www.zhihu.com

即我们常说的“域名”（Domain Name），为了方便记忆，人们用可以语义化的域名来登录网站。 但我们必须知道，每一个域名背后都有其对应的 IP 地址。

IP 是网络世界中每台联网的计算机为实现相互通信而遵循的规则协议，IP 可以具体分为：

1️⃣局域网 IP：

• 例如一个合租的房子，大家共用一个路由的 WiFi，那实际上所有连接上这个 WiFi 的电脑都处于同样一个局域网，这里的 IP 就是局域网 IP；
• 在同样的局域网里，可以直接通过这个 IP 地址访问这个局域网里的其他机器；
• 但陌生人是不可以通过这个 IP 找到你的，因为这个 IP 是假的，只在这个小圈子里可以用。

2️⃣公网 IP：

• 假如你做了一个网站要放在公网上，就要申请公网 IP，公网 IP 是需要申请的。

3️⃣本机 IP：

• 当前电脑的 IP 是 127.0.0.1 ，就是代表自己。

1.2.3 资源路径部分

/people/Oli-Zhao/columns
复制代码

1.3 DNS

提到域名和 IP 关系后，就必须理解 DNS（Domain Name System 域名系统）——用来记录域名和 IP 地址相互映射的信息。

• DNS 作用：可以让人们免于记住那些繁琐的数串；
• 全国 DNS 信息可以在网上查找到，各省都有对应分配的 IP 网段；
• 大型企业都有自己的 DNS 服务器，专门用来存储域名和 IP 的映射关系；
• 如谷歌的 DNS 服务器地址 8.8.8.8 ；国内知名 DNS 服务器地址 114.114.114.114 。

 

2 大致流程概述

从 URL 输入到页面展现经过以下过程：

1. 在浏览器输入 URL；
2. 浏览器查找域名对应的 IP 地址；
3. 浏览器根据 IP 地址与服务器建立联系；
4. 浏览器与服务器通信：浏览器请求，服务器处理请求并呈现页面。

 

3 具体流程概述

3.1 第一步，在浏览器输入 URL

在地址栏输入相应的 URL 。

3.2 第二步，浏览器查找域名对应的 IP 地址

第一步中，我们已经输入了相应的 URL，但浏览器本身并不能识别 URL 是什么，因此从我们输入 URL 开始，浏览器就要进行域名解析来找到对应 IP——DNS 解析是浏览器的实际寻址方式：

• 查找浏览器缓存——近期浏览过的网站，浏览器会缓存 DNS 记录一段时间 （如果没有则往下） ；
• 查找系统缓存——从 C 盘的 hosts 文件查找是否有存储的 DNS 信息，查找是否有目标域名和对应的 IP 地址 （如果没有则往下）；
• 查找路由器缓存 （如果没有则往下）；
• 查找 ISP DNS 缓存——从网络服务商（比如电信）的 DNS 缓存信息中查找（如果没有则往下）；
• 经由以上方式都没找到对应 IP 的话，就会向根域名服务器查找目标 URL 对应的 IP，根域名服务器会向下级服务器转达请求，层层下发，直到找到对应的 IP 为止。

3.3 第三步，浏览器根据 IP 地址与服务器建立联系

第 2 步中，浏览器通过 IP 寻址找到了对应的服务器，浏览器就将用户发起的 HTTP 请求发送给服务器。服务器开始处理用户请求：

• 每台服务器上都会安装处理请求的应用——Web Server；

• 常见的 Web Server 产品有：Apache 、Nginx 、IIS 和 lighttpd 等；

• Web Server 可以理解为一个管理者，它不做具体的请求处理，而是会结合配置文件，把不同用户发来的请求委托给服务器上专门处理相应请求的程序（服务器上的相应程序开始处理请求的这一部分，通俗说就是实际后台处理的工作）：

后台开发现在有很多框架，但大部分都是按照 MVC（Model View Controller）设计模式搭建的，它将服务器上的应用程序分成 3 个核心部件且分别处理自己的任务，实现输入、处理、输出的分离：

3.3.1 模型（model）

• 模型，是将实际开发过程中的业务规则和所涉及的数据格式进行模型化；
• 应用于模型的代码只需写一次就可以被多个视图重用；
• 在 MVC 三个部件中，模型拥有最多的处理任务；
• 一个模型能为多个视图提供数据。

3.3.2 视图（view）

• 视图是用户看到并与之交互的界面；

3.3.3 控制器（controller）

• 作用：接受用户的输入并调用模型（M）和视图（V）去完成用户的需求；
• 地位：控制器也是处于一个管理者的地位——从视图（V）接收请求并决定调用哪一个模型构件（M）来处理请求，然后再确定用哪个视图（V）来显示模型（M）处理返回的数据。

🏆总而言之：

• 首先，控制器（C）接收用户的请求，并决定应该调用哪个模型（M）来进行处理；
• 然后，模型（M）用业务逻辑来处理用户的请求并返回数据；
• 最后，控制器（C）再用相应的视图（V）来格式化模型（M），进而返回 HTML 字符串给浏览器。

3.4 第四步，浏览器与服务器通信

在上边的第 3 步中，服务器返回了 HTML 字符串给浏览器，此时，浏览器将会对其进行解析、渲染并最终绘制网页：

3.4.1 加载

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

3.4.2 解析、渲染

• 解析的过程，其实就是生成“树”（Document Object Model 文档对象模型）；
• DOM 树是由 DOM 元素及属性节点组成，并且加上 CSS 解析的样式对象和 JS 解析后的动作实现；
• 渲染：就是将 DOM 树进行可视化表示。

3.4.3 绘制网页

• 浏览器通过渲染，将 DOM 树可视化，得到渲染树；
• 构建渲染树使页面以正确的顺序绘制出来，浏览器遵循一定的渲染规则，实现网站页面的绘制，并最终完成页面的展示。

链接：https://juejin.im/post/5ca217a051882543f252dc1e
来源：掘金