总结包含以下内容:HTML5的应用场景,HTML5对比Native的优势,WEB+APP发展现状,HTML5 WEB APP的发展趋势
HTML5的应用场景
- PC端:LocalStorage本地存储(渐强式体验:对支持HTML5的浏览器使用LocalStorage)
- 手机端:
- 基于Web View的Web Hybrid Native开发,优点是更新比较灵活
- Web App开发:H5广告,H5游戏,H5网站
HTML5对比Native的优势
- HTML5提供了符合语义化的标签,比如:
<article>
、<section>
、<header>
、<output>
、<figure>
、<footer>
- 对API更好的支持:SessionStorage、WebGL、Web Workers、Canvas
- Native虽然使用流畅,但更新慢,在App Store中还需审核。可以试想一下一次开发多终端受益(嵌在Web View中)
WEB+APP发展现状
- 现状:不能一次开发多终端适配
- 在PC时代,多终端适配指浏览器适配
- 在移动端时代,其指手机系统的适配(Antroid、Apple的按键使用不同,比如返回键)
- Native App与Hybrid App的体验差:动画方面和DPM操作
- 手机的CPU(计算)和GPU(图形渲染)比PC慢
- Native App在手机端的效果比较好的原因:
- 在WEB APP和Hybrid App上的编译过程是:JS编译成JAVA再编译成机器语言,最后运行
- Native App没有编译过程,性能快很多
- 因此目前网页的性能是不能匹敌Native App的
- 提出一次开发多终端适配的原因:
- Media Query的出现,针对设备分辨率进行适配,出现响应式页面。但这需要在性能和效果之间做出权衡
- CSS3:在HTML5时代使用CSS3的animation属性来代替DOM的动画操作。例如用transform接口来实现手机Web页面的Tab切换
HTML5 WEB APP的发展趋势
- WEB APP正在尝试无限接近Native App
- FaceBook之前不断使用HTML5技术去更新APP,后来出现了APP卡顿的现象,继而使用Native技术去替换更新。这是一次尝试
- 与HTML5有关的框架是React
- 通过JS来编写逻辑,通过Native实现界面效果
- Native用来构建User Interface,即用户界面,解决了Web App的一个痛点,即构建页面的性能平均问题