周江，李月

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

一種基于JSP技術(shù)的網(wǎng)頁表格組件的設(shè)計(jì)與實(shí)現(xiàn)

周江，李月

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

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

表格；Web；組件；JSP

1 開源表格組件的性能對(duì)比分析

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

（1）在服務(wù)端構(gòu)造表格。此類組件在服務(wù)器端構(gòu)造好HTML代碼，輸出到瀏覽器，然后用JavaScript在客戶端進(jìn)行表格的樣式調(diào)整以及各種表格的事件綁定，代表性的組件有Ecside。

（2）在客戶端構(gòu)造表格。原理是從服務(wù)端將數(shù)據(jù)傳回到客戶瀏覽器端，常見的格式是XML或者JSON，也有的使用自定義格式?？蛻舳藢⒏袷交玫淖址跒g覽器進(jìn)行對(duì)象化，構(gòu)造出表格對(duì)象；然后，為表格的每行構(gòu)造一個(gè)對(duì)象，為每行的每個(gè)單元格構(gòu)造一個(gè)對(duì)象，為每個(gè)對(duì)象提供各種觸發(fā)事件綁定；之后，為表格、行、列提供HTML代碼創(chuàng)建函數(shù)（作為內(nèi)部方法放入各個(gè)對(duì)象）；最后，從上至下，遍歷所有對(duì)象，創(chuàng)建表格的HTML代碼。典型代表有ExtJS組件以及Datata?bles組件。

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

圖1 各種組件顯示不同數(shù)據(jù)量的效率對(duì)比

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

2 基于JSP技術(shù)的網(wǎng)頁表格組件的設(shè)計(jì)及實(shí)現(xiàn)

2.1 網(wǎng)頁表格組件的設(shè)計(jì)思想

分析圖1的數(shù)據(jù)及各種組件的技術(shù)，可以得到如下結(jié)論：

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

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

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

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

OgTable組件實(shí)現(xiàn)的主要架構(gòu)如圖2所示。其主要設(shè)計(jì)思想有如下幾點(diǎn)：

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

（2）采用JSP的Taglib的技術(shù)，即自定義標(biāo)簽，便于封裝數(shù)據(jù)。

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

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

圖2 自定義的網(wǎng)頁表格組件（OgTable）原理圖

2.2 OgTablee表格組件中客戶端的實(shí)現(xiàn)及效率提升

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

（1）表頭固定功能

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

（2）表格列寬調(diào)整功能

表格列寬調(diào)整功能，類似于Excel在表頭通過鼠標(biāo)拖動(dòng)改變列寬的功能，在鼠標(biāo)移動(dòng)到表頭，點(diǎn)擊左鍵以后，觸發(fā)JavaScript事件，改變鼠標(biāo)形狀，并且根據(jù)鼠標(biāo)的移動(dòng)位置調(diào)整列的寬度?？紤]到效率問題，調(diào)整列寬并不是實(shí)時(shí)處理，而是等待鼠標(biāo)的左鍵釋放以后再調(diào)整。這種處理方式將對(duì)客戶端電腦配置較差的用戶提供一個(gè)較好的體驗(yàn)。

（3）表格翻頁功能

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

2.3 OgTablee表格組件在服務(wù)器端的實(shí)現(xiàn)

服務(wù)器端主體由OGTableTag（表格標(biāo)簽）、OGRowTag（行標(biāo)簽）、OGColumnTag（列標(biāo)簽）、OGAt?tributeTag（屬性標(biāo)簽）四個(gè)標(biāo)簽構(gòu)成，類圖如圖3所示：

在圖3中，需要說明如下幾點(diǎn)：

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

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

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

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

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

3 OgTable表格組件的性能測(cè)試及分析

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

圖3 服務(wù)器端實(shí)現(xiàn)的類圖

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

4 結(jié)語

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

圖4 OgTable與開源組件性能對(duì)比

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

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

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

[4]戴麗華.嵌入式Web服務(wù)器的研究與應(yīng)用[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-），女，湖南瀏陽人，碩士，研究方向?yàn)樾畔⑼ㄐ?、軟件工程；李月?979-），女，湖北荊門人，碩士，研究方向?yàn)檐浖こ獭⑷斯ぶ悄埽?/p>

2017-07-06

2017-07-16

Table;Web;Component;JSP