前端入门：从输入URL到网站页面展示，发生了什么？

问题：用户打开浏览器，输入 baidu.com，页面展示百度首页。整个过程发生了什么？

一、大致过程概述：

1.用户在浏览器输入URL，发起访问网页的请求；

2.浏览器开始解析域名，查找URL对应的IP地址；

3.浏览器通过IP地址与网页服务器建立联系；

4.网页服务器接收用户请求交给后台处理器处理，并返回处理结果给浏览器；

5.浏览器接收服务器返回的处理结果，对其进行解析、渲染并最终绘制网页。

基本概念名词

URL：Uniform Resource Locater，统一资源定位符

1. 作用：浏览器在茫茫互联网中通过URL寻找资源的具体位置，通俗说就是“网址”

2. 结构：

标准格式如下：

协议类型:[//服务器地址[:端口号]][/资源层级UNIX文件路径]文件名[?查询][#片段ID]

完整格式如下：

协议类型:[//[访问资源需要的凭证信息@]服务器地址[:端口号]][/资源层级UNIX文件路径]文件名[?查询][#片段ID]

其中【访问凭证信息@ :端口号 ?查询 #片段ID】都属于选填项。

3. 语法：

• 传送协议。

• 层级URL标记符号。(为" // "，固定不变)

• 访问资源需要的凭证信息（可省略）

• 服务器。（通常为" 域名 ")，有时为IP地址

• 端口号。（以数字方式表示，若为默认值可省略）

• 路径。（以“/”字符区别路径中的每一个目录名称）

• 查询。（GET模式的窗体参数，以“?”字符为起点，每个参数以“&”隔开，再以“=”分开参数名称与数据，通常以UTF8的URL编码，避开字符冲突的问题）

• 片段。以“#”字符为起点

以* https://baike.baidu.com:80/item/url/110640?fr=aladdin *为例, 其中：

1. " https "，是协议；

2. " baike.baidu.com "，是服务器（域名）；

3. " 80 "，是服务器上的网络端口号；

4. " /item/url/110640 "，是路径；

5. " ?fr=aladdin "，是询问。

常见协议有：http (最常见、不加密）、https（常用、加密））、flp、file等

域名 ：Domain Name, 简称 " 域名"、" 网域 "，是由一串用点分隔的字符组成的互联网上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位

1.作用：域名可以说是一个IP地址的代称，目的是为了便于记忆后者。

2.举例：" baidu.com "是一个域名，和IP地址相对应。人们可以直接访问" baidu.com "来代替IP地址，然后域名系统(DNS)就会将它转化成便于机器识别的IP地址。这样，人们只需要记忆 " baidu.com "这一串带有特殊含义的字符，而不需要记忆没有含义的IP数字。

3.域名系统（DNS）：Domain Name System，域名解析协议

-DNS的作用：通过分级管理可以有效的管理全球上亿的域名信息，通过分级和分类区分国家地区（.us/.cn/.hk）、公司服务器（谷歌8.8.8.8、国内知名114.114.114.114）等

IP：Internet Protocol Address，网际协议地址，用于根据源主机和目的主机的地址来传送数据

• 每个处于互联网中的设备都有IP；

• 每个域名对应着IP；

• IP可分为局域网IP（多机器共用路由器WIFI，小圈子内可通过通一IP访问其他机器；外部网络不可访问）、公网IP（公开都可访问，需特定申请）和本机IP（固定为127.0.0.1）。

网页服务器：Web Server， 网页服务器，安装了系统的机器中处理请求的应用叫网页服务器（Web Server），常见系统中如Linux、Windows Server 2012等

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

• 功能（负责连接用户和Web站点，承上启下）：

（1）接收来自浏览器端的HTTP请求

（2）请求转发给指定Web站点程序（后者由Web开发者编写，负责处理请求）

（3）向浏览器发送请求处理结果

二、具体过程描述：

1. 用户在浏览器中输入URL，例如：baidu.com，发起访问此网页的请求;

2. 浏览器无法识别URL代表什么，开始按一定规律解析域名依次来查找资源的位置，如查找不到会继续下一步，顺序为：

（1）查找 浏览器缓存 ，DNS中保存着最近访问过的URL记录；

（2）查找 系统缓存，系统的Hosts文件中保存DNS访问记录；

（3）查找 路由器缓存；

（4）查找 ISP DNS缓存，如网络服务商（电信）的DNS记录；

（5）如通过以上方式都没找到，会开始查找根域名服务器对应的IP，根域名服务器会向下级服务器转达请求，层层下发，直到找到对应的 IP 为止。

3. 当浏览器找到了域名对应的IP，服务器（Web Server）作为管理入口接收baidu的Https协议，开始提交给后台服务器处理用户请求，返回处理结果给浏览器；

• 后台处理器的处理流程：
  目前有很多框架来进行处理，常用的框架有MVC（Model View Controller）模型，它将服务器的应用程序分为三个部分：模型（Model）、视图（Model）和控制器（Controller），基本运作方式为：

  
  MVC网站处理流程

4. 浏览器接收到网页服务器返回的HTML字符串后，一句句进行加载和解析；

• 解析到不同的标签发送请求获取不同的代码语言，例如：HTML请求获取HTML、Link请求获取CSS、Script请求获取JS、IMG请求获取图片资源；
• 解析的过程就是生成DOM（Document Object Model 文本对象模型）树的过程；
• 浏览器通过一定的渲染规则，将DOM树进行可视化处理，最终实现网站页面的绘制并展现。

参考来源:

1. wiki URL

2. wiki 域名

3. wiki IP地址

4. wiki 网页服务器

5. 知乎:老生常谈的从 URL 输入到页面展现背后发生的事 By Oli Zhao