浏览器原理面试题

一、浏览器如何解析css选择器
浏览器会从右向左解析css选择器。
我们知道DOM Tree和Style Rules会生成Render Tree。实际上是需要将Style Rules附着到DOM Tree上，因此需要根据选择器提供的信息对DOM tree进行遍历，才能将样式附着到对应的DOM元素上。
以下这段css代码为例。

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

我们对应的DOM tree如下所示：

若从左到右的匹配，过程是：
1、从.mod-nav开始，遍历子节点header和子节点div
2、然后各自向子节点遍历。在右侧div的分支中。
3、最后遍历到叶子节点a，发现不符合规则，需要回朔到ul节点，再遍历下一个li-a,一棵树dom节点动不动上千，这种效率很低。

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

后者匹配性能更好，是因为从右向左的匹配在第一步就筛选了大量的不符合条件的叶子节点，而从左到右的匹配规则的性能都浪费在失败的查找上面。
二、DOM Tree是如何构建的？

1、转码：浏览器将受到的二进制数据按照指定编码格式转化为html字符串。
2、生成Tokens：之后开始parser,浏览器会将html字符串解析成tokens。
3、构建Nodes:对于Node添加特定的属性，通过指针确定Node的父，子，兄弟节点和所属的treeScope。
4、生成DOM tree：通过node包含的指针确定的关系构建出DOM tree。