前言

進入2015，移動互聯(lián)網(wǎng)繼續(xù)迅猛發(fā)展。以我們公司藝龍為例，***季度藝龍核心業(yè)務(wù)酒店的移動訂單量在總酒店客房間夜中所占比例達到65%，這一數(shù)字在半年前還只是48%，移動業(yè)務(wù)的快速增長，對公司也越來越重要，對于我們前端框架有了更高的要求。移動前端相比pc前端有很大的不同，面臨很多新的問題和挑戰(zhàn)。

【作者】 

[[149571]]

孫東· 藝龍網(wǎng)前端架構(gòu)師

【以下為正文】

挑戰(zhàn)

移動時代對前端有了更高的要求。移動的前端，用戶比pc網(wǎng)站更在意流量，響應(yīng)速度，觸摸體驗，用戶體驗的友好程度又直接影響到公司的業(yè)務(wù)量，所以，優(yōu)化這些體驗問題，將是移動前端的關(guān)鍵。

如何優(yōu)化這些用戶的痛點，也是我們關(guān)注的重點。傳統(tǒng)的網(wǎng)站開發(fā)，還處于為了實現(xiàn)功能而進行的拿來主義，需要什么功能，網(wǎng)上搜索一段代碼貼過來實現(xiàn)，缺點很明顯

1. 代碼大小問題。插件所具有的功能不是你的業(yè)務(wù)全部需要的，但如果全部加載進來，在pc上無所謂，移動端因為網(wǎng)絡(luò)環(huán)境不同可能會因為幾十kb影響0.1s甚至更多的加載速度。
2. 動畫的高效性問題。一般pc的動畫使用js實現(xiàn)，優(yōu)點是簡單，拿來就用，兼容性好，而手機上一般需要借助css3進行硬件加速來提高渲染的動畫性能
3. 觸摸體驗。觸摸屏也是手機區(qū)別pc的一大特點，app已經(jīng)培養(yǎng)了很多用戶使用習慣，比如下拉刷新，左右滑切換標簽，這些操作提高了用戶的直觀體驗，與pc相比h5網(wǎng)站面臨的挑戰(zhàn)和機遇更多。
4. 技術(shù)積累。沒有固定的開發(fā)模式，根據(jù)功能來進行，導(dǎo)致每一個業(yè)務(wù)都要重新尋找，重新開發(fā)。

經(jīng)過這幾年的移動前端的探索和發(fā)展，以上的問題都已經(jīng)有了基本成熟的共識和技術(shù)實現(xiàn)。即各家公司根據(jù)自身業(yè)務(wù)特點開發(fā)統(tǒng)一的框架并進行js模塊化，css模塊化，開發(fā)集成化，打包工程化，選用并改進性能***的lib來持續(xù)的優(yōu)化框架，滿足自身業(yè)務(wù)的需求和業(yè)務(wù)的發(fā)展。

百度輕應(yīng)用做過一次調(diào)查問卷，對于移動h5站，還有哪些的需求最迫切，統(tǒng)計前五如下

1. 性能問題（45%）
2. 有限的硬件接口（37%）
3. 難以集成本地元素（29%）
4. 無法創(chuàng)建***的頁面與交互（23%）
5. 缺乏成熟的框架（20%）

之前這些問題在純web上是無解的， cordova等工具另辟一條打包nativeapp的方式擴展了接口，真正的體驗問題并沒有解決，facebook發(fā)布的只支持ios的react-native的beta版，提升了頁面流暢度，目前來看，ios不是webapp的性能瓶頸，對于安卓上的性能問題，我們只能期待。

機遇

盡管挑戰(zhàn)很多，轉(zhuǎn)機已經(jīng)開始出現(xiàn)。ios8 開始支持safari的擴展，通過這個接口，前端可以直接開發(fā)和調(diào)用本地能力，而***的安卓L 也終于拋棄了飽受詬病的android webkit而使用了兼容性和性能更佳的chronium webkit，這些都預(yù)示著h5網(wǎng)站可以有更好的調(diào)用本地接口能力和更好的體驗，同時，一些適用于移動web開發(fā)的的技術(shù)方法和框架不斷的涌現(xiàn)，使得開發(fā)高性能app越來越容易和簡單。其中有一些很優(yōu)秀的框架，比如用于優(yōu)化頁面轉(zhuǎn)場效果的clouda+（blendui），響應(yīng)式css設(shè)計ratchet，解決數(shù)據(jù)綁定的angularjs。

html5的開發(fā)限制越來越少，由于擁有可以快速開發(fā)，快速上線，搜索導(dǎo)流等功能，能夠運行在安卓，ios等多個終端內(nèi)的優(yōu)勢，可以預(yù)見會成為客戶端的越來越重要的補充。

#p#

優(yōu)化實踐

本章節(jié)將詳細介紹為了解決以上痛點，我們的前端框架如何進行優(yōu)化和實踐的。

優(yōu)化首屏

傳統(tǒng)h5網(wǎng)站框架通過模板和數(shù)據(jù)在前端組裝，雖然優(yōu)化了前端邏輯，但需要很長的首頁白屏等待時間，同時也不會被搜索引擎抓取到，***的方案是首屏使用server端渲染，次屏開始通過接口和前端模板渲染，大大減少次屏數(shù)據(jù)量和相應(yīng)時間，利于緩存靜態(tài)資源，加快首屏，次屏的訪問時間, 如果使用nodejs作為web Server，前后端的模板統(tǒng)一的實施會非常的容易和順暢，而在藝龍，我們的webserver框架是java開發(fā)的，模板引擎使用的是freemark。為了統(tǒng)一兩種模板，我們進行了一些變通，先把freemark模板進行預(yù)編譯，編譯成前端的js模板。

