浏览器渲染原理
网络：获取HTML等资源，产生渲染任务，传递给渲染主线程的消息队列。
渲染：HTML解析、样式计算、布局、分层、绘制、分块、光栅化、画。
渲染过程
- HTML Parse
html -> DOM & CSSOM
预解析线程会预先下载外部的css资源
预解析线程下载外部的js资源会阻塞主线程，因为js会改变DOM结构。
- 样式计算
计算每个DOM节点的样式
- 布局
确定每个节点的尺寸和位置
- 分层
提高渲染效率
- 绘制
生成绘制指令
渲染主线程工作结束，其他线程工作。
- 分块
将每一层都划分成小区域，提高渲染效率。
- 光栅化
GPU将每一块变成位图
- 画
将位图信息给GPU进程再给显卡进行绘制
问题
reflow
修改了DOM或CSSOM的结构 2
repaint
没有改变位置属性 5
transform
在最后一步执行 8
单点登录
Session + Cookie 模式
劣势
很大的应用，认证中心负载压力大
子系统扩容，认证中心也要扩容，成本大
Token 模式
INFO
无需认证中心认证
失去了对用户的绝对控制
Token + Refresh Token 模式
事件循环
进程与线程
人 线程 在 内存空间 进程 中去做事情
浏览器进程和线程
为了减少崩坏，浏览器会开辟不同进程。
浏览器，网络，渲染等。
一个标签页一个渲染进程。
浏览器进程
界面交互，主界面显示，处理线程。
网络进程
网络资源管理。
渲染进程
渲染主线程：HTML,CSS,JS代码执行。
渲染主线程工作流程
主线程无限循环
for(;;){}检查消息队列，执行第一个任务，执行完进行下次循环，否则休眠。
异步
JS是单线程语言，运行再浏览器的渲染主线程。为了避免阻塞，采用了异步模式的事件循环模型。
队列优先级
微队列 > 交互队列 > 延时队列
事件循环
事件循环又叫做消息循环，是浏览器渲染主线程的工作方式。
在Chrome的源码中，它开启一个不会结束的for循环，每次循环从消息队列中取出第一个任务执行，而其他线程只需要在合适的时候将任务加入到队列未尾即可。
过去把消息队列简单分为宏队列和微队列，这种说法目前已无法满足复杂的浏览器环境，取而代之的是一种更加灵活多变的处理方式。
根据3C官方的解释，每个任务有不同的类型，同类型的任务必须在同一个队列，不同的任务可以属于不同的队列区不同任务队列有不同的优先级，在一次事件循环中，由浏览器自行决定取哪一个队列的任务。但浏览器必须有一个微队列，微队列的任务一定具有最高的优先级，必须优先调度执行。