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