《WebKit 技术内幕》学习之七(1): 渲染基础

这篇具有很好参考价值的文章主要介绍了《WebKit 技术内幕》学习之七(1): 渲染基础。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

《WebKit 技术内幕》之七(1): 渲染基础

        WebKit的布局计算使用 RenderObject 树并保存计算结果到 RenderObject 树。
RenderObject 树同其他树(如 RenderLayer 树等),构成了 WebKit 渲染的为要基础设施。

1 RenderObject树

1.1 RenderObject基础类

        为了解释说明渲染原理,首先使用一个网页示例代码来说明。示例代码7-1是一个网页的源代码,它的结构很简单,主要由一些HTML基本元素组成,例如html、head、div、a、img、table等,然后它还包含了一个特别的HTML5元素——canvas,而且还有一小段JavaScript代码。考虑到一些没有很强HTML5背景的读者,简单解释一下这段JavaScript代码的含义。这段代码是为“canvas”元素创建一个WebGL(3D绘图技术)的上下文对象(Context),有了这个对象,Web开发者就可以在canvas元素上绘制任何3D的内容。这个类似于OpenGL或者OpenGLES的上下文概念,关于canvas元素、canvas2D和WebGL会在GPU加速内容中做介绍。

示例代码 : 一个简单的网页示例源代码

<!DOCTYPE html>
<html lang="en">

<head></head>

<body>
    <div>abc</div>
    <canvas id="webg1" width="80" height="80"></canvas>
    <a href="mailto:joe@example.com?subject=feedback">email me</a>
    <img src="" alt="">
    <input type="button" name="" />
    <select name="" multiple>
        <option value="">option</option>
    </select>
    <table>
        <tr>
            <td>data</td>
        </tr>
    </table>
    <script>
    var canvas = document.getElementById('webg1')
    var g1 = canvas.getContext('experimental-webg1')
    if (g1) {
        alert("There's no WebGl context available. ")
        return
    }
    </script>
</body>

</html>

        上面的代码经过WebKit解释之后,生成的DOM树读者应该能够很容易想象得出。在DOM树构建完成之后,WebKit所要做的事情就是为DOM树节点构建RenderObject树。那么什么是RenderObject呢?它的作用是什么呢?下面笔者就逐步来揭开它的面纱。

        在DOM树中,某些节点是用户不可见的,也就是说这些只是起一些其他方面而不是显示内容的作用。例如表示HTML文件头的“meta”节点,在最终的显示结果中,用户是看不到它的存在的,笔地称之为“非可视化节点”。该类型其实还包含很多元素,例如示例代码7-1中的“head”、“script”等。而另外的节点就是用来展示网页内容的,例如示例代码7-1中的“body”、“div”、“span”、“canvas”、“img”等,这些节点可以显示一块区域,如文字、图片、2D图形等,被称为“可视节点”。

        对于这些“可视节点”,因为WebKit需要将它们的内容绘制到最终的网页结果中,所以WebKit会为它们建立相应的RenderObject对象。一个RenderObject对象保存了为绘制DOM节点所需要的各种信息,例如样式布局信息,经过WebKit的处理之后,RenderObject对象知道如何绘制自己。这些RenderObject对象同DOM的节点对象类似,它们也构成一棵树,在这里我们称之为RenderObject树。RenderObject树是基于DOM树建立起来的一棵新树,是为了布局计算和渲染等机制而构建的一种新的内部表示。RenderObject树节点和DOM树节点不是一一对应关系,那么哪些情况下为一个DOM节点建立新的RenderObject对象呢?以下是三条规则,从这些规则出发会为DOM树节点创建一个RenderObject对象。

  • DOM树的document节点。
  • DOM树中的可视节点,例如html、body、div等。而WebKit不会为非可视化节点创建RenderObject节点,例如上面提到的一些例子。
  • 某些情况下WebKit需要建立匿名的RenderObject节点,该节点不对应于DOM树中的任何节点,而是WebKit处理上的需要,典型的例子就是匿名的RenderBlock节点。

        前面介绍了影子DOM,那么WebKit该如何处理影子DOM树中的节点呢?WebKit处理影子DOM没有什么特别的不同,虽然JavaScript代码没法访问影子DOM,但是WebKit需要创建并渲染RenderObject。

        WebKit在创建DOM树被创建的同时也创建RenderObject对象。当然,如果DOM树被动态加入了新节点,WebKit也可能创建相应的RenderObject对象。下图示例的是RenderObject对象被创建时所涉及的主要类。

