BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

采访云适配创始人陈本峰:一行代码实现PC端移动化

| 作者 唐巧 关注 13 他的粉丝 发布于 2013年11月8日. 估计阅读时间: 9 分钟 | QCon上海2018 关注大数据平台技术选型、搭建、系统迁移和优化的经验。

在2013年的中国开发者大会上,云适配创始人兼CEO陈本峰做了名为“多屏互联网时代的网页开发技术”的主题演讲。在演讲前,InfoQ参加了对于陈本峰的访谈,陈本峰分享了“云适配”利用云端技术,只需要一行JavaScript代码即可完成多屏适配的技术方案,并且回答了记者的各种问题。

陈本峰先生是云适配创始人和CEO,W3C中国区HTML5布道官。曾供职于微软总部IE浏览器核心研发团队。在微软前曾在W3C香港实验室研究互联网标准,发表数篇学术会议论文,并发明手机浏览技术专利。曾获微软MVP、微软最佳产品贡献奖,担任美国西雅图华人创业协会董事,中国共享软件联盟首席技术顾问。

“云适配”由陈本峰和高婧在去年年底创办,陈本峰此前在香港科技大学的研究课题即与之相关,后来在微软总部参与了 IE8、IE9 浏览器的内核研发后对网页渲染技术有了更深的了解,因此在回国创业后选择了这一方向。云适配于今年 7 月份从微软云加速孵化器毕业,获得几位天使投资人和机构的数百万人民币天使投资。

陈本峰先生首先介绍了为什么要做“云适配”以及他创建“云适配”的愿景,他在访谈中介绍说:

因为我自己很早以前在W3C制定整个互联网标准的,后来又去做浏览器,所以我的整个职业生涯基本上就是围绕着整个互联网这个标准技术来做的。做这么多年的过程当中,我逐渐发现整个互联网未来会面临的一个问题:过去大家只会用一种设备上网,就是PC电脑上网。整个互联网的标准技术都是围绕PC制定的,整个浏览器都是围绕PC标准做的。这时候这个就没有问题。但是随着现在设备越来越多,出现了手机、出现了平板,未来还会出现电视,还会出现智能手表,还有谷歌眼镜,甚至还有车载系统,那大家可以看到未来整个互联网会进入一个新的时代叫多媒体时代,这是我今天下午要演讲的主题,多媒体时代。

面对这么多屏幕,开发者就会面对一个巨大的挑战,我怎么让我的网页在各种屏幕上都有很好的呈现和用户体验。因为这些屏幕大小不一样,操作方式不一样,PC上面是鼠标键盘,手机是触摸,电视上是摇控器,反正有各种各样的操作方式。那这些开发者要为每一个设备都去开发一个网站的话成本就相当高了,你以后可能要做网站就不是做一个网站,要做几十个网站,面对各种各样的设备,那就是一个巨大的痛苦,那很多开发者就没有办法,就只适配PC。这样的话用户很痛苦,要用手机上网就要不同的撤换,看一个网页非常累。

所以我们创办云适配的愿景就是希望解决未来多媒体时代整个互联网浏览体验的问题。我们公司的口号就叫同一个互联网任何一个设备,翻译过来就是让任何人可以用任何设备都很方便的浏览互联网,这是我们公司的愿景。而且我们也会不停的朝着这个愿景努力奋斗。我希望未来人们已经没有多屏移动互联网或者PC互联网的概念了,反正用任何一种设备打开这个网站都有很好的体验,操作起来都很方便,这是希望未来看到互联网的一个形态。

对于“云适配”如何做到只用一行JavaScript代码即解决了多屏适配问题,陈本峰介绍了一下云适配使用到的核心技术:

有两方面的技术,一方面是云计算的技术,因为我们云适配。在云端,我们研究了大量对各种各样设备的特征,例如你什么样的手机,你的屏幕分辨率怎么样,屏幕大小怎么样,我们云端有很多这样的数据,我们云端也有很多处理的规则,比如说这样一个屏幕的手机它应该怎么样去处理。

然后在手机端,因为很多适配功能都是在手机浏览器端发生的,我们也是把浏览器的过程改变了一下,原来按正常的浏览器浏览应该把原网页启动出来,加了云适配代码以后把整个原网页去掉了,整个页面根据我们云端计算出来的规则做一些重排,然后再让浏览器继续渲染这个网页,这里面用到了很多浏览器渲染的技术。因为以前我一直做浏览器内核的,对这块相当熟悉。整个手机端的适配过程大概0.1秒,是非常快的。

