《WebKit 技术内幕》之二: HTML 网页和结构

第二章 HTML 网页和结构

       HTML网页是利用HTML语言编写的文档,HTML是半结构化的数据表现方式,它的结构特征可以归纳为:树状结构、层次结构和框结构。

1.网页构成

1.1 基本元素和树状结构

        HTML网页使用HTML语言撰写的文档,发展到今天基本上都是动态网页(Dynamic HTML)也就是网页可以出现动画,可以与用户交互,这就需要CSS样式语言和JavaScript语言,Javascript用来控制网页内部逻辑,CSS用来描述网页的显示信息。

<html>
    <head>
        <style type="text/css">                <!-- CSS代码 -->
            img { width: 100px; }
        </style>
        <title>This is a simple case.</title>
    </head>
    <body>
        <img src="apic.png"></img>
        <div>Hello world!</div>
        <script type="text/javascript">
            window.onload = function(){
                console.log("window.onload()");
            }
            console.log("It's me.");
        </script>
    </body>
</html>

HTML节点:根节点,包含HEAD、BODY两个子节点。

HEAD节点:网页的头节点,网页的头部说明等,本节点含Style节点,定义显示样式等。

BODY节点:网页的内容实体节点,本节点包含了Img、div,script等节点。

STYLE节点:该节点包含了一段CSS代码,用来定义元素的样式信息。CSS是一种样式语言,用来描述元素的显示信息,借鉴数据和显示分离的原理,规范设计者们可以将有关显示的信息如颜色、大小】字体等抽取出来,使用CSS语言编写代码来描述它们,与HTML元素的内容分离开来。

IMG节点:用来在网页中显示图片节点。

DIV节点:用来显示一段文字。

SCRIPT节点:嵌入了一段JavaScript代码。javascript是一种解释型的脚本语言,主要目的是控制用户逻辑,同用户交互等,它可以修改HTML元素和内容。

        从上面的代码可以看出,一个完整的网页组成包括HTML文本、JavaScript代码、CSS代码以及各种各样的资源文件。网络上的每个资源都是由URL(Unified Resource Locator)标记的。

1.2 HTML新特性

        HTML5引入的最让人惊讶的最新能力之一是对2D和3D图形以及多媒体方面的支持,这将彻底改变网页的渲染方式和复杂度。这里包括但不限于HTML5视频、Canvas 2D、WebGL(也就是Canvas 3D),以及CSS3 3D变换(transform)和转换(transition)。HTML5视频引入了一个新的“video”元素,支持在网页中播放视频。Canvas2D通过定义一个新的“canvas”元素,网页开发者利用该元素的2D绘图上下文(graphics context)调用标准定义的接口,绘制常见的2D图形,如、点、线、矩形、多变形等。WebGL则使用“canvas”元素,网页开发者可以利用该元素的3D绘图上下文调用标准定义的接口,绘制3D图形,这些接口类似于OpenGL ES的接口。CSS 3D的变换和转换则可以作用于HTML的任意可视元素,制造出炫丽的3D效果。

        HTML5规范下,视频、3D图形等和其他普通HTML元素一样,可以被赋予同样的样式和操作。不仅支持第三方插件所提供的能力,而且其功能更为强大,因为除了创建HTML元素并可以在它上面绘制2D、3D图形之外,甚至还可以将3D的变化和动画效果作用于任意HTML元素之上,包括视频等、

2.网页结构

2.1 框结构

        框架结构用来对网页的布局进行分割,将网页分成几个框。同时,网页开发者也可以让网页嵌入其他网页。在HTML的语法中frameset、frame、iframe可以用来在当前网页中嵌入新的框结构。

        每一个框结构包含一个HTML文档,最简单的框结构网页就是单一的框,其文档没有包含其他的框。

网页页可以有很复杂的框结构,叶菊是框里面再嵌入框。

多框结构网页对于移动领域不适合(对触控操作是一场灾难)

