【转】WebApp 和 NativeApp 的世纪之战

原文地址:http://www.heqiangfly.com/2017/08/05/mobile-internet-webapp-vs-nativeapp/

概述

自从Android系统在手机上应用开始,在移动端 Native App 和 Web App之间的战争似乎就没有停止过,Web App 及其各种变体向Native App 发起了无数次的冲锋,但Native App的地位仍然是岿然不动,甚至我们一提起移动互联网,就专指 Native App。这和 PC 端的景象完全不一样。随着轻应用、Hybrid App 、React Native、Weex已经微信小程序的出现,我们不得不再一次审视这个问题。

WebApp的特点

WebApp 之所以有资本向 Native App 发起挑战,那么它自身还是有实力的:

跨平台:所有系统都能运行,Android、IOS和Web

免安装:打开浏览器,就能使用

快速部署:升级只需在服务器更新代码

超链接:可以与其他网站互连,可以被搜索引擎检索

Web在PC端的这些优点,使得互联网和原生应用分庭抗礼,除了一些工具性的软件,一个浏览器基本可以满足我们的日常需要:购物,娱乐等等。

但是移动互联网毕竟不是PC互联网,它的一些缺点也限制了它的使用。

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

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

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

那么,之所以业界不支持和用户不在乎的原因无非就是性能差,从而造成用户体验差。

WebApp的性能问题

Web app输给Native app的地方,不是界面(UI),而是操作性能。

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

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

虽然现在浏览器也支持多线程,比如JS解析在一个线程,渲染在一个线程,但一般是按照先解析再渲染再执行 JS 这样的顺序执行的。

在Android早期的版本中,webview的性能很差

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

WebApp的优化方向

多线程浏览器。每个网页应该由多个线程进行处理,主线程只负责布局和渲染,而且应该在16毫秒内完成。Mozilla 的 Servo 就是这样一个项目,JS解析,页面渲染和JS执行在三个能并发执行的任务中进行。Chrome也支持多线程。

多进程浏览器。

并发布局。把页面中那些不会影响其它元素属性的独立部分识别出来,让它们与剩余部分并行渲染。

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

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

采用原生的渲染方案。布局的解析在JS端完成,渲染在Native端完成。

优化WebView性能,目前chromium支持硬件渲染。

目前,WebView以及JS引擎的优化日新月异,因此,我们相信可以带动WebApp的崛起。

WebApp的进化史


图1
图2

WebApp的未来

微信小程序,大多数人误解的8个问题 这篇文章写的很好,大家可以阅读一下。

小程序和直达服务等形态应该是移动端App的未来,在移动互联网下半场你想打开一个应用,可能就不需要去应用商店下载个App,等下载完安装后使用,只需要打开微信就行了,找到相关应用就可以了。

直达服务依据手机OS生态,可以做到与手机系统服务的紧密结合,小程序依据微信生态,但绝不是把微信作为一个入口或者是作为一个应用商店这么简单的事,它的野心是一个OS生态。

参考文档

http://www.ruanyifeng.com/blog/2015/02/future-of-dom.html

https://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=2650994254&idx=1&sn=b5a291309cb35e229bdc66052200a39f&chksm=bdbf0e1d8ac8870bd7a6a1b80cd6dbc906251c8b31ea5959419846b312b3b84b8048aa05cc3f&mpshare=1&scene=2&srcid=0928TYbsbovyAI1YJ7aXvfl9&from=timeline&isappinstalled=0&key=9289b6ec21f92a5928c971e763199c62958da88ae7805f55d3594ba99548c4cba2da3c66d7d31038140a81ad4b95694b&ascene=2&uin=MjgyMTI0MDAzMg==&devicetype=android-21&version=26031933&nettype=WIFI&pass_ticket=9nkAV8PvXod8+giTIP0YLiH5aU7EbFOiU8wA5OZrfdzQWSgzai7BiNlh3Ko9rg9y&wx_header=1

http://36kr.com/p/209983.html

http://naotu.baidu.com/file/1eb556f3380e8189be859348527ec518?token=a5a049eb4c618e70

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容