也许,DOM 不是答案

有一个词"手机网站"(mobile web),指供手机浏览的网站,但它是不存在的。

人们提到"移动互联网"的时候,其实专指另外一样东西:手机App。


一、Web App vs. Native App

比起手机App,网站有一些明显的优点。

  • 跨平台:所有系统都能运行
  • 免安装:打开浏览器,就能使用
  • 快速部署:升级只需在服务器更新代码
  • 超链接:可以与其他网站互连,可以被搜索引擎检索

但是,现实是怎样呢?

(1)体验差。手机App的操作流畅性,远超网站。

(2)业界不支持。所有公司的移动端开发重点,几乎都是原生app。

(3)用户不在乎。大多数用户都选择使用手机app,而不是网站。

如果将来有一天,Web app会成为主流,一定有一个前提,那就是它的性能可以赶上Native app。

二、为什么Web app有性能瓶颈?


Web app输给Native app的地方,不是界面(UI),而是操作性能。主要是互动(interaction)和动画(animation)这两方面,会出现卡顿(jank),用户会感觉到明显的时滞,有时简直慢得难以忍受。

Web app的性能瓶颈,主要有以下原因。

(1)Web基于DOM,而DOM很慢。浏览器打开网页时,需要解析文档,在内存中生成DOM结构,如果遇到复杂的文档,这个过程是很慢的。可以想象一下,如果网页上有上万个、甚至几十万个形状(不管是图片或CSS),生成DOM需要多久?更不要提与其中某一个形状互动了。

(2)DOM拖慢JavaScript。所有的DOM操作都是同步的,会堵塞浏览器。JavaScript操作DOM时,必须等前一个操作结束,才能执行后一个操作。只要一个操作有卡顿,整个网页就会短暂失去响应。浏览器重绘网页的频率是60FPS(即16毫秒/帧),JavaScript做不到在16毫秒内完成DOM操作,因此产生了跳帧。用户体验上的不流畅、不连贯就源于此。

(3)网页是单线程的。现在的浏览器对于每个网页,只用一个线程处理。所有工作都在这一个线程上完成,包括布局、渲染、JavaScript执行、图像解码等等,怎么可能不慢?

(4)网页没有硬件加速。网页都是由CPU处理的,没用GPU进行图形加速。

上面这些原因,对于PC还不至于造成严重的性能问题,但是手机的硬件资源相对有限,用户互动又相对频繁,结果跟Native app一比,就完全落在了下风。

三、FlipBoard的解决方案

FlipBoard原本是一个手机App,最近开始部署Web版本,结果就遇到了上面的问题:Web版的体验不佳。

上周,他们将解决方案公布在网站上,结果引起了业界轰动,因为这是一个史无前例的解决方案:

---- 他们没有使用DOM,而是将整个网站用canvas输出!


你可以用手机打开flipboard.com,体验一下,看看跟Native app有没有差别。如果你没有帐号,可以直接打开这里这里

这个方案的出发点是这样的:如果将网页变成了一个个canvas,用户就等于在跟图片互动,这样就绕开了DOM,降低了操作时滞。而且,canvas可以被硬件加速,这样就提高了性能。具体的技术细节,可以参考原文。canvas的转化基于React框架实现,FlipBoard 开发了一个专门的库React-canvas,已经开源。

这个方案引发了很多争议(这里这里),主要是canvas只是一个位图,本身没有语义,如果要在它上面实现UI,等于HTML语言已有的东西都要再发明一遍,比如如何实现超链接、如何实现CSS效果等等。一些最简单的东西都变得很麻烦,因为canvas不是自适应的(responsive),文字在哪里断行,都要自己计算,而且用户也无法选中文本。另外,怎么让搜索引擎检索网页,解决起来也不是很容易。

但是不管怎样,这是一个有意义的尝试。

四、未来的路

James Long对FlipBoard的尝试,写了一篇评论《Radical Statements about the Mobile Web》。本文就受到了那篇文章的启发。

在文中,James Long对未来的Web app提出了几点预测,我认为很值得分享。

(1)多线程浏览器。每个网页应该由多个线程进行处理,主线程只负责布局和渲染,而且应该在16毫秒内完成,JavaScript由worker线程执行,这样就不会发生堵塞了。Mozilla正在开发的Servo就是这样一个项目。

(2)DOM的异步操作。JavaScript对DOM的操作不再是同步的,而是触发后,交给Event Loop机制进行监听。

(3)非DOM方案。浏览器不再将网页处理成DOM结构,而是变为其他结构。React的Virtual DOM方案就是这一类的尝试,还有更激进的方案,比如用数据库取代DOM。

时间: 2024-11-18 10:20:59

也许,DOM 不是答案的相关文章

