HTML5 的明天, 局部有小雨

HTML5是什么? 为什么很多人如此关注它并押上公司的未来? 但为什么Facebook弃HTML5转Objective C. HTML的明天, 是晴还是雨, 你该不该给它投怀送抱, 该如何去判断?

我最近对HTML5产生兴趣, 就做了一些粗浅的研究, 并和硅谷的两位玩弄HTML5多年的大佬<1>电话交流, 总结于此篇文章. 这篇文章不是HTML5的启蒙贴, 是对其在业界发展的一个观察和思考吧.

 

什么是HTML5?



HTML5, 就像其名字所表示的, 它是HTML的第五个版本. 它将现在大家在各种浏览器之中所做的很多很炫的插件或者特殊调准都做到了标准之中. 这样的好处在于, 大家不需要对于特殊的浏览器做特殊的优化, 也可以避免了很多由于插件标准不统一带来的困扰.

比如, 我很惊讶的了解到, Adobe的Flash+PDF插件导致的浏览器崩溃, 占到所有浏览器崩溃次数的一半以上.

HTML5的出现和推广, 将通过统一的标准大大改观这种混乱的局面. 最最主要的原生支持(native support), 是这几种:

  • draw on the fly (随意拖动部件)
  • native video support (原声的视频支持 – bye, flash)
  • geolocation (地址信息的获取)
  • offline access support (不在线的支持, 支持local storage)
  • semantics with tags that makes SEO friendly (flash content is not indexable – SEO能理解的tags来帮助搜索引擎的加索引)

但对于HTML5标准实现的程度和节奏完全取决于不同浏览器的自主选择, 它想咋的就咋地.html5readiness.com上的这张图很清楚的总结了不同浏览器对于不同功能的实现程度.

你该不该给HTML5投怀送抱?



回答这个问题, 要分成两步.

  • 你在WEB端还是移动端?

    “如果是Web端, 100%保证晴天; 如果是移动端, 看下一条”

    对于Web端而言, HTML5将是一个完整的操作系统. 它在不同的底层系统之上, 借助于浏览器的实现, 封装了统一标准的API允许开发的程序跨设备(PC or Mac or Smart Phone), 跨平台 (Windows, MacOS, iOS, Android, whatsoever)的运行.

     

    最大的好处, 就是一处开发, 多处使用. 审核新版本的发布也不用看苹果爷爷的脸色. 直接在服务器端推送新代码就好了. 对于开发人员而言, 这对效率的提高, 有着致命的诱惑. 像”你们是先开发Web, 还是移动”之类的问题, 将愉快的失去意义.

     

    对于Web端的开发而言, 你可以尽情的享受HTML5这种统一封装带来的好处, 唯一要等待的就是浏览器对其支持的完善. 但这种完善的到来, 无疑是确定的.

     

    而正是这种好处, 让很多创业者如此关注它并押上公司的未来.

     

    但对于移动端而言, 却没有那么简单纯粹.

  • 如果是移动端, 取决于你的产品形态.
    因为你的产品需要的功能可能永远也无法在移动端的浏览器的HTML5实现中被很好的实现.

     

    ”App Store上超过50%的应用已经是用HTML5来开发, 将来可能90%的应用会是HTML5, 而那10%, 可能永远也不适合HTML5”.

     

    HTML5的天气预报中, 是局部有小雨.

苦逼的开发者们, 你站的地是晴天还是下雨, 该如何判断呢?



先介绍一个工具, 动态检测浏览器对HTML支持程度的ringmark.io<2>. 如图所示, 它将测试你当前的浏览器, 将HTML5的规格(spec)当中描述的功能的实现程度会一一测试出来. 不同的ring(环)代表了不同的功能等级. 已经实现的为绿色, 没实现的是灰色. 发现灰色很多的朋友, 要换浏览器啰.