聽起來很復(fù)雜，實際做起來并不難，以藝龍火車票h5網(wǎng)站為例。

1. 首屏時使用java web框架執(zhí)行頁面，同時加載我們的main.js/main.css/template.js
2. 當需要跳轉(zhuǎn)頁面時，使用core.addPager()的加載方法，就會更新成自動發(fā)送請求json數(shù)據(jù)的url（java web框架），如果server不支持傳json就把渲染好的頁面進行拆剪放到頁面dom中，同時在route.js中找到url對應(yīng)的前端模板，取到后就可以實現(xiàn)次屏的渲染。
3. 動畫通過css3在框架內(nèi)實現(xiàn)

--- 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", 
            } 
        }); 
}); 

約定規(guī)則

約定規(guī)則是框架的重要一環(huán)。slark使用twitter的ratchet規(guī)則定義前端模板規(guī)則，移動h5網(wǎng)站的每一個元素均使用推薦的的頁面標簽。好處是一方面我們擁有了眾多可擴展的樣式庫，另外一方面可以根據(jù)約定進行擴展，實現(xiàn)我們的頁面轉(zhuǎn)場優(yōu)化和下拉刷新的css約定。同時，借助我們的框架js，可以實現(xiàn)卡頭卡尾的兼容性問題，減少類似錯誤的出現(xiàn)。

優(yōu)化轉(zhuǎn)場

轉(zhuǎn)場的動畫可以縮短用戶操作點擊等待。目前的做法除了使用css3動畫外，市面上H5網(wǎng)站的轉(zhuǎn)場方案是先loading預(yù)先加載好頁面，在轉(zhuǎn)場進入頁面，其原因是由于css3動畫中如果進行頁面渲染有一定幾率破壞動畫或造成空白頁的bug，經(jīng)過調(diào)研我們發(fā)現(xiàn)仍然有向native體驗靠攏的可能。

這點我們的實踐是，當存在頁面模板緩存時，先渲染模板，然后轉(zhuǎn)場，0等待；當不存在頁面模板緩存，需要通過網(wǎng)絡(luò)請求時，先渲染帶標題后退頭的頁面，進行轉(zhuǎn)場，同樣0等待，同時對渲染頁面的時機進行了干預(yù)，當網(wǎng)絡(luò)請求早于css3轉(zhuǎn)場動畫結(jié)束時，等待css3動畫完成后再進行頁面渲染，避免破壞動畫的bug出現(xiàn)，為了更有效的提高轉(zhuǎn)場的性能，減少dom樹的層級和大小也是必不可少的，我們把所以當前頁面的插件做了封裝管理，與框架結(jié)合起來，在轉(zhuǎn)場之前，把隱藏的dom移除dom樹，而在動畫結(jié)束，悄悄的把dom添加回來等待調(diào)用。

模塊化&工程化

Requirejs是一個基于amd（異步模塊定義）規(guī)范的一個js庫，能夠通過依賴前置管理js的模塊依賴。

Sass 是一個新的css編程語言，嵌套語法和需要編譯使它天然適合模塊化，特別的，***的libsass 3.2支持了絕大多數(shù)的sass語法，sass可以不在依賴于ruby環(huán)境，使用和安裝編譯更加簡單。

經(jīng)過模塊化與分層，不僅可以提高代碼復(fù)用的邏輯，而且可以管理依賴，打包出最小的代碼集合，同時，entry，core，lib 三個模塊可以不僅可以內(nèi)部擴展，也可以交叉進行擴展，即lib寫的不好的，core可以吸收和改進，core通用性強的部分也可以抽離出lib，業(yè)務(wù)代碼同理。

管理好這些依賴和模塊化的代碼，簡化編譯過程，使用gruntjs來配置任務(wù)，可以自動進行代碼的常規(guī)錯誤檢查，打包，壓縮等操作。

IOS 9

Ios版本的每次發(fā)布，都會對html5的支持度大幅提升，ios9也不例外，對于前端框架來說，關(guān)注新的ios版本，響應(yīng)式的在支持更多特性的ios版本上給予更多的體驗，slark框架將在以下的特性上進行ios的體驗優(yōu)化：

1. 支持http/2.0 協(xié)議，通過http/2.0 可以減少更多的網(wǎng)絡(luò)延遲，特別是https的網(wǎng)絡(luò)傳輸額外字節(jié)量大幅減少，可以預(yù)見，現(xiàn)在業(yè)界使用的前端rsa加密可能會逐漸被支持http/2.0的https協(xié)議取代。
2. 框架級css3布局語法支持增多。Ios9帶來了豐富的css3 api，比如Scroll snap points，F(xiàn)eature Queries，mediaquery支持interaction 等等，使得在新的ios版本中，動畫更流暢，操作反饋更豐富。

業(yè)務(wù)線例子

---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管理依賴，內(nèi)容略 
}); 

---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"; 

后記

快速發(fā)展的移動前端，機遇與挑戰(zhàn)并存。不忘初心，擁抱變化，為前端的建設(shè)添磚加瓦。

資源鏈接

1. http://www.requirejs.org/
2.  http://www.sass-lang.com
3. http://gruntjs.com/
4. https://github.com/browserstate/history.js
5. http://clouda.baidu.com/
6. https://github.com/facebook/react-native