1.浏览器的主要组成部分是什么？
- ⽤户界⾯ - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗⼝显示的您请求的⻚⾯外，其他显示的各个部分都属于⽤户界⾯
- 浏览器引擎 - 在⽤户界⾯和呈现引擎之间传送指令。
- 呈现引擎 - 负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上
- ⽹络 - ⽤于⽹络调⽤，⽐如 HTTP 请求。其接⼝与平台⽆关，并为所有平台提供底层实现
- ⽤户界⾯后端 - ⽤于绘制基本的窗⼝⼩部件，⽐如组合框和窗⼝。其公开了与平台⽆关的通⽤接⼝，⽽在底层使⽤操作系统的⽤户界⾯⽅法。
- JavaScript 解释器。⽤于解析和执⾏ JavaScript 代码
- 数据存储。这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie。新的 HTML 规范 (HTML5) 定义了“⽹络数据库”，这是⼀个完整（但是轻便）的浏览器内数据库
2.浏览器是如何渲染UI的？
- 浏览器获取HTML⽂件，然后对⽂件进⾏解析，形成DOM Tree
- 与此同时，进⾏CSS解析，⽣成Style Rule
- 接着将DOM Tree与Style Rules合成为 Render Tree
- 接着进⼊布局（Layout）阶段，也就是为每个节点分配⼀个应出现在屏幕上的确切坐标
- 随后调⽤GPU进⾏绘制（Paint），遍历Render Tree的节点，并将元素呈现出来
- DOM Tree是如何构建的？
- 转码: 浏览器将接收到的⼆进制数据按照指定编码格式转化为HTML字符串
- ⽣成Tokens: 之后开始parser，浏览器会将HTML字符串解析成Tokens
- 构建Nodes: 对Node添加特定的属性，通过指针确定 Node 的⽗、⼦、兄弟关系和所属 treeScope
- ⽣成DOM Tree: 通过node包含的指针确定的关系构建出DOM Tree
4.浏览器重绘与重排的区别？
- 重排: 部分渲染树（或者整个渲染树）需要重新分析并且节点尺⼨需要重新计算，表现为重新⽣成布局，重新排列元素
- 重绘: 由于节点的⼏何属性发⽣改变或者由于样式发⽣改变，例如改变元素背景⾊时，屏幕上的部分内容需要更新，表现为某些元素的外观被改变
5.如何触发重排和重绘？
- 添加、删除、更新DOM节点
- 通过display: none隐藏⼀个DOM节点-触发重排和重绘
- 通过visibility: hidden隐藏⼀个DOM节点-只触发重绘，因为没有⼏何变化
- 移动或者给⻚⾯中的DOM节点添加动画
- 添加⼀个样式表，调整样式属性
- ⽤户⾏为，例如调整窗⼝⼤⼩，改变字号，或者滚动。
