链接：

1 概念简述

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

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

1.1 URL 的作用

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

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

1.2.1 协议部分

https

它是浏览器和 www 万维网之间的沟通方式，它会告诉浏览器在网络世界中找到资源的正确位置。

常见的协议有：http（最常见的网络传输协议）、https（进行加密的网络传输协议）、file（本地文件夹协议）、ftp、telnet 等。

1.2.2 网络地址部分

即我们常说的“域名”（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 树可视化，得到渲染树；构建渲染树使页面以正确的顺序绘制出来，浏览器遵循一定的渲染规则，实现网站页面的绘制，并最终完成页面的展示。