前端面试题——浏览器原理篇(三)

HTTP协议篇

1、 HTTP有哪些常用的⽅法？

GET、POST，PUT，DELETE，PATCH

get和post的区别：

从数据传输方式和数据安全上，get请求参数暴露在浏览器url地址中，通过访问浏览器历史记录很容易获取，而post请求参数是放在请求体中，相对来讲安全性较高。

2、HTTP请求报文和响应报文是什么样的

请求报文包含三部分：请求行、请求头和请求体。

请求行包含了请求⽅法、URL、HTTP 协议版本，

请求头由键值对组成，包含cookie，token，完整url和编码方式

请求体放post，put方法携带的参数数据。

HTTP 响应报⽂的组成: 响应⾏、响应头、响应体。

响应行由http协议版本、状态码、状态码的原因短语3个内容组成

响应头也是一组组键值对

响应体是服务器返回的数据

3、你了解的HTTP状态码有哪些？

成功（2XX）：200

重定向（3XX）：301永久性重定向 302，307临时性重定向 304 协商缓存 自从上次请求后，请求的网页内容未修改过。服务器返回此响应时，不会返回网页内容。

客户端错误（4XX）：400 请求报⽂存在语法错误(（传参格式不正确）401 权限认证失败 404 服务器没有找到该资源

服务端错误（5XX）

4、HTTP的keep-alive是什么作用？问的不多

让客户端与服务器之间建立长连接，当向服务器继续发请求时，避免重新建立连接，可以有效减少CPU无需再次握手。

缺点：如果不需要建立连接时，会一直占用资源，解决办法：添加keep-alive的超时时间和最大请求次数，一旦超过临界点就会强制断开连接。

5、什么是HTTPS，HTTPS是怎么保证安全的

HTTP 协议在传输数据时采用的是明⽂方式传递，不安全，HTTPS是采用加密的方式传递数据，安全性较高。

HTTPS的加密策略：结合对称加密+非对称加密这两种加密算法，先用非对称加密传递对称加密的秘钥，后续使用对称秘钥，进行交流。

整个过程：服务器用明文的方式给客户端发送自己的公钥，客户端收到公钥之后，会生成一把密钥(对称加密用的)，然后用服务器的公钥对这把密钥进行加密，之后再把密钥传输给服务器，服务器收到之后进行解密，最后服务器就可以安全得到这把密钥了，而客户端也有同样一把密钥，他们就可以进行对称加密了。

第一次交流采用非对称加密，公钥也是要在网络中传输的？

确认公钥的有效：网站申请数字证书，再根据数字证书的内容生成一个唯一标识数字签名，防止证书被篡改。

6、谈谈你对缓存的理解

缓存分为浏览器缓存和后端缓存。后端缓存包括数据库缓存和服务器端缓存。

而浏览器缓存又分为http缓存，cookie，localstorage ，sessionstorage，indexDB

http缓存包括强缓存和协商缓存

强缓存会有一个绝对的数据过期时间点，只要在有效期内，就可以直接从缓存中读取数据，超过了有效期，再向服务器端发请求获取数据。

协商缓存指的是当过了强缓存有效期，根据文件最新修改日期来判断请求的数据内容跟原先的相比有没有变化，如果没有变化，就继续读取缓存数据，并生成新的有效期，如果数据改变了再重新向服务器发网络请求获取数据。

http缓存的整个过程：当客户端第一次向服务器端发请求获取数据，服务器端会返回强缓存有效时间和协商缓存的唯一标识。

当客户端再次向服务器端发请求加载数据时，浏览器会先判断强缓存是否在有效期内，如果在有效期内直接从缓存中读取数据，如果超过有效期再拿协商缓存的唯一标识与服务器端的唯一标识进行对比，如果相同，继续从缓存中读取数据，如果不一致，再从后端获取新的数据。

7、HTTP`协议的无状态特性与状态管理

由于HTTP请求属于短连接请求, 请求一旦连接, 业务处理完毕后, 返回响应, 连接就会断开. 所以每次请求从业务角度来讲都是独立的请求. 我们称HTTP协议是无状态的. 服务器端不知道每次发请求的是谁。

如何完成HTTP协议的状态管理呢? 有3种常见的解决方案:

cookie是存储在用户浏览器中的一段不超过4KB的字符串，每当客户端发起请求时，会自动把当前域名下所有未过期的cookie一同发送到服务器，因为数据是存在浏览器端，不太安全

session将登录成功后用户信息存储在服务器端内存中，同时生成对应的cookie字符串，响应给客户端浏览器服务器压力较大，

token是客户端首次提交登录信息，服务器端验证通过后将用户信息对象经过加密生成的一串token字符串，响应发送给客户端，客户端将数据保存在浏览器端localstorage和sessionstorage中。

TCP协议篇

1、从输入网页到页面渲染之间经历了什么？

http完整的服务过程：

1、客户端输入访问的网址，浏览器先对网址进行DNS解析，得到对应的ip地址，

DNS解析解析的过程先从本地服务器找，没找到采用就近原则找国内服务器，国际服务器，直到找到全球服务器，若还是找不到对应的服务器浏览器就会提示找不到网址相关内容

2、找到ip地址对应的服务器后，建立TCP连接，三次握手

三次握手是为了确认是否与服务器建立连接。第一次握手 客户端向服务器端发要建立连接的请求，第二次握手服务器接收到连接请求并再次向客户端确认是否确定要建立连接，第三次握手客户端向服务器端确定要建立连接。

3、建立连接后，客户端向服务器端发http请求，服务器端作出响应，发送html文件

4、浏览器将html文件解析成DOM树渲染页面

5，最后，关闭与服务器端的TCP连接，四次挥手

四次挥手是确认数据是否传输成功，第一次挥手客户端向服务器端发送要断开连接的请求。第二次挥手服务器端接收到要断开连接的请求，先检查数据是否传输成功，第三次挥手，服务器检查数据都传输成功后，同意客户端断开连接的请求，第四次挥手客户端发确认断开连接消息，TCP连接就断开了。

DOM篇

1、DOM的事件流是什么

事件流是⻚⾯中接收事件的顺序。分为捕获阶段、目标阶段和冒泡阶段。

• 从最外层元素开始向内逐层查找绑定的事件监听函数，叫事件捕获，捕获阶段不会响应任何事件。

• 触发事件的目标节点元素，称为“目标阶段”

• 从最内层目标节点触发事件开始，从内向外依次触发祖先元素的事件处理函数，称为“冒泡阶段”

2、什么是事件委托

如果需要同时给多个事件添加监听，我们只需要对他的父元素进行监听，等到冒泡的时候判断target是不是这里面的其中一个。

在绑定大量事件的时候，可以选择事件委托。可以减少事件注册数量，节省内存占⽤!

浏览器的原理篇

1、浏览器是如何解析CSS选择器的？

浏览器在渲染页面的的时候，会根据选择器提供的信息按照从右往左的原则遍历DOM树，找到对应的 DOM 节点后将样式规则添加上去。

2、浏览器是如何进行界面渲染的？

完整的流程是：

1. 获取 HTML ⽂件并进⾏解析，生成一棵 DOM 树（DOM Tree）

2. 解析 HTML 的同时也会解析 CSS，⽣成样式规则（Style Rules）

3. 根据 DOM 树和样式规则，生成一棵渲染树（Render Tree）

4. 进行布局（Layout），即为每个节点分配⼀个在屏幕上应显示的确切坐标位置

5. 进⾏绘制（Paint），遍历渲染树节点，呈现页面

3、浏览器渲染界面如何做性能优化？

主要是减少浏览器重排和重绘的次数。

重排指的是重新布局界面，重新排列元素。

重绘指的是重新渲染样式。

两者之间的关系：重绘不⼀定会出现重排，重排必定会出现重绘。

触发重排：添加或删除DOM元素，改变元素的尺寸

触发重绘：样式改变

做性能优化：集中修改样式，使用文档碎片集中创建DOM元素，再集中添加到DOM树上

4、前端如何实现即时通讯？

基于Web的前端，存在以下几种可实现即时通讯的方式：

• 短轮询 每隔固定的时间向后台发请求，实时性较差

• Comet ajax长轮询 发送一个请求，只要数据库没更新内容，服务器就一直阻塞，服务器压力较大

• SSE 基于http文本传输，采用数据流的形式服务器向客户端主动发消息实现通信，没法复用连接，效率不如webSocket

• WebSocket 性能和效率都高，是现在的主流

5、什么是浏览器的同源策略

协议+域名+端口三者都相同

6、如何解决跨域

目前主流的3种跨域⽅案：

• JSONP 利用了<script> 标签不受同源策略的限制的特性，实现跨域效果，缺点是只支持get请求，不支持post请求

• CORS 服务器端安装cors中间件，并做允许哪些域名网址访问的配置

• 服务器代理：Nginx反向代理

前端工程化篇

1、Babel的原理是什么？

Babel 的主要工作是对代码进行转译和执行简单的计算。

转译分为三阶段：

• 解析（Parse），将代码解析⽣成抽象语法树 AST

• 转换（Transform）通过 babel-traverse插件，对抽象语法树 AST 进⾏遍历并作添加、更新、删除等操作，生成新的抽象语法树，

• ⽣成（Generate），通过 babel-generator 将变换后的 AST 转换为 js代码

2、你们的Git工作流是什么样的？

我们公司是通过git进行项目开发的，有几个关键分支：

主分支master：必须有的

主开发分支：写代码的主分支

功能分支：在主开发分支上创建每个功能分支，每个功能分支相互独立，写好的功能分支合并到主开发分支，最终主开发分支是功能完整的一个版本。

测试分支：将写好的主开发分支合并到测试分支上，反复进行测试和bug修复，直到可以进行上线，合并到主开发分支和master分支，保持三者的统一

主分支master：将能够真实上线的分支提交到master，准备上线

补丁分支：如果上线后的mater分支遇到突发问题，合并到补丁分支修改，bug修复后再分别合并到master分支，主开发分支和测试分支上

3、Git的rebase和merge的区别是什么？

都是用于合并分支的命令，rebase合并不保留被合并分支的详细信息，适用于频繁修改频繁提交的功能分支

merge会记录被合并分支的信息，适用于合并master分支和测试分支时

4、reset和revert的区别

reset是彻底回退到指定的版本，该版本后的所有版本都会清除且不可逆的，包括提交历史记录；

revert仅仅是回退到指定的版本，后续的版本还在，但在回退的版本上修改了后面版本的内容，会产生冲突报错；