《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对象被创建时所涉及的主要类。

                                        图·从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还定义了其他各式各样的类,这里只描述一些主要部分和后面使用到的函数。

                                        图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树的。

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

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

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

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

        上图使用虚线箭头表示两种树的节点对应关系,其中HTMLDocument节点对应RenderView节点,RenderView节点是RenderObject树的根节点。另外,从图中可以看出,WebKit没有为HTMLHeadElement节点(非可视化元素)没有被创建RenderObject子类的对象。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/637736.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【RT-DETR有效改进】Google | EfficientNetV1一种超轻量又高效的网络 (附代码 + 添加教程)

前言 大家好&#xff0c;我是Snu77&#xff0c;这里是RT-DETR有效涨点专栏。 本专栏的内容为根据ultralytics版本的RT-DETR进行改进&#xff0c;内容持续更新&#xff0c;每周更新文章数量3-10篇。 专栏以ResNet18、ResNet50为基础修改版本&#xff0c;同时修改内容也支持Re…

python算法与数据结构---排序和归并排序

学习目标 掌握归并排序的基本原理使用python语言解答归并排序题目 归并排序 原理及过程 将两个有序的数组合并成一个有序数组称为从上往下分解&#xff1a;把当前区间一分为二&#xff0c;直至分解为若干个长度为1的子数组从上往下的合并&#xff1a;两个有序的子区域两两向…

Pytest 测试框架与Allure 测试报告——Allure2测试报告-L1

目录&#xff1a; allure2安装 Allure2介绍Allure2报告展示Allure2报告展示-首页概览Allure2报告展示-用例详情页Allure2安装Allure2下载与安装Allure环境验证插件安装-Python插件安装-Java验证插件安装-Javaallure2运行方式 生成测试报告流程使用Allure2运行方式-Python使用A…

FaFu--练习复盘--3

4、指针的应用 4.1、三角形周长和面积计算程序 描述 已知三角形的三条边的长度&#xff0c;求该三角形的周长和面积&#xff0c;如果三个边不能构成三角形&#xff0c;则三角形的周长和面积都为0。完成程序的编写。 输入 输入1行&#xff0c;包含3个实数&#xff0c;各实数之…

大模型关键技术:上下文学习、思维链、RLHF、参数微调、并行训练、旋转位置编码、模型加速、大模型注意力机制优化、永久记忆、LangChain、知识图谱、多模态

大模型关键技术 大模型综述上下文学习思维链 CoT奖励建模参数微调并行训练模型加速永久记忆&#xff1a;大模型遗忘LangChain知识图谱多模态大模型系统优化AI 绘图幻觉问题从 GPT1 - GPT4 拆解GPTs 对比主流大模型技术点旋转位置编码层归一化激活函数注意力机制优化 大模型综述…

四种方法将 Docker Registry 迁移至 Harbor

Registry Docker Distribution Docker Distribution 是第一个是实现了打包、发布、存储和镜像分发的工具&#xff0c;起到 docker registry 的作用。&#xff08;目前 Distribution 已经捐赠给了 CNCF&#xff09;。其中 Docker Distribution 中的 spec 规范后来也就成为了 O…

在线WebOffce在HTML/VUE/Electron纯前端网页编辑Office之打开Word后自动处于修订模式

在线办公协同办公过程中&#xff0c;对于老板给出的文档修改&#xff0c;如果在错别字方面都要自己一个个字去看的话也太浪费时间了&#xff0c;其实word上就有一个修订模式&#xff0c;可以帮助大家高效完成文档的修改&#xff0c;在线WebOffce在HTML/VUE/Electron纯前端网页编…

Semaphone应用源码分析

Semaphone应用&源码分析 3.1 Semaphore介绍 sync&#xff0c;ReentrantLock是互斥锁&#xff0c;保证一个资源同一时间只允许被一个线程访问 Semaphore&#xff08;信号量&#xff09;保证1个或多个资源可以被指定数量的线程同时访问 底层实现是基于AQS去做的。 Semap…

pinia 的使用方法

使用方式&#xff08;选项式&#xff09; 1、在 mian.js 导入 pinia 里的 createPinia 函数。 2、app.use 这个 createPinia 函数的返回值。 // main.jsimport { createPinia } from pinia;app.use(createPinia()); 3、创建一个 js 文件&#xff08;该文件保存着共享的数据&…

Git和SVN

