前端知识--浏览器是如何根据文本渲染的

一、各浏览器使用的内核

Apple的Safari, Google的Chrome, NOKIA S60平台的默认浏览器，Apple手机的默认浏览器，Android手机的默认浏览器都采用的Webkit作为器浏览器内核。成主流的三大浏览器内核之一，另外两个分别是Gecko和Trident，Firefox便是使用的Gecko 内核，而微软的IE系列则使用的是Trident内核。

二、浏览器如何渲染

1 渲染引擎渲染的总体流程

       浏览器的工作是如何渲染，渲染引擎的职责是渲染，也就是把请求的内容显示到浏览器屏幕上，Web浏览器的输入是一个HTML文档，输出则是一个我们用眼睛所看到的一个Web页面。默认情况下渲染引擎可以显示HTML，XML文档以及图片。 通过插件（浏览器扩展程序）它可以显示其它类型文档。比如使用PDF viewer插件显示PDF文件。

       FIREFOX, Safari两种浏览器构建于两种渲染引擎之上：

•        Firefox使用Gecko 渲染引擎；
•        SAFARI 和 Chrome 都使用 Webkit 渲染引擎。

 Webkit 是一个开源的渲染引擎，它源自Linux平台上的一个引擎，经过Apple公司的修改可以支持Mac与Windows平台。

渲染引擎的基本工作流程：

 

                                     渲染引擎的基本工作流程（ 解析HTML构建DOM树，渲染树构建，渲染树布局，绘制渲染树）

Webkit主要流程：

Mozilla的Gecko渲染引擎主要流程：

两者比较：

       Webkit与Gecko使用略微不同的术语，这个过程还是基本相同的。Gecko 里把格式化好的可视元素称做“帧树”（Frame tree）。每个元素就是一个帧（frame）。 Webkit 则使用”渲染树”这个术语，渲染树由”渲染对象”组成。Webkit 里使用”layout”表示元素的布局，Gecko则称为”Reflow”。Webkit使用” ATTACHMENT”来连接DOM节点与可视化信息以构建渲染树。一个非语义上的小差别是Gecko在HTML与DOM树之间有一个附加的层 ，称作”content sink”，是创建DOM对象的工厂。

2  解析树和渲染树的构建

1）HTMLDocumentPaser的作用

       webkit中每个html页面对应于一颗dom树（DOM的全称为：Document Object Model） 和render树。dom用于描述html页面的的信息，而render树则用于布局，具体负责dom树如何显示在屏幕上从MVC的角度来说，可以将render树看成是V，dom树看成是M，C则是具体的调度者，比HTMLDocumentParser等。

       webkit的解析html文本过程，HTML文档，是生成HTMLDocumentParser，对于其他的XML文档，自行设计对应的Parser,对于上层是需要拿到一个DocumentParser

• 从网络层获得数据后，渲染引擎开始于从网络层获取请求内容，一般是不超过8Ｋ的数据块，将数据交给HTMLDocumentParser；
• HTMLDocumentParser将文本字符的解析交给HTMLDocumentTokenizer来负责；
• HTMLDocumentTokenizer解析出一个一个的标签（html文档时是以标签为单位）, HTMLDocumentParser将标签交给HTMLTreeBuilder来构建dom树；
• HTMLParserScheduler中的职责是实现异步解析（不太了解）；
• HTMLScriptRunner主要是用来运行脚本；
  
  

2）类图document与parser之间的类图。

 
这里的HTMLDocumentParser从MVC的角度来看，其作用和地位应该是C，这样，MVC各兼其责，最终生成一颗render树，将其显示在屏幕上。每生成一个dom节点，就会去创建对应的render节点。

3）DOM树的建立

因为解析是渲染引擎中一个很重要的处理，解析一个文档意味着把它翻译成有意义的结构以供代码使用。解析的结果通常是一个表征文档的由节点组成的树，称为解析树或句法树。

类似示例——解析表达式”2 + 3 – 1″可以返回下面的树。

HTML解析器(HTMLDocumentParser)的工作是解析HTML标签到解析树。解析器输出的树是由DOM元素和属性节点组成的。它是HTML文档的对象化描述，也是HTML元素与外界（如Javascript）的接口。

实例：

< html >      < body >          < p >              Hello , MT World！          </ p >          < div >              < img  src = "1.png" />          </ div >      </ body > </ html >

会被转换成如的DOM树：

4）Render树的建立

render树是基于DOM树建立起来的一颗新的树， 是布局和渲染等机制的基础设施。 Render树节点和DOM树节点不是一一对应关系，一般在下面的情况下需要建立新的Render节点：

• DOM树的document节点；

• DOM树中的可视化节点，例如HTML，BODY，DIV等，非可视化节点不会建立Render树节点，例如HEAD，SCRIPT等；
• 某些情况下需要建立匿名的Render节点，该节点不对应于DOM树中的任何节点；

RenderObject对象在DOM树创建的同时也会被创建，当然，如果DOM中有动态加入元素时，也可能会相应地创建RenderObject对象。render树建立之后，布局运算会计算出相关的属性，这其中有位置，大小，是否浮动等。有了这些信息之后，渲染引擎才只知道在何处以及如何画这些元素。