前端程序员不可不知的 —— 浏览器的那些事（全都是干货！！！）

谁借莪１个温暖的怀抱￠ 2022-10-15 11:58 180阅读 0赞

### 文章目录 ###

*   *  浏览器对于前端程序员的重要性
     *  浏览器构成
     *  渲染内核
     *  浏览器工作流程
     *  浏览器解析与渲染(经典面试题分析)

## 浏览器对于前端程序员的重要性 ##

1.  **面试必问点** ，现在的前端面试中，或多或少都会问到
2.  前端的底层不是JS，而是**浏览器**
3.  代码最终是在浏览器上跑的，**不知道浏览器原理，没办法做优化**
4.  对于前端程序猿底层技术功底的考验

## 浏览器构成 ##

![在这里插入图片描述][20210525093342276.png]

## 渲染内核 ##

1.  渲染内核也称渲染引擎，主要有3种：
2.  Trident内核： IE
3.  Webkit内核：Chrome,Safari
4.  Gecko内核：FireFox

## 浏览器工作流程 ##

这里也涉及到一道经典的面试题：  
在浏览器中从输入Url并回车发生了什么？

1.  DNS域名解析，获得真实IP地址
2.  建立TCP连接
3.  发送HTTP请求
4.  服务器处理请求
5.  返回响应结果
6.  关闭TCP连接
7.  浏览器解析渲染

## 浏览器解析与渲染(经典面试题分析) ##

> **1. DNS域名解析**

![在这里插入图片描述][20210525094102115.png]

1.  我们在浏览器器输入网址后，浏览器器会首先会去查找**本地hosts文件**，检查在该文件中是否有相应的域名、IP对应关系，**如果有，则向其IP地址发送请求，如果没有，再去找DNS服务器**。
2.  在查询DNS服务器的过程中，客户端首先会向本地DNS服务器发送网址的查询报文，本地DNS服务器再把查询报文转发到根DNS服务器，根DNS服务器再根据网址后缀派发指定的节点DNS服务器，然后本地DNS服务器再向这个节点DNS服务器发送查询请求，后者返回该网址对应的ip地址。
3.  当本地DNS服务器的缓存中已有节点服务器的地址，则会直接向节点服务器发送查询请求，因此**请求根域名服务器这一步不是必需的**。
4.  从客户端到本地服务器属于递归查询，而**DNS服务器之间的交互属于迭代查询**。

> **2. 建立TCP链接**

拿到服务器ip地址后，游览器客户端会开始与服务器进行交互，建立TCP链接，这个过程涉及三次握手，握手结束，则代表链接建立成功。  
![三次握手][20210525094839114.png]

> **3. 发送HTTP请求**

![在这里插入图片描述][20210525094957294.png]  
![案例][20210525095028954.png]

> **4. 服务器处理请求**

服务器端收到请求后的由web服务器（准确说应该是**http服务器**）处理请求，诸如Apache、Ngnix、IIS等。web服务器解析用户请求，知道了需要调度哪些资源文件，再通过相应的这些资源文件处理用户请求和参数，并调用数据库信息，最后将结果通过web服务器返回给浏览器客户端。  
![在这里插入图片描述][20210525095348622.png]

> **5. 返回响应结果**

*  服务器处理完请求后，就会发送响应结果。响应报文的结构如下：

![在这里插入图片描述][20210525095535687.png]

*  响应结果中会有对应的HTTP状态码，可分为5类：

![在这里插入图片描述][20210525095603134.png]

> **6. 关闭TCP连接**

为了**避免服务器与客户端双方的资源占用和损耗**，当双方没有请求或响应传递时，任意一方都可以发起关闭请求。与创建TCP连接的3次握手类似，关闭TCP连接，需要4次握手。

![在这里插入图片描述][20210525095757322.png]

> **7. 浏览器解析渲染**

浏览器从最初接收请求来的HTML、CSS、javascript等资源，然后解析、构建树、渲染布局、绘制，最后呈现给客户能看到的界面这整个过程——简单来说，就是对浏览器渲染过程的描述。

**渲染步骤**

1.  解析html，生成dom树
2.  解析css，生成css结构体
3.  将dom树和cssom树合并，生成渲染树(render tree)
4.  遍历渲染树，开始布局和计算
5.  绘制渲染树，显示到屏幕

**渲染图示**  
![在这里插入图片描述][2021052510021476.png]

> 1.  本文如有错误，敬请指出，感激不尽！
> 2.  希望本文对你有所帮助，原创不易，希望大家能支持一下，万分感谢！
> 3.  关注、点赞、转发走一波~

[20210525093342276.png]: /images/20221014/95bca2c26c4a40508dc11e1eb3fc2de8.png
[20210525094102115.png]: /images/20221014/5472120f99914f2fb735dc8396ef7aeb.png
[20210525094839114.png]: /images/20221014/2e1a59b70cb644a2ba8e45ddae39e27a.png
[20210525094957294.png]: /images/20221014/5fb3363e6c934349846c05b79cda897f.png
[20210525095028954.png]: /images/20221014/559d97a275574d38ac6c7c88ebc8ae81.png
[20210525095348622.png]: /images/20221014/66020c0be95d488595c616b6c5ee0045.png
[20210525095535687.png]: /images/20221014/e5580947e4ae4dac93d8e143851535b2.png
[20210525095603134.png]: /images/20221014/697ffd50a7864291a74ff94c8557f1e2.png
[20210525095757322.png]: /images/20221014/a1ae847622b44978b381506c5d775cfd.png
[2021052510021476.png]: /images/20221014/4772f082f6ff422c93752f8fedcc21a7.png