藝龍網孫東 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設計ratchet，解決數據綁定的angularjs。
html5的開發限制越來越少，由于擁有可以快速開發，快速上線，搜索導流等功能，能夠運行在安卓，ios等多個終端內的優勢，可以預見會成為客戶端的越來越重要的補充。
#p#
優化實踐
本章節將詳細介紹為了解決以上痛點，我們的前端框架如何進行優化和實踐的。
優化首屏
傳統h5網站框架通過模板和數據在前端組裝，雖然優化了前端邏輯，但需要很長的首頁白屏等待時間，同時也不會被搜索引擎抓取到，***的方案是首屏使用server端渲染，次屏開始通過接口和前端模板渲染，大大減少次屏數據量和相應時間，利于緩存靜態資源，加快首屏，次屏的訪問時間, 如果使用nodejs作為web Server，前后端的模板統一的實施會非常的容易和順暢，而在藝龍，我們的webserver框架是java開發的，模板引擎使用的是freemark。為了統一兩種模板，我們進行了一些變通，先把freemark模板進行預編譯，編譯成前端的js模板。
聽起來很復雜，實際做起來并不難，以藝龍火車票h5網站為例。
- 首屏時使用java web框架執行頁面，同時加載我們的main.js/main.css/template.js
- 當需要跳轉頁面時，使用core.addPager()的加載方法，就會更新成自動發送請求json數據的url（java web框架），如果server不支持傳json就把渲染好的頁面進行拆剪放到頁面dom中，同時在route.js中找到url對應的前端模板，取到后就可以實現次屏的渲染。
- 動畫通過css3在框架內實現
- --- route.js
- define(['/src/js/core.js'],function(core){
- //key 匹配 id
- // tpl 匹配 未來的模板
- // url 匹配 url
- // js 匹配 js
- core.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的ratchet規則定義前端模板規則，移動h5網站的每一個元素均使用推薦的的頁面標簽。好處是一方面我們擁有了眾多可擴展的樣式庫，另外一方面可以根據約定進行擴展，實現我們的頁面轉場優化和下拉刷新的css約定。同時，借助我們的框架js，可以實現卡頭卡尾的兼容性問題，減少類似錯誤的出現。
優化轉場
轉場的動畫可以縮短用戶操作點擊等待。目前的做法除了使用css3動畫外，市面上H5網站的轉場方案是先loading預先加載好頁面，在轉場進入頁面，其原因是由于css3動畫中如果進行頁面渲染有一定幾率破壞動畫或造成空白頁的bug，經過調研我們發現仍然有向native體驗靠攏的可能。
這點我們的實踐是，當存在頁面模板緩存時，先渲染模板，然后轉場，0等待；當不存在頁面模板緩存，需要通過網絡請求時，先渲染帶標題后退頭的頁面，進行轉場，同樣0等待，同時對渲染頁面的時機進行了干預，當網絡請求早于css3轉場動畫結束時，等待css3動畫完成后再進行頁面渲染，避免破壞動畫的bug出現，為了更有效的提高轉場的性能，減少dom樹的層級和大小也是必不可少的，我們把所以當前頁面的插件做了封裝管理，與框架結合起來，在轉場之前，把隱藏的dom移除dom樹，而在動畫結束，悄悄的把dom添加回來等待調用。
模塊化&工程化
Requirejs是一個基于amd（異步模塊定義）規范的一個js庫，能夠通過依賴前置管理js的模塊依賴。
Sass 是一個新的css編程語言，嵌套語法和需要編譯使它天然適合模塊化，特別的，***的libsass 3.2支持了絕大多數的sass語法，sass可以不在依賴于ruby環境，使用和安裝編譯更加簡單。
經過模塊化與分層，不僅可以提高代碼復用的邏輯，而且可以管理依賴，打包出最小的代碼集合，同時，entry，core，lib 三個模塊可以不僅可以內部擴展，也可以交叉進行擴展，即lib寫的不好的，core可以吸收和改進，core通用性強的部分也可以抽離出lib，業務代碼同理。
管理好這些依賴和模塊化的代碼，簡化編譯過程，使用gruntjs來配置任務，可以自動進行代碼的常規錯誤檢查，打包，壓縮等操作。
IOS 9
Ios版本的每次發布，都會對html5的支持度大幅提升，ios9也不例外，對于前端框架來說，關注新的ios版本，響應式的在支持更多特性的ios版本上給予更多的體驗，slark框架將在以下的特性上進行ios的體驗優化：
- 支持http/2.0 協議，通過http/2.0 可以減少更多的網絡延遲，特別是https的網絡傳輸額外字節量大幅減少，可以預見，現在業界使用的前端rsa加密可能會逐漸被支持http/2.0的https協議取代。
- 框架級css3布局語法支持增多。Ios9帶來了豐富的css3 api，比如Scroll snap points，Feature Queries，mediaquery支持interaction 等等，使得在新的ios版本中，動畫更流暢，操作反饋更豐富。
業務線例子
- ---main.js
- require(['src/js/core', 'entry/huoche/js/route', 'entry/huoche/js/index', 'entry/huoche/js/list', 'entry/huoche/js/order'],
- function(core){
- });
- ---index.js
- define(['/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 & Base CSS
- @import "../../src/sass/normalize.scss";
- @import "../../src/sass/page.scss";
- @import "../../src/sass/base.scss";
- // Components
- @import "../../src/sass/buttons.scss";
- // Javascript components
- @import "../../src/sass/calendar.scss";
- @import "../../src/sass/city.scss";
- //my css
- @import "sass/index.scss";
- @import "sass/list.scss";
后記
快速發展的移動前端，機遇與挑戰并存。不忘初心，擁抱變化，為前端的建設添磚加瓦。
資源鏈接
- http://www.requirejs.org/
- http://www.sass-lang.com
- http://gruntjs.com/
- https://github.com/browserstate/history.js
- http://clouda.baidu.com/
- https://github.com/facebook/react-native
