本文介绍了HTML5的新增特性，特别是对2D和3D图形的支持，以及多媒体元素的应用。此外，还深入探讨了现代浏览器如WebKit如何从URL加载到生成可视化图像的全过程，包括DOM树构建、渲染上下文生成及最终图像渲染的技术细节。
HTML 网页 是利用 HTML语言 编写的文档，这是一种半结构化的 数据表现形式。
结构特性： 树状结构； 层次结构； 框结构；
一， 网页 构成：
基本元素和树状结构：
现在的语言是动态的语言， 需要CSS 样式语言 与 javascript语言;
CSS 是一种样式表语言， 用来描述元素的现实信息。
Javascript： 是一种解释型 的脚本语言， 主要目的是控制用户端的逻辑， 同用户交互等。 他可以修改HTML元素 及其内容。
UML： Unified Resource Locator， 网络上的每个资源都是有URL标记的， 他是URI（Unified Resource Identifier） 的一种实现。
<html>
<head>
<style type="text/css">
img { width: 100px; }
</style>
<title> This is a sample </title>
</head>
<body>
<img src="apic.png"> </img>
<div> Hello world ! </div>
<script type="text/javascript">
window.onload = function () {
console.log("It's me");
</script>
</body>
</html>
二， HTML5新特性
HTML5的最新能力： 是对2D 和3D图形 以及多媒体方面的支持。
HTML5视频， Canvas 2D， WebGL（也就是Canvas 3D）， 以及CSS3 3D变换（transform）和 转换（transition）。
HTML5 引入了一个新元素video，
<html>
<head>
<style type="text/css">
video, div, canvas {
-webkit-transform: rotateY(30deg) rotateX(-45deg); <!-- CSS 3D 变换 -->
}
</style>
<title> This is a sample </title>
</head>
<body>
<video src="test.mp4"> </video>
<div>
<canvas id="a2d"> </canvas> <br>
<canvas id="a3d"></canvas>
</div>
<script type="text/javascript">
var size = 300;
//canvas 2D 绘图
var a2dCtx = document.getElementById('a2d').getClontext('2d');
a2dCtx.canvas.width = size;
a2dCtx.canvas.height = size;
a2dCtx.fillStyle = "rgba(0, 192, 192, 80)";
a2dCtx.fillRect(0, 0, 200, 200);
//canvas 2d, e.g. webGL 绘图
var a3dCtx = document.getElementById('a3d').getContext('experimental-webgl');
a3dCtx.canvas.width = size;
a3dCtx.canvas.height = size;
a3dCtx.clearColor(0.0, 192.0/255.0, 192.0/255.0, 80.0/255.0);
a3dCtx.clear(a3dCtx.COLOR_BUFFER_BIT);
</script>
</body>
</html>
三， 网页结构
框结构： iframe, frame, frameset 这些都是框结构； 每个框结构包含一个HTML文档。
层次结构： 指的是网页中的元素 可能分布在不同的层次中， 也就是说某些元素可能不同于他的父元素所在的层次。
HTML5的例子中，有四个重要的元素， video， 一个div 和两个 canvas 元素。 另外CSS部分的代码， 也会对网页的分层策略产生重要影响。
根层： 根节点， 自然地为他创建一个层， 就是根层； 他对应着 整个网页文档对象。
层1： video 元素所创建的层； video元素播放视频， 创建一个独立的层， 可以更有效地处理视频编解码 和浏览器直接的交互 和 渲染问题；
层2： 对应是div 元素； 因为div 需要进行3D变换， 所以有一个独立的层， 方便变换操作；
层3， 层4： 对应两个canvas 元素； 这两个元素对应着HTML5标准中复杂的2D 和 3D 绘图操作；
根层在最后面； 层3， 层4 在最前边； 层1， 层2， 并列在中间；
四， 网页渲染过程
加载过程： 从 URL 到构建DOM树；
网页渲染过程： 从DOM树 到生成 可视化图像；
网页渲染的一个特性： 网页通常比我们的屏幕可视面积要大， 移动设备很容易看出， 而当前可见区域， 我们称之为 视图 viewport。 一般会以 滚动条 以帮助 翻滚网页。
webkit渲染过程： 1， 从网页的URl 到构建完DOM树， 2， 从DOM树 到构建完webkit的绘图上下文； 3， 从绘图上下文到生成最终的图像；
1， 从网页的URl 到构建完DOM树，
当前用户输入网页URL的时候， webkit调用资源加载器 加载 该URL对应的网页；
加载器 依赖网络模块 建立连接， 发送请求并接收答复；
webkit 接收 到各种网页 或者 资源的数据， 其中某些资源可能是同步或 异步获取的；
网页被交给HTML解释器 转换成 一系列的词语（token）；
解释器根据词语token 构建节点node， 形成DOM树；
如果节点是javascript代码的话， 调用javascript引擎 解释 并执行；
javascript代码 可能会修改DOM树的结构
如果节点需要依赖其他资源， 例如图片， CSS， 视频等， 调用资源加载器来加载它们， 但是他们是异步的，不会 阻碍当前DOM树的继续创建； 如果是javaScript资源URL（没有标记异步方式）， 则需要定制当前DOM树的创建， 直到javascript的资源加载并被javascript引擎执行后 才继续DOM树的创建；
----》》》》 上述过程， 会发出DOMConent 事件（DOM树建完之后）与 DOM 的onload 事件（DOM建完并且网页所依赖的资源都加载完之后发生），
2， 从DOM树 到构建完webkit的绘图上下文： webkit利用CSS 和 DOM树 构建 RenderObject树 直到绘图上下文。
CSS文件被CSS解释器 解释成 内部表示结构；
CSS解释器工作完之后， 在DOM树上附加 解释后的 样式信息， 者就是 renderObject树；
RenderObject 节点 在创建的同时， webkit会根据网页的层次结构 创建 RenderLayer 树， 同时创建一个虚拟的绘图上下文。
-----》》》》 RenderObject树的建立， 并不表示DOM树会被摧毁， 事实上， DOM树， RenderObject树， RenderLayer树 与 绘图上下文 这四个内部表示结构 一直存在， 直到网页被摧毁。
3， 从绘图上下文到生成最终的图像： 这一过程依赖 2D 和 3D 图形库；
绘图上下文 是一个与平台无关的抽象类， 他将每个绘图操作桥接到 不同的具体实现类， 也就是 绘图具体实现类；
绘图实现类也可能有简单的实现， 也可能有复杂的实现； 在chrommium中， 他的实现相当复杂， 需要chromiun的合成器 来 完成复杂的多进程 和GPU 加速机制。
绘图实现类 将２D图形库 或者３D 图形库 绘制的结果保存下来， 交给浏览器 来 同浏览器界面一起显示；
扫一扫
605
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