《WebKit 技术内幕》学习之七(1): 渲染基础,webkit学习,C/C++,系统内核,webkit,C/C++,内核编程,浏览器

                                        图·从DOM节点到创建RenderObject节点

        每个Element对象都会递归调用“attach”函数,该函数检查Element对象是否需要创建RenderObject。如果需要,该函数会使用NodeRenderingContext类来根据DOM节点的类型来创建对应的RenderObject节点。

        DOM树中,元素节点包含很多类型。同DOM树一样,RenderObject树中的节点也有很多类型。下图描述了RenderObject类和它的主要子类。图中间的是RenderObject类,它包含了RenderObject的主要虚函数,大概可以分成以下几类。

  • 为了遍历和修改RenderObject树而涉及的众多函数,遍历操作函数如parent()、firstChild()、nextSibling()、previousSibling()等,修改操作函数如addChild()、removeChild()等。
  • 用来计算布局和获取布局相关信息的函数,例如layout()、style()、enclosingBox()。
  • 用来判断该RenderObject对象属于哪种类型的子类,这里面有各式各样的类似“IsASubClass”的函数,这些函数可以知道它们的类型以作相应的转换。
  • 跟RenderObject对象所在的RenderLayer对象相关的操作,这些操作将在下一节中再描述。
  • 坐标和绘图相关的操作,WebKit使用这些操作让RenderObject对象将内容绘制在传入的绘制结果对象中,例如paint()、repaint()等。

其实WebKit还定义了其他各式各样的类,这里只描述一些主要部分和后面使用到的函数。

《WebKit 技术内幕》学习之七(1): 渲染基础,webkit学习,C/C++,系统内核,webkit,C/C++,内核编程,浏览器

                                        图RenderObject基类和它的主要子类

        RenderBoxModelObject类是描述所有跟CSS中的框模型相关联类的基类,所以读者能够看到子类例如RenderInline类(div:inline-box)和RenderBox类。RenderBox类则是使用箱子模型的类,它包括了外边距、边框、内边距和内容等信息。

        RenderBlock类用来表示块元素。为了处理上的方便,WebKit某些情况下需要建立匿名的RenderBlock对象,因为RenderBlock的子女必须都是内嵌的元素或者都是非内嵌的元素。所以,当RenderBlock对象包含两种元素的时候,WebKit会为相邻的内嵌元素创建一个块节点,也就是RenderBlock对象,然后设置该对象为原先内嵌元素父亲的子女,最后设置这些内嵌元素为RenderBlock对象的子女。由于匿名RenderObject对象它没有对应的DOM树中的节点,所以WebKit统一使用Document节点来对应匿名对象。

        还有很多RenderObject类的子类并没有在图中表示出来,典型的如RenderVideo类,它继承自RenderImage类。

1.2 RenderObject树

        RenderObject对象构成了一棵树。RenderObject树的创建过程主要是由NodeRenderingContext类来负责,下图描述了WebKit如何创建RenderObject对象并构建RenderObject树的。

《WebKit 技术内幕》学习之七(1): 渲染基础,webkit学习,C/C++,系统内核,webkit,C/C++,内核编程,浏览器

                        图 RenderObject对象和RenderObject树的创建过程

        基本思路是,首先WebKit检查该DOM节点是否需要创建RenderObject对象。如果需要,WebKit建立或者获取一个创建RenderObject对象的NodeRenderingContext对象,NodeRenderingContext对象会分析需要创建的RenderObject对象的父亲节点、兄弟节点等,设置这些信息后完成插入树的动作。

                那么建立后的RenderObject树和DOM树之间的对应关系是怎么样的呢?根据示例代码中网页的源代码,WebKit中的DOM树表示如下图左边所示的结构(省略了一些次要节点),下图右边描述的就是WebKit中对应的RenderObject树。

《WebKit 技术内幕》学习之七(1): 渲染基础,webkit学习,C/C++,系统内核,webkit,C/C++,内核编程,浏览器

                                图DOM树节点和RenderObject树的对应关系

        上图使用虚线箭头表示两种树的节点对应关系,其中HTMLDocument节点对应RenderView节点,RenderView节点是RenderObject树的根节点。另外,从图中可以看出,WebKit没有为HTMLHeadElement节点(非可视化元素)没有被创建RenderObject子类的对象。文章来源地址https://www.toymoban.com/news/detail-816973.html

