本文推荐 PC 端阅读~本文版权归 “公众号 | 前端一万小时” 所有，未经授权，请勿转载！复制代码
web_01复制代码
1. 从 URL 输入到页面展现背后发生了什么事？2. 一次完整的 HTTP 事务是怎么一个过程？3. 浏览器是如何渲染页面的？4. 浏览器的内核有哪些？分别有什么代表的浏览器？5. 刷新页面，js 请求一般会有哪些地方有缓存处理？复制代码
前言： 学前端前，我常用的浏览器是搜狗、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 输入到页面展现经过以下过程：
- 在浏览器输入 URL；
- 浏览器查找域名对应的 IP 地址；
- 浏览器根据 IP 地址与服务器建立联系；
- 浏览器与服务器通信：浏览器请求，服务器处理请求并呈现页面。
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 小时来对待。
加油！