作為本系列文章的最后一篇,我們還是來看下FineUI所引以自豪的XState機制,目前XState已經在FineUI控件內部已經完全取代原生的ViewState,從而避免了重復數據的傳輸,減少了網絡流量。同時要注意Asp.Net使用的還是ViewState機制來在回發過程中保存控件數據。至於為什么要采用XState取代ViewState,以及由此帶來的好處是本篇文章的重點。
ViewState在Asp.Net控件中的作用
ViewState是Asp.Net的一個非常重要的特性,用來在頁面回發過程中維護控件的服務器端狀態,這樣我們就能方便地在按鈕的點擊事件處理函數中編寫如下代碼:
1: Label1.Text = TextBox1.Text;
對ViewState的詳細描述可以參考這篇經典文章,相信很多人都看過。簡單概括如下:
- 頁面第一次加載時,服務器控件把自身的屬性保存在頁面上的一個隱藏字段 __VIEWSTATE 中;
- 頁面PostBack時,表單提交的同時 __VIEWSTATE 的值也被提交到后台,Asp.Net會從這個隱藏字段中恢復控件屬性。
在傳統的網站開發中,ViewState的這一工作原理無可厚非,並且極大的簡化了程序員的工作量。
但是隨着AJAX的興起,特別是通過JavaScript渲染的客戶端界面中,ViewState的實現顯得有點捉襟見肘。
FineUI早期版本使用ViewState的情況
FineUI的早期版本使用還是ViewState來保存控件狀態(v2.3.1之前的版本),比如下面一個典型的FineUI頁面:
頁面的所有內容都是由服務器生成的JavaScript代碼渲染出來的。
打開頁面源代碼,你會發現在<body>和</body>之間除了聊聊幾行HTML代碼外,大部分是服務器端生成的JavaScript代碼:
下面來分析這個例子中ViewState機制的運用:
1. 頁面第一次加載
由於頁面上面富文本框的內容是通過C#代碼在后台設置的,所以這個屬性會出現在 __VIEWSTATE 字段中,將HTML源代碼中這個字段的內容進行解碼,可以看到如下內容:
可以看出,頁面的ViewState字符串中包含了富文本框的內容(上圖右上方樹狀結構所示)。
同時,由於整個頁面都是由JavaScript渲染的,這個屬性同樣會傳遞到頁面上的JavaScript腳本中:
由此一來,在頁面第一次打開時,就存在兩份同樣的重復數據了(分別存在於ViewState和生成JavaScript代碼中)。
2. 點擊“Get html editor content”按鈕
這個操作會把上面富文本框的內容復制到下面TextArea中,此時的頁面效果圖和C#源代碼如下:
我們再來看這次AJAX響應的數據,由於需要更新TextArea的數據,同樣存在JavaScript和ViewState兩份數據:
這就又一次的造成了數據傳輸的浪費,在一個使用大量服務器控件的頁面中,這種浪費有時是驚人的。
FineUI新版棄用ViewState,轉而采用自己實現的XState機制
在一個提倡簡單的全新客戶端框架中放棄ViewState,是否就意味着放棄在頁面回發中使用C#操作服務器控件的便利呢?
顯然這是不可能的!
唯一的辦法就是自己實現適合於AJAX數據傳輸的ViewState機制,FineUI在這一方面領先一步,創建了全新的XState概念,使得在不放棄頁面回發中C#操作服務器控件便利的同時,拒絕了任何形式數據傳輸的浪費。
注意:FineUI棄用ViewState,並不是禁用,Asp.Net控件還是要依賴於ViewState機制的。
同樣是上一個例子,來看下新版FineUI(大於v2.3.1)對XState的實現:
1. 頁面第一次加載
富文本框的數據只存在於JavaScript代碼中,由於不使用ViewState,所以 __VIEWSTATE 只是保存了一個ControlState的屬性:
2. 點擊“Get html editor content”按鈕
此時AJAX響應數據也沒有重復的部分了:
對比使用ViewState和XState的FineUI控件的數據傳輸量
還是上面一個例子,我們分別從頁面第一加載和回發頁面兩方面進行的數據傳輸量的對比:
響應數據(使用ViewState) 響應數據(使用XState)
第一次加載 5068 4922
點擊第一個按鈕 1251 709
創新所以生存!
小結
本篇文章重點論述了ViewState在FineUI控件中存在的弊端,並由此引入了全新的XState機制。通過兩者對比發現,XState機制在頁面第一次加載和后續的頁面回發中都能有效地減少數據傳輸量,從而提高頁面加載速度。
至此,本系列文章全部結束,但是FineUI開發的腳步還將繼續,努力打造國內最好的開源Asp.Net控件庫!
注:《FineUI秘密花園》系列文章由三生石上原創,博客園首發,轉載請注明出處。文章目錄 官方論壇
================
根據之前的規則:http://fineui.com/donate/
現提供《FineUI秘密花園》完整PDF版下載。
《ExtAspNet秘密花園》完整PDF版.part1.rar
《ExtAspNet秘密花園》完整PDF版.part2.rar
《ExtAspNet秘密花園》完整PDF版.part3.rar