一種基于JSP技術的網頁表格組件的設計與實現

周江，李月

（廣東交通職業(yè)技術學院，廣州510650）

一種基于JSP技術的網頁表格組件的設計與實現

周江，李月

（廣東交通職業(yè)技術學院，廣州510650）

B/S信息系統(tǒng)中，表格的響應時間直接影響系統(tǒng)響應時間。通過對比并分析幾種主流表格組件的響應時間并分析其原因，提出一種基于JSP技術的網頁表格組件的解決方案。該方案具有高效、輕量級的特點，尤其在數據量較大時具有明顯的優(yōu)越性。

表格；Web；組件；JSP

1 開源表格組件的性能對比分析

表格是B/S信息系統(tǒng)中常用的數據表現形式，它能一次顯示較多的信息，且方便查看，目前Ecside、Ex?tjs、Datatables等開源表格組件使用比較廣泛。按照實現方式來分類，可以將這些組件分為以下兩種：

（1）在服務端構造表格。此類組件在服務器端構造好HTML代碼，輸出到瀏覽器，然后用JavaScript在客戶端進行表格的樣式調整以及各種表格的事件綁定，代表性的組件有Ecside。

（2）在客戶端構造表格。原理是從服務端將數據傳回到客戶瀏覽器端，常見的格式是XML或者JSON，也有的使用自定義格式。客戶端將格式化好的字符串在瀏覽器進行對象化，構造出表格對象；然后，為表格的每行構造一個對象，為每行的每個單元格構造一個對象，為每個對象提供各種觸發(fā)事件綁定；之后，為表格、行、列提供HTML代碼創(chuàng)建函數（作為內部方法放入各個對象）；最后，從上至下，遍歷所有對象，創(chuàng)建表格的HTML代碼。典型代表有ExtJS組件以及Datata?bles組件。

圖1是在不同數據量情況下幾種組件的性能分析對比。從圖中可以看出，當數據量比較小，僅為20行× 10列時，純Html表格的響應時間僅4ms，Ecside、Ex?tJS、Datatables三種組件的響應時間均為20ms左右；當數據量上升到50行*20列時，純Html表格的響應時間依然只有6ms，而Ecside、ExtJS、Datatables的響應時間則分別上升到了80ms、200m和180ms；當數據量上升到200行×10列時，純HTML表格的響應時間只上升到40ms，而Ecside、ExtJS、Datatables的響應時間則分別上升到了200ms、500m和400ms；當數據量上升到200行×50列時，Ecside組件的響應時間也上升到了900ms，而ExtJS、Datatables的響應時間則達到了4300ms和2000ms，此時純HTML表格的響應時間僅有62ms。

圖1 各種組件顯示不同數據量的效率對比

一般認為，一個網頁的響應時間不能超過1000ms，如果一個表格組件顯示時間就超過1000ms，那么整個頁面響應時間會進一步加長，用戶體驗將顯著下降。所以，在較大的數據量（200行×10列）情況下，幾種主流的開源網頁表格組件的響應時間都非常不理想，這成為了制約B/S信息系統(tǒng)響應時間的一個瓶頸。因此，開發(fā)一種高效率顯示大數據量的網頁表格組件，對滿足客戶需求而言是非常必須而迫切的。

2 基于JSP技術的網頁表格組件的設計及實現

2.1 網頁表格組件的設計思想

分析圖1的數據及各種組件的技術，可以得到如下結論：

（1）純HTML表格在不同數據量下的響應時間都是最快的，這是因為瀏覽器解析HTML代碼所用時間非常少，而Ecside等組件包含的Javascript代碼執(zhí)行起來比較費時，導致大量的時間耗費在Javascript代碼執(zhí)行上。但是在實際軟件開發(fā)中，使用原生表格來開發(fā)界面，是不可行的。

（2）隨著數據的增大，ExtJS和Datatables的表現非常糟糕，它們的耗時增長速度遠高于線性。這是因為ExtJS和Datatables在客戶端構造HTML代碼，而且創(chuàng)建了大量js對象，導致頁面性能消耗很大，比如在數據量為200×50(行×列)的情況下，創(chuàng)建了10000個以上的對象，所以隨著數據的增加，響應時間越來越長。

