《浏览器工作原理浅析byGhostZhang分析解析优秀PPT.ppt》由会员分享，可在线阅读，更多相关《浏览器工作原理浅析byGhostZhang分析解析优秀PPT.ppt（94页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、阅读器工作原理浅析TID Ghostzhang本PPT只是对内容的一个整理阅读器主要组件用户界面阅读器引擎渲染引擎网络UI 后端JS说明器数据存储渲染引擎Geckowebkit渲染引擎基本流程 构建dom树 -构建render树 -布局render树-绘制render树webkit渲染引擎主流程webkit运用 render树 这个名词来命名由渲染对象组成的树。元素的定位称为 布局。利用dom节点及样式信息去构建render树的过程为 attachmentGecko渲染引擎主流程Gecko称可见的格式化元素组成的树为 frame树，每个元素都是一个frame。元素的定位称为 回流。Gecko在
2、html和dom树之间附加了一层，这层称为 内容接收器，相当制造dom元素的工厂。解析流程阅读器引擎解析解析一个文档：即将其转换为具有确定意义的结构编码可以理解和运用的东西。解析的结果通常是表达文档结构的节点树，称为解析树或语法树。例如，解析“231”这个表达式，可能返回这样一棵树。数学表达式树节点解析解析可以分为两个子过程语法分析：对语言应用语法规则。词法分析：将输入分解为符号，符号是语言的词汇表基本有效单元的集合。解析器词法分析及语法分析原文件词法分析语法分析解析树从源文档到解析树解析器-文法上下文无关文法假如一个语言的文法是上下文无关的，则它可以用正则解析器来解析。对上下文无关文法的一个
3、直观的定义是，该文法可以用BNF来完整的表达。从源文档到解析树解析器类型解析器类型分为两种：自顶向下解析：查看语法的最高层结构并试着匹配其中一个；自底向上解析：从输入起先，逐步将其转换为语法规则，从底层规则起先直到匹配高层规则。Webkit运用自底向上的解析器，Gecko运用自顶向下的解析器例子：解析“231”这个表达式词汇表：包括整数、加号及减号。语法：1.该语言的语法基本单元包括表达式、term及操作符2.该语言可以包括多个表达式3.一个表达式定义为两个term通过一个操作符连接4.操作符可以是加号或减号5.term可以是一个整数或一个表达式例子：词汇表及语法的定义INTEGER：0190
4、9PLUS：MINUS：词汇表：包括整数、加号及减号。expression:term operation termoperation:=PLUS|MINUSterm:=INTEGER|expression语法：1.该语言的语法基本单元包括表达式、term及操作符2.该语言可以包括多个表达式3.一个表达式定义为两个term通过一个操作符连接4.操作符可以是加号或减号5.term可以是一个整数或一个表达式例子：解析过程1.第一个匹配规则的子字符串是“2”，依据规则5，它是一个term2.其次个匹配的是“23”，它符合第2条规则一个操作符连接两个term，下一次匹配发生在输入的结束处。3.“231”
5、是一个表达式，因为我们已经知道“23”是一个term，所以我们有了一个term紧跟着一个操作符及另一个term。4.“2”将不会匹配任何规则，因此是一个无效输入。HTML解析非上下文无关文法HTML 解析HTML文法定义HTML DTDDTD（Document Type Definition 文档类型定义）这一格式是用于定义SGML家族的语言，包括了对全部允许元素及它们的属性和层次关系的定义。DTD定义了HTML的解析语法HTML 解析树DOM树HTML解析器输出的树，也就是解析树，是由DOM元素及属性节点组成的。DOM是文档对象模型的缩写，它是html文档的对象表示，作为html元素的外部接
6、口供js等调用。:/w3.org/DOM/DOMTR例子：DOM树Hello DOM这里所谓的树包含了DOM节点是说树是由 实现了DOM接口的元素 构建而成的，阅读器运用已被阅读器内部运用的其他属性的具体实现。解析算法hmtl不能被一般的自顶向下或自底向上的解析器所解析。缘由是：1.这门语言本身的宽容特性2.阅读器对一些常见的非法html有容错机制3.解析过程是往复的，通常源码不会在解析过程中发生变更，但在html中，脚本标签包含的“document.write”可能添加标签，这说明在解析过程中事实上修改了输入不能运用正则解析技术，阅读器为html定制了专属的解析器。Html5规范中描述了这个
7、解析算法，算法包括两个阶段符号化及构建树。符号化符号化是词法分析的过程，将输入解析为符号，html的符号包括起先标签、结束标签、属性名及属性值。符号识别器识别出符号后，将其传递给树构建器，并读取下一个字符，以识别下一个符号，这样直到处理完全部输入。符号化：词法分析Hello world算法输出html符号，该算法用状态机表示。构建树Hello world构建树这一阶段的输入是符号识别阶段生成的符号序列。解析结束时的处理在这个阶段，阅读器将文档标记为可交互的，并起先解析处于延时模式中的脚本这些脚本在文档解析后执行。文档状态将被设置为完成，同时触发一个load事务。Html5规范中有符号化及构建树
8、的完整算法(:/w3.org/TR/html5/syntax.html#html-parser)。阅读器容错阅读器都具有错误处理的实力，但是，另人惊异的是，这并不是html最新规范的内容，就像书签及前进后退按钮一样，它只是阅读器长期发展的结果。解析器将符号化的输入解析为文档并创建文档，但不幸的是，我们必需处理很多没有很好格式化的html文档，至少要当心下面几种错误状况。标签未关闭标签嵌套错误标签错误遗漏标签太深的标签继承，最多只允许20个相同类型的标签嵌套。CSS解析上下文无关文法CSS解析-词法comment/*/*+(/*/*+)*/num 0-9+|0-9*”.”0-9+nonascii
9、/200-/377nmstart _a-z|nonascii|escapenmchar _a-z0-9-|nonascii|escapename nmchar+ident nmstartnmchar*CSS解析-语法ruleset:selector ,S*selector*S*declaration ;S*declaration*S*;selector:simple_selector combinator selector|S+combinator selector ;simple_selector:element_name HASH|class|attrib|pseudo*|HASH|cla
10、ss|attrib|pseudo+;class:.IDENT;element_name:IDENT|*;attrib:S*IDENT S*=|INCLUDES|DASHMATCH S*IDENT|STRING S*;pseudo:IDENT|FUNCTION S*IDENT S*);“ident”是识别器的缩写，相当于一个class名，“name”是一个元素id（用“”引用）。CSS解析器Webkit运用自底向上的解析器，Gecko运用自顶向下的解析器它们都是将每个css文件解析为样式表对象，每个对象包含css规则，css规则对象包含选择器和声明对象，以及其他一些符合css语法的对象。脚本解析
11、javascript脚本web的模式是同步的，开发者希望解析到一个script标签时马上解析执行脚本，并堵塞文档的解析直到脚本执行完。假如脚本是外引的，则网络必需先恳求到这个资源这个过程也是同步的，会堵塞文档的解析直到资源被恳求到。这个模式保持了很多年，并且在html4及html5中都特殊指定了。开发者可以将脚本标识为defer，以使其不堵塞文档解析，并在文档解析结束后执行。Html5增加了标记脚本为异步的选项，以使脚本的解析执行运用另一个线程。预解析Webkit和Firefox都做了这个优化，当执行脚本时，另一个线程解析剩下的文档，并加载后面须要通过网络加载的资源。这种方式可以使资源并行加载
12、从而使整体速度更快。须要留意的是，预解析并不变更Dom树，它将这个工作留给主解析过程，自己只解析外部资源的引用，比如外部脚本、样式表及图片。样式表样式表接受另一种不同的模式。理论上，既然样式表不变更Dom树，也就没有必要停下文档的解析等待它们，然而，存在一个问题，脚本可能在文档的解析过程中恳求样式信息，假如样式还没有加载和解析，脚本将得到错误的值，明显这将会导致很多问题，这看起来是个边缘状况，但的确很常见。Firefox在存在样式表还在加载和解析时堵塞全部的脚本，而chrome只在当脚本试图访问某些可能被未加载的样式表所影响的特定的样式属性时才堵塞这些脚本。渲染树的构造渲染引擎渲染树渲染树由元
13、素显示序列中的可见元素组成，它是文档的可视化表示，构建这棵树是为了以正确的依次绘制文档内容。Firefox将渲染树中的元素称为frames，webkit则用render或渲染对象来描述这些元素。一个渲染对象知道怎么布局及绘制自己及它的children。每个渲染对象用一个和该节点的css盒模型相对应的矩形区域来表示，正如css2所描述的那样，它包含诸如宽、高和位置之类的几何信息。盒模型的类型受该节点相关的display样式属性的影响。元素的类型也须要考虑，例如，表单控件和表格带有特殊的框架。渲染树和DOM树的关系渲染对象和DOM元素相对应，但这种对应关系不是一对一的，不行见的Dom元素不会被插入
14、渲染树，例如head元素。另外，display属性为none的元素也不会在渲染树中出现（visibility属性为hidden的元素将出现在渲染树中）。还有一些Dom元素对应几个可见对象，它们一般是一些具有困难结构的元素，无法用一个矩形来描述。例如，select元素有三个渲染对象一个显示区域、一个下拉列表及一个按钮。当文本因为宽度不够而折行时，新行将作为额外的渲染元素被添加。依据css规范，一个行内元素只能仅包含行内元素或仅包含块状元素，在存在混合内容时，将会创建匿名的块状渲染对象包袱住行内元素。渲染树和DOM树的关系一些渲染对象和所对应的Dom节点不在树上相同的位置，例如，浮动和确定定位的元
15、素在文本流之外，在两棵树上的位置不同，渲染树上标识出真实的结构，并用一个占位结构标识出它们原来的位置。样式计算创建渲染树须要计算出每个渲染对象的可视属性，这可以通过计算每个元素的样式属性得到。样式包括各种来源的样式表，行内样式元素及html中的可视化属性（例如bgcolor），可视化属性转化为css样式属性。样式表来源于阅读器默认样式表，及页面作者和用户供应的样式表，有些样式是阅读器用户供应的（阅读器允许用户定义宠爱的样式，例如，在Firefox中，可以通过在Firefox Profile书目下放置样式表实现）。计算样式的一些困难计算样式的一些困难样式数据是特别大的结构，保存大量的样式属性会带
16、来内存问题元素查找匹配的规则的优化应用规则涉及特别困难的级联例子：困难的选择符div div div div cont divdivdiv?Gecko-规则树、上下文树Gecko-规则树、上下文树Gecko用两个树用来简化样式计算规则树和样式上下文树webkit也有样式对象，但它们并没有存储在类似样式上下文树这样的树中，只是由Dom节点指向其相关的样式。例子：运用规则树计算样式上下文this is a big error this is also a very big errorerroranother error1.div margin:5px;color:black2.err color:
17、red3.big margin-top:3px4.div span margin-bottom:4px5.#div1 color:blue6.#div2 color:green简化下问题，我们只填充两个结构color和margin，color结构只包含一个成员颜色，margin结构包含四边。例子：规则树（指向规则）this is a big error this is also a very big errorerroranother error1.div margin:5px;color:black2.err color:red3.big margin-top:3px4.div span m
18、argin-bottom:4px5.#div1 color:blue6.#div2 color:green例子：上下文树（指向规则节点）this is a big error this is also a very big errorerroranother error例子：another error1.div margin:5px;color:black2.err color:red3.big margin-top:3px4.div span margin-bottom:4px5.#div1 color:blue6.#div2 color:green例子：another error1.规则树
19、路径：1、2、62.计算规则，缓存结果：a.margin-top:5px;b.margin-bottom:5px;c.margin-left:5px;d.margin-right:5px;e.color:#00FF00;3.创建节点，关联上下文树结构化样式上下文按结构划分，一个结构中的全部特性不是继承的就是非继承的。对继承的特性，除非元素自身有定义，否则就从它的parent继承。非继承的特性（称为reset特性）假如没有定义，则运用默认的值。例子：another errormargin-top:5px;margin-bottom:5px;margin-left:5px;margin-right
20、:5px;color:#000000;color:#FF0000;color:#00FF00;例子：another error例子：another errormargin-top:5px;margin-bottom:5px;margin-left:5px;margin-right:5px;color:#00FF00;样式规则的来源外部样式或标签内style属性的CSS规则行内样式属性html可视化属性（映射为相应的样式规则）通过映射提高匹配速度样式规则可能很狡猾，为了解决这个问题，可以先对规则进行处理，以使其更简洁被访问。解析完样式表之后，规则会依据选择符添加一些hash映射，映射可以是依据i
21、d、class、标签名或是任何不属于这些分类的综合映射。假如选择符为id，规则将被添加到id映射，假如是class，则被添加到class映射，等等。这个处理是匹配规则更简洁，不须要查看每个声明，我们能从映射中找到一个元素的相关规则，这个优化使在进行规则匹配时削减了95的工作量。例子：映射class映射id映射标签映射1.div margin:5px;color:black2.err color:red3.big margin-top:3px4.div span margin-bottom:4px5.#div1 color:blue6.#div2 color:green例子：映射p.error
22、color:red#messagediv height:50pxdiv margin:5pxan error occurred this is a message例子：映射p.error color:red#messagediv height:50pxdiv margin:5pxan error occurred this is a message例子：映射p.error color:red#messageDiv height:50pxdiv margin:5pxclass映射id映射标签映射例子：映射p.error color:redclass映射id映射标签映射例子：映射p.error c
23、olor:redclass映射标签映射keyp.error例子：映射P.error例子：映射webkit-共享样式数据Webkit-共享样式数据webkit节点引用样式对象（渲染样式），某些状况下，这些对象可以被节点间共享，这些节点须要是兄弟或是表兄弟节点，并且：这些元素必需处于相同的鼠标状态（比如不能一个处于hover，而另一个不是）不能有元素具有id标签名必需匹配class属性必需匹配对应的属性必需相同链接状态必需匹配焦点状态必需匹配不能有元素被属性选择器影响元素不能有行内样式属性不能有生效的兄弟选择器，webcore在任何兄弟选择器相遇时只是简洁的抛出一个全局转换，并且在它们显示时使整个
24、文档的样式共享失效，这些包括选择器和类似:first-child和:last-child这样的选择器。遍历匹配Webkit中，并没有规则树，匹配的声明会被遍历四次先是应用非important的高优先级属性（之所以先应用这些属性，是因为其他的依靠于它们比如display），其次是高优先级important的，接着是一般优先级非important的，最终是一般优先级important的规则。这样，出现多次的属性将被依据正确的级联依次进行处理，最终一个生效。样式表的级联依次一个样式属性的声明可能在几个样式表中出现，或是在一个样式表中出现多次，因此，应用规则的依次至关重要，这个依次就是级联依次。依据c
25、ss2的规范，级联依次为（从低到高）：1.阅读器声明2.用户声明3.作者的一般声明4.作者的important声明5.用户important声明Specifity（权值）Css2规范中定义的选择符specifity如下：假如声明来自style属性，而不是一个选择器的规则，则计1，否则计0（a）计算选择器中id属性的数量（b）计算选择器中class及伪类的数量（c）计算选择器中元素名及伪元素的数量（d）连接abcd四个数量（用一个大基数的计算系统）将得到specifity。这里运用的基数由分类中最高的基数定义。规则排序规则匹配后，须要依据级联依次对规则进行排序，webkit先将小列表用冒泡排序，
26、再将它们合并为一个大列表。逐步处理webkit运用一个标记位标识全部顶层样式表都已加载，假如在attch时样式没有完全加载，则放置占位符，并在文档中标记，一旦样式表完成加载就重新进行计算。布局layout/reflow布局当渲染对象被创建并添加到树中，它们并没有位置和大小，计算这些值的过程称为layout或reflow。Html运用基于流的布局模型。流中靠后的元素并不会影响前面元素的几何特性，所以布局可以在文档中从右向左、自上而下的进行。也存在一些例外，比如html tables。坐标系统相对于根frame，运用top和left坐标。根渲染对象的位置是0,0，它的大小是viewport阅读器窗
27、口的可见部分。布局是一个递归的过程，由根渲染对象起先，它对应html文档元素，布局接着递归的通过一些或全部的frame层级，为每个须要几何信息的渲染对象进行计算。Dirty bit 系统为了不因为每个小变更都全部重新布局，阅读器运用一个dirty bit系统，一个渲染对象发生了变更或是被添加了，就标记它及它的children为dirty。存在两个标识dirty：须要layout。children are dirty：即使这个渲染对象可能没问题，但它至少有一个child须要layout。全局和增量 layout当layout在整棵渲染树触发时，称为全局layout，这可能在下面这些状况下发生：1
28、.一个全局的样式变更影响全部的渲染对象，比如字号的变更2.窗口resizelayout也可以是增量的，这样只有标记为dirty的渲染对象会重新布局（也将导致一些额外的布局）。增量 layout会在渲染对象dirty时异步触发，例如，当网络接收到新的内容并添加到Dom树后，新的渲染对象会添加到渲染树中。异步和同步layout增量layout的过程是异步的Firefox为增量layout生成了reflow队列，以及一个调度执行这些批处理吩咐。Webkit也有一个计时器用来执行增量layout遍历树，为dirty状态的渲染对象重新布局。另外，当脚本恳求样式信息时，例如“offsetHeight”，会
29、同步的触发增量布局。全局的layout一般都是同步触发。有些时候，layout会被作为一个初始layout之后的回调，比如滑动条的滑动。优化当一个layout因为resize或是渲染位置变更（并不是大小变更）而触发时，渲染对象的大小将会从缓存中读取，而不会重新计算。一般状况下，假如只有子树发生变更，则layout并不从根起先。这种状况发生在，变更发生在元素自身并且不影响它四周元素，例如，将文本插入文本域（否则，每次击键都将触发从根起先的重排）。layout过程layout过程1.parent渲染对象确定它的宽度2.parent渲染对象读取chilidren，并：3.放置child渲染对象（设置
30、它的x和y）4.在须要时（它们当前为dirty或是处于全局layout或者其他缘由）调用child渲染对象的layout，这将计算child的高度5.parent渲染对象运用child渲染对象的累积高度，以及margin和padding的高度来设置自己的高度这将被parent渲染对象的parent运用6.将dirty标识设置为falseFirefox运用一个“state”对象（nsHTMLReflowState）做为参数去布局（firefox称为reflow），state包含parent的宽度及其他内容。Firefox布局的输出是一个“metrics”对象（nsHTMLReflowMetric
31、s）。它包括渲染对象计算出的高度。宽度计算webkit中宽度的计算过程是（RenderBox类的calcWidth方法）：容器的宽度是容器的可用宽度和0中的最大值，这里的可用宽度为：contentWidth=clientWidth()-paddingLeft()-paddingRight()clientWidth和clientHeight代表一个对象内部的不包括border和滑动条的大小元素的宽度指样式属性width的值，它可以通过计算容器的百分比得到一个确定值加上水平方向上的border和padding到这里是最佳宽度的计算过程，现在计算宽度的最大值和最小值假如最佳宽度大于最大宽度则运用最大
32、宽度假如小于最小宽度则运用最小宽度。最终缓存这个值，当须要layout但宽度未变更时运用。Line breaking当一个渲染对象在布局过程中须要折行时，则暂停并告知它的parent它须要折行，parent将创建额外的渲染对象并调用它们的layout。绘制显示内容全局和增量和布局一样，绘制也可以是全局的绘制完整的树或增量的。在增量的绘制过程中，一些渲染对象以不影响整棵树的方式变更，变更的渲染对象使其在屏幕上的矩形区域失效，这将导致操作系统将其看作dirty区域，并产生一个paint事务，操作系统很奇妙的处理这个过程，并将多个区域合并为一个。Chrome中，这个过程更困难些，因为渲染对象在不同的
33、进程中，而不是在主进程中。Chrome在确定程度上模拟操作系统的行为，表现为监听事务并派发消息给渲染根，在树中查找到相关的渲染对象，重绘这个对象（往往还包括它的children）。绘制依次这个就是元素压入堆栈的依次，这个依次影响着绘制，堆栈从后向前进行绘制。一个块渲染对象的堆栈依次是：背景色背景图borderchildrenoutlinecss2定义了绘制过程的依次：:/w3.org/TR/CSS21/zindex.html总结工作中须要留意的内容代码不规范的HTML结构会降低页面解析效率（HTML）HTML的节点、层级越少页面解析效率越高（HTML）通配选择符对性能的影响几乎可以忽视（CSS）包含选择符的层级过多会导致降低样式解析效率（CSS）不显示的对象不会被渲染（CSS）动态变更阅读器总是试着以最小的动作响应一个变更一个元素颜色的变更将只导致该元素的重绘元素位置的变更将导致元素的布局和重绘添加一个Dom节点，也会大致这个元素的布局和重绘一些主要的变更，比如增加html元素的字号，将会导致缓存失效，从而引起整数的布局和重绘。Thanksno Q&ACSSForest.org