藝龍網(wǎng)張美蓉：Slarkjs框架-性能優(yōu)化之離線模板
原創(chuàng)前言
離線模板目的是性能優(yōu)化，webapp的性能優(yōu)化主要是在網(wǎng)絡(luò)請求和dom操作優(yōu)化上面進行優(yōu)化，slarkjs框架的開發(fā)理念是SPA(single page application)，即單頁webapp，單頁webapp在性能上面首屏加載所有資源，請求量少，無白屏等，但是考慮實際情況，每個頁面的dom結(jié)構(gòu)不可能想似，所以基于單頁應(yīng)用模式的slarkjs是請求部分html，不是請求json，但是頁面加載資源類似單頁模式，頁面切換轉(zhuǎn)場無白屏，首屏加載所有資源。在單頁載入下一個頁面時，開始回流，渲染增加的dom結(jié)構(gòu)，并運行該頁面的js腳本。（對slark框架沒有了解的同學可以在此了解一下）。
了解了slarkjs的頁面模式以及性能后，說說今天的正題離線模板，離線模板通過緩存模板，則實現(xiàn)了slarkjs頁面請求json實現(xiàn)加載另一頁面，同時結(jié)合Application cahe，實現(xiàn)離線模式下的展示。雖然Application cache的好壞眾說紛紜，但是結(jié)合一個好的設(shè)計方案，還是可以發(fā)揮很大的作用?？傮w的思路就是Slark框架的模式slark框架單頁webapp通過Application cache緩存模板，請求json獲取模板數(shù)據(jù)，將模板數(shù)據(jù)和模板渲染生成dom結(jié)構(gòu)來優(yōu)化性能。
離線模板原理：
模板：
模板使用采用預編譯模式的javascript模板art-template，預編譯后，通過增加一個js文件和HTML5的application cache，實現(xiàn)請求json，而不是請求html。雖然manifst的更新會消耗一定的流量，應(yīng)用場景可以局限在不經(jīng)常改動的站點。
對于頁面異步請求json，避免白屏的問題，在ajax發(fā)出之前將模板和空數(shù)據(jù)結(jié)合，并展示不含數(shù)據(jù)的dom結(jié)構(gòu)，當數(shù)據(jù)請求返回成功后，在和模板結(jié)合，展示帶有真是數(shù)據(jù)的dom結(jié)構(gòu)；
下面介紹一下art-template
其他的javascript模板引擎在對模板變量進行賦值時，渲染都需要動態(tài)編譯 javascript 字符串完成變量賦值。而 artTemplate 的編譯賦值過程卻是在渲染之前完成的（這種方式稱之為“預編譯”）。
artTemplate 模板編譯器根據(jù)一些簡單的規(guī)則提取所有模板變量，并聲明在渲染函數(shù)頭部，這個過程就是預編譯，預編譯的產(chǎn)物就是將編譯賦值的過程轉(zhuǎn)為含參數(shù)的js函數(shù)執(zhí)行過程。
什么是Cache Manifest？
首先manifest是一個后綴名為minifest的文件，在文件中定義那些需要緩存的文件，支持manifest的瀏覽器，會將按照manifest文件的規(guī)則，像文件保存在本地，從而在沒有網(wǎng)絡(luò)鏈接的情況下，也能訪問頁面。
當我們***次正確配置app cache后，當我們再次訪問該應(yīng)用時，瀏覽器會首先檢查manifest文件是否有變動，如果有變動就會把相應(yīng)的變得跟新下來，同時改變?yōu)g覽器里面的app cache，如果沒有變動，就會直接把app cache的資源返回，基本流程是這樣的。
Manifest的特點：
- 離線瀏覽: 用戶可以在離線狀態(tài)下瀏覽網(wǎng)站內(nèi)容。
- 更快的速度: 因為數(shù)據(jù)被存儲在本地，所以速度會更快.
- 減輕服務(wù)器的負載: 瀏覽器只會下載在服務(wù)器上發(fā)生改變的資源。
離線模板思路：
slark框架單頁webapp通過Application cache緩存模板，請求json獲取模板數(shù)據(jù)，將模板數(shù)據(jù)和模板渲染生成dom結(jié)構(gòu)來優(yōu)化性能。
如何實現(xiàn)：
Slark框架之前的單頁模式，如下圖所示：
Art-template支持node，web應(yīng)用前現(xiàn)將要緩存模板的頁面進行界面和數(shù)據(jù)的抽離，將分立后的界面預編譯生成js文件，使用manifest緩存這個js文件。每次頁面跳轉(zhuǎn)只請求數(shù)據(jù)，傳入js函數(shù)（art-temptale預編譯生成），獲取dom，渲染頁面。
既然使用了Application cache，為了在Offline模式下可展示，通過localstorage緩存數(shù)據(jù)，使用以上設(shè)計方案后的請求模式：
可以看到離線模板這種方案，離線模式下展示頁面前提是用戶曾經(jīng)在Online情況下訪問過本頁面，瀏覽器緩存過頁面數(shù)據(jù)，這是離線模板v1.0(首頁server端渲染，跳轉(zhuǎn)頁面前端渲染)
離線模板v1.0離線刷新回退問題和離線模板v2.0 hash url：
manifest的原理，當其他頁面訪問已經(jīng)緩存的資源請求不會發(fā)出，只會使用本地的文件，所以離線刷新當前頁面后回退，應(yīng)該調(diào)到業(yè)務(wù)上的上一頁面，但是jsonq請求的url和緩存頁面的url相同，請求不會發(fā)出。
解決方案：json請求增加時間戳；
manifest文件需要寫明每個頁面的請求路徑才可以做到一次在線瀏覽，offline展示并有動態(tài)效果，但是業(yè)務(wù)上面結(jié)合url不是不變的，傳的參數(shù)不同，瀏覽器就被認為是不同的文件，所以不惜改slark框架，將原有的url，修改為hash路由(!#!/)。更改slark框架之后的離線模板就是v2.0 hash url。
大家都知道server端不能識別url的hash部分，
原來url:
http://m.elong.com/entry/flight/entry.html?param1=1&¶m2=2
Hash url：
http://m.elong.com/entry/flight/!#!/entry!¶m1=1&¶m2=2
成功解決跳轉(zhuǎn)回退url變化問題,離線時跳轉(zhuǎn)和回退時，瀏覽器認為url并沒有發(fā)生變化。這樣manifest文件就可以寫一個路徑http://m.elong.com/entry/flight/
離線模板v2.0 hash url離線刷新先顯示首頁的問題:
像上面展示的url例子，slark單頁模式刷新回退，瀏覽器認為url就一直是http://m.elong.com/entry/flight/ 這個url服務(wù)器端默認entry.html頁面，只要這個entry.html帶有manifest標簽，頁面離線模式下list,html,detail.html等頁面刷新回退都可以展示，但是問題來了：比如 在線瀏覽所有頁面之后，進入離線模式，刷新list頁面，瀏覽器會先展示entry頁面，然后運行js腳本，將已經(jīng)緩存list頁面的json數(shù)據(jù)，和模板結(jié)合，展示list頁面。
解決方案：
http://m.elong.com/entry/flight/ 這個url服務(wù)器端默認blank.html頁面,這個頁面是所有頁面默認的部分，帶有manifest標簽，是一個空頁面，離線頁面刷新后即使加載blank.html，也是一個空頁面，通過緩存的list頁面數(shù)據(jù)和模板結(jié)合，可以展示list頁面；
模板統(tǒng)一：
***涉及一個問題，就是前后臺模板統(tǒng)一，除了需要后臺對于提供json以外，還需要前后臺統(tǒng)一。這里以后臺使用java freemark模板為例子，修改模板art-template的語法以支持freemark語法。
離線模板使用：
離線模板v1.0使用話，就在引用js之前引用預編譯生成的js，如果要是用離線模板v2.0，需要在頁面路由配置中增加is_frender ：true的配置項。
前臺項目使用：
- gruntfile文件中tmod任務(wù)中配置項目中要離線的頁面路徑，生成預編譯文件，不使用離線模板的頁面不要編譯
- appcachejson文件中增加要緩存的文件路徑，生成manifest文件
- 所有的html先引用預編譯模板文件，再引用main.js
- 要離線的文件html中<html標簽引用manifest文件<html manifest=‘xxx.manifest’
- 業(yè)務(wù)綁定事件onrender的callback中首先添加空渲染處理方法
- 合并main.js前的main.js,回調(diào)***句core.init(),傳入項目的名字，如core.init(‘offline’)
后臺項目使用：
- 使用freemark模板，前后臺使用模板一致;
- 同一請求路徑，可以判斷contentType，返回html和特定格式的json;
總結(jié)：
離線模板v1.0適合url不含參數(shù)的路徑，比如http://m.elong.com/entry/flight/index
htttp://m.elong.com/entry/flight/index?index=1&&key=2 這樣的就不適合，但是不會出現(xiàn)白屏，首頁server端渲染，其他頁面前端渲染。
離線模板v2.0hash url 其實適合所有的url，是所有頁面前端渲染。但是，有兩個缺點；
- ***加載webapp的頁面慢。因為要緩存manifest中的所有文件，所以在***首屏可能會有些慢，但是之后就會很快。
- 當手機清緩存或者web服務(wù)器這邊更新manifest文件后都會更新manifest,而且manifest更新時，***次在線訪問更新緩存，但是不會展示更新內(nèi)容，這一點對于飛機票火車票等即時性的業(yè)務(wù)來說不適合。
參考文獻：
https://github.com/yinyinfurong/art-template
http://www.cnblogs.com/yexiaochai/p/3759959.html
http://www.jq22.com/jquery-info1097
http://blog.csdn.net/fwwdn/article/details/8082433
作者簡介
張美蓉，15年應(yīng)屆畢業(yè)生，之前實習微商開發(fā)，15年任職藝龍網(wǎng)前端框架組開發(fā)工程師。
