HTML 5 应用的用户体验能达到本地应用那么好吗？
程序员文章站
2022-05-02 17:30:02
...
我是指用 HTML 5做成 Web 应用或打包成本地应用两种情况下
1. Shiu：HTML5 打造的离线 web book（app），请用 iPhone 测试 [1]
2. Flipboard 的 web 仿造版 [2]
HTML5 可以（或者说有潜力）在用户体验上达到本地应用的__平均水准__。
这主要得益于 Webkit 带来的竞争，标准「军备」翻了一翻：
- CSS animation, GPU acceleration
- JavaScript/DOM API improved, e.g. File API
- Offline storage
但是 HTML5 应用最大的问题（瓶颈所在）却还没有「标准地」解决：
- 性能
- OS 交互
虽然 V8 引起的性能竞争很激烈，但终究也只是 JS engine，HTML5 可不是一个 JS 快了就完事的玩意。
比如 DOM repaint & reflow、CSS animation 都不是低需求的主。
GPU acceleration 实现也还不是「标准」，各有各的情况。
这里举两个例子：Twitter & http://iCloud.com。
Twitter 网页版体验上看上去挺接近本地应用的（除了 online 外），但是在 Chrome 下占用内存可以轻易超 100MB，最多时 800MB（似乎是 Chrome bug 引起），长时间运行会影响系统效能。
而 Echofon 在长时间运行后，始终保持在 100MB 以下，CPU 也不会高。
http://iCloud.com 在 UI 和功能上都往本地应用看齐，比如 Calendar。但遗憾的是，在我的 MBP 374 里，卡顿感明显，比如双击后停顿 .5s~1.5s 才弹出添加事件的窗口。并且内存占用达到了 438MB。
至于 OS 交互，你懂的。
因此 HTML5 的体验可以达到本地应用的__平均水准__，再往上就需要看平台、设备，对开发者的水平也挺看重。
HTML5 应用更多是看运行的平台，比如背后用 Cocoa、界面用 WebView 呈现，比如豆瓣出品的 OneRing，比如针对 Chrome/Webkit 的离线应用。
所以建议你们在考虑「HTML5 体验行不行」时，先考虑：
- HTML5 开发成本 V.S. 本地应用开发成本（比如团队学习成本）
- 核心需求是否能通过 HTML5 实现（比如 UI animation 是不是很多）
- 核心用户的平台（比如中国 Win 用户）
- ......
如果目标群体设备的性能都比较理想，HTML5 是不错的。
另外，上面都是谈普通应用，游戏的话，HTML5 是很好的平台，会有更好的表现。
----
- [1] https://github.com/alswl/shiu
- [2] http://tympanus.net/Development/FlipboardPageLayout/?page=0 取决于你的应用类型，你需要大量的特效和动画，或者调用很多系统资源比如摄像头的话，HTML5不是个好选择。否则的话问题不大。
当然这并不是说HTML5只能开发简单朴素的应用，从google的动态doodle和g+其实可以看出HTML5的能力。
使用HTML5需要前端对浏览器性能和差异的了解很深，才能保证整体效果。要解决响应速度问题，开发中可以使用适当分页面加载，或者先响应动作，再加载数据或者直接预加载数据的方式解决，只不过对前端代码的要求就更高了。 对于HTML5的效果和效率讨论详细在很长时间内都是一个无法回避的话题。下面从几个方面来谈谈我的看法。
首先，随着硬件和系统的不断升级，一些以前很头疼的效率和效果都能得到解决，比如在android2.3时代的页面展现，由于使用的是android browser而不是
chrome，有很对webkit特有的特性都不支持，如输入框的边框显示，css的遮罩效果，一些css特效动画等都不能实现。从效率上页面渲染的速度也比较慢，主要原因
应该还是dom占用内存很多导致。而目前的主流手机都已经是2G甚至4G内存+,并且大都配置了android 4.x(关键是4.4版本)了，浏览器默认都是chrome了，上述问题可以说
基本得到了解决。因此我想说的是，当我们把目光放远一些，会发现HTML5是很诱人并且确实是很现实的选择了。
然后谈一下做一款HTML5应用的体会和经验吧，对于HTML5和原生的优劣比较这里不多说了，已经有了很多很好的论述，我从实际开发的角度说一下有哪些可以优化的地方。
1 网络连接优化：应该说网络连接优化是最可控的，这个能达到和原生应用完全一致的体验。原因很简单，HTML5应用里面所有的html页面，css，js，图片等，我们都
可以打到安装包中，用户安装完毕后，打开的页面都是本地页面，不需要连网，只有产生业务数据时，才使用AJAX进行数据请求。而对于网络情况的判断，对于连接超时的
设置等，JS或者说XHR规范都支持了。
2 数据本地存储：主流浏览器对于LOCAL STORAGE的支持没有问题，可以保证本地存储的实现。当然，这个存储是KEY-VALUE模式的，需要在应用中对于存储的数据进行
一定的设计，比如用JSON存储实际数据，而对于这些数据的检索，目前也已经有了不少JSON QUERY的支持库了。当然CHROME也支持SQL LITE，不过个人对于这种方式
不推荐，毕竟在客户端上我们不需要太复杂的SQL查询。
3 文件本地存储：在原生应用中很多文件我们都需要下载到本地，比如音视频，图片等，HTML5应用一样，如果是纯HTML模式那么目前我们可选择的就只有CHROME的
FILE SYSTEM了，当这个选择会有一些限制，比如需要用户同意本地存储的策略，另外FILE SYSTEM的存储路径与物理路径没有直接关联，这个对于应用的调试和管理
也会产生障碍。因此这里还是推荐使用原生插件的模式，利用原生文件系统做这个事情，比如CORDOVA的FILE TRANSFER插件。
4 音视频的播放：HTML5的插件可以满足需求
5 动画效果：HTML5 CANVAS以及CSS3的各种动画特效都能满足需要。
6 录音录像：CHROME的WEBRTC可以实现，但是在手机上的效果一般，还是建议使用原生的插件或者自定义插件实现。
7 页面展现和排列：这个确实效率比原生应用有一定差距，尤其是滚动和页面内容比较多的时候。这就需要应用在渲染的时候进行优化，比如限制展现区域，比如在定义
点击区域时尽量使用TAP而不是CLICK，并且最好减少对于大区域的点击事件.....
最后介绍一款使用HTML5实现的安卓应用:),OK外语宝，一款英语学习的安卓应用，使用CORDOVA框架实现的HTML5与原生混合型应用，
里面的HTML5实现了动画，音视频，语音录制，语音识别，本地文件和数据存储，网络同步等多个HTML5特性的使用。在各大应用市场都可以下载这款应用（应用宝市场：http://android.app.qq.com/myapp/detail.htm?apkName=com.okappclient）。而且还有一个特色是这个应用真正实现了原生与HTML5的同步，即所有的安卓应用功能都能在网页上同步呈现。用CHROME浏览器访问web.okkouyu.com，你会发现里面的内容与手机上安装的功能完全一致。 先不说别的，webapp顶部一个bar，浏览器上面又算一个bar，看起来都是怪怪的。
回复内容：
先举两个案例：1. Shiu：HTML5 打造的离线 web book（app），请用 iPhone 测试 [1]
2. Flipboard 的 web 仿造版 [2]
HTML5 可以（或者说有潜力）在用户体验上达到本地应用的__平均水准__。
这主要得益于 Webkit 带来的竞争，标准「军备」翻了一翻：
- CSS animation, GPU acceleration
- JavaScript/DOM API improved, e.g. File API
- Offline storage
但是 HTML5 应用最大的问题（瓶颈所在）却还没有「标准地」解决：
- 性能
- OS 交互
虽然 V8 引起的性能竞争很激烈，但终究也只是 JS engine，HTML5 可不是一个 JS 快了就完事的玩意。
比如 DOM repaint & reflow、CSS animation 都不是低需求的主。
GPU acceleration 实现也还不是「标准」，各有各的情况。
这里举两个例子：Twitter & http://iCloud.com。
Twitter 网页版体验上看上去挺接近本地应用的（除了 online 外），但是在 Chrome 下占用内存可以轻易超 100MB，最多时 800MB（似乎是 Chrome bug 引起），长时间运行会影响系统效能。
而 Echofon 在长时间运行后，始终保持在 100MB 以下，CPU 也不会高。
http://iCloud.com 在 UI 和功能上都往本地应用看齐，比如 Calendar。但遗憾的是，在我的 MBP 374 里，卡顿感明显，比如双击后停顿 .5s~1.5s 才弹出添加事件的窗口。并且内存占用达到了 438MB。
至于 OS 交互，你懂的。
因此 HTML5 的体验可以达到本地应用的__平均水准__，再往上就需要看平台、设备，对开发者的水平也挺看重。
HTML5 应用更多是看运行的平台，比如背后用 Cocoa、界面用 WebView 呈现，比如豆瓣出品的 OneRing，比如针对 Chrome/Webkit 的离线应用。
所以建议你们在考虑「HTML5 体验行不行」时，先考虑：
- HTML5 开发成本 V.S. 本地应用开发成本（比如团队学习成本）
- 核心需求是否能通过 HTML5 实现（比如 UI animation 是不是很多）
- 核心用户的平台（比如中国 Win 用户）
- ......
如果目标群体设备的性能都比较理想，HTML5 是不错的。
另外，上面都是谈普通应用，游戏的话，HTML5 是很好的平台，会有更好的表现。
----
- [1] https://github.com/alswl/shiu
- [2] http://tympanus.net/Development/FlipboardPageLayout/?page=0 取决于你的应用类型，你需要大量的特效和动画，或者调用很多系统资源比如摄像头的话，HTML5不是个好选择。否则的话问题不大。
当然这并不是说HTML5只能开发简单朴素的应用，从google的动态doodle和g+其实可以看出HTML5的能力。
使用HTML5需要前端对浏览器性能和差异的了解很深，才能保证整体效果。要解决响应速度问题，开发中可以使用适当分页面加载，或者先响应动作，再加载数据或者直接预加载数据的方式解决，只不过对前端代码的要求就更高了。 对于HTML5的效果和效率讨论详细在很长时间内都是一个无法回避的话题。下面从几个方面来谈谈我的看法。
首先，随着硬件和系统的不断升级，一些以前很头疼的效率和效果都能得到解决，比如在android2.3时代的页面展现，由于使用的是android browser而不是
chrome，有很对webkit特有的特性都不支持，如输入框的边框显示，css的遮罩效果，一些css特效动画等都不能实现。从效率上页面渲染的速度也比较慢，主要原因
应该还是dom占用内存很多导致。而目前的主流手机都已经是2G甚至4G内存+,并且大都配置了android 4.x(关键是4.4版本)了，浏览器默认都是chrome了，上述问题可以说
基本得到了解决。因此我想说的是，当我们把目光放远一些，会发现HTML5是很诱人并且确实是很现实的选择了。
然后谈一下做一款HTML5应用的体会和经验吧，对于HTML5和原生的优劣比较这里不多说了，已经有了很多很好的论述，我从实际开发的角度说一下有哪些可以优化的地方。
1 网络连接优化：应该说网络连接优化是最可控的，这个能达到和原生应用完全一致的体验。原因很简单，HTML5应用里面所有的html页面，css，js，图片等，我们都
可以打到安装包中，用户安装完毕后，打开的页面都是本地页面，不需要连网，只有产生业务数据时，才使用AJAX进行数据请求。而对于网络情况的判断，对于连接超时的
设置等，JS或者说XHR规范都支持了。
2 数据本地存储：主流浏览器对于LOCAL STORAGE的支持没有问题，可以保证本地存储的实现。当然，这个存储是KEY-VALUE模式的，需要在应用中对于存储的数据进行
一定的设计，比如用JSON存储实际数据，而对于这些数据的检索，目前也已经有了不少JSON QUERY的支持库了。当然CHROME也支持SQL LITE，不过个人对于这种方式
不推荐，毕竟在客户端上我们不需要太复杂的SQL查询。
3 文件本地存储：在原生应用中很多文件我们都需要下载到本地，比如音视频，图片等，HTML5应用一样，如果是纯HTML模式那么目前我们可选择的就只有CHROME的
FILE SYSTEM了，当这个选择会有一些限制，比如需要用户同意本地存储的策略，另外FILE SYSTEM的存储路径与物理路径没有直接关联，这个对于应用的调试和管理
也会产生障碍。因此这里还是推荐使用原生插件的模式，利用原生文件系统做这个事情，比如CORDOVA的FILE TRANSFER插件。
4 音视频的播放：HTML5的插件可以满足需求
5 动画效果：HTML5 CANVAS以及CSS3的各种动画特效都能满足需要。
6 录音录像：CHROME的WEBRTC可以实现，但是在手机上的效果一般，还是建议使用原生的插件或者自定义插件实现。
7 页面展现和排列：这个确实效率比原生应用有一定差距，尤其是滚动和页面内容比较多的时候。这就需要应用在渲染的时候进行优化，比如限制展现区域，比如在定义
点击区域时尽量使用TAP而不是CLICK，并且最好减少对于大区域的点击事件.....
最后介绍一款使用HTML5实现的安卓应用:),OK外语宝，一款英语学习的安卓应用，使用CORDOVA框架实现的HTML5与原生混合型应用，
里面的HTML5实现了动画，音视频，语音录制，语音识别，本地文件和数据存储，网络同步等多个HTML5特性的使用。在各大应用市场都可以下载这款应用（应用宝市场：http://android.app.qq.com/myapp/detail.htm?apkName=com.okappclient）。而且还有一个特色是这个应用真正实现了原生与HTML5的同步，即所有的安卓应用功能都能在网页上同步呈现。用CHROME浏览器访问web.okkouyu.com，你会发现里面的内容与手机上安装的功能完全一致。 先不说别的，webapp顶部一个bar，浏览器上面又算一个bar，看起来都是怪怪的。