现在的位置: 首页 > 综合 > 正文

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

2019年02月10日 ⁄ 综合 ⁄ 共 2370字 ⁄ 字号 评论关闭

一、各浏览器使用的内核

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

  • 从网络层获得数据后,渲染引擎开始于从网络层获取请求内容,一般是不超过8K的数据块,将数据交给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树建立之后,布局运算会计算出相关的属性,这其中有位置,大小,是否浮动等。有了这些信息之后,渲染引擎才只知道在何处以及如何画这些元素。

抱歉!评论已关闭.