Diy頁面服務端渲染解決方案

1. 問題由來

在移動互聯網電商領域，運營天天須要搭建多個促銷頁面來吸引用戶去點擊去購買，一開始程序員臨時寫個新頁面去實現，可這些頁面能夠用幾回就不用了，每次建立新頁面去實現費時費力，並且，電商的運營需求是快速迭代的，每次去頁面代碼裏去改，而後上線也太不方便了。因此產品提出了Diy 頁面----配置web組件去搭建頁面，事先定好頁面可能到用到哪些的組件，而後運營在後臺選好頁面由哪些組件組成，而後分別去配置對應的組件數據，這樣運營能夠快速地去建立他們所須要的頁面，快速響應需求變化。因此Diy 頁面能很好地解決電商運營的複雜而快速的需求變更。

2. Diy 頁面初期解決方案

           每一個組件由模板文件（tpl），JS文件和css文件組成，在頁面經過Ajax獲取頁面數據，經過Require JS按需加載頁面所須要的組件內容，而後面前端渲染生成對應的組件html並執行相應JS方法，這種解決方案雖然知足了運營的需求，但頁面性能不是很高，用戶訪問時等待時間有點長，因此必須提升頁面響應速度。

           這種解決方案下頁面響應慢產生的緣由：

1. 經過Require JS按需加載頁面所須要的組件內容，雖然請求的內容是壓縮過的，但會產生過多的Http請求，每生成一個http請求是比較消耗資源的，但又不能把全部組件合併到一個文件中，由於組件會不少，合併會生成一個很大很大文件，理想的狀態是請求一個按需加載合併後的文件，使用combo方式。
2. 頁面數據接口，返回數據很大，此Ajax請求在頁面全部請求中是最耗時的，雖然服務端對接口作了緩存，但仍是以爲返回數據很大，能夠試着優化下接口數據結構。
3. 前端經過JS模板引擎生成html，這須要消耗點資源，並且這種diy頁面基本上都是內容展現型頁面，也就是生成完以後頁面內容不會再變更了，因此在前端經過JS模板引擎生成html能夠換成在服務端生成html來提升頁面響應速度。

基於上述緣由的分析，改進後的方案最好是能夠在服務端渲染web組件。

3. Diy頁面服務端渲染解決方案

對於前端工程師來講要服務端去渲染頁面，在不熟悉服務端語言的狀況下是一個很大挑戰，幸好技術發展很快，出現了Node能夠用Javascript去寫服務端，本身動手豐衣足食。

NodeJs如今發展已經很成熟了，因此使用node不用擔憂出現什麼問題。

實現方式以下 :

1. Web服務器根據請求頁面pageId，在內部經過http代理從數據接口層獲取到頁面配置源數據;
2. 而後根據獲取到的數據，找到對應組件模板（tpl）,使用服務端模板引擎生成對應的組件實例化的html，同時生成此頁面的JS和CSS訪問url，動態拼接整個頁面html，並返回給用戶
3. 用戶獲取到頁面後，只發一個組件css請求和一個組件js請求，瀏覽器就能夠直接渲染展示了。

總體過程以下：

 

此方案優勢：

1． 大量減小組件相關的http請求，把js，或css合併爲一個請求。

2． 在服務端代理請求數據接口層比用戶端去訪問數據接口層要快不少；

3． 服務端渲染生成頁面html，方便SEO，更方便後期作頁面靜態化，進一步提高頁面性能。

 

我的寫了一個demo放在github上，有興趣的人能夠看下，代碼還在繼續完善中，地址 https://github.com/hskww/Ncomponents/

源碼說明：

代碼基於node的thinkjs框架，我的認爲thinkjs真的不錯，你們比較熟悉的MVC模式，thinksjs送給前端開發人員大大的福利，訪問thinkjs https://thinkjs.org/。

源碼使用步驟：

　　1. 安裝node；

　　2. 安裝thinkjs ,npm install thinkjs@2 -g --verbose,若是慢可使用 npm install thinkjs@2 -g --registry=https://registry.npm.taobao.org --verbose；

　　3. 安裝依賴 npm install；

　　4. 運行程序 npm start；

源碼中的combo接口是我的本身實現的，固然這個combo你們也能夠用外面成熟combo的方案；模板選擇了Nunjunks,功能強大的模板引擎（http://mozilla.github.io/nunjucks/），固然也能夠選擇ejs，ejs能夠在模板中直接使用全局函數，而Nunjunks須要事先註冊，有興趣的朋友能夠根據業務本身來選擇。

Css使用sass開發，使用gulp來編譯和壓縮js和css文件，combo接口只來合併相關文件，在node層，對js和css的文件作了一個緩存，而後加Expires頭，儘可能利用瀏覽器緩存。

對於node層的緩存，在生產環境中，上線時能夠手動更新這些js和css緩存，讓用戶每次訪問都是從緩存中取數據。