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

2 网页层次和RenderLayer树

2.1 层次和RenderLayer对象

        前面章节介绍了网页的层次结构,也就是说网页是可以分层的,这有两点原因,一是为了方便网页开发者开发网页并设置网页的层次,二是为了WebKit处理上的便利,也就是说为了简化渲染的逻辑。

        WebKit会为网页的层次创建相应的RenderLayer对象。当某些类型RenderObject的节点或者具有某些CSS样式的RenderObject节点出现的时候,WebKit就会为这些节点创建RenderLayer对象。一般来说,某个RenderObject节点的后代都属于该节点,除非WebKit根据规则为某个后代RenderObject节点创建了一个新的RenderLayer对象。

        RenderLayer树是基于RenderObject树建立起来的一棵新树。根据上面所述笔者可以得出这样的结论:RenderLayer节点和RenderObject节点不是一一对应关系,而是一对多的关系。那么哪些情况下的RenderObject节点需要建立新的RenderLayer节点呢?以下是基本规则。

  • DOM树的Document节点对应的RenderView节点。
  • DOM树中的Document的子女节点,也就是HTML节点对应的RenderBlock节点。
  • 显式的指定CSS位置的RenderObject节点。
  • 有透明效果的RenderObject节点。
  • 节点有溢出(Overflow)、alpha或者反射等效果的RenderObject节点。
  • 使用Canvas 2D和3D (WebGL)技术的RenderObject节点。
  • Video节点对应的RenderObject节点。

        除了根节点也就是RenderLayer节点,一个RenderLayer节点的父亲就是该RenderLayer节点对应的RenderObject节点的祖先链中最近的祖先,并且祖先所在的RenderLayer节点同该节点的RenderLayer节点不同。基于这一原理,这些RenderLayer节点也构成了一棵RenderLayer树。

        每个RenderLayer节点包含的RenderObject节点其实是一棵RenderObject子树。理想情况下,每个RenderLayer对象都会有一个后端类,该后端类用来存储该RenderLayer对象绘制的结果。实际情况中则比较复杂,在不同的渲染模式下,不同WebKit的移植中,情况都不一样,这些在后面介绍。RenderLayer节点的使用可以有效地减小网页结构的复杂程度,并在很多情况下能够减少重新渲染的开销。

        在WebKit创建RenderObject树之后,WebKit也会创建RenderLayer树。当然某些RenderLayer节点也有可能在执行JavaScript代码时或者更新页面的样式被创建。同RenderObject类不同的是,RenderLayer类没有子类,它表示的是网页的一个层次,并没有“子层次”的说法。

2.2 构建RenderLayer树

        RenderLayer树的构建过程其实非常简单,甚至比构建RenderObject树还要简单。根据前面所述的条件来判断一个RenderObject节点是否需要建立一个新的RenderLayer对象,并设置RenderLayer对象的父亲和兄弟关系即可,这里不再介绍。

        为了直观地理解RenderLayer树,根据示例代码中的源代码,WebKit中的RenderObject树表示如图7-5左边所示的结构(省略了一些节点),图7-5的右边描述的就是WebKit所生成的对应RenderLayer树。根据RenderLayer对象创建的条件来看,该示例代码的RenderLayer树应该包含三个RenderLayer节点——根节点和它的子女,以及叶节点。

                                图 RenderObject树和RenderLayer树的关系

        在上一章,笔者介绍了布局计算,本章紧接着又介绍了RenderObject树和RenderLayer树,通过一些示意图,相信读者应该理解这些概念的含义。下面来看一下示例代码7-1在WebKit中的实际内部表示和布局信息,图7-6是WebKit内部表示的具体结构RenderObject树、RenderLayer树和布局信息中的大小和位置信息。下面根据RenderLayer树的节点来分析它们。

        首先,图=中的“layer at (x, x)”表示的是不同的RenderLayer节点,下面所有RenderObject子类的对象均属于该RenderLayer对象。以第一个RenderLayer节点为例,它对应于DOM树中的Document节点。后面的“(0, 0)”表示该节点在网页坐标系中的位置,最后的“1028×683”信息表示该节点的大小,第一层包含的RenderView节点后面的信息也是同样的意思。

        图 示例代码的布局信息、RenderObject树和RenderLayer树

        其次,读者仔细查看其中最大的部分,也就是第二个layer,其包含了HTML中的绝大部分元素。这里有三点需要解释一下:第一,“head”元素没有相应的RenderObject对象,如上面所解释的,因为“head”不是一个可视的元素;第二,“canvas”元素并在第二个layer中,而是在第三个layer(RenderHTMLCanvas)中,虽然该元素仍然是RenderBody节点的子女;第三,该layer层中包含一个匿名(Anonymous)的RenderBlock节点,该匿名节点包含了RenderText和RenderInline等子节点,原因之前已经介绍过。

        再次,来看一下第三个layer层,也就是最下面的层。因为JavaScript代码为“canvas”元素创建了一个WebGL的3D绘图上下文对象,WebKit需要重新生成一个新的RenderLayer对象。

        最后,来说明一下三个层次的创建时间。在创建DOM树之后,WebKit会接着创建第一个和第二个layer层。但是,第三个RenderLayer对象是在WebKit执行JavaScript代码时才被创建的,这是因为WebKit需要检查出JavaScript代码是否为“canvas”确实创建了3D绘图上下文,而不是在遇到“canvas”元素时创建新的RenderLayer对象。

        基于上面的描述,相信大家已经对布局计算结果、RenderObject树和RenderLayer树有了更进一步的了解。

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

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

