谈谈跨终端

前段时间读了《跨终端 Web》,对「跨终端」的理解也更深刻了些。

什么是跨终端

随着 HTML5 标准的出台以及移动流量暴增, WebView 这种嵌入 App 的迷你浏览器的运用越发广泛。「移动优先」的概念已经开始风靡全球,它的核心是「聚焦业务本质」。它不仅仅指开发,而应该是指组织架构、产品规划、设计和开发这几个层面的移动优先。

首先需要明确的是,「跨终端」并不等价于「响应式」。「跨终端」是最终希望达到的目的,而「响应式」只是实现这个目的的其中一种方式。其他方式包括:

  • 多站点:在 WAP 还是主流的移动互联网初期,一个门户站点可能就有一大堆地址。一个 PC 主业务可能就有数个甚至更多二级子域的站点,想实现跨终端需要巨大的服务器维护跳转成本。

  • 多模板:它是多站点和响应式相结合的一种方式,一个页面只有一个 URL ,无须服务器端复杂的 URL 映射规则和用户代理(User Agent,简称 UA,它是最常用的终端检测方式)等手段进行跳转。虽然解决了响应式中 DOM 冗余的问题,但是由于页面存在多套模板,还需要在模板动态加载和首次服务器渲染等环节进行优化。

  • 多平台:Native App 的确是实现跨终端的一种途径,它有更好的性能、更丰富的系统级功能的调用和标准的发布渠道(应用商店),但它的劣势也非常明显,开发和发布成本高,并存在政策、应用商店参差不齐等潜在的风险。

说回我们最熟悉的响应式,这部分我准备用另外的篇章详细说明。在这里只需要知道,响应式本质上是依赖 CSS 处理展现层面的差异,但是移动端和 PC 端在交互形式上存在的巨大差异也导致 DOM 结构上的差异,而它远远超过 CSS 所能控制的范围。

GBS

GBS (Graded Browser Support,分级浏览器支持)是 Yahoo 于 2008 年提出用于应对多浏览器兼容问题的。它的核心价值在于“以有限的测试资源最大化测试覆盖率”,将待测试的浏览器分层,利用优雅降级和渐进式增强去允许不同层级的浏览器为用户提供更少或更多的内容。

优雅降级和渐进式增强的概念在《JavaScript DOM 编程艺术》也有提到,这里稍微解释一下。

优雅降级(平稳退化):不让繁杂的功能由于在不适合的平台上使用而成为负担,提供一些更适合的功能和交互给适合的平台。它并不是指不做某些功能。

渐进增强:在高级浏览器上利用浏览器提供的资源为用户提供更好的体验。

而在「移动优先」的现在,构造移动版本的 GBS 充满了挑战。

我们需要基于统计数据源的覆盖面选择最有参考价值的数据来源,并且对比多个数据源以确保结论的准确可靠。以下数据源可供参考:

  • 淘宝无线数读
  • 友盟
  • 百度移动统计

Hybrid App

Hybrid App 是 Native App 的一种改进形式,是 Native App 和 Mobile Web 两者混合开发的产物,它有跨平台、开发高效和发布快速的优点,但暂时也存在不适合应用在 CPU/GPU 密集类应用,以及静态资源从服务器端加载导致 UI 展示延迟的问题。

不过,现在“ CSS3 Transform 3D ”引入 GPU 后大大缓解了 Web 动画不流畅问题。另一方面,也可以通过 Native App 拦截 WebView 通信加载已打包的公共库缓解静态资源从服务器端加载导致 UI 展示延迟的问题。