建筑师（JiaGouX）
我们都是建筑师！
前言
步入2015年，联通互联网继续快速发展。 以我们公司携程网为例。 一季度，携程核心业务酒店联通订单占酒店总间夜数的65%。 半年前这个数字还只有48%。 公司也越来越重要，对我们后端框架提出了更高的要求。 与PC后端相比，中国联通的后端有很大不同，面临着很多新的问题和挑战。
孙东
携程后端架构师
作者
【以下为正文】
挑战
联通时代对后端提出了更高的要求。 对于中国联通后台来说，用户比PC网站更关心流量、响应率、触摸体验，用户体验的友好程度直接影响公司的业务量。 因此，优化这种体验将是联通后端的关键。
如何优化此类用户的痛点也是我们关注的重点。传统网站开发还处于功能实现过程中。 需要什么功能？ 网上搜了一段代码，贴出来实现一下。 缺点是显而易见的。
1.代码大小问题。 插件的功能并不是你业务需要的全部html5 css3 动画框架，但是如果都加载进去了，在PC上就无所谓了。 由于联通侧网络环境不同，几十kb可能会影响0.1s甚至更多的加载速度。
2.动画的效率。 通常PC端动画是使用js实现的，优点是简单、易用、兼容性好，而在手机上通常采用CSS3进行硬件加速，以提高渲染动画性能和触摸体验。 触摸屏也是手机区别于PC的一大特点。 该应用已经培养了很多用户习惯，比如下拉刷新、左右滑动切换标签等。 该操作提高了用户的直观体验。 与PC相比，h5网站面临更多的挑战和机遇。 许多。
3、技术积累。 没有固定的开发模式，按照功能进行，导致每一项业务都要重新研究、重新开发。
中国联通后台经过几年的探索和发展，对上述问题已经达成了基本成熟的共识和技术实现。 即各公司根据自身业务特点开发统一的框架，进行js模块化、css模块化、开发集成、封装工程，并选择和改进性能最好的lib，不断优化框架以满足自身业务需求和业务发展。
百度轻应用做了一份调查问卷，联通h5站最迫切的需求是什么，前五名统计如下
性能问题 (45%)
硬件插座有限（37%）
无法集成原生元素（29%）
未能创建前沿的页面和交互（23%）
缺乏成熟的框架（20%）
以前这些问题在纯网络上是无法解决的。 Cordova 和其他工具创建了另一种形式的打包本机应用程序来扩展套接字。 真正的体验问题还没有解决。 Facebook发布了仅支持ios的react-native beta版本，提高了页面流畅度，目前ios还不是webapp的性能困境html5 css3 动画框架，我们只能期待Android上的性能问题了。
机会
尽管面临诸多挑战，但机遇已经开始出现。 ios8开始支持safari的扩展。 通过这个socket，后端可以直接开发调用本地能力，而最新的Android L终于放弃了饱受诟病的androidwebkit，而采用了兼容性和性能更好的chroniumwebkit。 说明h5网站可以有更好的本地socket调用能力，有更好的体验。 与此同时，一些适合中国联通Web开发的技术技巧和框架不断涌现，让开发高性能应用程序变得更加容易和简单。 其中不乏一些优秀的框架，比如优化页面转场效果的clouda+（blendui）、响应式css设计的rachet、数据绑定的angularjs等。
html5的开发限制越来越少，因为它具有开发快、上线快、搜索导流等优点，还可以运行在Android、ios等多终端上。 可以预见的是，它在客户端将会变得越来越重要。 补充。
优化实践
本章将详细介绍我们的后端框架是如何针对上述痛点进行优化和实践的。
优化首屏
传统的h5网站框架是通过模板和数据在后端组装的。 虽然后端逻辑进行了优化，但等待首页崩溃的时间较长，而且不会被搜索引擎捕获。 最好的方案是使用服务器进行首屏渲染，副屏通过socket和后端模板开始渲染，这样大大减少了副屏的数据量和对应时间，有利于缓存静态资源，提升主屏、副屏的访问时间。 如果使用nodejs作为web服务器，前后端的模板是统一的，实现起来会特别轻松流畅，而在同程，我们的webserver框架是用java开发的，模板引擎使用freemark。 为了统一两个模板，我们做了一些修改。 首先我们预编译freemark模板，并将其编译成后端js模板。
听起来很复杂，但其实做起来并不难。 以携程火车票h5网站为例。
使用javaweb框架执行首屏页面，同时加载我们的main.js/main.css/template.js
当需要跳转页面时，使用core.addPager()的加载方法，会更新为手动发送请求json数据的url（javaweb框架），如果服务器不支持json的传输，渲染出来的页面会被剪切出来，放到页面的dom中，同时在route.js中找到url对应的后端模板，拿到之后就可以实现副屏的渲染了。
通过css3在框架内实现动画
---route.js
定义(['/src/js/core.js'],函数(核心){
//key匹配id
//tpl 匹配未来的模板
//url匹配url
//js匹配js
core.router.add({
“列表”： {
索引: 2,
tpl：“列表”，
url: "/huochest",
},
“命令”： {
索引: 3,
tpl：“订单”，
url: "/huoche/detail",
},
“入口”： {
索引: 1,
tpl：“进入”，
url: "/huoche",
});
});
商定的规则
商定的规则是框架的重要组成部分。 Slark使用twitter的rachet规则定义后端模板规则，中国联通h5网站的每个元素都使用推荐的页面标签。 有用之处在于，一方面我们有很多可扩展的样式库，另一方面我们可以根据协议进行扩展，实现我们的页面转场优化以及下拉刷新的css协议。 同时，利用我们的框架js，可以实现卡头卡尾的兼容问题，减少类似错误的发生。
优化过渡
过渡动画可以缩短用户的操作和点击等待。 目前的做法不仅是使用css3动画，市面上H5网站的过渡方案也是提前加载页面，然后在过渡时进入页面。 原因是，如果页面是用css3动画渲染的，有一定的几率会损坏动画或者动画。 导致空白页面的bug，经过检查，我们发现总有接近原生体验的可能。
我们的做法是，当有页面模板缓存时，先渲染模板，然后过渡，等待0； 当没有页面模板缓存，需要通过网络请求时，先渲染有标题头的页面，然后进行过渡。 字段，同样0等待，也干预页面渲染的时机。 当网络请求早于 css3 过渡动画结束时，请等待 css3 动画完成后再渲染页面，以防止出现损坏动画的 bug。 为了更有效地提高过渡的性能，减少 DOM 树的层级和大小也是至关重要的。 我们对当前页面的插件进行封装和管理，并与框架结合起来。 在转换之前，从 DOM 树中删除隐藏的 DOM。 动画结束时，悄悄将dom添加回来，等待调用。
模块化与工程
Requirejs 是一个基于 amd（异步模块定义）规范的 js 库，以便通过事后依赖管理来管理 js 模块依赖关系。
Sass 是一种新的 CSS 编程语言。 嵌套句型和编译的需要使其天然适合模块化。 特别是最新的libsass3.2支持大部分sass句型。 无需依赖ruby环境即可使用Sass。 而且安装和编译也变得越来越容易。
模块化和分层之后，除了提高代码复用的逻辑之外，还可以管理依赖关系，封装最小的代码集。 同时entry、core、lib三个模块可以内部扩展，也可以交叉扩展。 就是lib写得不好的话，核心可以吸收改进，核心中通用性强的部分也可以从lib中提取出来，业务代码也是一样的。
管理这种依赖和模块化的代码，简化编译过程，使用gruntjs配置任务，手动执行代码的一般错误检测、打包、压缩等操作。
IOS9
每次iOS版本发布，对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.js
require(['src/js/core','entry/huoche/js/route','entry/huoche/js/index','entry/huoche/jsst','entry/huoche/js/order'],
功能（核心）{
});
---index.js
定义（['/src/js/calendar.js',
'/src/js/common.js','/src/js/city.js','/src/js/core.js'],
函数（日历、常用、城市、核心）{
//通过define管理依赖关系，内容有缩写
});
---main.css
//变量
@import“../../srcssariables.scss”；
//混合
@import“../../srcss/mixins.scss”；
//标准化&BaseCSS
@import“../../srcssrmalize.scss”；
@import“../../srcss/page.scss”；
@import“../../srcss/base.scss”；
//成分
@import“../../srcssttons.scss”；
//Javascript组件
@import“../../srcss/calendar.scss”；
@import“../../srcss/city.scss”；
//mycss
@import“sass/index.scss”；
@导入“sassst.scss”；
杂项笔记
中国联通后端的快速发展既带来了机遇，也带来了挑战。 不忘初心，拥抱变化，为后端建设贡献力量。
