HTML5技术的发展前景解析

一 摘要

HTML5越来越火,很多人都投入学习HTML5之列,那么HTML5到底有哪些优势竟然吸引这么多人去学习,今天给大家做一个HTML5技术详细的分析.

在正式讲解之前,还是请大家先思考几个问题:

前端开发技术发展阶段?

HTML5的发展历程?

开发HTML5的组织有哪些?各自工作分工是什么?

HTML5与以往HTML比有哪些新特性?

HTML5它的功能构成是什么?

HTML5设计原理是什么?

webAPP开发相对iOS,安卓原生移动APP开发优势主要体现在哪?

webAPP开发的app存在的问题在哪?

HTML5主要运用的领域?

弄清楚了上面的问题,我们才能整个HTML5走势及自身的学习方向才有更好的把控.才能更好的学习兴趣点,而不会被市场需求推着走啦.

我每次在学习一门新语言时,一般过程就是这样的,一定要这门语言的来龙去脉搞清楚,为什么会产生这门语言,它是因为解决什么问题才产生这门语言的.只有弄清楚了这些疑惑后,学这门语言才对我有吸引力,我才会有兴趣学下去,不然没办法彻底的去学习的,即使硬着头皮学,最终学的也是半杯水的状态.仅仅只是会的状态.

不过这只是我的一家之言,不过我还是给大家一点建议,学习一门语言,一定要把学会,学透,有自己的思想和见解,而不是为了学语言而学语言,到最后真的是技多不压身状态.希望大家鉴之!

下面就给大家一个问题一个问题给大家分析.

1. 前端开发技术发展阶段?

主要分为三个阶段:

第一个阶段

以web 1.0为主的网络阶段,前端主流技术是HTML和CSS

第二个阶段

web 2.0的Ajax应用阶段,热门技术是JavaScript/DOM/异步数据请求

第三个阶段

就是我现在用的HTML5+CSS3阶段,两者相辅相成,使互联网进入一个新的阶段

以上就是前端开发技术所经历的三个阶段,那么HTML5它的发展历程又是什么样的呢?下面给大家进行分析.

2. HTML5的发展历程?

HTML5的发展历程大概也是主要分为三个时间段,哪三个时间段呢?

第一个时间段

2004年成立Web超文本应用技术工作自(WHATWG)创立了HTML5规范,同时开始专门针对Web应用开发新功能.

第二个时间段

2006年,W3C介入HTML5的开发,并于2008年发布了HTML5的工作草案

第三个时间段

2009年,W3C停止了对XHTML2的更新.

第四个时间段

2010年HTML5开始用于解决实际问题,这时各大浏览器厂商开始对旗下的产品进行升级以支持HTML5的新功能,因此,HTML5规范也得到了持续性的完善.

以上就是HTML5由研发到广泛使用的四个阶段.下面我们看看负责HTML5开发的都有哪些组织?
通过资料查询,主要有三个组织负责HTML5的开发.那三个组织呢?

3. 开发HTML5的组织有哪些?各自工作分工是什么?

组织一 WHATWG

WHATWG主要由来自Apple,Mozilla,Google和Opera等浏览器厂商的人员组成,成立于2004年,
WHATWG开发HTML和web应用API.

组织二 W3C

W3C下辖的HTML工作组,目前主要负责发布HTML5规范.

组织三 IETF

IETF即因特网工程任务组,这个任务组主要负责开发Internet协议的团队,其中他们开发的WebSocket协议,该协议正是由IETF工作组负责开发.

看完了各个工作组的介绍后,那么我们来看看 HTML5与以往HTML比有哪些新特性?

4. HTML5与以往HTML比有哪些新特性?

下面我们就来介绍一下HTML5的语言的新特征和优势,以便提高大家学习HTML5的动力.有哪些新特性呢?

1.兼容性

互联网HTML文档已经发展存在了20多年了,不可能颠覆它,那么去兼容它变得非常重要了,HTML5不是颠覆性革新,它的设计理念就是要保持与过去技术的兼容性和过渡,使该语言变成web语言的共主.

2.合理性

为什么会说是合理性呢,这主要是因为HTML5新增加的元素都是对现有网页和用户习惯进行跟踪,分析概括而推出来的.例如 Google在分析了上百万个页面,从中分析出来了DIV标签的通用ID,发现id = "header"的ID重复使用率非常高,为了解决实际问题,HTML5就直接增添了<header>标签.

3.效率

HTML5的规范都是基于用户优先准则来编写的,也就是用户的编码习惯,语法上限制的不是那么严.例如
id = "HTML5"
id = HTML5
ID = "HTML5"
这些运行过程中都是没有问题的.