（3）Ecside采用服務器端生成HTML代碼，所以Ecside耗時增長基本接近線性，明顯優(yōu)于ExtJS和Datatables。但是在200×50(行×列)的情況下依然超過1000ms，用戶體驗也將顯著下降。造成Ecside耗時長的原因有兩點。其一，Ecside組件雖然是客戶端生成HTML代碼，但還是在客戶端構造了大量JavaScript對象，另外對表格樣式調整、事件綁定等也消耗了很多時間。其二，由于Ecside是通用組件，考慮的表格通用功能非常多，例如可編輯、排序、拖動、統(tǒng)計、導出、打印等各種通用功能集成，存在一定時間消耗，所以也在頁面顯示的效率方面打了折扣。

通過比較分析，筆者吸取這幾種主流組件的精華，重新規(guī)劃，開發(fā)了一種全新的基于JSP技術的網頁表格組件，筆者將此組件取名為OgTable。

OgTable組件實現的主要架構如圖2所示。其主要設計思想有如下幾點：

（1）為了保證訪問的效率，采用服務端生成網頁表格HTML代碼的方式。雖然從軟件工程角度來看，從客戶端生成HTML代碼耦合度低、代碼可讀性高，可維護性強，也更方便程序員使用，但是在必要的時候需要犧牲代碼結構去獲取性能，是在軟件開發(fā)中經常需要做的一個取舍。

（2）采用JSP的Taglib的技術，即自定義標簽，便于封裝數據。

（3）表格輸出以后，極端簡化js代碼，后續(xù)操作需要的js對象在觸發(fā)事件以后根據需要再單獨生成，HT?ML中對象需要綁定的事件，全部在html代碼中生成，不采用js的方式綁定。

（4）在OgTable實現過程中，去掉表格的大部分通用功能，只提供表格的基本功能。附加功能采用外置接口，由用戶選擇配置，盡量使OgTable組件輕量化。

圖2 自定義的網頁表格組件（OgTable）原理圖

2.2 OgTablee表格組件中客戶端的實現及效率提升

OgTable包含基本的表格功能，如表頭固定功能、表格列寬調整功能、表格翻頁功能等，同時為了保證效率，從以下幾點來考慮實現的細節(jié)：

（1）表頭固定功能

這是指表格滾動條上下拉動時表頭固定不動。在數據量大，主要是行數比較多的時候，表頭固定功能就顯得特別重要。為了加快響應速度，OgTable摒棄了一般的用JavaScript代碼捕捉鼠標位置固定表頭的方法，而是將表格實際分為了兩個表格，上面的表格僅顯示表頭一行，下面的表格顯示數據。在表格初始化的時候用JavaScript代碼保證兩個表格所有的列都同寬，這樣可以達到表頭固定功能的效果。

（2）表格列寬調整功能

表格列寬調整功能，類似于Excel在表頭通過鼠標拖動改變列寬的功能，在鼠標移動到表頭，點擊左鍵以后，觸發(fā)JavaScript事件，改變鼠標形狀，并且根據鼠標的移動位置調整列的寬度。考慮到效率問題，調整列寬并不是實時處理，而是等待鼠標的左鍵釋放以后再調整。這種處理方式將對客戶端電腦配置較差的用戶提供一個較好的體驗。

（3）表格翻頁功能

在OgTable組件中，表格翻頁功能采用AJAX技術，通用的表格組件通常是使用AJAX獲取格式化的數據（XML或者JSON等其他格式）。同樣是考慮到客戶端重新封裝代碼的效率將比較低，所以OgTable將直接從服務器端獲取到封裝好的可以直接顯示為表格的HTML代碼，通過這種方式，節(jié)省了客戶端解析數據和構造HTML代碼的時間，從而提高OgTable組件在數據量較大的時候的翻頁效率。