2.2 层次结构

        网页的元素可能分布在不同的层次,某些元素可能不同于它的父元素所在层次(某些情况下 WebKit 需要为该元素和它的子女建立一个新层)。对于需要复杂变换和处理的元素(如video、3D变换、复杂的2D3D绘图操作),它们需要新层从而实现渲染引擎在处理上的方便或高效。

        根层:图中最大的层,网页构建层次结构首先构件根节点时创建的层,对应着整个网页文档对象。

3.WebKit 网页渲染过程

3.1 加载和渲染

浏览器主要作用:将用户输入的 URL 转变成可视化图像。包含两个过程:

  • 网页加载过程,从 URL 到 DOM 树
  • 网页渲染过程,从 DOM 树到可视化图像

        其实,这两个过程也会交叉,很难给予明确区分,所以,为了简单起见,统称这两个过程为网页渲染过程。        

        视图:viewport,当前可见区域,一般网页都要比屏幕可视面积大,因为网页比视图区域大,所以浏览器在渲染网页时,一般会加入滚动条,以帮助翻滚网页。就用户体验来说,垂直方向滚动效果好于水平方向。

3.2 webkit的渲染过程

渲染过程分为三个阶段。

(1) 网页 URL 到构建 DOM 树:

  1. 用户输入 URL ,WebKit 调用其资源加载器加载该 URL 对应的网页
  2. 加载器依赖网络模块建立连接,发送请求并接收答复
  3. WebKit 接收到各种网页或者资源的数据,其中某些资源可能是同步或异步获取
  4. 网页被交给 HTML 解释器转变成一系列词语(Token)
  5. 解释器根据词语构建节点(Node),形成 DOM 树
  6. 如果节点是 JavaScript 代码,调用 JavaScript 引擎解释并执行
  7. JavaScript 代码可能会修改 DOM 树的结构
  8. 如果节点需要依赖其他资源,例如图片、CSS、视频等,调用资源加载器来加载它们(异步加载,不会阻碍当前 DOM 树的继续创建);如果是 JavaScript 资源 URL (并且没有标明以异步方式),需要停止当前 DOM 树的创建知道 JavaScript 资源加载并被 JavaScript 引擎执行后才继续 DOM 树的创建。

上述过程中网页会有两个重要事件:DOMContentLoaded (原文中为 DOMConent)与 load 事件

  • DOMContentLoaded:初始 HTML 文档被完全加载和解析完成之后即触发,无需等待样式表、图像、子框架 subframe 的完成加载(这里需要等待的只是会阻碍 DOM 树创建完成的元素加载,包括 script 标签),参考 MDN
  • Load:DOM 树构建完并且网页所依赖的资源都加载完之后发生

(2) 利用 CSS 和 DOM 树构建 RenderObject 树直到绘图上下文:

  1. CSS 文件被 CSS 解释器解释成内部表示结构
  2. CSS 解释器工作完之后,在 DOM 树上附加解释后的样式信息,即为 RenderObject 树
  3. RenderObject 节点在创建的同时,WebKit 会根据网页的层级结构创建 RenderLayer 树,同时构建一个虚拟的绘图上下文

CSSOM,DOM,RenderObject 树,RenderLayer 树会一直存在直到网页销毁

(3) 绘图上下文到最终的图像:

  • 绘图上下文:与平台无关的抽象类,将每个绘图操作桥接到不同的具体实现类(绘图具体实现类)
  • 绘图实现类页可能有简单的实现,也有可能的复杂实现。在Chromiu中,它的实现相当复杂,需要Chromium的合成器来完成复杂的多进程和GPU加速机制。
  • 绘图实现类:将 2D 图形库与 3D 图形库绘制结果保存下来,交给浏览器来同浏览器界面一起显示。

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

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

相关文章

渗透测试之Kali如何利用CVE-2019-0708漏洞渗透Win7

环境: 1.攻击者IP:192.168.1.10 系统: KALI2022(vmware 16.0) 2.靶机IP:192.168.1.8 系统:Windows 7 6.1.7601 Service Pack 1 Build 7601 已开启远程协助RDP服务开启了3389端口 问题描述: KALI 如何利用CVE-2019-0708漏洞渗透Win7 解决方案: 1.打开kali,msf搜索…

