打开浏览器从输入URL到每个人面前的网页，幕后发生了什么？经历的过程是什么？

首先给大家一般流程图，具体步骤请看下面分解！

从URL输入到页面显示

首先，URL是啥

URL（统一资源定位器），统一资源定位器，用于定位Internet上的资源，通常称为URL。例如：http://www.w3school.com.cn/html/index.asp，请遵循以下语法: //host.domain: port/path/filename

这些部分解释如下：

方案–定义Internet服务的类型。通用协议是http，https，ftp，file，其中最常见的类型是http，https是用于加密的网络传输。主持人–定义域主机（http的默认主机是www）。域–定义了一个Internet域名，例如w3school.com.cn。港口–定义主机上的端口号（http的默认端口号为80）。路径–定义服务器上的路径（如果省略，则文档必须位于代购源码网站的根目录中）。文件名–定义文档/资源的名称。第二，域名解析（DNS）

在浏览器中输入URL后，必须首先通过域名解析，因为浏览器无法识别域名，需要通过域名直接找到相应的IP地址。这里的每个人都可能有一个问题 - ——你为什么要设置域名？你为什么不从头开始提供IP地址？这节省了解析的麻烦。

我们先来了解什么是IP地址？

1. IP地址

IP地址是指Internet协议地址，是IP地址的缩写。 IP地址是IP协议提供的统一地址格式。它为每个网络和Internet上的每个主机分配一个逻辑地址，以屏蔽物理地址的差异。 IP地址是32位二进制数，例如：127.0.0.1是机器的IP。如果每个URL都是一串数字，那就不容易记住了！

域名相当于伪装的伪装IP地址，带有掩码，其作用是方便内存和通信的一组服务器地址。

但有时这会带来一种风险 - —— DNS劫持，即域名不再是原来对应的IP，效果是特定网络无法访问或访问虚假URL，很难被用户发现有近1％的客户在巴西最大的银行巴西遭到袭击，账户被盗。

2.什么是域名解析

DNS是一个Web服务器。我们的域名解析只是在DNS上记录信息记录。例如：baidu.com 220.114.23.56（服务器外部网络IP地址）80（服务器端口号）。

浏览器将域名发送到DNS服务器。 DNS服务器查询域名对应的IP地址，然后将其返回给浏览器。然后，浏览器将IP地址放在协议上，并且请求参数也搭载在协议中。发送到相应的服务器，下一步是到服务器处理阶段。

3.域名解析过程浏览器缓存：如果之前访问过url指定的主机，浏览器会将主机的IP缓存一段时间（浏览器指定时间），然后通过该端口找到相应的主机IP地址;缓存：如果浏览器中没有这样的缓存，那么查询将在系统缓存中进行，浏览器将进行系统调用，查询缓存; router cache：如果系统中没有缓存，则在路由器缓存中查询; ISP DNS Cache：如果路由器缓存仍然缺失，则转到ISP DNS查询，这里可以查询一般域名;递归搜索：如果没有查询上述任何内容，则它将递归地转到顶级域名服务器的根服务器。只要域名存在，查询就可以找到。第三，服务器处理响应请求1.服务器

服务器是网络环境中的高性能计算机，其侦听由网络上的其他计算机（客户端）提交的服务请求并提供相应的服务。例如：Web服务，文件下载服务，邮件服务，视频服务。

客户的主要功能是浏览网页，观看视频，听音乐等，这些都是完全不同的。每个服务器都将与应用程序一起安装，请求—— web服务器。常见的Web服务器产品包括apache，nginx，IIS或Lighttpd。

Web服务器充当控件的角色。对于不同用户发送的请求，配置文件与请求相结合，将不同的请求委托给服务器以处理相应的请求（例如：CGI脚本，JSP脚本，servlet，ASP脚本，服务器端JavaScript）。 ，或其他一些服务器端技术等），然后将守护程序处理的结果作为响应返回。

服务器和客户端差异

2. MVC后台处理阶段

背景开发有很多框架，但大多数都是根据MVC设计模式构建的。

MVC是一种设计模式，它将应用程序划分为三个核心组件：模型—— views——控制器，每个控制器处理自己的任务，实现输入，处理和输出分离。

MVC架构

（1）查看（查看）

它是提供给用户的用户界面，是程序的shell。

（2）模型（模型）

该模型主要负责数据交互。在MVC的三个组件中，该模型具有最多的处理任务，并且一个模型可以为多个视图提供数据。

（3）控制器（控制器）

它负责根据用户从“视图层”输入的指令选择“模型层”中的数据，然后执行相应的操作以产生最终结果。控制器属于管理员角色，从视图接收请求并决定调用哪个模型组件来处理请求，然后确定使用哪个视图来显示模型处理返回的数据。

这三层密切相关，但它们彼此独立。每个图层的内部更改不会影响其他图层。每层为上一层提供接口。

这个阶段发生了什么？

简而言之，首先，浏览器发送的请求通过控制器，控制器执行逻辑处理和请求分发，然后调用模型。这个阶段模型将获取redis db和MySQL的数据。获取数据后，渲染的页面将通过视图返回到浏览器。最后，浏览器将通过渲染引擎向用户呈现网页。所以下一步是进入浏览器处理阶段

四，浏览器的处理

浏览器获取响应文本HTML后，以chrome浏览器为例介绍浏览器呈现机制

Chrome浏览器呈现机制：

处理HTML标记并构建DOM树。处理CSS标记并构建CSSOM树。将DOM和CSSOM组合到渲染树（渲染树）中。根据渲染树的布局来计算每个节点的几何位置（即每个Element），这也称为布局和回流过程。最后，通过调用操作系统Native GUI的API将每个节点绘制到屏幕上。所以我来到绘制网页的最后阶段。五，画一个网页

在浏览器基于html和css计算渲染树之后，显示渲染的页面图像，即绘制网页，并开始用户的操作。

六，后记

随着学习的深入，我对页面加载的主题有了更深入的了解。之前的一些混乱现在已经解决了。

作者：波浪划船

原文链接：https://www.jianshu.com/p/40d76ebb94e2

本文由@浪里行发布，未经作者许可，禁止转载

该地图来自Unsplash，基于CCO协议

« 专业SEO优化需要哪些技能？ | 超实用指南页面设计基本手册 »