4.安全性

为了保证安全性,HTML5规范中引入了一种新的基于来源的安全模型.这样就可以进行跨域访问了

5.分离

在分析方面,HTML5迈出了很大的一步,HTML5在所有可能的地方进行分离,相互的独立性就随之变强了.

6.简化

HTML5要的就是简化,避免了不必要的复杂性,具体体现在:
1)以浏览器原生能力替代复杂的JavaScript代码
2)简化了DOCTYPE
3)简化了字符集声明
4)简单而又强大的HTML5 API

7,通用性变强

主要体现在:

1)可访问性
2)媒体中立
3)支持所有语种

8.再无插件了

在传统的web应用中,很多功能只能通过插件或者复杂的hack来实现,而HTML5提供了对这些功能的原生支持,再也不需要这些插件类的东西了,用过插件的都知道,插件存在很多问题例如:

1)插件安装失败
2)插件在运用过程中被禁用或者屏蔽了
3)插件自身成为了攻击对象
4)插件不容易与HTML其它文档内容进行集成也就是兼容性问题.

5. HTML5它的功能构成是什么?

1)Canvas(2D和3D)

2)Channel消息传递

3)Cross-document

4)Geolocation

5)MathML

6)MicroData

7)Server-Sent Events

8)Scalable Vector Graphics

9)WebSocket API及协议

10)Web Origin Concept

11)Web Storage

12)Web SQL database

13)Web Workers

14)XMLHttpRequest Level 2

6. webAPP开发相对iOS,安卓原生移动APP开发优势主要体现在哪?

写过纯H5的APP的或者体验过H5开发的APP的都知道,用H5开发的APP确实快,页面看起来很舒服,但是和原生的比起来还是有很多问题,所以现在很多企业,为了追求快速上线,第一版都会采用H5来开发APP,上线之后就会着手把H5写的APP,改成原生开发,例如安卓开发,iOS开发等.原生的更能满足用户的良好体验.

那么用H5开发的APP跟原生开发的APP有哪些不足呢?

7.H5 APP与原生相比有哪些不足?

这里根据别人或者自己,总结了点不足.

参考网址:http://www.cocoachina.com/webapp/20151008/13660.html

1、动画

动画有很多种，比如侧边栏菜单的滑入滑出、元素的响应动画、页面切换之间的过场等等，在H5之下的众多实现方法都没有办法达到纯原生的性能。一般这些的话有几种不同的选择：
1) css3动画
2) javascript动画
3) 原生动画
css3动画非常的消耗性能，如果某一个元素用到css3动画可能还看不出来，但大面积或过场使用css3动画会让app低端手机体验非常差。最好的选择一般是通过框架调用底层的动画，但不管怎么样等于在原来的代码上包上了一层，性能还是不可避免的受到影响。

比如在一个新页面的载入上，如果调用底层动画要考虑的问题有两个，一个是本身资源页面的渲染问题，另一个是远程数据的获取。即便是这些动画能够很快的响应，但大量的css页面会导致渲染卡顿，滑入时可能会有白屏/机器卡顿的现象。为了解决这些性能问题又必须要用到预加载或模拟动画。即便是这样，滑入滑出的动画在低端的安卓机器上还是有很多问题，如果获取服务端数据处理的方式不合适，卡顿白屏的现象会更严重。具体看下面的数据获取方式。

2、获取服务端数据

首先要接受的是，这里的数据获取都是在资源页面上异步完成的，因为只有这样才能让这些资源页面完成预加载或者渲染。但是异步拿到的数据在填入页面中时可能会涉及DOM操作，众所周知，DOM操作非常消耗性能，如果页面小还好，页面稍大数据稍微复杂一点，频繁的DOM操作会导致明显的闪白。

而且最重要的一点是，如果页面加载进来之后数据更新的速度太慢，也会让页面模板等待很长时间，对用户体验又不友好，总不能每次打开都像浏览器一样等待刷新是吧。

这个问题如果没有得到解决，H5APP是很难承担大规模数据的页面，在它们之中频繁切换更是难上加难，那么肯定有人也会想到用MVVM的方式，其实我也写过一些基于MVVM的H5APP，相对来说它们获取数据和更新数据的方式更敏捷更科学，但写的过程中又要注意很多H5独有的问题，这些问题在下面的页面切换里来讲。

3、页面切换

上面我们看到了几种不错的实现方式，比如预加载和模拟动画，甚至有批量的预加载，批量的截图模拟动画等等，虽然看起来很友好解决了不少问题，但事实上如果页面足够多就会引发另一个问题——页面的生存周期。