回到刚开始的那个问题, Facebook为什么在iOS App的实现上弃HTML5选Object C, 就在于Facebook App重度依赖照片, 而照片分享, 浏览相关的功能极度依赖CSS Overflow Scrolling, 这一点, iOS上的浏览器支持极度不给力. 而换成Object C的Native Implementation之后, 速度快上了2倍之多.

好, 有朋友可能会问, 可能在将来浏览器对这些功能的支持会得到改善呢? 那时候不就可以了.

事实是, 那一天可能永远也不会到来.

因为浏览器的编程模型还是90年代流行的单进程单线程 (single process single thread), 但原生实现(比如用Object C)的APP可以用多线程. 这一点带来的作用是致命的.

移动端编写APP, 可以使用多个线程, 第一个线程, 被称作主线程(main thread), 编程的第一原则是don’t do heavy work on main thread. 通常只让它处理UI事件等, 其他重度的工作让其他背景线程来做.

但浏览器只有一个线程, 所有的事情都是它干. 浏览器编程一上来就破了第一原则.

在台式机上, 浏览器编程还没有太多问题, 因为够快; 但在移动端, 这个弊端很明显.

我来举个例子, 比如你在用浏览器看朋友的照片, 你发的评论被发到服务器端, 此时你接着用手指往下拉屏; 此时, 服务器端返回信息, 评论发布成功, 浏览器中唯一的线程可能停止处理屏幕滚动(scrolling)而来处理服务器的返回信息, 由于移动设备的处理器(尤其单进程浏览器只能用上单核, 即使是多核手机!)和内存(处于省电原因使用低耗电的DDR1, 这一点和现在PC使用的DDR3相差甚远)的不给力, 完全可能造成滚动处理的不连续. 通常手机的刷新率是60MHZ, 即每一帧不超过15ms; 如果处理的延时大大超过15ms,
那么就会出现跳帧, 肉眼就能看出来.

这是交互操作(比如拉动, 滚动等)很多的APP, 如果是由HTML5实现, 出现拉动的时候停在那里一个很重要的原因.

所以, 如果你的APP是相对静态的, 不需要很多对于照片, 多点触摸, 多向拉动的处理, 那完全可以用HTML5来实现; 如果不是, 比如信息流的展示, 游戏等等, 还是乖乖的用原生的去实现.

具体的查看哪种类型的App需要哪些功能, 可以参考<3>.

HTML5究竟在等什么?



HTML5实现已经是50%以上的iOS APP的选择. 我相信处理能力的提升, 将让移动设备的处理不给力带来的体验底下得到改善. 而这种处理能力的提高, 很大程度上将取决于低耗电高性能CPU/内存的出现, 或者电池技术的极大改善.

在这一天到来之前, 有可能10%的APP无法应用HTML5来实现.

时间: 2024-08-03 13:48:37

HTML5 的明天, 局部有小雨的相关文章

HTML5的明天,局部有小雨

前言:现在 HTML5 技术很热,那么作为开发者,你的产品是否可以赶个潮流,可以用 HTML5 来做呢?Facebook前研发经理王淮(weibo)在博客上发表了一篇文章,专门为开发者们考虑了这个问题.HTML5的确很有魅力,但它并不是万灵丹,如果你是 Web端,那么就是一片晴天,如果是在手机端,那么可能会有小雨.本文由作者授权发表,TECH2IPO 二次编辑. HTML5 是什么?为什么很多人如此关注它并押上公司的未来?但为什么 Facebook 弃 HTML5 转 Objective C?H

HTML5 Canvas捕获用于游戏开发的键盘、鼠标和触摸事件

学习如何处理键盘和鼠标事件,如何阻止 Web 浏览器的默认事件行为,以及如何向游戏对象的某种逻辑表示传播事件.此外,还将学习如何处理 iPhone 和 iPad 等移动设备上与设备无关的(device-agnostic)输入. 令拥有 Flash 或 Silverlight 背景的开发人员感到惊讶的是,为 HTML5 Canvas 编写的应用程序在处理用户输入方面并没有什么特立独行之处.实质上,从启用了 JavaScript 的 Web 浏览器诞生之初开始,HTML 用户输入就涉及到使用内置于浏

