H5 是国内对HTML5 的简称，其实我们每天都在接触它，它无处不在。从「围住神经猫」，「击打企鹅」，「在房祖名中找到张默」这些红极一时的火爆游戏，到现在微信朋友圈推送广告时宝马、VIVO 的广告，支付宝十年账单等等，背后都是 HTML5 技术。
<!--more-->
但是很多时候大家对 H5 认识都只是停留在「页面」这个层次上，甚至还会有一些误解，下面就是关于 HTML5 的一些常见的误解：
#### HTML5 是一项新技术
HTML5 原本指 HTML 下一个主要的修订版本，所用到的技术很早就已经成熟了，而 HTML5本身并非技术，而是标准。现在国内普遍说的 H5 是包括了 CSS3，JavaScript 的说法（严格意义上说，这么叫并不合适，但是已经这么叫开了，就将错就错了）。
那可能有不懂技术的同学会问，到底什么是 HTML呢？
正规的说法是，HTML(Hyper Text Markup Language，超文本标记语言) 是一门标记语言。所谓「超文本」就是指页面里可以包含图片，链接，甚至音乐等非文字元素；计算机之间需要沟通，那些是正文，那些是图片，都需要标记，标记这些的一套规范和标准就是 HTML。
#### HTML5 的性能不好
上面已经说了，HTML5 本身并不是技术，而是一个标准，不涉及性能问题。性能的问题往往是多方面的，软件层面（浏览器对 H5 的支持），硬件层面，包括代码都可能会导致性能问题。不过现在硬件的更新速度非常快，iPhone4S 的 CPU 是 A5，而 iPhone6 已经是 A8了，按苹果的说法，速度共提升了7.5倍；移动端浏览器大部分是现代浏览器，对 HTML5 和 CSS3的支持都很好。
----
HTML5 到底是什么？
### 绘图功能
SVG 和 Canvas 都能使你在浏览器中画图，但是基本原理不一样。
#### SVG(Scalable Vector Graphics)
SVG 即是 `Scalable Vector Graphics`，是一种用来绘制矢量图的 HTML5标签。
SVG 基于 XML（EXtensible Markup Language，可拓展标记语言，类似于 HTML），这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
#### Canvas
Canvas，顾名思义，是画布，通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
#### WebGL(Web-based Graphics Language)
WebGL 是一个跨平台、免费的底层 3D 绘图 API 的 Web 标准，是一套用于渲染 2D 和 3D 图形的标准图形库。作为一项强大的图形技术，WebGL 可以很好的呈现 3D 效果。iOS8 宣布支持 WEBGL 后，百度全景在移动 Web 端支持 WebGL 图形技术了，可以更逼真的模拟街道环境。
#### Canvas 与 SVG 的主要不同点
Canvas | SVG
------------ | -------------
依赖于分辨率 | 不依赖于分辨率（矢量）
不支持事件处理器 | 支持事件处理器
弱的文本渲染能力 | 最适合带有大型渲染区域的应用程序（比如说 Google 地图）
能够以.png 或 .jpg 格式保存结果图像 | 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
最适合图像密集型的游戏，其中的许多对象会被频繁绘制 | 不适合游戏应用
---
### 动画的运用
一般来说，也就是两种。一种是 CSS3 动画，一种是 JavaScript 动画。但是很多情况下，JavaScript 也会用于改变 CSS 属性来实现动画。
如果是复杂交互的动画，还是用 JavaScript 比较好。
具体如何处理，那又是比较大的话题了，在这就不细说。
---
### 最后说几句
当年 Facebook 放弃 HTML5 转投原生开发的，而今微信却在中国让 HTML5 大红大紫，不得不说时势弄人。
当年 Facebook 采用的是混合式开发，类似于今天我们说的里面是前端代码，然后套了个 PhoneGap 的壳子，打包变成 iOS 应用了。混合式开发一般会占比，但是 Facebook 的 HTML 的部分占比过大，而且 当年 iOS App 里调用的 Webview 的引擎和浏览器 Safari 里用的不一样，对技术支持的也不好。
在今天，iOS8 的 Webkit 库，使用 WKWebView 来代替以前的 UIWebView，并且使用 Nitro JavaScript 引擎，这意味着所有第三方浏览器运行 JavaScript 可以跟 Safari 一样快。
金城在线专注网站、软件、APP、微信公众平台、小程序、抖音、头条等开发推广，如果您有这方面的需求或者不同的观点，欢迎联系交流。