另外,在云适配平台基础上还会延伸出很多增值服务,有一个就是图片压缩,PC端的话大家用的图片都是高清的,手机小屏幕上如果用那么大图片的话浪费了很多流量,我们在做这个过程当中,也会把图片作为一个压缩到最适合你这个手机屏幕的版本,平均下来基本上压缩到原来的五分之一,也是大幅度降低用户的流量,也大幅度提高下载速度。

InfoQ也提出,现在“响应式”设计的网页开发方式非常流行,按“响应式”的方式做网页开发,即可自动适配各种屏幕尺寸,对此“云适配”的优势在哪里呢?陈本峰回答道:

现在做跨屏主要有三种解决方案,一种是重新开发一个手机版,这是非常原始的非常粗糙的一种方式。第二种就是响应式,响应式到目前为止历史也非常短,基本上是2010年5月份提出来,2010年下半年的时候,这个理论才基本成型,到现在也就两年时间。

国外的一些网页开发社区,对响应式的评论是有很多方面的,其中对它负面的话主要包括两部分,一部分是响应式的整个网页尺寸相当大。国外有一个人做了一个实验,把国外一些响应式网页都爬了一遍,发现基本上等同于原来PC的流量。大家知道在手机端网速是非常慢的,而且流量都是要付钱的。这是响应式的一个最大的缺点。

另外响应式在处理简单网页的时间比较好做,比如说博客,博客应该是众多网站里面最简单的一个。这种网页用应式比较好做,但是网页一旦复杂了,那这就非常复杂了。这个情况下你再去做响应式的话,你要考虑的因素就非常非常多。大家在解决一个问题的时候,如果考虑单一因素的话很好解决,但是如果有多种因素都需要考虑的话可能会导致这个问题没有办法解决。所以做复杂的网站,用响应式做,前面的规划和后面的实施周期,可能会大于单独开发PC版,没有在开发成本上造成节约,所以这是它很大一个弊端。其实我们知道有很多网站都比较复杂,博客这样的网站只是一部分,所以它不是可以解决包治百病的解决方案。

还有一种它的理念是页面的内容结构不变,只是修改样式。其实在很多情况下,PC端的网页跟手机端的网页,页面是需要调整的。比如说电商,有一个大的商品介绍,还有一个购买按纽,如果按照普通的来排会把购买按纽排在大的图片下面,实际做的话你希望把这个购买按纽放在上面,因为用户没有耐心把这个图片一直拉到下面。云适配是综合了这种响应式的优点以及重新开发一个网站优点,云适配是非常灵活的,你可以根据这个设备做重排,它是综合了那两个传统方式的优势。

所以现在基本上解决跨屏开发的三种模式:重新开发网站,响应式还有云适配的模式。

最后陈本峰也分享了他对于手机浏览器和移动APP之间竞争的看法,他说:

APP和浏览器之间的竞争已经存在了好久了,今天大家看到的浏览器就是PC时代的软件,大家现在看到的苹果市场,其实就是当年我们去天空下载站,华军软件园,就是今天的APP商店,其实整个事情以前已经发生过。

大家去看现在的PC时代是什么样,你还会下载QQ、下载浏览器,下载暴风,你也会用浏览器看一个公司的官网,比如说用浏览器看9Tech或者是微媒体的官网。但是反过来如果9Tech或者微媒体写一个软件放在华军软件园,大家会下载吗?大家不会用软件的方式阅读,软件的方式还有很大一部分,里面的东西没有办法把搜索引擎检索到。所以这种信息类的肯定是以网页形式存在的。

未来这个格局也是一模一样的,大家还是会下微信、微博、以及听歌的、看电影的应用。但是绝大多数企业的官网和媒体的网站,更多的还是去用网页来呈现信息,这比较方便。比如说我看到了一篇你写的很好的文章,我分享出去,在微信朋友圈或者微博里面分享了文章,其实分享出来是一个链接,我的朋友看到了这个文章很好点进去,这时候让他再下载一个APP看你的文章他会下吗?如果这个网站点一下两三秒钟就可以看到你的文章了,和要下载一个APP才能看到的文章肯定好很多是吧?


感谢杨赛对本文的审校。

给InfoQ中文站投稿或者参与内容翻译工作,请邮件至editors@cn.infoq.com。也欢迎大家通过新浪微博(@InfoQ)或者腾讯微博(@InfoQ)关注我们,并与我们的编辑和其他读者朋友交流。

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT