原生页面优劣势
优势:
(1)运行速度比较快
(2)能使用设备的底层功能, 如摄像头, 方向传感器, 重力传感器, 拨号, GPS, 语音, 短信, 蓝牙等
(3)在界面设计, 功能模块, 操作逻辑等层面相较 web 更易做到 App 的便捷性和舒适性, 功能更加强大
(4)节省流量
劣势:
(1)不同的操作系统 (如 Android 和 iOS) 需要独立的进行开发, 使用其各自的开发包, 开发工具和控件
(2)每次有更新, 都需要重新打包一次发布到应用平台上, 且每次要向各个应用商店进行提交审核. 之后用户需要手动进行点击更新安装(安装成本较高)
(3)开发成本比较高, 尤其需要适配各种机型时(如 Android 应用, 需要适配各种 Android 手机)
H5 优劣势
优势:
(1)由于是运行在浏览器上, 所以只需要开发一次便可以在不同的操作系统上显示
(2)迭代版本时, 不需要打包便可以发布(实时更新, 快速迭代), 与云端实现实时数据交互
(3)开发成本相对较低, 对浏览器的适配较简单, 且发布门槛相对较低
劣势:
(1)每次打开页面, 都得重新加载, 获取数据...
(2)过于依赖网络, 速度无法保证. 特别在弱网环境下, 不仅耗费流量而且加载缓慢, 就算是 WiFi 情况下也不容乐观
(3)只能使用有限的设备底层功能(无法使用摄像头, 方向传感器, 重力传感器, 拨号, GPS, 语音, 短信, 蓝牙等功能)
(4)仍处于发展阶段, 部分功能无法在基于现有技术的浏览器基础上实现, 且无法全面的显示最完美的用户体验, 只能用现有技术去弥去找最佳解决方案
Hybrid APP 中 H5 页面注意点
H5 页面的几个动效设计优化点:
1. 尽量使用比较简单的动效, 不要求做到酷炫, 但求做到好用就行
2. 顶部标题栏尽量使用原生的(这样在网速渣, 内容没刷出来的情况下, 也可以快速返回, 不流量)
3. 不要使用浏览器进度条加载方式, 用下拉刷新的方式(和原生保持一致, 不让用户有浏览网页的感觉, 而是在使用 app)
4. 少用手势, 以防与浏览器手势冲突
H5 页面的几个技术优化点:
1. 优先显示框架, 内容可以缓慢加载显示出来
2. 模块化 H5 页面 / 应用, 引入模块加载器
难点: 模块开发粒度越细化, 加载时请求的 JS,CSS 等静态资源的数量越多, 影响页面性能.
3. 启用 AppCache , 并引入增量更新机制
mainfest 文件, html5 提供的应用缓存功能, 开发者只要把需被缓存的静态资源文件名罗列在这个列表中即可保证二次访问时无需重新加载.
其实, Html5 提供的 mainfest 缓存机制有个比较大的问题(兼容性就先不提了): 如果 mainfest 列表中的一个资源文件需要更新, 那么整个 mainfest 中的其它文件也都需要被重新下载一遍. 也即使说二次访问没有问题了, 但是 Html5 应用更新时还是会出现全量下载的问题.
缓存方案: manifest 和 Device API
Manifest
Manifest 是一个简单的文本文件, 它的扩展名是任意的, 定义需要缓存的文件, 资源, 当第一次打开时, 浏览器会自动缓存相应的资源.
离线浏览: 即当网络断开时, 可以继续访问你的页面.
访问速度快: 将文件缓存到本地, 不需每次都从网络上请求.
稳定性: 做了 Manifest 缓存, 遇到突发网络故障或者服务器故障, 继续访问本地缓存
Device API
(1),Html5 应用首次启动时, 调用 原生提供的加载资源文件专用的 Device API 来请求所需的资源文件, 由原生层发出真正的资源请求, 并将请求结果缓存在手机的 SD 卡上. 当然, 这里完全可以优化为一次 zip 包请求, 因为原生能够提供强大的解压能力.
(2),H5 应用再次启动时, 所有的静态资源都是通过 Device API 读取本地缓存, 无需再走网络.
(3),H5 应用出现静态资源更新时, 在应用启动时首先通过 Device API 加载需要更新的文件, 并更新本地缓存, 其它未变更文件继续走缓存.
(1), 如何通过 Device API 加载资源文件?
这里使用模块加载器的优势就体现出来了, 只需要在加载器中做点小修改, 不直接走 Http 请求了, 而直接调用原生提供的文件加载 DeviceAPI 即可. 如果你没有模块加载器, 就需要写统一的函数来做加载资源的功能了.
其实原生也提供了拦截机制, 能够拦截到 H5 应用发出的所有 Http 请求并进行自定义处理, 可惜这样好的功能在 Andorid 4.0 以下版本不支持. 故现阶段还是主动调用 Device API 更靠谱.
(2), 何时需要进行静态资源的更新?
每次静态资源发布都会产生一个唯一的发布时间戳(或是所有资源内容的 MD5 编码),H5 应用启动后, 可将当前时间戳保存下来, 等应用下次启动时, 请求最新的发布时间戳并与本地时间戳进行对比, 若不同, 则首先进行静态资源的增量更新.
(3), 如何判断哪些是需要被增量更新替代的静态资源文件?
这个问题的回答会比较复杂些, 核心思路是通过对前后两次资源文件 (js,css,image 等) 发布的内容对比完成.
来源: http://www.qdfuns.com/article/35185/e67440dcc523ef8b7d17355374ccf5f1.html