这是我参与「第五届青训营 」笔记创作活动的第14天。

重绘、重排区别及如何避免

重排也叫做回流，当元素的大小或位置等几何属性发生改变时，会导致元素的布局发生改变，这就会导致重排的发生。

重绘：当元素的颜色或外观等属性发生改变时，不会影响到元素的布局，这就只会导致重绘的发生。

重排一定会引起重绘，但重绘不一定会引起重排

重排一次会很消耗性能，要尽量避免重排，避免重排的办法：

1. 将需要改变位置元素设置定位或浮动，使其脱离文档流
2. 当需要修改多个样式时，给元素设置class属性，通过统一修改样式而减少dom操作
3. 用gpu加速

token过期的解决方案

1. 跳到登录页重新获取新的token
2. 当获得状态码为401时，知道token过期，重新获取新的token，再去发送原来的请求
3. 每次请求都刷新token
4. 双token，另一个token设置更长的过期时间，可以定义一个计时器进行优化

在浏览器输入url回车会发生什么

1. 对url进行解析，通过DNS将域名解析成对应的ip地址，DNS就是一个很大的数据库。
2. 根据请求头看是查看强缓存还是协商缓存，如果能找到缓存，则直接返回页面，如果没有找到，则发送请求。
3. 建立TCP链接（三次握手）建立通道（第一次：SYN请求通信，第二次SYN+ACK同意，第三次ACK发送请求）。
4. 建立链接后，发送HTTP报文（包括请求行，请求头部，空行，请求数据）
5. 浏览器处理并做出回应（包括状态行，响应头部，空行，响应数据）
6. 通过四次握手释放TCP握手
7. 浏览器渲染页面内容

浏览器是如何渲染页面的

1. 将HTML文档解析成dom树
2. 将CSS文档构成cssom树
3. 将CSSOM树和DOM树合并成渲染树
4. 根据渲染树来布局，确定每个节点的位置
5. 调用CPU绘制，合成图层，渲染到屏幕上 （渲染 = 生成布局+ 绘制）