相关文章

【表情识别阅读笔记】Towards Semi-Supervised Deep FER with An Adaptive Confidence Margin

论文名: Towards Semi-Supervised Deep Facial Expression Recognition with An Adaptive Confidence Margin 论文来源: CVPR 发表时间: 2022-04 研究背景: 对大量图片或视频进行手工标注表情是一件极其繁琐的事情,因此…

TCP高并发服务器简介(select、poll、epoll实现与区别)

select、poll、epoll三者的实现: select实现TCP高并发服务器的流程: 一、创建套接字(socket函数):二、填充服务器的网络信息结构体:三、套接字和服务器的网络信息结构体进行绑定(bind函数&…

2024 前端高频面试题之 HTML/CSS 篇

【前言】随着市场的逐渐恶劣,通过总结面试题的方式来帮助更多的coder,也是记录自己的学习过程,温故而知新。欢迎各位同胞大大点评补充~ 前端面试题之 HTML/CSS 篇 1、HTML 语义化?2、块级元素&内联样式3、盒子模型的理解&…

qml 2.8 布局练习

GreenSquare.qml import QtQuickRectangle {width: 100height: 100color: greenborder.color: Qt.lighter(color) } BlueSquare.qml import QtQuickRectangle {color: bluewidth: 50height: 50border.color: Qt.lighter(color)property alias text: label.text //将text开…

linux C语言socket函数send

在Linux中,使用C语言进行网络编程时,send函数是用于发送数据到已连接的套接字的重要函数之一。它通常用于TCP连接,但也可以用于UDP(尽管对于UDP,通常更推荐使用sendto,因为它允许你指定目标地址和端口&…

Git学习笔记(第8章):IEAD实现GitHub操作(VSCode)

目录 8.1 VSCode登录GitHub账号 8.2 创建远程库 8.3 本地库推送到远程库(push) 8.4 远程库拉取到本地库(pull) 8.5 远程库克隆到本地库(clone) 8.1 VSCode登录GitHub账号 Step1:安装“GitHub Pull Requests and Issues”插件 Step2:登录GitHub账号 …

Yolov8不废话!参考手册!

Yolov8使用 yolo taskdetect modetrain modelyolov8n.pt args...classify predict yolov8n-cls.yaml args...segment val yolov8n-seg.yaml args...export yolov8n.pt formatonnx args...使用Ultralytics YOLO进行模型训练 …

pygame入门学习(四)位图的使用

大家好!我是码银🥰 欢迎关注🥰: CSDN:码银 公众号:码银学编程 载入图片 pygame.image.load( ),Pygame 可以通过pygame.image.load( )函数处理位图文件。 大致可以支持以下文件:JPG…

一.Winform使用Webview2(Edge浏览器核心) 创建demo(Demo1)实现回车导航到指定地址

Winform使用Webview2创建demo1实现回车导航到指定地址 往期目录参考文档实现1.安装visual studio2.创建单窗口应用3.修改项目中的窗体名称MainForm4.添加按钮5.添加窗口Demo16.在Demo1中添加WebView2 SDK7.在Demo1窗体中选择添加textbox和webview28.在MainForm.cs窗体中添加but…

PyTorch 添加 C++ 拓展

参考内容:pytorch添加C拓展简单实战编写及基本功能测试 文章目录 第一步:编写 C 模块test.htest.cpp 第二步:编写 setup.py第三步:安装 C 模块第四步:验证安装第五步:C 模块使用test_cpp1.pytest_cpp2.py 运…

yolov8的目标检测、实例分割、关节点估计的原理解析

1 YOLO时间线 这里简单列下yolo的发展时间线,对每个版本的提出有个时间概念。 2 yolov8 的简介 工程链接:https://github.com/ultralytics/ultralytics 2.1 yolov8的特点 采用了anchor free方式,去除了先验设置可能不佳带来的影响借鉴General…

跑步运动耳机哪个牌子好?2024年国产运动耳机推荐

​无论春夏秋冬,无论室内还是户外,运动都能带给我们无尽的乐趣。而一副好的运动耳机,更能为我们的运动体验增色不少。今天,就让我为大家推荐几款值得一试的运动耳机吧。 1.南卡开放式耳机(00压) 一句话评价…

VUE项目目录与运行流程(VScode)

各目录对应名称含义 main.js(导入App.vue,基于App.vue创建结构渲染index.html) //核心作用:导入App.vue,基于App.vue创建结构渲染index.html//1.导入Vue核心包 import Vue from vue//2.导入App.vue根组件 import App f…

如何在 Ubuntu 22.04 上安装 Linux、Apache、MySQL、PHP (LAMP) 堆栈

前些天发现了一个人工智能学习网站,通俗易懂,风趣幽默,最重要的屌图甚多,忍不住分享一下给大家。点击跳转到网站。 如何在 Ubuntu 22.04 上安装 Linux、Apache、MySQL、PHP (LAMP) 堆栈 介绍 “LAMP”堆栈是一组开源软件&#…

基于ssm框架的网上购物系统-计算机毕业设计源码12503

摘 要 近年来,随着移动互联网的快速发展,电子商务越来越受到网民们的欢迎,电子商务对国家经济的发展也起着越来越重要的作用。简单的流程、便捷可靠的支付方式、快捷畅通的物流快递、安全的信息保护都使得电子商务越来越赢得网民们的青睐。现…

控制项目进展

优质博文 IT-BLOG-CN 假如一个项目准备工作做的非常周详,现在要做的就是监督项目的进展情况,理想状况下事情应当进展的很顺利,但实际上我们会发现项目永远不会完全按照经计划执行,我们必须进行项目控制。也就是我们需要不断进行调…

创建SERVLET

创建SERVLET 要创建servlet,需要执行以下任务: 编写servlet。编译并封装servlet。将servlet部署为Java EE应用程序。通过浏览器访问servlet。编写servlet 要编写servlet,需要扩展HttpServlet接口的类。编写servlet是,需要合并读取客户机请求和返回响应的功能。 读取和处…

安全审查常见要求

一、是否有密码复杂度策略、是否有密码有效期 1)密码长度至少8位; 2)要求用户密码必须包含大小写字母、数字、特殊字符 3)避免常见密码 123456,qwerty, password; 4) 强制用户定期修改密码; 5&#x…

分布式深度学习中的数据并行和模型并行

🎀个人主页: https://zhangxiaoshu.blog.csdn.net 📢欢迎大家:关注🔍点赞👍评论📝收藏⭐️,如有错误敬请指正! 💕未来很长,值得我们全力奔赴更美好的生活&…

云风网(www.niech.cn)个人网站搭建(二)服务器域名配置

这里直接采用宝塔服务器运维管理面板来进行配置,简单无脑 宝塔 Linux面板8.0.5安装脚本 //Centos安装脚本 yum install -y wget && wget -O install.sh https://download.bt.cn/install/install_6.0.sh && sh install.sh ed8484bec //Ubuntu/Deepi…