试想一下，如果引导页或者主页面缓存了5个子页面的资源，在跳转到响应的子页面时又会缓存这些子页面的下级页面资源，如此反复肯定会占据大量内存使APP的体验下降。那么怎么知道那些页面是需要的，最多缓存多少页面，什么时候结束哪些页面的生存周期呢？在我用过的很多H5APP的框架里都没有对这些问题有一个完美的解答，因此在页面较多内容较多的APP中可能会因这些资源分配的问题降低性能。

这时候我们回过头来再看看MVVM的数据加载问题，实际上不管哪个MVVM框架，写过的人都知道管理这种新型的前端代码最重要的问题是内存的问题，你既要保证代码写的足够优雅没有任何内存泄露问题，也要考虑到在页面生存周期结束时它们的控制器/页面资源是否得到释放，这对全局有没有什么影响，在多个请求时也要合理的分配资源，甚至是复用这些父级页面传过来的缓存资源等等。较小的APP可能并不会有这些问题，如果你想用纯H5来开发大型APP，这很可能会浪费你很多时间——而且结果还不会让你满意。

4、Android/iOS的区别

很多人都说纯H5 APP一次编写就能编译Android/iOS两种不同的APP，大大降低了成本。实际上这个观点本身就是值得怀疑的，如果你写过这类APP就能明白我在说什么，它们既不省事，又存在很多BUG，调试时尤其繁琐。

举一个很简单的例子，Android和iOS在返回上一页的处理方式上就有明显的区别，iOS的顶部bar在全屏下怎样处理，Android机器出现smart bar怎样处理页面的布局，调用底层硬件时怎样区分不同的场景等等，你需要写一个又一个机型和系统的判断，然后分别在Android和iOS下调试，最后你却发现这并没有卵用，累的要死却什么没学到，只有一堆不知道什么时候会过时的经验。

现在做H5混合APP开发的人很多，但是纯H5却很年轻，很多问题都没有很好的解决，这几个是我在做这些APP时考虑最多的问题。当然大家也不必担心，随着ES6的推行，硬件发展越来越快，纯H5APP未必没有一席之地。最后说一个很少人注意到的H5优势，大家大谈H5 APP时都是快速开发、低成本、多平台等等，但我却觉得它和很多APP开发方式相比有一个不同之处——图文混合的排版。

正是这些复杂多变的CSS样式消耗了性能，但是它带来了排版的多样性，能够细致到每一个字宽行高和风格的像素级处理，才是H5的优异之处。

7. HTML5主要运用的领域?

6月4日,在上海举办的2016iWeb峰会,大家可以从中了解到H5他的广阔的运用场景,下面我就引用一下其中的一些新闻片段,大家可以参考一下:

Google、英特尔等全球企业的前沿技术在会上撩开神秘面纱，其中英特尔Web技术研发总监江小丹介绍了Web技术的最新创新和广阔应用，从Web Runtime平台产品和国内厂商的深度合作，到英特尔在Web图形图像领域、视频服务领域等前沿研究上的开发进展，再到未来将Web技术进一步延伸到诸如IoT、机器人、无人机等酷炫黑科技领域，精彩分享让我们相信Web技术无所不在，Web技术可以无所不能。

　   蝴蝶互动的分享《H5游戏的发行之道》中提出一个明确的观点：H5游戏想要打造爆款必须坚持MMORPG + IP，并辅以月流水突破了2000万的现象级产品《传奇世界H5之王者归来》证明。白鹭时代紧接着公布了一组让人激动的市场数据，整个游戏行业的增长在减缓，但H5在逆势增长，H5玩家人数已经超过1.7亿，H5游戏的品类增加了至少两到三倍，整个H5游戏市场发展非常迅速，行业发展前景让大家充满信心。

　   触控科技分享了Cocos游戏开发一站式解决方案，包含了从新建立项、游戏制作、到打包上线的全套流程。全球超过七十多万开发者选择使用Cocos引擎，用户遍布200多个国家和地区。此外快玩游戏等游戏厂商也进行了精彩分享。结合近日微信浏览器全面升级至X5 Blink内核、全方位支持H5标准以及谷歌宣布将HTML5作为Chrome浏览器默认选项等利好消息，也让所有人看到HTML5游戏进入变现良性发展阶段，前景利好。

　   除了游戏领域之外，野狗实时后端云还对Web前端实时化解决方案等热点问题做了深入的分享。实时对于web来说是一个一直存在的需求，而实时恰好是HTML5核心思想之一，web的未来是webapp，而webapp的核心就是实时化。巨头纷纷表示出对H5的支持，行业大趋势全面利好。