2.3 OgTablee表格組件在服務器端的實現

服務器端主體由OGTableTag（表格標簽）、OGRowTag（行標簽）、OGColumnTag（列標簽）、OGAt?tributeTag（屬性標簽）四個標簽構成，類圖如圖3所示：

在圖3中，需要說明如下幾點：

（1）OGTableTag類、OGRowTag類、OGColumnTag類都繼承了OGBaseTag類，成為3個獨立的自定義標簽類。這樣它們可以擁有自己的屬性方法。

（2）在JSP中OGTableTag類是OGRowTag類的父節(jié)點，OGRowTag類是OGColumnTag父親節(jié)點。所以在服務器端，OGTableTag類、OGRowTag類、OGColumn?Tag類存在依賴關系。

（3）在Jsp中OGTableTag類、OGRowTag類、OG?ColumnTag類都有OGAttribute類的子節(jié)點，便于給這三種Tag類添加各種屬性，所以在服務器端OGTable?Tag類、OGRowTag類、OGColumnTag類對OGAttribute類有依賴關系。

（4）OGTableTag有各種節(jié)點html代碼的構造方法，OGRowTag有行高，背景顏色等屬性，OGColumnTag有列寬，是否可排序，是否可以拖動等屬性。

（5）OGTableTag中的doEndTag方法（超類方法）中調用各層的構造HTML代碼構造方法，并拼裝起來，形成一個完整的表格代碼，用out.print輸出。doEndTag方法還會輸出一些js代碼用來完成table的腳本初始化。

3 OgTable表格組件的性能測試及分析

OgTable組件開發(fā)完畢后，將該組件在“校園問卷調查系統(tǒng)”、“學生醫(yī)療保險信息系統(tǒng)”等中應用，得到良好的效果。在相同場景下，將OgTable組件與Ec?side、ExtJS、Datatables等表格組件進行了性能對比，得到結果如圖4所示。

圖3 服務器端實現的類圖

從圖4可以看出，在大數據量，即200×10(行×列)和200×50(行×列)時，使用OgTable表格組件的響應時間相對其他的幾種網頁組件有顯著降低，更接近純HTML表格的效率。因此，本文提出的基于JSP技術的網頁表格組件OgTable是符合實際需要并且切實有效的，解決了較大數據量用表格展示時響應時間相對較慢的瓶頸。

4 結語

本文提出的基于JSP技術的OgTable表格組件的設計及實現，使用了Taglib自定義標簽技術，在服務器端生成表格代碼，在前端去掉使用頻率低的通用功能，具有高效、輕量級的特點。在200行×10列以上數據量時，和主流組件對比，具有明顯的優(yōu)越性。OgTable組件解決了在Web信息系統(tǒng)中，用表格顯示較大數據量時的響應時間過長的問題。

圖4 OgTable與開源組件性能對比

[1]黃燈.ExtJS 4.2實戰(zhàn)[M].北京：清華大學出版社，2014.

[2]李華彪.Java中間件技術及其應用開發(fā)[M].北京:中國水利水電出版社,2012.

[3]鄧偉成，范軼翔，夏翔，等.ExtJS框架下Grid組件的擴展及應用[J].計算機應用，2012，32（S1）:80-82.

[4]戴麗華.嵌入式Web服務器的研究與應用[J].輕工科技，2013（11）:72-73.

Design and Implementation of a Page form Component Based on JSP Technology

ZHOU Jiang，LI Yue

In the B/S information system,the response time of the table directly affects the system response time.By comparing several major table controls,propose a solution of developing a kind of table control used in pages,the solution is efficient and lightweight,especially when the data volume is large,and it has obvious superiority.

1007-1423（2017）21-0048-04

10.3969/j.issn.1007-1423.2017.21.010

周江（1978-），女，湖南瀏陽人，碩士，研究方向為信息通信、軟件工程；李月（1979-），女，湖北荊門人，碩士，研究方向為軟件工程、人工智能；

2017-07-06

2017-07-16

Table;Web;Component;JSP