当前位置:首页 > web > 正文

翻译:浏览器内部的工作原理( Tutorials How Browsers Work: Behind the scenes of modern web browsers)之css解析

CSS 解析

在介绍篇中有记住解析的内容?好的,不想html、css是一个上下文空闲语法和可以使用任何类型解析器描述进行解析。事实上,样式说明书中定义了css分词和语法。
让我们看一些例子:
分析语法(单词)对每一个分词通过正则表达式进行定义。

“ident”是identifier简短 ,像class的名字。”name”是一个元素id(通过”#”引用)

解释:A规则如下结构

div.error和a.error是选择器,里面的部分包含了需要应用的规则。这个结构被如下所定义。

这意味这个规则是一个选择器或者被空格分开的可选数字选择器。一个规则集包含卷曲的花括号(curly braces)和声明或者是被分号(semicolon)分开的可选的数字声明。“声明“和”选择器”被接下来的BNF格式所定义..

Webkitcss解析器

Webkit使用flex和bison解析器产生并自动创建解析从css语法文件中。当你从解析介绍中重新回忆时,bison创建一个自底向上转换 -减少解析器。Firefox使用自顶向下解析器通过手动编写。在这两种场景中,每一份css文件都被解析到样式表对象中(stylesheet object),每一个对象保存css规则.css规则对象包含选择器和声明对象和与css语法保持一致的其他对象.

css解析

图:css解析

脚本和样式表的处理命令(the order of processing …)

脚本

web模式是一个同步状态。开发者希望当解析器到达<script>标签的时候,缴费可以立即解析和执行。这个时候解析的文档会暂定直 到脚本被执行完毕。如果脚本是外部引用,那么资源必须首先从网络层抓取,这也是一个同步完成,此时解析被暂停直到资源被抓取完毕。这是很多年的模式,也被 定义在html4和5的说明书中。开发者可以标记脚本为defer,这样解析文档将不会暂定,并且当解析完之后脚本才会去执行。Html5中给脚本添加了 可选的异步标记,不过是通过另一个线程解析和执行。

思索性的解析(speculative)

webkit和firefox都进行了优化。当执行脚本时,另一个线程解析剩下的文档。确保其他需要的资源从网络中加载过来。这种方式的资源在平行 的链接加载而且整体的速度也比较好。记住-这种思索性的解析并不讳改变dom树和节点对应主解析器来说。它仅解析引用到外部资源时,如外部脚本、样式表和 图片。

样式表

另一方面样式表有不同的模式。从内容上说,看似样式表不会改变dom树,也没有理由等待他们并停止文档的解析,这是一个问题,尽管在文档解析策略中 脚本需要样式信息。如果样式不被加载和解析,脚本将会得到错误的回答并会引起更多的问题。这看起来是一个边缘例子,但却相当的普遍。Firefox会堵塞 所有脚本当有样式表被下载和解析时。Webkit只有在试图访问当前样式属性,有可能会受到为加载样式表的影响,才会堵塞脚本。

暂无评论

发表评论