总结包含以下内容:HTML5的应用场景,HTML5对比Native的优势,WEB+APP发展现状,HTML5 WEB APP的发展趋势

HTML5Analysis
HTML5Analysis

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的一个痛点,即构建页面的性能平均问题