浏览器问题个人记录

------------------------ 仅作为个人整理 ------------------------

重绘和回流

网页主要由三部分组成：结构（Structure）（HTML）、表现（Presentation）（CSS）和行为（Behavior）（JS）。

浏览器渲染

DOM树: 浏览器把获取到的html代码解析成1个Dom树，html中的每个节点（tag）都是Dom树中的1个节点，根节点是document对象 。dom树里面包含了所有的html标签，包括display:none隐藏，还有用JS动态添加的元素等

CSSOM树： CSS加载完之后对CSS进行解析，解析成CSS对象，然后把CSS对象组装起来，构建CSSOM树（个人理解：纯CSS的树）

渲染树(render tree): 将DOM树和CSSOM树结合起来的树，树种的每个“节点”都有自己的style，该树只包含了用于渲染页面的节点（不包含display: none的节点和head节点），不影响呈现画面的节点不会被包括到渲染树中。

回流（重排）

渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流。每个页面至少需要一次回流，就是在页面第一次加载的时候。

重绘

渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

回流必将引起重绘，而重绘不一定会引起回流。

URL 输入到渲染的过程

1. DNS 解析
2. TCP 连接
3. HTTP 请求抛出
4. 服务端处理请求，HTTP 响应返回
5. 浏览器拿到响应数据，解析响应内容，把解析的结果展示给用户

域名解析，找到服务地址 构建 TCP 连接，若有 https，则多一层 TLS 握手， 特殊响应码处理 301 302 *是 200 那就继续解析，如果 400 或 500 的话就会报错，如果 300 的话会进行重定向，这里会有个重定向计数器，避免过多次的重定向，超过次数也会报错。* 解析文档 构建 dom 树和 csscom 生成渲染树：从DOM树的根节点开始遍历每个可见节点，对于每个可见的节点，找到CSSOM树中对应的规则，并应用它们，根据每个可见节点以及其对应的样式，组合生成渲染树 Layout（回流）：根据生成的渲染树，进行回流（Layout），得到节点的集合信息 Painting（重绘）：根据渲染树及其回流得到的集合信息，得到节点的绝对像素。 绘制，在页面上展示，这一步还涉及到绘制层级、GPU相关的知识点 加载js脚本，加载完成解析js脚本

http协议

http 是建立在 TCP 上的应用层协议，超文本传输协议。

要了解http协议，首先要了解TCP是什么

TCP

tcp 是传输层协议，它的特点是：三次握手和四次挥手。

三次握手目的是为了防止已经失效的连接请求报文段突然又传到服务端，而产生错误

三次握手

1、客户端发送随机产生的数据到服务器，要求建立连接（客户端 向 服务端 请求连接）

2、服务端收到请求后确认信息，向客户端返回生成的相应数据（服务端 向 客户端 返回，同意连接）

3、客户端收到返回的数据后检查确认是不是第一步（1）中发送的链接，如果正确，客户端会发送数据，链接成功

四次挥手

1、客户端发送请求给服务端，要求断开链接，同时进入等待状态，不再发送数据，但是会接收数据

2、服务端收到后，向客户端发送信息，告诉客户端收到了，然后也进入等待状态，不再接收数据，但是会发送数据

3.服务端发送完剩余的数据后，向客户端发送信息，告知客户端可以断开了，然后服务端不再接收和发送数据

4、客户端收到后，释放链接，并向服务端发送数据，告诉服务端也释放链接

http协议

是单向的短链接，目前有 http1.0 http 1.1 http2.0

http1.0 :客户端的每次请求都要求建立一次单独的连接，在处理完本次请求后，就自动释放连接。

http1.1 :可以在一次连接中处理多个请求，并且多个请求可以重叠进行，不需要等待一个请求结束后再发送下一个请求

http2.0 :可支持多路复用，一个 tcp 可同时传输多个 http 请求，头部数据还做了压缩

https协议

http 报文传输过程中是明文的，可以通过抓包的方式看到报文内容，这就暴露一个安全问题，易被劫持篡改。

为了解决这个问题，就有了TLS，http + TLS = https

LS：安全传输层协议，用于在两个通信应用程序之间提供保密性和数据完整性，该协议由两层组成： TLS 记录协议（TLS Record）和 TLS 握手协议（TLS Handshake）。

TLS 利用非对称加密演算来对通信方做身份认证，之后交换对称密钥作为会谈密钥（Session key）,因此 https 分为两个阶段

1. 通过非对称加解密确认对方身份是否合法，若合法生成会话密钥。（这一步是核心）
2. 报文的在发送前，先用会话密钥进行对称加密，在传输。

TLS 握手

步骤如下：

1. 客户端请求服务端建立SSL链接，服务端并向客户端发送一个随机数 randomC 和 CA 机构颁发的证书
2. 客户端对证书进行验证，验证通过后，生成一个随机数 randomS ，用公钥对 randomS 加密 ，同时用 randomS 生成一段签名，发送给服务端
3. 服务端接收到后，用私钥对秘文解密，用解密后的 key 生成签名，并与客户端传来的签名进行比较，检验通过后，然后生成一个随机数 randomP ，并用私钥加密，还有随机数生成的 hash 值，一并发给客户端。
4. 客户端用公钥解密，并校验 hash 值通过后，两端利用 randomC randomS randomP 通过一定的算法生成 session key，后续的报文将通过 session key 对称加密进行传输。