1、Git Git是一个分布式版本控制系统&#xff0c;由Linus Torvalds创建&#xff0c;用于有效、高速地处理从小到大的项目版本管理。Git是开源的&#xff0c;采取了分布式的版本库的方式&#xff0c;不需要服务器端软件就可以运行。 Git的核心概念 以下是Git中的一些核心概念…

《Python数据分析技术栈》第03章 02 数据结构(Structure of data)

02 数据结构&#xff08;Structure of data&#xff09; 《Python数据分析技术栈》第03章 02 数据结构&#xff08;Structure of data&#xff09; The data that we need to analyze could have any of the following structures, 我们需要分析的数据可能具有以下任何一种结…

RabbitMQ-数据持久化

一、持久化类型 1、交换机持久化&#xff08;SpringAMQP默认&#xff09; 2、队列持久化&#xff08;SpringAMQP默认&#xff09; 3、消息持久化 二、消息持久化 1、纯内存操作 如果采用纯内存操作&#xff0c;那么消息存储达到队列的上限之后&#xff0c;会有一个page ou…

开源进程/任务管理服务Meproc使用之HTTP API

本文讲述如何使用开源进程/任务管理服务Meproc的HTTP API管理整个服务。 Meproc所提供的全部 API 的 URL 都是相同的。 http://ip:port/proc例如 http://127.0.0.1:8606/proc在下面的小节中&#xff0c;我们使用curl命令向您展示 API 的方法、参数和请求正文。 启动任务 …

git 常规操作及设置

git 常规操作及设置 Git是一个分布式版本控制系统&#xff0c;可以用来跟踪文件的修改历史并与其他人进行协作开发。下面是一些常见的Git操作及设置&#xff1a; 初始化仓库&#xff1a;使用命令git init在当前目录创建一个新的Git仓库。 克隆仓库&#xff1a;使用命令git clo…

TCP/IP协议及配置、IP地址、子网掩码、网关地址、DNS与DHCP介绍

一、什么是服务器 能够为其他计算机提供服务的更高级的电脑 尺寸:Unit 1u1.75英寸44.45mm4.445cm IDC&#xff08;机房&#xff09; C/S结构 Client/Server客户端和服务端 二、TCP/IP协议 计算机与计算机之间通信的协议 三要素&#xff1a; IP地址 子网掩码 IP路由 I…

基于一次应用卡死问题所做的前端性能评估与优化尝试

问题背景 在上个月&#xff0c;由于客户反馈客户端卡死现象但我们远程却难以复现此现象&#xff0c;于是我们组织了一次现场上门故障排查&#xff0c;并希望基于此次观察与优化&#xff0c;为客户端开发提供一些整体的优化升级。当然&#xff0c;在尝试过程中&#xff0c;也发…

大模型实战营Day6 作业

基础作业 使用 OpenCompass 评测 InternLM2-Chat-7B 模型在 C-Eval 数据集上的性能 环境配置 conda create --name opencompass --clone/root/share/conda_envs/internlm-base source activate opencompass git clone https://github.com/open-compass/opencompass cd openco…

eMMC之分区管理、总线协议和工作模式

一、eMMC 简介 eMMC 是 embedded MultiMediaCard 的简称。MultiMediaCard&#xff0c;即MMC&#xff0c; 是一种闪存卡&#xff08;Flash Memory Card&#xff09;标准&#xff0c;它定义了 MMC 的架构以及访问 Flash Memory 的接口和协议。而eMMC 则是对 MMC 的一个拓展&…

android 13.0 Camera2 去掉后置摄像头 仅支持前置摄像头功能

1.概述 在定制化13.0系统rom定制化开发中,当产品只有一个前置摄像头单摄像头,这时调用相机时就需要默认打开前置摄像头就需要来看调用摄像头这块的代码,屏蔽掉后置摄像头的调用api就可以了,接下来就来具体实现相关功能的开发 2.Camera2 去掉后置摄像头 仅支持前置摄像头功…

【Docker】使用Docker安装Nginx及部署前后端分离项目应用

一、Nginx介绍 Nginx是一个高性能的HTTP和反向代理web服务器&#xff0c;同时也提供了IMAP/POP3/SMTP服务。它是由伊戈尔赛索耶夫为俄罗斯访问量第二的Rambler.ru站点开发的&#xff0c;公开版本1.19.6发布于2020年12月15日。其将源代码以类BSD许可证的形式发布&#xff0c;因它…