前言进入2015年，移动互联网继续高速发展。以我们艺龙公司为例。一季度，艺龙核心业务酒店移动订单占酒店间夜总量的65%。这个数字在半年前仅为48%。移动业务的高速增长，对公司来说越来越重要，对我们的前端框架也有更高的要求。移动前端与PC前端有很大的不同，面临着很多新的问题和挑战。【作者】孙东·艺龙网前端架构师【以下为正文】挑战移动时代对前端提出了更高的要求。在移动前端，用户比PC网站更关心流量、响应速度、触控体验，用户体验的好坏直接影响到企业的业务量。因此，优化这些体验问题将是移动前端的关键。如何优化这些用户的痛点，也是我们关注的重点。传统的网站开发还停留在用它来实现功能的思路上。需要什么功能，在网上搜一段代码贴上去实现。劣势很明显。代码大小的问题。插件的功能不一定是你业务需要的，但是如果都加载进去了，在PC上也无所谓。移动端由于几十kb的网络环境不同，可能会影响0.1s或更多的加载速度。动画效率问题。pc上的动画一般都是用js实现的，优点是简单易用，兼容性好，而手机上一般需要CSS3做硬件加速，提高渲染动画性能和触控体验。触摸屏也是区分手机和PC的一大特点。该应用培养了很多用户习惯，比如下拉刷新、左右滑动切换标签页。这些操作提高了用户的直观体验。与PC相比，h5网站面临的挑战和机遇更多。.技术积累。没有固定的开发模式，按功能进行，导致每一个业务都要重新研究、重新开发。经过移动前端几年的探索和发展，以上问题已经基本成熟共识和技术实现。即各公司根据自身业务特点开发统一的框架，并进行js模块化、css模块化、开发集成、打包工程，并选择和改进性能最佳的lib，不断优化框架以满足自身业务需求和业务发展。百度轻App做了一个问卷，移动端h5站点最迫切的需求是什么，统计前五名如下性能问题（45%）硬件接口有限（37%）本地元素难以融合（29%）无法创建优秀的页面和交互（23%）缺乏成熟的框架（20%）以前，这些问题在纯网络上是无法解决的。Cordova和其他工具创建了另一种方式来打包原生应用程序以扩展接口。真正的体验问题并不是没有解决办法。Facebook发布的react-nativebeta版本只支持ios，提高了页面的流畅度。目前ios不是webapp的性能瓶颈。只能期待安卓上的性能问题了。机遇尽管面临许多挑战，但机遇已经开始出现。ios8开始支持safari的扩展。通过这个接口，前端可以直接开发和调用本地能力，而最新的AndroidL终于放弃了饱受诟病的androidwebkit，改用了兼容性和性能更好的chroniumwebkit。这些都说明h5网站可以有更好的调用本地接口的能力，更好的体验。与此同时，一些适合移动web开发的技术方法和框架不断涌现，使得开发高性能应用变得更加容易和简单。其中不乏一些优秀的框架，比如优化页面过渡效果的clouda+（blendui）、响应式css设计ratchet、数据绑定的angularjs等。html5的开发限制越来越少了。由于具有快速开发、快速启动、搜索导流等功能的优势，能够在Android、ios等多终端上运行，可以预见其将成为客户端日益重要的补充。.#p#优化实践本章将详细介绍我们的前端框架是如何针对以上痛点进行优化实践的。优化首屏传统的h5网站框架是通过模板和数据组装在前端的。虽然优化了前端逻辑，但是首页白屏等待的时间比较长，而且不会被搜索引擎抓取。最好的方案是第一屏使用服务端渲染，第二屏通过界面和前端模板开始渲染，这样可以大大减少第二屏的数据量和对应时间，有利于静态缓存资源，加快首屏和副屏的访问时间。如果使用nodejs作为web服务器，前端和后端模板的统一实现会非常轻松流畅，但是在艺龙，我们的webserver框架是用java开发的，模板引擎使用的是freemark。为了统一两个模板，我们做了一些修改。首先我们预编译freemark模板，编译成前端js模板。听起来很复杂，但实际做起来并不难。以艺龙火车票h5网站为例。使用javaweb框架在首屏执行页面，同时加载我们的main.js/main.css/template.js。当需要跳转页面时，使用core.addPager()的loading方法，会更新自动发送请求json数据的url（javaweb框架），如果服务器不支持传输json的渲染页面被拆分切入页面dom，同时在route中找到url对应的前端模板。画面渲染。框架内通过css3实现动画---route.jsdefine(['/src/js/core.js'],function(core){//key匹配id//tpl匹配futuretemplate//url匹配url//js匹配jscore.router.add({"list":{lindex:2,tpl:"list",url:"/huoche/list",},"order":{lindex:3,tpl:"order",url:"/huoche/detail",},"entry":{lindex:1,tpl:"entry",url:"/huoche",}});});公约规则公约规则是框架环的重要组成部分。Slark使用twitter的棘轮规则定义前端模板规则，移动h5网站的每个元素都使用推荐的页面标签。好处是一方面我们有很多可扩展的样式库，另一方面我们可以根据协议进行扩展，实现我们的页面过渡优化和下拉刷新css协议。同时借助我们的框架js，可以实现卡头和卡尾的兼容问题，减少类似错误的发生。优化transition转场动画可以缩短用户操作点击的等待时间。除了使用css3动画，目前的做法是使用css3动画。市面上H5网站的转场方案都是提前加载页面，转场后进入页面。原因是如果页面在css3动画中渲染，有一定概率动画会被破坏或者空白。页面上的bug，经过排查，我们发现还是有接近原生体验的可能。我们此时的做法是，当有页面模板缓存时，先渲染模板，再transition，等待0；当没有页面模板缓存需要通过网络请求时，先渲染带有title和backheader的页面，并执行transition，同样0等待，同时介入渲染页面的时机。当网络请求早于css3过渡动画结束时，等待css3动画完成后再渲染页面，避免出现破坏动画的bug。为了更有效地提高transition的性能，降低dom树的层次和大小也是必不可少的。我们对当前页面的所有插件进行封装管理，与框架结合，并在转场前将隐藏的dom从dom树中移除。动画结束后，悄悄把dom加回去，等待调用。Modularization&EngineeringRequirejs是一个基于amd（AsynchronousModuleDefinition）规范的js库，可以通过前置依赖来管理js模块依赖。Sass是一种新的css编程语言。嵌套的语法和编译的需要，自然适合模块化。特别是最新的libsass3.2支持大部分sass语法。Sass不能再依赖ruby??环境了。使用和安装编译更简单。经过模块化和分层后，不仅可以提高代码复用的逻辑，还可以进行依赖管理，封装最小的代码集合。同时entry、core、lib这三个模块不仅可以内部扩展，还可以交叉扩展。即如果lib写得不好，核心可以吸收改进，核心中通用性强的部分也可以从lib中抽取出来，业务代码也是一样的。管理这些依赖和模块化的代码，简化编译流程，使用gruntjs配置任务，自动对代码进行例行的错误检查、打包和压缩。每一次发布IOS9ios版本都会大大增加对html5的支持，ios9也不例外。对于前端框架，关注新的ios版本，对支持更多特性的ios版本给予响应式支持。体验，slark框架会在以下几个特性上优化ios的体验：支持http/2.0协议，通过http/2.0可以减少更多的网络延迟，尤其是https网络传输的额外字节大大减少，可以预见，前端-目前业界使用的RSA加密可能会逐渐被支持HTTP/2.0的HTTPS协议所取代。框架级css3布局语法支持增加。ios9带来了丰富的css3API，比如Scrollsnappoints、FeatureQueries、mediaquery支持交互等，让新的ios版本动画更流畅，操作反馈更丰富。业务线示例---main.jsrequire(['src/js/core','entry/huoche/js/route','entry/huoche/js/index','entry/huoche/js/list','entry/huoche/js/order'],function(core){});---index.jsdefine(['/src/js/calendar.js','/src/js/common.js','/src/js/city.js','/src/js/core.js'],function(calendar,common,city,core){//通过define管理依赖，内容省略});---main.css//Variables@import"../../src/sass/variables.scss";//Mixins@import"../../src/sass/mixins.scss";//Normalize&BaseCSS@import"../../src/sass/normalize.scss";@import"../../src/sass/page.scss";@import"../../src/sass/base.scss";//Components@import"../../src/sass/buttons.scss";//Javascriptcomponents@import"../../src/sass/calendar.scss";@import"../../src/sass/city.scss";//mycss@import"sass/index.scss";@import"sass/list.scss";后记快速发展的移动前端既带来了机遇，也带来了挑战。不忘初心，拥抱变化，为前端建设贡献力量。资源链接http://www.requirejs.org/http://www.sass-lang.comhttp://gruntjs.com/https://github.com/browserstate/history.jshttp://cloud.baidu.com/https://github.com/facebook/react-native
