也许,DOM 不是答案

转载 2015年07月08日 10:18:38

有一个词"手机网站"(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。

(完)


文章出处     http://www.ruanyifeng.com/blog/2015/02/future-of-dom.html

也许 DOM 不是答案

转载地址:http://www.admin10000.com/document/5973.html 有一个词"手机网站"(mobile web),指供手机浏览的网站,但它是不存在的。...
  • abxn2002
  • abxn2002
  • 2015年02月26日 09:59
  • 347

也许,DOM 不是答案

有一个词"手机网站"(mobile web),指供手机浏览的网站,但它是不存在的。 人们提到"移动互联网"的时候,其实专指另外一样东西:手机App。 一、Web App vs. N...
  • qq_21298703
  • qq_21298703
  • 2015年04月10日 17:39
  • 177

也许,DOM 不是答案(手机APP页面开发的思考)

也许,DOM 不是答案 作者: 阮一峰 日期: 2015年2月22日 有一个词"手机网站"(mobile web),指供手机浏览的网站,但它是...
  • cwscwj
  • cwscwj
  • 2016年04月25日 18:19
  • 366

深入浅出React之第一章:DOM,也许不是答案

react,新的前端思维方式 react的首要思想是通过组件来开发应用。所谓组件,简单的来说就是能完成某个特定功能的、独立的、可重用的代码。通过基于组件的开发模式,把一个大的应用分解成若干小的组件,每...
  • qq_26708777
  • qq_26708777
  • 2017年10月09日 00:29
  • 205

ext中dom为空或者不是对象

ext中dom为空或者不是对象   2012-11-14 20:31:49|  分类: extjs |  标签:ext  extjs  |举报|字号 订阅      ...
  • evilcry2012
  • evilcry2012
  • 2016年02月17日 11:14
  • 278

javascript dom编程艺术网页案例

包含了五个页面,N多函数,完成工作有幻灯片,点击显示内容功能,图片库,表格优化,表单优化,我自己没有写最后表单的ajax 在博客上只放了 js 函数代码,是供自己温习,想要学习建议阅读书籍。 案例...
  • unaMattin
  • unaMattin
  • 2016年12月04日 23:44
  • 755

顿悟人生,一句话的人生哲理!

有人说,人生的质量不在于生命的长短,而在于顿悟的早晚。什么是顿悟?就是人生轨迹发生转折的起点!很多人可能一辈子也不会有顿悟,始终过着按部就班、循规蹈矩、庸庸碌碌的日子。有些人在遭遇重大变故的时候获得了...
  • chen19921212
  • chen19921212
  • 2014年09月04日 22:40
  • 1087

DOM对象的dataset属性

HTML5规定DOM对象中有个dataset属性对象,可以在该对象中存一些与该DOM对象相关的数据。如上写法是在生成dom对象时对dataset的一个初始化的动作,dataset中会存在一个id属性和...
  • tt361
  • tt361
  • 2013年12月11日 20:54
  • 2245

jQuery 中的 DOM 操作-查找节点

•DOM(Document Object Model—文档对象模型):一种与浏览器,平台,语言无关的接口,使用该接口可以轻松地访问页面中所有的标准组件 •DOM 操作的分类: –DOMCore: ...
  • fanpengfei0
  • fanpengfei0
  • 2017年01月09日 00:36
  • 752

DOM树

1、DOM树  所有类型的XML解析器都要求处理对象是“格式良好”的XML文档,有些还能根据DTD或XML Schema进行有效性验证,DOM(Document Object Model)解析器将XM...
  • hxy2003
  • hxy2003
  • 2005年03月21日 15:12
  • 5335
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:也许,DOM 不是答案
举报原因:
原因补充:

(最多只允许输入30个字)