浏览器： HTML5网页（渲染过程概要介绍）

71 阅读 0 评论 47 点赞

我是靠谱客的博主任性大船，最近开发中收集的这篇文章主要介绍浏览器： HTML5网页（渲染过程概要介绍），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

HTML 网页是利用 HTML语言编写的文档，这是一种半结构化的数据表现形式。

结构特性：树状结构；层次结构；框结构；

一，网页构成：

基本元素和树状结构：

现在的语言是动态的语言，需要CSS 样式语言与 javascript语言;

CSS 是一种样式表语言，用来描述元素的现实信息。

Javascript：是一种解释型的脚本语言，主要目的是控制用户端的逻辑，同用户交互等。他可以修改HTML元素及其内容。

UML： Unified Resource Locator，网络上的每个资源都是有URL标记的，他是URI（Unified Resource Identifier）的一种实现。

<html>

<head>

img { width: 100px; }

</style>

<title> This is a sample </title>

</head>

<body>

<div> Hello world ! </div>

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>

video, div, canvas {

-webkit-transform: rotateY(30deg) rotateX(-45deg);

}

</style>

<title> This is a sample </title>

</head>

<body>

<div>

</div>

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建完并且网页所依赖的资源都加载完之后发生），