# 浏览器渲染
# 浏览器内核
当前主流浏览器内核有:
- GUI 渲染引擎线程
- JS 引擎线程
- 事件触发线程
- 定时器触发现线程
- 异步 HTTP 请求线程
TIP
GUI 渲染线程与 JS 引擎线程是互斥的, 因为 JS 引擎线程在执行的过程中可能会发生重绘和回流, 所以 GUI 渲染引擎线程执行时, JS 引擎线程会被挂起
# 原理
当浏览器识别为 HTML 文件时, GUI 渲染线程将执行以下过程
- 解析 HTML 文件, 构建 DOM 树, 与此同时浏览器主进程负责下载 CSS 文件;
- CSS 文件下载完成, 解析 CSS 文件, 构建 CSSOM 树, 然后与 DOM 树合并为 RenderObject 树;
- 根据 RenderObject 树中的元素及其尺寸、位置进行布局
- 绘制
# event-loop
# 重绘（Repaint）和回流（Reflow）
当 RenderObject 树需要更新样式属性时, 即发生重绘; 当 RenderObject 树种的元素规则尺寸、布局或显示隐藏等发生变化， 即发生回流
# 存储技术
| 特性 | 大小 | 过期时间 | |
|---|---|---|---|
| Cookie | 每次都会携带在 HTTP 头中, 在浏览器和服务器之间来回传递 | <=4K | 手动设置 |
| localStorage | <=5M | 永久有效, 可手动清除, 或者通过代码删除 | |
| sessionStorage | 不同标签页之间不能互通 | <=5M | 当前会话下有效, 关闭页面或浏览器后被清除 |