浏览器原理及HTTP网络协议基础简答题

## 浏览器原理

**有兴趣读一下**

常⻅的浏览器内核有哪些?

1. Trident (IE内核)
2. Gecko(firefox)
3. webkit(Safari)
4. Chromium/Bink(chrome)
5. Presto (Opera)

浏览器的主要组成部分是什么？

1. 用户界面（User Interface）
2. 浏览器引擎（Browser Engine）
3. 渲染引擎（Rendering Engine）
4. 网络（Networking）
5. JavaScript解释器（JavaScript Interpreter）
6. XML解析器（XML Parser）
7. 显示后端（Display Backend）
8. 数据持久层（Data Persistence）

现代浏览器工作原理（一） | 楚权的世界现代浏览器工作原理（一） | 楚权的世界

浏览器是如何渲染UI的？

1. 浏览器获取HTML文件，然后对文件进行解析，形成DOM Tree
2. 与此同时，进行CSS解析，生成Style Rules
3. 接着将DOM Tree与Style Rules合成为 Render Tree
4. 接着进入布局（Layout）阶段，也就是为每个节点分配一个应出现在屏幕上的确切坐标
5. 随后调用GPU进行绘制（Paint），遍历Render Tree的节点，并将元素呈现出来

浏览器如何解析css选择器？

1. 从右到左解析，根据选择器遍历dom树，将样式加到对应的dom元素上。
2. 若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。

DOM Tree是如何构建的？

1. 转码: 浏览器将接收到的二进制数据按照指定编码格式转化为HTML字符串
2. 生成Tokens: 之后开始parser，浏览器会将HTML字符串解析成Tokens

3. 构建Nodes: 对Node添加特定的属性，通过指针确定 Node 的父、子、兄弟关系和所属 treeScope

4. 生成DOM Tree: 通过node包含的指针确定的关系构建出DOMTree

浏览器重绘与重排的区别？

1. 重排:部分渲染树（或者整个渲染树）需要重新分析并且节点尺⼨需要重新计算，表现为重新⽣成布局，重新排列 元素

2. 重绘: 由于节点的⼏何属性发⽣改变或者由于样式发⽣改变，例如改变元素背景⾊时，屏幕上的部分内容需要更 新，表现为某些元素的外观被改变

如何触发重排和重绘？

1. 任何改变⽤来构建渲染树的信息都会导致⼀次重排或重绘：

添加、删除、更新DOM节点

通过display: none隐藏⼀个DOM节点-触发重排和重绘