建站
咨詢
售后
建站咨詢
新聞中心
前言
創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括宜秀網(wǎng)站建設(shè)、宜秀網(wǎng)站制作、宜秀網(wǎng)頁(yè)制作以及宜秀網(wǎng)絡(luò)營(yíng)銷(xiāo)策劃等。多年來(lái)，我們專(zhuān)注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，宜秀網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到宜秀省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
進(jìn)入2015，移動(dòng)互聯(lián)網(wǎng)繼續(xù)迅猛發(fā)展。以我們公司藝龍為例，***季度藝龍核心業(yè)務(wù)酒店的移動(dòng)訂單量在總酒店客房間夜中所占比例達(dá)到65%，這一數(shù)字在半年前還只是48%，移動(dòng)業(yè)務(wù)的快速增長(zhǎng)，對(duì)公司也越來(lái)越重要，對(duì)于我們前端框架有了更高的要求。移動(dòng)前端相比pc前端有很大的不同，面臨很多新的問(wèn)題和挑戰(zhàn)。
【作者】
孫東· 藝龍網(wǎng)前端架構(gòu)師
【以下為正文】
挑戰(zhàn)
移動(dòng)時(shí)代對(duì)前端有了更高的要求。移動(dòng)的前端，用戶比pc網(wǎng)站更在意流量，響應(yīng)速度，觸摸體驗(yàn)，用戶體驗(yàn)的友好程度又直接影響到公司的業(yè)務(wù)量，所以，優(yōu)化這些體驗(yàn)問(wèn)題，將是移動(dòng)前端的關(guān)鍵。
如何優(yōu)化這些用戶的痛點(diǎn)，也是我們關(guān)注的重點(diǎn)。傳統(tǒng)的網(wǎng)站開(kāi)發(fā)，還處于為了實(shí)現(xiàn)功能而進(jìn)行的拿來(lái)主義，需要什么功能，網(wǎng)上搜索一段代碼貼過(guò)來(lái)實(shí)現(xiàn)，缺點(diǎn)很明顯
- 代碼大小問(wèn)題。插件所具有的功能不是你的業(yè)務(wù)全部需要的，但如果全部加載進(jìn)來(lái)，在pc上無(wú)所謂，移動(dòng)端因?yàn)榫W(wǎng)絡(luò)環(huán)境不同可能會(huì)因?yàn)閹资甼b影響0.1s甚至更多的加載速度。
- 動(dòng)畫(huà)的高效性問(wèn)題。一般pc的動(dòng)畫(huà)使用js實(shí)現(xiàn)，優(yōu)點(diǎn)是簡(jiǎn)單，拿來(lái)就用，兼容性好，而手機(jī)上一般需要借助css3進(jìn)行硬件加速來(lái)提高渲染的動(dòng)畫(huà)性能
- 觸摸體驗(yàn)。觸摸屏也是手機(jī)區(qū)別pc的一大特點(diǎn)，app已經(jīng)培養(yǎng)了很多用戶使用習(xí)慣，比如下拉刷新，左右滑切換標(biāo)簽，這些操作提高了用戶的直觀體驗(yàn)，與pc相比h5網(wǎng)站面臨的挑戰(zhàn)和機(jī)遇更多。
- 技術(shù)積累。沒(méi)有固定的開(kāi)發(fā)模式，根據(jù)功能來(lái)進(jìn)行，導(dǎo)致每一個(gè)業(yè)務(wù)都要重新尋找，重新開(kāi)發(fā)。
經(jīng)過(guò)這幾年的移動(dòng)前端的探索和發(fā)展，以上的問(wèn)題都已經(jīng)有了基本成熟的共識(shí)和技術(shù)實(shí)現(xiàn)。即各家公司根據(jù)自身業(yè)務(wù)特點(diǎn)開(kāi)發(fā)統(tǒng)一的框架并進(jìn)行js模塊化，css模塊化，開(kāi)發(fā)集成化，打包工程化，選用并改進(jìn)性能***的lib來(lái)持續(xù)的優(yōu)化框架，滿足自身業(yè)務(wù)的需求和業(yè)務(wù)的發(fā)展。
百度輕應(yīng)用做過(guò)一次調(diào)查問(wèn)卷，對(duì)于移動(dòng)h5站，還有哪些的需求最迫切，統(tǒng)計(jì)前五如下
- 性能問(wèn)題（45%）
- 有限的硬件接口（37%）
- 難以集成本地元素（29%）
- 無(wú)法創(chuàng)建***的頁(yè)面與交互（23%）
- 缺乏成熟的框架（20%）
之前這些問(wèn)題在純web上是無(wú)解的， cordova等工具另辟一條打包nativeapp的方式擴(kuò)展了接口，真正的體驗(yàn)問(wèn)題并沒(méi)有解決，facebook發(fā)布的只支持ios的react-native的beta版，提升了頁(yè)面流暢度，目前來(lái)看，ios不是webapp的性能瓶頸，對(duì)于安卓上的性能問(wèn)題，我們只能期待。
機(jī)遇
盡管挑戰(zhàn)很多，轉(zhuǎn)機(jī)已經(jīng)開(kāi)始出現(xiàn)。ios8 開(kāi)始支持safari的擴(kuò)展，通過(guò)這個(gè)接口，前端可以直接開(kāi)發(fā)和調(diào)用本地能力，而***的安卓L 也終于拋棄了飽受詬病的android webkit而使用了兼容性和性能更佳的chronium webkit，這些都預(yù)示著h5網(wǎng)站可以有更好的調(diào)用本地接口能力和更好的體驗(yàn)，同時(shí)，一些適用于移動(dòng)web開(kāi)發(fā)的的技術(shù)方法和框架不斷的涌現(xiàn)，使得開(kāi)發(fā)高性能app越來(lái)越容易和簡(jiǎn)單。其中有一些很優(yōu)秀的框架，比如用于優(yōu)化頁(yè)面轉(zhuǎn)場(chǎng)效果的clouda+（blendui），響應(yīng)式css設(shè)計(jì)ratchet，解決數(shù)據(jù)綁定的angularjs。
html5的開(kāi)發(fā)限制越來(lái)越少，由于擁有可以快速開(kāi)發(fā)，快速上線，搜索導(dǎo)流等功能，能夠運(yùn)行在安卓，ios等多個(gè)終端內(nèi)的優(yōu)勢(shì)，可以預(yù)見(jiàn)會(huì)成為客戶端的越來(lái)越重要的補(bǔ)充。
#p#
優(yōu)化實(shí)踐
本章節(jié)將詳細(xì)介紹為了解決以上痛點(diǎn)，我們的前端框架如何進(jìn)行優(yōu)化和實(shí)踐的。
優(yōu)化首屏
傳統(tǒng)h5網(wǎng)站框架通過(guò)模板和數(shù)據(jù)在前端組裝，雖然優(yōu)化了前端邏輯，但需要很長(zhǎng)的首頁(yè)白屏等待時(shí)間，同時(shí)也不會(huì)被搜索引擎抓取到，***的方案是首屏使用server端渲染，次屏開(kāi)始通過(guò)接口和前端模板渲染，大大減少次屏數(shù)據(jù)量和相應(yīng)時(shí)間，利于緩存靜態(tài)資源，加快首屏，次屏的訪問(wèn)時(shí)間, 如果使用nodejs作為web Server，前后端的模板統(tǒng)一的實(shí)施會(huì)非常的容易和順暢，而在藝龍，我們的webserver框架是java開(kāi)發(fā)的，模板引擎使用的是freemark。為了統(tǒng)一兩種模板，我們進(jìn)行了一些變通，先把freemark模板進(jìn)行預(yù)編譯，編譯成前端的js模板。
聽(tīng)起來(lái)很復(fù)雜，實(shí)際做起來(lái)并不難，以藝龍火車(chē)票h5網(wǎng)站為例。
- 首屏?xí)r使用java web框架執(zhí)行頁(yè)面，同時(shí)加載我們的main.js/main.css/template.js
- 當(dāng)需要跳轉(zhuǎn)頁(yè)面時(shí)，使用core.addPager()的加載方法，就會(huì)更新成自動(dòng)發(fā)送請(qǐng)求json數(shù)據(jù)的url（java web框架），如果server不支持傳json就把渲染好的頁(yè)面進(jìn)行拆剪放到頁(yè)面dom中，同時(shí)在route.js中找到url對(duì)應(yīng)的前端模板，取到后就可以實(shí)現(xiàn)次屏的渲染。
- 動(dòng)畫(huà)通過(guò)css3在框架內(nèi)實(shí)現(xiàn)
- --- route.js
- define(['/src/js/core.js'],function(core){
- //key 匹配 id
- // tpl 匹配 未來(lái)的模板
- // 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ī)則，移動(dòng)h5網(wǎng)站的每一個(gè)元素均使用推薦的的頁(yè)面標(biāo)簽。好處是一方面我們擁有了眾多可擴(kuò)展的樣式庫(kù)，另外一方面可以根據(jù)約定進(jìn)行擴(kuò)展，實(shí)現(xiàn)我們的頁(yè)面轉(zhuǎn)場(chǎng)優(yōu)化和下拉刷新的css約定。同時(shí)，借助我們的框架js，可以實(shí)現(xiàn)卡頭卡尾的兼容性問(wèn)題，減少類(lèi)似錯(cuò)誤的出現(xiàn)。
優(yōu)化轉(zhuǎn)場(chǎng)
轉(zhuǎn)場(chǎng)的動(dòng)畫(huà)可以縮短用戶操作點(diǎn)擊等待。目前的做法除了使用css3動(dòng)畫(huà)外，市面上H5網(wǎng)站的轉(zhuǎn)場(chǎng)方案是先loading預(yù)先加載好頁(yè)面，在轉(zhuǎn)場(chǎng)進(jìn)入頁(yè)面，其原因是由于css3動(dòng)畫(huà)中如果進(jìn)行頁(yè)面渲染有一定幾率破壞動(dòng)畫(huà)或造成空白頁(yè)的bug，經(jīng)過(guò)調(diào)研我們發(fā)現(xiàn)仍然有向native體驗(yàn)靠攏的可能。
這點(diǎn)我們的實(shí)踐是，當(dāng)存在頁(yè)面模板緩存時(shí)，先渲染模板，然后轉(zhuǎn)場(chǎng)，0等待；當(dāng)不存在頁(yè)面模板緩存，需要通過(guò)網(wǎng)絡(luò)請(qǐng)求時(shí)，先渲染帶標(biāo)題后退頭的頁(yè)面，進(jìn)行轉(zhuǎn)場(chǎng)，同樣0等待，同時(shí)對(duì)渲染頁(yè)面的時(shí)機(jī)進(jìn)行了干預(yù)，當(dāng)網(wǎng)絡(luò)請(qǐng)求早于css3轉(zhuǎn)場(chǎng)動(dòng)畫(huà)結(jié)束時(shí)，等待css3動(dòng)畫(huà)完成后再進(jìn)行頁(yè)面渲染，避免破壞動(dòng)畫(huà)的bug出現(xiàn)，為了更有效的提高轉(zhuǎn)場(chǎng)的性能，減少dom樹(shù)的層級(jí)和大小也是必不可少的，我們把所以當(dāng)前頁(yè)面的插件做了封裝管理，與框架結(jié)合起來(lái)，在轉(zhuǎn)場(chǎng)之前，把隱藏的dom移除dom樹(shù)，而在動(dòng)畫(huà)結(jié)束，悄悄的把dom添加回來(lái)等待調(diào)用。
模塊化&工程化
Requirejs是一個(gè)基于amd（異步模塊定義）規(guī)范的一個(gè)js庫(kù)，能夠通過(guò)依賴前置管理js的模塊依賴。
Sass 是一個(gè)新的css編程語(yǔ)言，嵌套語(yǔ)法和需要編譯使它天然適合模塊化，特別的，***的libsass 3.2支持了絕大多數(shù)的sass語(yǔ)法，sass可以不在依賴于ruby環(huán)境，使用和安裝編譯更加簡(jiǎn)單。
經(jīng)過(guò)模塊化與分層，不僅可以提高代碼復(fù)用的邏輯，而且可以管理依賴，打包出最小的代碼集合，同時(shí)，entry，core，lib 三個(gè)模塊可以不僅可以內(nèi)部擴(kuò)展，也可以交叉進(jìn)行擴(kuò)展，即lib寫(xiě)的不好的，core可以吸收和改進(jìn)，core通用性強(qiáng)的部分也可以抽離出lib，業(yè)務(wù)代碼同理。
管理好這些依賴和模塊化的代碼，簡(jiǎn)化編譯過(guò)程，使用gruntjs來(lái)配置任務(wù)，可以自動(dòng)進(jìn)行代碼的常規(guī)錯(cuò)誤檢查，打包，壓縮等操作。
IOS 9
Ios版本的每次發(fā)布，都會(huì)對(duì)html5的支持度大幅提升，ios9也不例外，對(duì)于前端框架來(lái)說(shuō)，關(guān)注新的ios版本，響應(yīng)式的在支持更多特性的ios版本上給予更多的體驗(yàn)，slark框架將在以下的特性上進(jìn)行ios的體驗(yàn)優(yōu)化：
- 支持http/2.0 協(xié)議，通過(guò)http/2.0 可以減少更多的網(wǎng)絡(luò)延遲，特別是https的網(wǎng)絡(luò)傳輸額外字節(jié)量大幅減少，可以預(yù)見(jiàn)，現(xiàn)在業(yè)界使用的前端rsa加密可能會(huì)逐漸被支持http/2.0的https協(xié)議取代。
- 框架級(jí)css3布局語(yǔ)法支持增多。Ios9帶來(lái)了豐富的css3 api，比如Scroll snap points，F(xiàn)eature Queries，mediaquery支持interaction 等等，使得在新的ios版本中，動(dòng)畫(huà)更流暢，操作反饋更豐富。
業(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) {
- //通過(guò)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ā)展的移動(dòng)前端，機(jī)遇與挑戰(zhàn)并存。不忘初心，擁抱變化，為前端的建設(shè)添磚加瓦。
資源鏈接
- 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
分享文章：藝龍網(wǎng)孫東Slarkjs-前端框架的優(yōu)化與實(shí)踐
分享網(wǎng)址：http://www.5511xx.com/article/coiipgi.html
