前言

当用户打开浏览器，在地址栏输入 https://www.baidu.com/，按下回车，页面展示百度首页。整个过程发生了什么呢？

一、输入URL

• URL统一资源定位符，也平时我们说的网址。浏览器通过URL来查找和定位资源的位置。

• url的格式一般为：

协议类型://<服务器地址>:<服务器端口号>/<文件路径>/

常见的协议有http、https、telnet、ftp、file等。

• 其中http是最常见的超文本传输协议
• 而https（超文本传输安全协议）则是由http通过与SSL （安全套接层）或TLS（安全传输协议）的组合使用，加密的HTTP的通信内容。因此HTTPS比HTTP协议更加安全。

服务器地址是URL指定待访问的地址。可以是域名或主机号，或ip地址

服务器端口号指服务器连接的网络端口号。若用户省去，则为默认端口号

• 因为一台计算机常常会同时作为Web，FTP等服务器，端口编号用来告诉web服务器所在的主机要将请求交给哪个服务。
• 默认情况下http服务的端口为80。ftp为21，HTTPS为443，telnet为23.

文件路径则是服务器上文件路径定位上的资源，也就是目录

https://www.baidu.com/使用的是HTTPS协议，服务器地址则是域名。

20.png

二、域名解析

• DNS服务是提供域名到IP地址之间的解析服务。计算机即可以被赋予ip地址，也可以被赋予主机号和域名，比如www.baidu.com。
• 用户通常使用主机号与域名来访问其他计算机，因为更容易记忆。
• IP地址是指互联网协议地址，每个处于互联网中的设备都有IP 地址，形如192.168.1.10
• 局域网 IP 和公网 IP 是有差别的
• 127.0.0.1代表本机的 IP

当用户在浏览器中输入https://www.baidu.com/后,你使用的计算机会发出一个DNS请求到本地DNS服务器。本地DNS服务器一般都是你的网络接入服务器商提供，比如中国电信，中国移动,中国联通DNS请求到达本地DNS服务器之后会有以下几个步骤

1 搜索浏览器缓存

浏览器会缓存DNS记录一段时间，且有数量限制

2 搜索操作系统缓存

从 Hosts 文件查找是否有该域名与对应 IP

3 搜索路由器缓存

一般路由器也会缓存域名信息

4搜索ISP(互联网服务提供商）NDS缓存

比如到中国移动的 DNS 上查找缓存

5若都没有找到，则向根域名服务器查找域名对应 IP，根域名服务器把请求转发到下一级，直到找到对应IP

三 .TCP连接

• 拿到域名对应的IP地址之后，指浏览器会以一个随机端口（1024 < 端口 < 65535）向服务器的WEB程序（常用的有httpd,nginx等）80端口发起TCP的连接请求。
• 3次握手，详细展开很麻烦的

四. 建立TCP连接后发起http请求、

进过TCP3次握手之后，浏览器发起了http的请求，使用的http的方法 一般是GET 方法，请求的URL是 / ,协议是HTTP/1.0或HTTP/1.1

五、 服务器处理 ——响应http请求，响应报文

• 每台服务器上都会安装处理请求的应用——web server。常见的web server产品有apache、nginx、IIS或Lighttpd等。

• 当web server接收到一个HTTP请求，会返回一个HTTP响应，例如送回一个HTML页面。对于不同用户发送的请求，会结合配置文件，把不同请求委托给服务器上处理对应请求的程序进行处理

• 这些服务器端(server-side)的程序通常产生一个HTML的响应(response)来让浏览器可以浏览。

• 那么如何处理请求？实际上就是后台处理的工作。后台开发现在有很多框架，但大部分都还是按照MVC设计模式进行搭建的。

MVC是三个单词的首字母缩写，它们是Model（模型）、View（视图）和Controller（控制器）。

1.最上面的一层，是直接面向最终用户的"视图层"（View）。视图是用户看到并与之交互的界面。这是前端工作的主力部分

2.模型（Model），模型是将实际开发中的业务规则和所涉及的数据格式模型化，应用于模型的代码只需写一次就可以被多个视图重用。在MVC的三个部件中，模型拥有最多的处理任务。一个模型能为多个视图提供数据。

3.控制器接受用户的输入并调用模型和视图去完成用户的需求。Controller处于管理角色，从视图接收请求并决定调用哪个模型构件去处理请求，然后再确定用哪个视图来显示模型处理返回的数据。

总结而言，首先控制器接收用户的请求，并决定应该调用哪个模型来进行处理，然后模型用业务逻辑来处理用户的请求并返回数据，最后控制器用相应的视图格式化模型返回html字符串给浏览器，浏览器呈现网页给用户。

22.png

七、浏览器处理——加载、解析、渲染

接下来就是浏览器进行处理， 通过后台处理返回的HTML字符串被浏览器接受后被一句句读取解析，html页面经历加载、解析、渲染。

加载

浏览器对一个html页面的加载顺序是从上而下的。如果加载过程中遇到外部css文件，浏览器另外发出一个请求，来获取css文件。遇到图片资源，浏览器也会另外发出一个请求，来获取图片资源。但是当文档加载过程中遇到js文件，html文档会挂起渲染（加载解析渲染同步）的线程，不仅要等待文档中js文件加载完毕，还要等待解析执行完毕，才可以恢复html文档的渲染线程。

解析

• 解析文档是指将文档转化成为有意义的结构，也就是可让代码理解和使用的结构。解析得到的结果通常是代表了文档结构的节点树，它称作解析树或者语法树，也就是DOM树。如下图：

23.gif

• css解析是指将css文件解析为样式表对象。如下图：

  
  24.png
• js解析是文件在加载的同时也进行解析
  详细的解析过程请看这

渲染

即为构建渲染树的过程，就是将DOM树进行可视化表示。构建这棵树是为了以正确的顺序绘制文档内容。

八、绘制网页

浏览器根据 HTML 和 CSS 计算得到渲染树，最终绘制到屏幕上

25.png
作者：彭荣辉
链接：https://www.jianshu.com/u/0f804364a8a8
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

参看文章：
前端经典面试题: 从输入URL到页面加载发生了什么？
导航到某个网址时会发生什么？
一次完整的HTTP事务是怎样一个过程？
前端面试题：从url到页面展现，这之中发生了什么？
在浏览器地址栏输入一个URL后回车，背后会进行哪些技术步骤？
从URL输入到页面展现发生了什么？
从URL输入到页面展现的过程-前端笔记
浏览器工作原理：从 URL 输入到页面展现到底发生了什么？
MVC模型结构是什么
浏览器~加载，解析，渲染