使用WAF防御网络上的隐蔽威胁之SSRF攻击

服务器端请求伪造&#xff08;SSRF&#xff09;攻击是一种常见的网络安全威胁&#xff0c;它允许攻击者诱使服务器执行恶意请求。与跨站请求伪造&#xff08;CSRF&#xff09;相比&#xff0c;SSRF攻击针对的是服务器而不是用户。了解SSRF攻击的工作原理、如何防御它&#xff0…

redis数据安全(一)数据持久化

一、Redis数据安全措施: 1、将数据持久化至硬盘 2、将数据复制至其他机器&#xff1b; 复制是在数据持久化的基础上进行的。 二、将数据持久化至硬盘 1、介绍&#xff1a;Redis是一个基于内存的数据库&#xff0c;它的数据是存放在内存中&#xff0c;内存有个问题就是关闭…

2018年认证杯SPSSPRO杯数学建模A题(第一阶段)海豚与沙丁鱼全过程文档及程序

2018年认证杯SPSSPRO杯数学建模 探究海豚猎捕时沙丁鱼群的躲避运动模型 A题 海豚与沙丁鱼 原题再现&#xff1a; 沙丁鱼以聚成大群的方式来对抗海豚的捕食。由于水下光线很暗&#xff0c;所以在距离较远时&#xff0c;海豚只能使用回声定位方法来判断鱼群的整体位置&#xf…

配网故障定位装置:未来发展趋势与挑战

在电力系统中&#xff0c;恒峰智慧科技设计的配网故障定位装置是一个至关重要的设备&#xff0c;它可以帮助我们快速准确地找到故障发生的位置&#xff0c;从而进行有效的维修。随着科技的发展&#xff0c;这种设备也在不断地进步和改进。本文将探讨配网故障定位装置的未来发展…

回归预测 | Matlab实现MSADBO-CNN-LSTM基于改进蜣螂算法优化卷积神经网络-长短期记忆神经网络多特征回归预测

回归预测 | Matlab实现MSADBO-CNN-LSTM基于改进蜣螂算法优化卷积神经网络-长短期记忆神经网络多特征回归预测 目录 回归预测 | Matlab实现MSADBO-CNN-LSTM基于改进蜣螂算法优化卷积神经网络-长短期记忆神经网络多特征回归预测预测效果基本描述程序设计参考资料 预测效果 基本描…

行为型设计模式——中介者模式

中介者模式 中介者模式主要是将关联关系由一个中介者类统一管理维护&#xff0c;一般来说&#xff0c;同事类之间的关系是比较复杂的&#xff0c;多个同事类之间互相关联时&#xff0c;他们之间的关系会呈现为复杂的网状结构&#xff0c;这是一种过度耦合的架构&#xff0c;即…

【软件测试学习笔记6】Linux常用命令

格式 command [-options] [parameter] command 表示的是命令的名称 []表示是可选的&#xff0c;可有可无 [-options]&#xff1a;表示的是命令的选项&#xff0c;可有一个或多个&#xff0c;也可以没有 [parameter]&#xff1a;表示命令的参数&#xff0c;可以有一个或多…

包含广告或宣传性质的内容或参考资料不对应,百度百科词条怎么改

想要修改百度百科词条&#xff0c;却发现在编辑百度百科词条时经常提示“包含广告或宣传性质的内容”&#xff0c;又或者经常遇到“参考资料不对应”的情况&#xff0c;我们该如何正确修改百度百科词条才能推广&#xff0c;洛希爱做百科网为大家分享。 修改百科百度百科词条提示…

无法打开浏览器开发者工具的可能解决方法

网页地址: https://jx.xyflv.cc/?url视频地址url 我在抖音里面抓了一个视频地址, 获取到响应的json数据, 找到里面的视频地址信息 这个网站很好用: https://www.jsont.run/ 可以使用js语法对json对象操作, 找到所有视频的url地址 打开网页: https://jx.xyflv.cc/?urlhttps:…

橘子学Mybatis07之Mybatis关于缓存的设计

