11道浏览器原理面试题

约定不等于承诺〃 2022-08-29 00:17 120阅读 0赞

[掘金][Link 1]

本章关于浏览器原理部分的内容主要来源于[浏览器工作原理][Link 2]，这是一篇很长的文章，可以算上一本小书了，有精力的非常建议阅读。

> 1.常见的浏览器内核有哪些？

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>浏览器/RunTime</td> 
   <td>内核（渲染引擎）</td> 
   <td>JavaScript 引擎</td> 
  </tr> 
  <tr> 
   <td>Chrome</td> 
   <td>Blink（28~）<br> Webkit（Chrome 27）</td> 
   <td>V8</td> 
  </tr> 
  <tr> 
   <td>FireFox</td> 
   <td>Gecko</td> 
   <td>SpiderMonkey</td> 
  </tr> 
  <tr> 
   <td>Safari</td> 
   <td>Webkit</td> 
   <td>JavaScriptCore</td> 
  </tr> 
  <tr> 
   <td>Edge</td> 
   <td>EdgeHTML</td> 
   <td>Chakra(for JavaScript)</td> 
  </tr> 
  <tr> 
   <td>IE</td> 
   <td>Trident</td> 
   <td>Chakra(for JScript)</td> 
  </tr> 
  <tr> 
   <td>PhantomJS</td> 
   <td>Webkit</td> 
   <td>JavaScriptCore</td> 
  </tr> 
  <tr> 
   <td>Node.js</td> 
   <td>-</td> 
   <td>V8</td> 
  </tr> 
 </tbody> 
</table>

[浏览器内核总结-html教程-PHP中文网][-html_-PHP]

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

1.用户界面-包括地址栏，前进/后退按钮，书签菜单等。除了浏览器主窗口显示的您请求的页面外，其他显示的各个部分都属于用户界面。

2.浏览器引擎-在用户界面和呈现引擎之间传送指令。

3.呈现引擎-负责显示请求内容。如果请求的内容是HTML，它就负责解析HTML和CSS内容，并将解析后的内容显示在屏幕上

4.网络-用于网络调用，比如HTTP请求。其接口与平台无关，并为所有平台提供底层实现

5. 用户界面后端-用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面的方法。

6.javascript解析器-用于解析和执行js代码

7.数据存储-这是持久层。浏览器需要在硬盘上保存各种数据。例如cookies.新的HTML规范（HTML5）定义了“网络数据库”。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70][]

> 3.浏览器是如何渲染UI的？

1.浏览器获取HTML文件，然后对文件进行解析，形成DOM Tree

2.与此同时，进行CSS解析，生成Style Rules

3.接着将DOM Tree与Style Rules合成Render Tree

4.接着进入布局（Layout）阶段，也就是为每个节点分配一个应出现在屏幕上的确切坐标

5.随后调用GPU进行绘制（Paint）,遍历Render Tree的节点，并将元素呈现出来

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 1][]

> 4.浏览器如何解析css选择器？

浏览器会『从右往左』解析CSS选择器。

我们知道DOM Tree与Style Rules合成为 Render Tree，实际上是需要将*Style Rules*附着到DOM Tree上，因此需要根据选择器提供的信息对DOM Tree进行遍历，才能将样式附着到对应的DOM元素上。

以下这段css为例

.mod-nav h3 span {font-size: 16px;}

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 2][]

若从左向右的匹配，过程是：

1.  从 .mod-nav 开始，遍历子节点 header 和子节点 div
2.  然后各自向子节点遍历。在右侧 div 的分支中
3.  最后遍历到叶子节点 a ，发现不符合规则，需要回溯到 ul 节点，再遍历下一个 li-a，一颗DOM树的节点动不动上千，这种效率很低。

如果从右至左的匹配：

1.  先找到所有的最右节点 span，对于每一个 span，向上寻找节点 h3
2.  由 h3再向上寻找 class=mod-nav 的节点
3.  最后找到根元素 html 则结束这个分支的遍历。

后者匹配性能更好，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点）；而从左向右的匹配规则的性能都浪费在了失败的查找上面。

===========================浏览器兼容性

> 1.如何解决不同浏览器的标签默认的margin和padding值的不同

>  2.如何解决块属性标签浮动后，在设置水平margin的情况下，在ie6中显示的margin比设置的大的问题

[Link 1]: https://juejin.cn/post/6844903951377104903
[Link 2]: https://link.juejin.cn/?target=http%3A%2F%2Ftaligarsiel.com%2FProjects%2Fhowbrowserswork1.htm
[-html_-PHP]: https://www.php.cn/div-tutorial-271866.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70]: /images/20220829/1bc5df194b3449569cc96ac027aeb776.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 1]: /images/20220829/3f69f147ebeb4ca983a826804ef0a022.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 2]: /images/20220829/fc285f2c2482401eb6ed813224a5e336.png