html5网站
2014年10月29日,网站W3C宣布HTML5标准正式定稿。网站那天我在旧电脑上打开一个测试页面,网站滚动条丝滑得像抹了油,网站视频不用插件就自己播了起来。网站那一刻我意识到,网站浏览器不再是网站文档查看器,它变成了一台能跑任何东西的网站虚拟机。
HTML5不是网站一次升级,是网站推倒重来。以前做网页,网站你得给IE6写一套代码,网站给Firefox写另一套,网站再给Chrome写第三套。网站现在一个<video>标签通吃所有平台,网站移动端和桌面端共用同一套语义结构。我见过一个老前端,他花了十年记住各种浏览器 hack,HTML5定稿那天他发了条朋友圈:"十年功力,废了。"底下有人回复:"不是废了,是解脱了。"
真正让我震撼的是Canvas。第一次用<canvas>画出一个旋转立方体时,我盯着屏幕看了十分钟——不是因为它好看,而是因为这段代码只有二十行。放在五年前,同样效果需要Flash插件加三千行ActionScript。后来我做了一个小游戏,用Canvas渲染粒子特效,手机上的帧率稳定在60。同事凑过来问用的什么引擎,我说就一个标签。他以为我在开玩笑。
WebSocket改变的是交互模式。以前要实现实时聊天,得用轮询——每三秒发一次请求,服务器被无意义的握手请求打到快崩溃。WebSocket建立一条持久连接,服务器能主动推数据。我做过一个协作白板,两个人同时在上面画图,延迟低于50毫秒。那种"对方笔尖跟着你动"的体验,让一个做了五年传统网页开发的人脊背发凉。
但HTML5不是没有代价。移动端的Safari曾经对position: fixed支持得稀烂,滚动时元素会抽搐。iOS 6时代,<input type="date">在部分安卓机上弹不出键盘。这些坑现在还在,只是被各种polyfill和框架填平了。说到底,HTML5是个标准,不是个产品。标准永远追不上硬件,但至少它给了方向。
最典型的案例是YouTube。2010年他们还在用Flash,乔布斯一封公开信骂Flash耗电、不安全、触控体验差。YouTube花了一年时间把视频播放器整体迁移到HTML5,结果呢?现在任何浏览器打开YouTube,视频自动适配分辨率,拖进度条不用等缓冲,后台标签页自动暂停。用户没感觉到变化,但全世界视频网站都跟着换了血。
另一个细节是<details>标签。默认折叠、点击展开,原生实现,零JavaScript。我拿它做文档目录,做FAQ,甚至做树形菜单。有次一个后端同事看到我的代码,问"这个交互效果怎么不需要写事件监听?"我说这就是个标签。他愣了两秒,说"那我是不是也能写前端了?"——当然不能,但他这句话点醒了我的一个认知:HTML5把很多"看起来需要编程"的事变成了"写个标签就行"。
现在打开一个HTML5页面,就是在打开一个操作系统。它不依赖任何插件,不需要安装,没有版本号。我做过一个地图应用,用WebGL加载三维地形,用WebSocket同步多人位置,用Service Worker做离线缓存,整个包体不到一兆。用户从点击链接到开始交互,花了不到一秒,这中间没有下载安装提示,没有"请更新Flash Player"的弹窗。
这就是HTML5的野心——它不满足于做标记语言,它想成为web本身的地基。而地基最大的本事,是你平时根本感觉不到它的存在。
(责任编辑:娱乐)












