Web 前置知识——老生常谈的从 URL 输入到页面展示背后发生的事

本知识学习用时：1小时

---

前言：学前端前，我经常使用的浏览器是搜狗、360，搜索引擎用的是百度。学前端后，谷歌算是从新为我打开了认识新世界的大门。但无论用什么浏览器，登陆网站都是咱们每个互联网人天天都会作的事。但咱们是否想过，从咱们打开浏览器在地址栏中输入一连串的字符，到按下键盘上的 Enter 键、页面展示在咱们眼前，这一连续动做的背后，网络、计算机都为咱们作了些什么？以及你即将从事的前端工做又在这其中参与了哪一项或哪几项工做呢？

---

1 相关概念简述

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

https://www.zhihu.com/people/oliver-8-10/activities

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

1.1 URL 的做用

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

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

https://www.zhihu.com/people/oliver-8-10/activities

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/oliver-8-10/activities

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 sever；
• 常见的 web sever 产品有：apache 、nginx 、IIS 和 Lighttpd 等；
• web sever 能够理解为一个管理者，它不作具体的请求处理，而是会结合配置文件，把不一样用户发来的请求委托给服务器上专门处理相应请求的程序（服务器上的相应程序开始处理请求的这一部分，通俗说就是实际后台处理的工做）：

后台开发如今有不少框架，但大部分都是按照 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 解析、渲染

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

3.4.3 绘制网页

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

---

后记：以上就是从 URL 输入到页面展现的所有过程，不得不佩服计算机真的神通广大、人类真的智慧无穷。代码的世界是严谨的、是一丝不苟的，你付出，它就有回馈。固然，以上每一个节点都囊括不少的知识点，对于学前端的你我来讲，要保持谦卑之心，学无止境，它也值得你我用后边的 10000 小时来对待。

（本文版权归 “Oli's 前端一万小时” 全部，未经受权，请勿转载）