转载

艺龙网孙东 Slarkjs-前端框架的优化与实践

前言

进入2015，移动互联网继续迅猛发展。以我们公司艺龙为例，第一季度艺龙核心业务酒店的移动订单量在总酒店客房间夜中所占比例达到65%，这一数字在半年前还只是48%，移动业务的快速增长，对公司也越来越重要，对于我们前端框架有了更高的要求。移动前端相比pc前端有很大的不同，面临很多新的问题和挑战。

【作者】

孙东·

艺龙网前端架构师

【以下为正文】

挑战

移动时代对前端有了更高的要求。移动的前端，用户比pc网站更在意流量，响应速度，触摸体验，用户体验的友好程度又直接影响到公司的业务量，所以，优化这些体验问题，将是移动前端的关键。

如何优化这些用户的痛点，也是我们关注的重点。传统的网站开发，还处于为了实现功能而进行的拿来主义，需要什么功能，网上搜索一段代码贴过来实现，缺点很明显

代码大小问题。插件所具有的功能不是你的业务全部需要的，但如果全部加载进来，在pc上无所谓，移动端因为网络环境不同可能会因为几十kb影响0.1s甚至更多的加载速度。
动画的高效性问题。一般pc的动画使用js实现，优点是简单，拿来就用，兼容性好，而手机上一般需要借助css3进行硬件加速来提高渲染的动画性能
触摸体验。触摸屏也是手机区别pc的一大特点，app已经培养了很多用户使用习惯，比如下拉刷新，左右滑切换标签，这些操作提高了用户的直观体验，与pc相比h5网站面临的挑战和机遇更多。
技术积累。没有固定的开发模式，根据功能来进行，导致每一个业务都要重新寻找，重新开发。

经过这几年的移动前端的探索和发展，以上的问题都已经有了基本成熟的共识和技术实现。即各家公司根据自身业务特点开发统一的框架并进行js模块化，css模块化，开发集成化，打包工程化，选用并改进性能最佳的lib来持续的优化框架，满足自身业务的需求和业务的发展。

百度轻应用做过一次调查问卷，对于移动h5站，还有哪些的需求最迫切，统计前五如下

性能问题（45%）
有限的硬件接口（37%）
难以集成本地元素（29%）
无法创建尖端的页面与交互（23%）
缺乏成熟的框架（20%）

之前这些问题在纯web上是无解的， cordova等工具另辟一条打包nativeapp的方式扩展了接口，真正的体验问题并没有解决，facebook发布的只支持ios的react-native的beta版，提升了页面流畅度，目前来看，ios不是webapp的性能瓶颈，对于安卓上的性能问题，我们只能期待。

机遇

尽管挑战很多，转机已经开始出现。ios8 开始支持safari的扩展，通过这个接口，前端可以直接开发和调用本地能力，而最新的安卓L 也终于抛弃了饱受诟病的android webkit而使用了兼容性和性能更佳的chronium webkit，这些都预示着h5网站可以有更好的调用本地接口能力和更好的体验，同时，一些适用于移动web开发的的技术方法和框架不断的涌现，使得开发高性能app越来越容易和简单。其中有一些很优秀的框架，比如用于优化页面转场效果的clouda+（blendui），响应式css设计rachet，解决数据绑定的angularjs。

html5的开发限制越来越少，由于拥有可以快速开发，快速上线，搜索导流等功能，能够运行在安卓，ios等多个终端内的优势，可以预见会成为客户端的越来越重要的补充。

正文到此结束