浏览器的工做原理幕后揭秘的部分笔迹摘要

时间 2019-11-12

标签浏览器原理幕后揭秘部分笔迹摘要栏目浏览器繁體版

原文原文链接

之前或多或少看过几位比较牛逼的工程师写过浏览器工做原理的分析文章，虽然很好很强大的样子，可是看完总以为本身对浏览器工做原理没有一个全局的度，老是欠缺了好多；html

耐不住寂寞啊，就跑去坚果看过去收藏的一篇旧文，一篇冗长的，长达数万字的文章，而后..........而后就把边看边给本身作一个摘要，之后须要那部分的知识就看哪里。文章部份内容为我断章取义和本身标注部分理解，原文在这里算法

浏览器主要组件：后端

　　用户界面、浏览器引擎、呈现引擎、网络、用户界面后端、JavaScript 解释器、数据存储浏览器

　　　呈现引擎

　　解析html->dom树->绘制dom树结构（这期间附加style rules）->布局dom数据(reflow)->浏览器中绘制->呈现网络

　　解析引擎

　　　　经过解析器和词法分析器组合（其中格局各类规则、词汇、语法构建解析树,各类云云) 　　并发

　　标记化算法

　　 (根据标记化算法生成html标记dom

　　　　初始状态是数据状态。遇到字符 < 时，状态更改成“标记打开状态”。接收一个 a-z 字符会建立“起始标记”，状态更改成“标记名称状态”。这个状态会一直保持到接收 > 字符。在此期间接收的每一个字符都会附加到新的标记名称上。在本例中，咱们建立的标记是 html 标记。异步

　　　　遇到 > 标记时，会发送当前的标记，状态改回“数据状态”。<body> 标记也会进行一样的处理。目前 html 和 body 标记均已发出。如今咱们回到“数据状态”。接收到 Hello world 中的 H 字符时，将建立并发送字符标记，直到接收 </body> 中的 <。咱们将为 Hello world 中的每一个字符都发送一个字符标记。布局

　　　　如今咱们回到“标记打开状态”。接收下一个输入字符 / 时，会建立 end tag token 并改成“标记名称状态”。咱们会再次保持这个状态，直到接收 >。而后将发送新的标记，并回到“数据状态”。</html> 输入也会进行一样的处理。优化

构建dom树流程:

　　 initial mode->before html(建立一个 HTMLHtmlElement 元素，并将其附加到 Document 根对象上) -> before head(没有“head”标记，系统也会隐式建立一个 HTMLHeadElement，并将其添加到树中)->in head(构建head内的标签)->after head(建立并插入 HTMLBodyElement,插入document中)->in body（构建body内的标签,知道接受</body>结束并触发下一模式）->after body(接收 HTML 结束标记)->after after body(解析结束)。

　　解析结束后的操做：

　　在此阶段，浏览器会将文档标注为交互状态，并开始解析那些处于“deferred”模式的脚本，也就是那些应在文档解析完成后才执行的脚本。而后，文档状态将设置为“完成”，一个“加载”事件将随之触发。

　　浏览器的容错机制：

非标准标记标签
元素之间的嵌套有误
离散表格
在一个表单元素中又放入了另外一个表单
复杂的标记层次结构
放错位置的 html 或者 body 结束标记（在构建dom树的时候解析不是真正意义上的根据</body></html>中止解析，调用 end() 来执行关闭操做）等等

CSS 解析：

　　和 HTML 不一样，CSS 是上下文无关的语法，解析器会将 CSS 文件解析成 StyleSheet 对象，且每一个对象都包含 CSS 规则。CSS 规则对象则包含选择器和声明对象，以及其余与 CSS 语法对应的对象

处理脚本和样式表的顺序

　　脚本

　　网络的模型是同步的。网页做者但愿解析器遇到 <script> 标记时当即解析并执行脚本。文档的解析将中止，直到脚本执行完毕。若是脚本是外部的，那么解析过程会中止，直到从网络同步抓取资源完成后再继续。此模型已经使用了多年，也在 HTML4 和 HTML5 规范中进行了指定。做者也能够将脚本标注为“defer”，这样它就不会中止文档解析，而是等到解析结束才执行。HTML5 增长了一个选项，可将脚本标记为异步，以便由其余线程解析和执行。

　　预解析

　　Webkit 和 Firefox 都进行了这项优化。在执行脚本时，其余线程会解析文档的其他部分，找出并加载须要经过网络加载的其余资源。经过这种方式，资源能够在并行链接上加载，从而提升整体速度。请注意，预解析器不会修改 DOM 树，而是将这项工做交由主解析器处理；预解析器只会解析外部资源（例如外部脚本、样式表和图片）的引用。

　　样式表

　　另外一方面，样式表有着不一样的模型。理论上来讲，应用样式表不会更改 DOM 树，所以彷佛没有必要等待样式表并中止文档解析。但这涉及到一个问题，就是脚本在文档解析阶段会请求样式信息。若是当时尚未加载和解析样式，脚本就会得到错误的回复，这样显然会产生不少问题。这看上去是一个非典型案例，但事实上很是广泛。Firefox 在样式表加载和解析的过程当中，会禁止全部脚本。而对于 Webkit 而言，仅当脚本尝试访问的样式属性可能受还没有加载的样式表影响时，它才会禁止该脚本。

..........还在进行中