HTML5的Web应用程序

本文来自:html5tutorial.net,由于英文水平太差,翻译不到位的地方请谅解. 我非常高兴HTML5教程的人们给了我这个机会向你们介绍我们公司开发的基于HTML5的model viewer应用程序.之前我一直在AG软件效力,自1969年开始和AG合作.关于AG软件,你们可能从SOA 基础设施市场上我们的webmethods 和centrasite产品中有所了解.我们在商务过程分析方面以ARIS品牌也推出了一整套此类产品.顾客利用ARIS来整理和分析他们的内部流程和组织. 在我用冗长的企

人气超高的HTML5特效排行榜TOP 10

  现在市面上有一大批HTML5页面模板制作工具,虽然方便了很多非专业设计师制作HTML5页面.但是不得不吐槽的是,很多模板工具平台上的作品大部分还停留在左飞入右飞出的初级境界,想感受真正精妙的高级特效,这10个专业人士的作品不得不看咯. 本文来自优设合作媒体 数英网. 1. 粒子特效 星际传奇:这是探索宇宙的门票 百度百科:为模拟现实中的水.火.雾.气等效果由各种三维软件开发的制作模块,原理是将无数的单个粒子组合使其呈现出固定形态,借由控制器,脚本来控制其整体或单个的运动,模拟出现真实的效果.

HTML5 Canvas渐进填充与透明实现图像的Mask效果

详细解释HTML5 Canvas中渐进填充的参数设置与使用,Canvas中透明度的设置与使用,结合渐进填充与透明度支持,实现图像的Mask效果. 一:渐进填充(Gradient Fill) Canvas支持两种渐进填充方式,一种为线性渐进填充(Line Gradient Fill),另外一种称 为经向渐变填充(RadialGradient Fill).其API分别为: createLinearGradient(x1, y1, x2, y2); 其中x1,y1为第一个点坐标,x2,y2为第二个点坐

HTML5使用drawImage()方法绘制图像

 一.绘制图像 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本. drawImage(image,x,y) : 在canvas中(x,y)处绘制图片. drawImage(image,x,y,width,height) : 在canvas中(x,y)处绘制图片,并将其缩放到指定的宽度和高度. drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,x,y,width,height) : 从图片中切割出一个矩形区

shtml页面局部缓存的实现

 需求背景 平时在web开发中,对于shtml页面,用得最多的SSI指令是include.语法规则如下: <!–#include virtual="shtmlCache/header.shtml" –> 这样可提高代码重用性以及可维护性,因此,一般都把公共文件,如头部.尾部.侧边栏.公共的JS等做成一个单独的文件,然后通过include指令包含进来,这样整个站点的头部.尾部.侧边栏.公共JS等,都可以被引入到shtml页面中.后面需求更改,比如产品需要更改站点头部,也只需要

php+html5实现无刷新图片上传教程_php实例

本篇向大家介绍一种全新的上传图片的方式,利用html5的FileReader读取图片文件,然后将数据传输到服务器再使用PHP进行处理.实现过程如下(带图片预览功能) 前端html代码 upload,html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content=&qu

《HTML5 canvas开发详解(第2版)》——1.6 HTML5 Canvas版“Hello World!”

1.6 HTML5 Canvas版"Hello World!" 如前所述,将Canvas放入HTML5页面时第一件要做的事就是,看看整个页面是否已经加载,并且开始操作前是否所有HTML元素都已展现.在用Canvas处理图像和声音的时候,这点会非常重要. 为此,这里要使用JavaScript的事件.当定义的事件发生时,事件从对象发出.其他对象监听事件,这样就可以基于事件进行处理.用JavaScript可以监听对象的一些常见事件,包括键盘输入.鼠标移动以及加载结束. 第一个需要监听的事件是