从输入url到页面渲染出来过程

忘是亡心i 2022-04-22 11:26 220阅读 0赞

# 1.浏览器与服务器的交互 #

在浏览器输入url后的访问：

![webp][]

> **URL的组成**
> 
> 1.  协议
> 2.  域名 （有时候也是ip,）
> 3.  端口号（数字表示，若为HTTP的默认值“:80”可省略）
> 4.  路径（以“/”字符区别路径中的每一个目录名称）
> 5.  查询参数（GET模式的窗体参数，以“?”字符为起点，每个参数以“&”隔开，再以“=”分开参数名称与数据，通常以UTF8的URL编码，避开字符冲突的问题）

## 1. 域名解析 ##

浏览器会把输入的域名解析成对应的ip

1.  查看浏览器内部缓存，如果查到域名对应的ip，就发送和接受参数和数据
2.  查看本机的host文件，浏览器会在本机的hosts文件查看是否有对应的ip服务器地址。
3.  查看本地路由器的DNS缓存，找到对应的ip
4.  查看网络服务商中DNS服务器
5.  查询根域名下是否存在。

DNS 查询的过程如下图所示。

![7fcd81756bdc8b52ade0531402c43e43_hd.jpg][]

1、在浏览器中输入www . qq .com 域名，操作系统会先检查自己本地的hosts文件是否有这个网址映射关系，如果有，就先调用这个IP地址映射，完成域名解析。

2、如果hosts里没有这个域名的映射，则查找本地DNS解析器缓存，是否有这个网址映射关系，如果有，直接返回，完成域名解析。

3、如果hosts与本地DNS解析器缓存都没有相应的网址映射关系，首先会找TCP/ip参数中设置的首选DNS服务器，在此我们叫它本地DNS服务器，此服务器收到查询时，如果要查询的域名，包含在本地配置区域资源中，则返回解析结果给客户机，完成域名解析，此解析具有权威性。

4、如果要查询的域名，不由本地DNS服务器区域解析，但该服务器已缓存了此网址映射关系，则调用这个IP地址映射，完成域名解析，此解析不具有权威性。

5、如果本地DNS服务器本地区域文件与缓存解析都失效，则根据本地DNS服务器的设置（是否设置转发器）进行查询，如果未用转发模式，本地DNS就把请求发至13台根DNS，根DNS服务器收到请求后会判断这个域名(.com)是谁来授权管理，并会返回一个负责该顶级域名服务器的一个IP。本地DNS服务器收到IP信息后，将会联系负责.com域的这台服务器。这台负责.com域的服务器收到请求后，如果自己无法解析，它就会找一个管理.com域的下一级DNS服务器地址([http://qq.com][http_qq.com])给本地DNS服务器。当本地DNS服务器收到这个地址后，就会找[http://qq.com][http_qq.com]域服务器，重复上面的动作，进行查询，直至找到www . qq .com主机。

6、如果用的是转发模式，此DNS服务器就会把请求转发至上一级DNS服务器，由上一级服务器进行解析，上一级服务器如果不能解析，或找根DNS或把转请求转至上上级，以此循环。不管是本地DNS服务器用是是转发，还是根提示，最后都是把结果返回给本地DNS服务器，由此DNS服务器再返回给客户机。   
  
从客户端到本地DNS服务器是属于递归查询，而DNS服务器之间就是的交互查询就是迭代查询。

## 2.发送一个HTTP请求给服务器 ##

查询到目标IP地址后,则开始建立 TCP 三次握手 ,与目标服务器建立连接。通过规定的协议（http）向目标主机发送请求.如果服务器返回以301之类的重定向，浏览器根据相应头中的location再次发送请求

## 3. 服务器接收到请求和返回数据 ##

服务器接受请求，处理请求生成html代码，返回给浏览器，这时的html页面代码可能是经过压缩的

>  **服务器：**安装了系统和web-server的主机，可以理解为一台电脑，安装了系统和软件来处理数据（硬件）
> 
> 1.  服务器接收到了浏览器发送的请求后，根据某个协议，通过web-server把浏览器发送的数据进行打包（包含请求头，ip地址，请求路径和查询参数等）
> 2.  web-server把数据打包后，发送给**网站代码（比如django、flask、node.js等后端服务）**
> 3.  后端服务软件会根据**路径和查询参数**进行相应处理，返回给浏览器对应的数据包（包括http协议组成的代码。里面包含页面的布局、文字。数据也可能是图片、脚本程序，反应头，反应数据，请求头等）

## 4. 浏览器接收服务器响应结果 ##

浏览器接收到返回的数据包，如果有压缩则首先进行解压处理

## 5. 浏览器开始显示HTML ，并且还会发送请求，以获取嵌入在HTML中的对象。包括CSS/JS/图片等资源 ##

在浏览器显示HTML时，它会注意到需要获取其他地址内容的标签。这时，浏览器会发送一个获取请求来重新获得这些文件——包括CSS/JS/图片等资源，这些资源的地址都要经历一个和HTML读取类似的过程。所以浏览器会在DNS中查找这些域名，发送请求，重定向等等…

# 2.浏览器的渲染（机制) #

## 1.浏览器渲染引擎在获取到内容后的基本流程： ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW56ZXplMDcwNw_size_16_color_FFFFFF_t_70][]

1. 然后浏览器会将HTML解析成一个DOM树，DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。

2. 将CSS解析成 CSS Rule Tree 。

3. 根据DOM树和CSS Rule Tree 来构造 Rendering Tree。注意：Rendering Tree 渲染树并不等同于 DOM 树，因为一些像Header或display:none的东西就没必要放在渲染树中了。

4. 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操作称之为layout，顾名思义就是计算出每个节点在屏幕中的位置。

5. 再下一步就是绘制，即遍历render树，(并使用UI后端层)通过显卡，绘制每个节点，把内容画到屏幕上。

注意：*上述这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容*。

# #

## 2.一些基本概念 ##

DOM Tree：浏览器将HTML解析成树形的数据结构。

CSS Rule Tree：浏览器将CSS解析成树形的数据结构。

**　　**Render Tree: DOM和CSSOM合并后生成Render Tree。

layout: 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去计算出每个节点在屏幕中的位置。

painting: 按照算出来的规则，通过显卡，把内容画到屏幕上。

# **结束** #

如果文章对你有帮助，麻烦点赞哦！一起走码农花路~

![20190510130531760.jpg][]

[webp]: /images/20220422/0d7e11c1db00479ebc9677e6c39b9756.png
[7fcd81756bdc8b52ade0531402c43e43_hd.jpg]: /images/20220422/d8a2d9913cae41529ee823a543bfc761.png
[http_qq.com]: https://link.zhihu.com/?target=http%3A//qq.com
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW56ZXplMDcwNw_size_16_color_FFFFFF_t_70]: /images/20220422/aaf66688e89641b2b1649eecc5146265.png
[20190510130531760.jpg]: /images/20220422/a762a4ab4ba448d0940138d0ab142cd4.png