React 入门实例教程

现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了. 由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单.所以,越

jQuery选择器全集详解_jquery

选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器 的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写jQuery代码的效率.本文配合截图.代码和简单的概括对所有jQuery选择器进行 了介绍,也列举出了一些需要注意和区分的地方. 一.基本选择器 1. id选择器(指定id元素) 将id="one"的元素背景色设置为黑色.(id选择器返单个元素) $(document).ready(fu

jQuery选择器大全(48个代码片段+21幅图演示)-转http://www.cnblogs.com/keepfool/archive/2012/06/02/2532203.html

选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写jQuery代码的效率.本文配合截图.代码和简单的概括对所有jQuery选择器进行了介绍,也列举出了一些需要注意和区分的地方.     本文已经同步至我的个人博客站点:积累吧|jQuery选择器大全(48个代码片段+21幅图演示) 一.基本选择器 1. id选择器(指定id元素) 将id="one&

百度权重还剩几分重?

  百度权重,从事SEO工作的朋友都很了解,友情链接时,换链接的双方会不自住地写上,我的网站百度权重是多少了;一些卖链接的人也会提高,自己的链接百度权重多高;常见的还有一些软文发布平台也会写出自己网站的权重有多高.百度权重,一直以来被站长朋友们神化. 百度权重是什么? 百度权重,简单地理解就是你的网站从百度来的流量有多大.通过网站相关关键字从百度搜索进来的流量越高,百度权重也越大,百度权重数字是0-9. 百度权重真的很重要么? 从百度来的流量越高,你的网站相应的百度权重就越大,所以从SEO的角度

给设计师们的代码指南之定位与布局

  之前说了什么是 CSS ,也介绍了 CSS 的盒模型,下面理所当然地要进入 CSS 的核心内容,定位与布局.其实说完这个部分,CSS 就没什么东西可说了,剩下的都是些细枝末节或者很直观的东西.对,把最抽象的这部分理解了, CSS 就没有任何难度可言了. 如果你的制图习惯比较良好(良好的意思是有比较完整地执行这里:http://hao.uisdc.com 的规则),有好好对图层进行分组,那么你就已经对你的设计稿完成了最初步的切版工作.按照你切的版,把元素一个个码好,你的页面就搞定了.然而实际上

七款2000元内显卡对比评测

  虽然售价在1000-2000元价位段中的显卡产品很受玩家青睐,但考虑到处在这一价格区间内的显卡型号比较多,不仅包含了AMD.NVIDIA这两家新推出的新品R9 285.GTX 960,还有一些在显卡市场中混迹多年的"老家伙",比如R9 280X.R9 280.R9 270X.GTX 770以及GTX 760.这些显卡虽然同处一个价格区间内,但这些显卡却在游戏性能方面的表现却各不相同,价格上也有一定的差异.所以说,大伙要想从中挑选出最适合自己的显卡好像并不太容易,而且很容易让部分玩家

人类最遥远的ROM

疯狂的一周过去了.在过去的一周里电商开战了,小米发2了,黑客们正在谋划疯狂的计划.Windows 8将要面临兄弟相争,Linux阵营更是同袍相残.我们努力学习艰苦奋斗又将踏上怎样的征途?也许你还没有答案,也许你还在那边默默的写着代码.下面小编就带大家回顾一下这疯狂的一周. 小米1S.小米2 8月16日下午,小米科技在北京发布了小米手机二代,这款产品与一代同样定位发烧级手机,售价为1999元.采用高通APQ 8064四核处理器,这也是首款采用此处理器的产品.除了小米二代,本次发布会还发布了小米手机

网上买车靠谱吗?请给购车人来点实在的!

&http://www.aliyun.com/zixun/aggregation/37954.html">nbsp;   网上买车这个词被提了又提,就像故事"狼来了"一样,4S店对此风声的态度已成"随他去吧",在行业内,一方面厂家主动或被动的积极推行和启动网上售车模式,另一方面又极力的笼络线下市场--4S店.网上卖车这个模式到底是应市场和消费者需求发展起来?还是商家为了营销创新而主动推进呢? 今早我在微信朋友圈看到一个朋友发的帖子"

史上最难的面试谜题

史上最难的面试谜题 你曾经在应聘一份编程工作的面试中被问及一些解谜类的问题吗?反正我碰到过.我被问到的那个问题是: 你最喜欢的那个牌子的苏打,有多少是在这个州被消费的? 拜托,正确的答案不能是"关我什么事",除非你不想得到这份工作了.我当时对这个问题毫无头绪,后来才知道这是一个"费米 问题"(Fermi Question). 谜题作为一种新生事物,在20世纪90年代的程序员面试里风靡一时.这在<如何移动富士山?>(<How Would You Mo