【Web緩衝機制概述】5 – Web App時代的緩衝機制新思路

文章目錄

• 用戶端提供緩衝讀寫能力

====索引=====

【Web緩衝機制概述】1 – Web緩衝的作用與類型

【Web緩衝機制概述】2 – Web瀏覽器的緩衝機制

【Web緩衝機制概述】3 – 如何構建可緩衝網站

【Web緩衝機制概述】4 – HTML5時代的Web緩衝機制

【Web緩衝機制概述】5 – Web App時代的緩衝機制新思路

============

Web App的概念逐漸被業界認可，各大互連網公司也紛紛推出Web App開發大賽，積極引入到他們的開放平台，比較著名類似facebook農場，qzone偷菜之類的。Web開發逐漸從Web Page的進入到Web App的時代，想詳細瞭解的話，可以看下超叔在D2上分享的分享《開放時代：從Web Page到Web APP》視頻、Slide。

Web App常見架構

以WebQQ例，WebQQ這個網站的所有內容都是一個頁面裡面呈現的，我們看到的類似windows作業系統的架構，是它的頂級容器和架構，由AlloyOS的核心負責統籌和管理，然後其他模組，比如壁紙設定，訊息中心，App Store都是以模組的形式，並用iframe的方式嵌入到頂級容器中。具觀察，現在越來越多的Web應用都傾向於使用這個的架構，這樣做好處是很明顯的，比如頂級架構可以維持一個不變的javascript上下文便於管理；關閉模組的iframe後，記憶體可以更好的釋放；利用iframe的安全機制最大限度的保證核心的安全和穩定等等。

這種Web的架構，其實也給我們Web前端提供了從代碼邏輯層面上給Web應用實現緩衝提供了可能。

緩衝Ajax請求

由於頂級架構頁面是不會由於調整重新整理而導致javascript上下文丟失，所以底層或各個模組所需要的Ajax請求，都是可以通過頂級架構統一請求後，並以資訊服務的形式對外提供Api調用。對於一些即時性要求不是很強的請求來說，可以由頂級架構做統一緩衝，定期更新。這種做法可以不影響使用者體驗的前提下，明顯減少請求數，降低網路流量，並間接減輕了伺服器的壓力。

通過Javascript實現記憶體緩衝

跟緩衝Ajax請求的結果類似，程式運行過程中的其他資料，其實也可以採用類似的方式在頂級容器的Javascript上下文中緩衝。

 

Web App發展新方向：Web-Client模式

隨著Web App的進一步發展，貌似瀏覽器已經無法阻擋Web應用探索更前端，更本地化Native App的使用者體驗。比如目前的Qplus、豆瓣莢等應用，都採用Client、Web相結合的開發模式。這樣做即可以利用Web開發迭代更新快、UI開發成本低等特點，有可以利用用戶端的能力為Web實現很多無法實現的功能。以Qplus為例，Qplus不但內嵌了Webkit核心，還未Webkit上定製了很多便利的介面，比如跨Web-Client的拖曳、多線程下載等。在這種發展新模式下，Web緩衝又能有什麼考慮的發張方向呢？

用戶端提供緩衝讀寫能力

我們知道，HTML5的localstorage僅僅只能支援5m的儲存。我們可以按localstorage的設計思路，讓用戶端為Web定製更大，更靈活的本機存放區功能。到時，Web緩衝能做的事情就會更多。

 

以上就當前Web App的發展趨勢，討論了對於Web緩衝領域，有哪些可以做，可以考慮的方向。當然，這些做法，合不合理，合不合適都還是值得討論和商榷的，如果你有想法，都可以隨時聯絡並一起討論。

 

全文總結

本文嘗試概述目前Web緩衝方向的現狀，以及HTML5和Web App時代下，Web緩衝可以考慮的新方向。由於時間倉促和表達概括能力有限，有可能有表達不妥的地方，歡迎指正討論。

曆史

[Version 1.0] 2012-03-21 rehorn @ tencent webplus team

 

參考文獻

http://www.mnot.net/cache_docs/ 

http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html 

http://robbin.iteye.com/blog/462476

http://www.procata.com/cachetest/

http://www.web-caching.com/cacheability.html

http://www.laruence.com/2010/03/05/1332.html

http://sofish.de/1449

http://www.fovweb.com/web/web-cache.html