很逆天的一件事是&#xff0c;我上一次发mybatis是在2022年10月15号&#xff0c;然后直到今天才开始总结下一篇Mybatis的东西。一年里面忙成那啥了&#xff0c;而且重心都投入在了Elasticsearch的学习上面&#xff0c;基本一年下来都在搞ES&#xff0c;并且考下了ECE认证&#…

Java 方法中参数类型后写了三个点?什么意思?

1、...代表什么意思&#xff1f; 2、如何使用 3、注意事项 4、两个list&#xff0c;一个新的&#xff0c;一个旧的&#xff0c;旧列表中可能有新列表中存在的数据&#xff0c;也可能存在新列表中不存在的数据&#xff08;注&#xff1a;新旧列表中都不存在重复元素&#xff09;…

运动蓝牙耳机选购指南,2024年蓝牙运动耳机品牌推荐

​运动耳机不仅要具备防水防汗能力&#xff0c;还要有稳定的连接性能和出色的音质。面对市场上琳琅满目的运动耳机&#xff0c;如何选择成为了一个问题。今天&#xff0c;我将为你推荐几款在运动中表现不错的耳机&#xff0c;它们能在各种环境中提供稳定可靠的音乐体验。 1.南…

Spring之AOP源码(二)

书接上文 文章目录 一、简介1. 前文回顾2. 知识点补充 二、ProxyFactory源码分析1. ProxyFactory2. JdkDynamicAopProxy3. ObjenesisCglibAopProxy 三、 Spring AOP源码分析 一、简介 1. 前文回顾 前面我们已经介绍了AOP的基本使用方法以及基本原理&#xff0c;但是还没有涉…

工业平板定制方案_基于联发科、紫光展锐平台的工业平板电脑方案

工业平板主板采用联发科MT6762平台方案&#xff0c;搭载Android 11.0操作系统&#xff0c; 主频最高2.0GHz&#xff0c;效能有大幅提升;采用12nm先进工艺&#xff0c;具有低功耗高性能的特点。 该工业平板主板搭载了IMG GE8320图形处理器&#xff0c;最高主频为680MHz, 支持108…

通过wireshark抓取的流量还原文件(以zip为例)

wireshark打开流量包&#xff0c;通过zip关键字查找 追踪流可查看详细信息 选中media Type右键&#xff0c; 点击导出分组字节流选项 将生成的文件进行命名&#xff0c;需要时什么格式就以什么格式后缀

DQN、Double DQN、Dueling DQN、Per DQN、NoisyDQN 学习笔记

文章目录 DQN (Deep Q-Network)说明伪代码应用范围 Double DQN说明伪代码应用范围 Dueling DQN实现原理应用范围伪代码 Per DQN (Prioritized Experience Replay DQN)应用范围伪代码 NoisyDQN伪代码应用范围 部分内容与图片摘自&#xff1a;JoyRL 、 EasyRL DQN (Deep Q-Networ…

Kafka-消费者-KafkaConsumer分析-ConsumerCoordinator

在前面介绍了Kafka中Rebalance操作的相关方案和原理。 在KafkaConsumer中通过ConsumerCoordinator组件实现与服务端的GroupCoordinator的交互&#xff0c;ConsumerCoordinator继承了AbstractCoordinator抽象类。 下面我们先来介绍AbstractCoordinator的核心字段&#xff0c;如…

UML-活动图

提示&#xff1a;大家可以参考我的状态图博客 UML-活动图 一、活动图的基本概念1.开始状态和结束状态2.动作状态和活动状态&#xff08;活动&#xff09;3.分支与合并4.分叉与合并5.活动转换&#xff08;1&#xff09;转移&#xff08;2&#xff09;判定 6.泳道 二、活动图的例…

数据结构:顺序栈

栈是一种先进后出的数据结构&#xff0c;只允许在一端&#xff08;栈顶&#xff09;操作&#xff0c;代码中top表示栈顶。 stack.h /* * 文件名称&#xff1a;stack.h * 创 建 者&#xff1a;cxy * 创建日期&#xff1a;2024年01月17日 * 描 述&#xff1a; …