移动Web产品前端开发口诀——“快”

前言

“天下武功无坚不摧，唯快不破”，这句话最早是出自古龙小说《小李飞刀》，其实不论是武功还是产品，口诀都是一个字——快。一个好的产品，无论是页面加载速度，还是响应用户点击动作，都应当非常快，能快速的把响应内容反馈给用户，对于用户而言，快就是使用流畅——不卡。

移动端浏览器现状

现在的移动端浏览器十分混乱，在iOS下由于Apple的限制，所有浏览器都是webkit内核，并且iPhone机器性能以及iOS系统优化得十分优秀，BUG的一致性表现得非常统一，无论是哪个浏览器都会相对容易做兼容。但在Android设备下，由于操作系统、硬件配置和浏览器差异等问题，导致Web产品在Android下表现参差不齐。

低版本的Android对一些高级的HTML5、CSS3特性支持不佳，无法做到很好的功能适配；

由于设备硬件差异，导致低端机型无法承载较大的运算量及页面渲染；

再有就是浏览器的差异，浏览器家族关系的复杂程度，会远远超出大家的理解范畴，与PC端相比有过之而无不及，在移动端三大浏览器的角色换成了Safari、Android Browser、IE，还有国内各种浏览器UC、QQ等等，版本更是错综复杂，有时甚至会遇到，相同版本浏览器，相同操作系统，在不同设备上BUG表现不一致；

Note: 三星的设备就是奇葩，做过适配的都有体验。

分版本适配

基于以上对移动端浏览器混乱程度的理解，移动web产品要做到全平台适配，工作量无遗是巨大的，并且，由于HTML5的支持程度，也会导致大部分低端用户无法使用到一些高级特性，或表现效果不佳。而且，没必要为了适应低端Android用户让高端iOS用户也忍受着简陋无比的交互及界面。那么，将iOS、Android、Windows Phone分为不同的版本，做相应的功能适配还是很有必要的。

在iOS下，自由度比较高，能随意发挥，很多有创意的交互及设计，都能在Safari下表现得比较好；

Android下由于设备硬件配置及浏览器版本差异比较大，就会选择相应保守的方式，舍弃部分影响用户使用流畅的交互，以及影响页面渲染的界面设计；

对于Windows Phone我们是从WP8起步，这样会更好做浏览器兼容。

做分版本适配的目的，是为了在保证功能交互的前提下让每个用户都能得到最流畅的操作体验。

Note: 其实现在大多数高端的Android机器，性能已经非常不错了，但是，永远不要抛弃399元山寨机的用户。

iScroll的问题

iScroll的诞生，主要是因为早期的webkit内核浏览器没有一种原生支持固定高度的容器。到目前为止，iScroll最大的问题就是慢，在千元以下Android设备上表现尤为突出。使用局部滚动来替代iScroll滚动是最好的一种方式，但很可惜，现在只有iOS5、6支持局部滚动，并且支持程度并不好，而Android压根就不打算支持。这样，我们就不得不抛弃iScroll，除非UE在设计交互原型时，将固定高度容器和局部区域滚动的需求完全砍掉。

分析结束，问题来了，现在到底使用iScroll呢？还是不使用？使用的话，大部分Android设备在滚动时会很卡，如不使用，部分功能又实现不了。其实，这个问题也不必太纠结。

首先， 对于header、footer需要固定位置的页面，可以直接使用position:fixed实现。部分不支持fixed定位的浏览器问题也不大，这部分设备一般都是Android2.x的系统，配置也较低，相对交互而言，速度显然更加重要；

对于需要依赖固定高度实现切换动画效果的交互，应尽量保证滚动条在页面顶部时处理。必要时做出一些牺牲，舍弃部分影响用户使用流畅的交互；

尽量使用浏览器原生支持代替iScroll；

如果必须使用iScroll才能实现的功能，一定要控制在最小范围，不要在常用场景应用iScroll；

虽然iScroll在iOS下表现得非常出色，但是都应当尽量使用浏览器原生支持特性来实现功能，这样才能最大化保证交互操作的流畅性。

关于页面跳转

很长一段时间都有一个争论，有页面跳转是不是WebApp？我认为单独讨论single page webapp还是页面跳转是没有意义的，所有产品都是建立在用户需求之上。对于现有的single page webapp产品，浏览器没有准备好，硬件配置也没有准备好，函数运算效率、页面渲染都跟不上，尤其是Android设备。基于用户需求出发，一些意识形态的东西该抛弃就抛弃，放开的使用页面跳转，只要能让程序运行流畅的东西，就应该毫不犹豫的使用。

但凡事也没有绝对，在一定的功能范围之内，也可以使用炫一些的切换动画，在一个页面实现多个子功能。

Note: iOS是值得称赞的一个系统，single page webapp在iOS6下运行非常完美。

总结

尽管大家都看到了HTML5的优点，但就现阶段而言，外部环境还没准备好。我们必须认清现实，做一个能让用户使用的产品才是最重要的，我们开发能做到的就是尽可能优化产品，让用户在最流畅的操作环境下得到最好的用户体验。速度是系统优化一个永恒不变的话题，没有任何一个用户愿意忍受卡卡的页面，点击一个按钮等待半天。切记，当你把用户的耐心消费完之后，产品的死期也不远了。