这几天，第三轮全站优化结束，测试项目在2G首屏载入速度取得了一些优化成绩，对比下来有10s左右的差距：
这次优化工作结束后，已经是第三次大规模折腾公司框架了，这里将一些自己知道的移动端的建议提出来分享下，希望对各位有用
文中有误请您提出，以免误人自误
技术选型
单页or多页
spa（single page application）也就是我们常常说的web应用程序webapp，被认为是业内的发展趋势，主要有两个优点：
① 用户体验好
② 可以更好的降低服务器压力
但是单页有几个致命的缺点：
① SEO支持不好，往往需要单独写程序处理SEO问题
② webapp本身的内存管理难，Javascript、Css非常容易互相影响
当然，这里不是说多页便不能有好的用户体验，不能降低服务器压力；多页也会有变量污染的问题发生，但造成webapp依旧是“发展趋势”，而没有大规模应用的主要原因是：
webapp模式门槛较高，很容易玩坏
其实webapp的最大问题与上述几点没有关系，实际上阻碍webapp的是技术门槛与手机性能，硬件方面不必多说，这里主要说技术门槛。
webapp做的好，可以玩动画，可以玩真正意义上的预加载，可以玩无缝页面切换，从某些方面甚至可以媲美原生APP，这也是webapp受到追捧的原因。
但是，以上很容易被玩坏！因为webapp模式不可避免的需要用到框架，站点需要一个切实可行的控制器来管理History以及页面view实例化工作，于是大家会选择诸如：
Backbone、angularJS、canJs之类的MVC框架，于是整个前端的技术要求被平白无故的提升了一个等级，原来操作dom可以做的事情，现在不一定能做了。
很多人对以上框架只停留在使用层面，几轮培训后，对底层往往感到一头雾水，就算开发了几个项目后，仍然还是只能了解View层面的东西；有对技术感兴趣的同事会慢慢了解底层，但多数仍然只关注业务开发，这个时候网站体验便会受到影响，还让webapp受到质疑。
所以这里建议是：
① 精英团队在公司有钱并且网站周期在两年以上的话可以选用webapp模式
② 一般团队还是使用多页吧，坑不了
③ 更好的建议是参考下改变后的新浪微博，采用伪单页模式，将网站分为几个模块做到组件化开发，碰到差距较大的页面便刷新也无不可
PS：事实上webapp模式的网站体验确实会好一点
框架选择
移动前端依旧离不开框架，而且框架呈变化状态，以我厂为例，我们几轮框架选型是：
① 多页应用+jQuery
② jQuery mobile（这个坑谁用谁知道）
③ 开始webapp模式（jQuery+requireJS+Backbone+underscore）
④ 瘦身（zepto+requireJS+Backbone View部分+underscore）
......
移动大潮来临后，浏览器基本的兼容得到了保证，所以完整的jQuery变得不是那么必须，因为尺寸原因，所以一般被zepto替换，zepto与jQuery有什么差异呢？
jQuery VS Zepto
首先，Zepto与jQuery的API大体相似，但是实现细节上差异甚大，我们使用Zepto一般完成两个操作：
① dom操作
② ajax处理
但是我们知道HTML5提供了一个document.querySelectorAll的接口，可以解决我们90%的需求，于是jQuery的sizzle便意义不大了，后来jQuery也做了一轮优化，让用户打包时候选择，需要sizzle才用。
其次jQuery的一些属性操作上做足了兼容，比如：
el.css('transform', 'translate(-968px, 0px) translateZ(0px)')
//jQuery会自动根据不同浏览器内核为你处理为：
el.css('-webkit-transform', 'translate(-968px, 0px) translateZ(0px)')
又比如说，以下差异比比皆是：
el.hide(1000);//jQuery具有动画，Zepto不会鸟你
然后，jQuery最初实现animate是采用js循环设置状态记录的方式，所以可以有效的记住状态暂停动画元素；Zepto的animate完全依赖于css3动画，暂停需要再想办法
// Zepto.js // (c) 2010-2014 Thomas Fuchs // Zepto.js may be freely distributed under the MIT license. ;(function($, undefined){ var prefix = '', eventPrefix, endEventName, endAnimationName, vendors = { Webkit: 'webkit', Moz: '', O: 'o' }, document = window.document, testEl = document.createElement('div'), supportedTransforms = /^((translate|rotate|scale)(X|Y|Z|3d)?|matrix(3d)?|perspective|skew(X|Y)?)$/i, transform, transitionProperty, transitionDuration, transitionTiming, transitionDelay, animationName, animationDuration, animationTiming, animationDelay, cssReset = {} function dasherize(str) { return str.replace(/([a-z])([A-Z])/, '$1-$2').toLowerCase() } function normalizeEvent(name) { return eventPrefix ? eventPrefix + name : name.toLowerCase() } $.each(vendors, function(vendor, event){ if (testEl.style[vendor + 'TransitionProperty'] !== undefined) { prefix = '-' + vendor.toLowerCase() + '-' eventPrefix = event return false } }) transform = prefix + 'transform' cssReset[transitionProperty = prefix + 'transition-property'] = cssReset[transitionDuration = prefix + 'transition-duration'] = cssReset[transitionDelay = prefix + 'transition-delay'] = cssReset[transitionTiming = prefix + 'transition-timing-function'] = cssReset[animationName = prefix + 'animation-name'] = cssReset[animationDuration = prefix + 'animation-duration'] = cssReset[animationDelay = prefix + 'animation-delay'] = cssReset[animationTiming = prefix + 'animation-timing-function'] = '' $.fx = { off: (eventPrefix === undefined && testEl.style.transitionProperty === undefined), speeds: { _default: 400, fast: 200, slow: 600 }, cssPrefix: prefix, transitionEnd: normalizeEvent('TransitionEnd'), animationEnd: normalizeEvent('AnimationEnd') } $.fn.animate = function(properties, duration, ease, callback, delay){ if ($.isFunction(duration)) callback = duration, ease = undefined, duration = undefined if ($.isFunction(ease)) callback = ease, ease = undefined if ($.isPlainObject(duration)) ease = duration.easing, callback = duration.complete, delay = duration.delay, duration = duration.duration if (duration) duration = (typeof duration == 'number' ? duration : ($.fx.speeds[duration] || $.fx.speeds._default)) / 1000 if (delay) delay = parseFloat(delay) / 1000 return this.anim(properties, duration, ease, callback, delay) } $.fn.anim = function(properties, duration, ease, callback, delay){ var key, cssValues = {}, cssProperties, transforms = '', that = this, wrappedCallback, endEvent = $.fx.transitionEnd, fired = false if (duration === undefined) duration = $.fx.speeds._default / 1000 if (delay === undefined) delay = 0 if ($.fx.off) duration = 0 if (typeof properties == 'string') { // keyframe animation cssValues[animationName] = properties cssValues[animationDuration] = duration + 's' cssValues[animationDelay] = delay + 's' cssValues[animationTiming] = (ease || 'linear') endEvent = $.fx.animationEnd } else { cssProperties = [] // CSS transitions for (key in properties) if (supportedTransforms.test(key)) transforms += key + '(' + properties[key] + ') ' else cssValues[key] = properties[key], cssProperties.push(dasherize(key)) if (transforms) cssValues[transform] = transforms, cssProperties.push(transform) if (duration > 0 && typeof properties === 'object') { cssValues[transitionProperty] = cssProperties.join(', ') cssValues[transitionDuration] = duration + 's' cssValues[transitionDelay] = delay + 's' cssValues[transitionTiming] = (ease || 'linear') } } wrappedCallback = function(event){ if (typeof event !== 'undefined') { if (event.target !== event.currentTarget) return // makes sure the event didn't bubble from "below" $(event.target).unbind(endEvent, wrappedCallback) } else $(this).unbind(endEvent, wrappedCallback) // triggered by setTimeout fired = true $(this).css(cssReset) callback && callback.call(this) } if (duration > 0){ this.bind(endEvent, wrappedCallback) // transitionEnd is not always firing on older Android phones // so make sure it gets fired setTimeout(function(){ if (fired) return wrappedCallback.call(that) }, (duration * 1000) + 25) } // trigger page reflow so new elements can animate this.size() && this.get(0).clientLeft this.css(cssValues) if (duration <= 0) setTimeout(function() { that.each(function(){ wrappedCallback.call(this) }) }, 0) return this } testEl = null })(Zepto)