HTML5----HTML在Browser中的运行机制(笔记篇)

0 前言


    HTML5+CSS+JS做手机APP越来越来流行了,所以我也在涉及这一领域。上篇blog就算是对当前市场的一个简单介绍,这一篇主要是涉及HTML原理的,后期还会系统的讨论HTML的性能和能力的问题。欢迎大家留言交流!


1 HTML简介


    HTML是一种标签语言,含有带不同语意的标签,经解析后成为网页上显示的内容。一般HTML(网页,HTML Page)是在Browser中运行,并且与用户交互。

<!DOCTYPE html>
<html>
<head> 
	<title></title>
	<meta charset = “UTF-8”>
	<style>
		button
			{												color:#FF0000;
                         }	
	<style>
        <script>
             function show(){
		alert(“hello world”);
             }
        </script>
</head>
<body> 

<button onclick = “show();”>     Click Me     </button>
</body>
</html>


HTML在Browser中运行的原理,如下图:

HTML5----HTML在Browser中的运行机制(笔记篇)_第1张图片

   HTML Document包含各种资源,HTML Context是其运行环境。


2 解析HTML 


    首先,Browser会将HTML Document加载到内存中,解析Document的标签语义。Document的标签类型有两种:系统资源类型和用户界面类型。系统资源类型,用于描述浏览器、运行环境中的运行参数、样式设置等资源。用户界面类型的HTML标签,用于描述显示在网页上的各种用户界面控件,控件具有输出数据给用户或是接受用户输入等功能。


3 DOM对象模型


    然后,Browser将HTML Document转换为对象模型DOM(Document Object Model),将DOM创建在运行环境里,让程序代码来处理。DOM是树状结构的对象模型,一个HTML Document对应一个DOM对象树。这个对象树的节点是Document中的HTML标签。DOM是Browser在HTML Context中提供给开发人员使用的,用来控制HTMLDocument的API。通过DOM API在DOM对象树上对DOM节点做各种操作,都将体现在HTMLDocument上。

其原理如图(结合上面的代码):

HTML5----HTML在Browser中的运行机制(笔记篇)_第2张图片

 

4 前端显示的过程


    最后,Browser在完成分析HTMLDocument的标签后,会显示在Browser上。显示的过程,有如下2步:

(1)将HTML Document中的用户界面类型标签显示在网页上,并按照资源类型标签所定义的CSS样式来决定显示外观。

(2)用户在进行单击等交互事件发生时,会运行Document中资源类型标签所定义的Javascript程序代码。代码中,封装了网页运行的程序逻辑。同时,代码可以通过Browser所提供的DOM API去控制HTML Document。

 

5 结语


    经过这一长串读取、分析、显示Document的流程,最终用户会在Browser中显示HTML Page。网页提供了各种信息和服务,以此满足用户需求。


你可能感兴趣的:(html5,APP开发,运行机制,原理理论,DOM模型)