到了这里,关于《WebKit 技术内幕》学习之七(1): 渲染基础的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 《WebKit 技术内幕》学习之十二(2):安全机制

    2.1 原理         一般而言,对于网络上的网页中的JavaScript代码和插件是不受信的(除非是经过认证的网站),特别是一些故意设计侵入浏览器运行的主机代码更是非常危险,通过一些手段或者浏览器中的漏洞,这些代码可能获取了主机的管理权限,这对主机系统来说是非

    2024年01月25日
    浏览(43)
  • 《WebKit 技术内幕》学习之九(1): JavaScript引擎

    1 概述 1.1 JavaScript语言         说起JavaScript语言,又要讲一个典型的从弱小到壮大的奋斗史。起初,它只是一个非常不起眼的语言,用来处理非常小众的问题。所以,从设计之初,它的目标就是解决一些脚本语言的问题,因为设计的能力有限,性能不需要重点考虑。因为

    2024年01月25日
    浏览(48)
  • 《WebKit 技术内幕》学习之八(2):硬件加速机制

    2.1 GraphicsLayer的支持         GraphicsLayer对象是对一个渲染后端存储中某一层的抽象,同众多其他WebKit所定义的抽象类一样,在WebKit移植中,它还需要具体的实现类来支持该类所要提供的功能。为了完成这一功能,Chromium提供了更为复杂的设施类,这一节主要介绍从Graphics

    2024年01月25日
    浏览(40)
  • 《WebKit 技术内幕》学习之十一(2):多媒体

    2.1 HTML5视频         在HTML5规范定义中,Web开发者可以使用“video”元素来播放视频资源。视频中有个重要的问题就是视频编码格式,对此,目前标准中包含了三种编码格式,它们分别是Ogg、MPEG4和WebM。其中Ogg是由Xiph.org组织开发的一个开放标准,不需要任何授权费用,它

    2024年01月23日
    浏览(37)
  • 《WebKit 技术内幕》学习之十一(3):多媒体

    3.1 音频元素         说完视频之后,接下来就是HTML5中对音频的支持情况。音频支持不仅指对声音的播放,还包括对音频的编辑和合成,以及对乐器数字接口(MIDI)等的支持,下面逐次介绍并分析它们。 3.1.1 HTML5 Audio元素         说到音频,最简单当然也是最直接想

    2024年01月25日
    浏览(36)
  • 《WebKit 技术内幕》学习之十一(1):多媒体

            说到浏览器对多媒体的支持,不得不提的就是Flash插件和HTML5之争。Flash对Web的发展起了非常重要的作用,它能够支持视频、音频、动画等多媒体功能,虽然现在大家都在讨论Web前端领域是否应该丢弃Flash插件转而支持HTML5。在本章中,笔者将回顾Web前端中的多媒体

    2024年01月25日
    浏览(39)
  • 《WebKit 技术内幕》学习之四(3): 资源加载和网络栈

    3. 网络栈 3.1 WebKit的网络设施         WebKit的资源加载其实是交由各个移植来实现的,所以WebCore其实并没有什么特别的基础设施,每个移植的网络实现是非常不一样的。         从WebKit的代码结构中可以看出,网络部分代码的确比较少的,它们都在目录“WebKit/Source/WebCore/

    2024年02月20日
    浏览(41)
  • 《WebKit 技术内幕》学习之十(4): 插件与JavaScript扩展

    4.1 原理         Chromium的扩展(Extension)机制 (1) 原先是Chromium推出的一项技术,该机制能够扩展浏览器的能力,例如笔者使用的一个扩展实例名为“switchy proxy”,它可以帮助用户方便的切换Chromium浏览器代理,但是也仅此而已。本质上,它其实就是浏览器能力的简单扩

    2024年01月25日
    浏览(39)
  • 《WebKit 技术内幕》学习之五(3): HTML解释器和DOM 模型

    3 DOM的事件机制         基于 WebKit 的浏览器事件处理过程:首先检测事件发生处的元素有无监听者,如果网页的相关节点注册了事件的监听者则浏览器会将事件派发给 WebKit 内核来处理。另外浏览器可能也需要处理这样的事件(浏览器对于有些事件必须响应从而做出默认

    2024年01月22日
    浏览(39)
  • 《WebKit 技术内幕》学习之五(4): HTML解释器和DOM 模型

    4 影子(Shadow)DOM         影子 DOM 是一个新东西,主要解决了一个文档中可能需要大量交互的多个 DOM 树建立和维护各自的功能边界的问题。 4.1 什么是影子 DOM         当开发这样一个用户界面的控件——这个控件可能由一些 HTML 的标签元素组成,这些元素可以组成一

    2024年01月25日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包