TW201421263A - 網頁瀏覽系統及其方法 - Google Patents

Abstract

一種網頁瀏覽系統及其方法，透過客戶端從伺服端接收網頁文件的版本訊息，並且在客戶端根據版本訊息判斷需要下載差異文件時，由客戶端將下載的差異文件與暫存文件整合為更新文件，以及解析更新文件以顯示為網頁，用以達成提高網頁瀏覽效率之技術功效。

Description

網頁瀏覽系統及其方法

本發明為有關於一種網頁瀏覽系統及其方法，特別是指一種基於網頁文件的版本訊息，用以調整載入網頁文件的方式之網頁瀏覽系統及其方法。

近年來，隨著網路的普及與蓬勃發展，各種不同的網站猶如雨後春筍般出現，而由於網站所提供的服務日趨複雜，所以網頁文件的大小也相對增加。

一般而言，傳統的網頁文件通常會結合腳本語言(script langrage)以便提供更多的功能。然而，由於網頁文件同時包含超文本標記語言及腳本語言時，對於網頁文件的維護與管理造成相當大的不便，網頁文件的大小也非常龐大而不利網路傳輸，故具有網頁瀏覽效率不佳之問題。

有鑑於此，便有人提出將腳本語言從網頁文件的超文本標記語言中獨立出來形成另一個網頁文件，如：“file.js”，而此網頁文件只需要以超連結(或稱外部連結)的方式與原本的網頁文件對應即可。如此一來，可通過在客戶端暫存網頁文件的方式提高網頁文件的瀏覽效率。不過，此方式在暫存的網頁文件發生修改時，仍然需要從伺服端重新下載修改後的網頁文件，當網頁文件的大小龐大時，仍然無法有效解決網頁瀏覽效率不佳之問題。

綜上所述，可知先前技術中長期以來一直存在網頁瀏覽效率不佳之問題，因此實有必要提出改進的技術手段，來解決此一問題。

有鑒於先前技術存在的問題，本發明遂揭露一種網頁瀏覽系統及其方法。

本發明所揭露之網頁瀏覽系統，此系統包含：伺服端及客戶端。在伺服端的部份，其包含：儲存模組及回應模組。其中，儲存模組用以儲存網頁文件，所述網頁文件包含版本訊息；回應模組用以接收瀏覽請求，並執行瀏覽請求以傳送所述網頁文件的版本訊息，以及接收差異文件的請求以生成並傳送差異文件。在客戶端的部份，其包含：暫存區域、請求模組、比對模組及顯示模組。其中，暫存區域用以儲存暫存文件，所述暫存文件包含暫存版本訊息；請求模組用以傳送瀏覽請求以接收網頁文件的版本訊息；比對模組用以在接收到版本訊息後，將版本訊息與暫存版本訊息進行分析比對，當版本訊息不同於暫存版本訊息時，客戶端向伺服端請求差異文件並下載至暫存區域中，其中，所述差異文件為暫存文件與網頁文件中的不同訊息；顯示模組用以將差異文件與暫存文件解析為更新文件並儲存在客戶端的暫存區域中以進行顯示。

至於本發明之網頁瀏覽方法，應用在具有暫存區域的客戶端，此暫存區域儲存有暫存文件，所述暫存文件具有暫存版本訊息，其步驟包括：傳送瀏覽請求至伺服端；接收伺服端反饋的網頁文件的版本訊息；接收到版本訊息後，將版本訊息與暫存版本訊息進行分析比對；當版本訊息不同於暫存版本訊息時，客戶端向伺服端請求差異文件並下載至暫存區域中，其中差異文件是網頁文件與暫存文件中的不同訊息；所述客戶端將差異文件與暫存 文件解析為更新文件並儲存在客戶端的暫存區域中以進行顯示。

本發明所揭露之系統與方法如上，與先前技術之間的差異在於本發明是透過客戶端從伺服端接收網頁文件的版本訊息，並且在客戶端根據版本訊息判斷需要下載差異文件時，自伺服端下載差異文件並與暫存文件整合為更新文件，以及解析更新文件以顯示為網頁。

透過上述的技術手段，本發明可以達成提高網頁瀏覽效率之技術功效。

以下將配合圖式及實施例來詳細說明本發明之實施方式，藉此對本發明如何應用技術手段來解決技術問題並達成技術功效的實現過程能充分理解並據以實施。

在說明本發明所揭露之網頁瀏覽系統及其方法之前，先對本發明所自行定義的名詞作說明，本發明所述的網頁文件包含使用腳本語言(如：Java script、VB script、......等)及超文本標記語言(HyperText Markup Language,HTML)所撰寫的文件，例如，副檔名為「html」的文件，而以腳本語言為「Java script」為例，此網頁文件的副檔名可為「js」。另外，所述差異文件是指記錄網頁文件與舊網頁文件的差異(即：新版本與舊版本的網頁文件的差異，以下亦將新版本的網頁文件稱為「修改後的網頁文件」；將舊版本的網頁文件稱為「修改前的網頁文件」)，並且能夠僅根據此差異文件將舊版本的網頁文件轉換成新版本的網頁文件，由於差異文件僅記錄差異，所以文件大小遠小於完整的網頁文件，具有網路傳輸上的優勢，至於利用差異進行轉換的方式為習知技 術，此技術常用於檔案或系統的備份還原，甚至是進行升級或更新的情況，故詳細轉換方式在此不再多作贅述。

以下配合圖式對本發明網頁瀏覽系統及其方法作進一步說明，請參閱「第1圖」，「第1圖」為本發明網頁瀏覽系統之系統方塊圖，包含：伺服端110及客戶端120。所述伺服端110與客戶端120則是透過網路130相互連接。其中，在伺服端110的部份，其伺服端110包含：儲存模組111及回應模組112。所述儲存模組111用以儲存網頁文件。所述網頁文件除了具有HTML之外，還包含有超級文本預處理語言(Hypertext Preprocessor,PHP)、動態伺服頁(Active Server Page,ASP)或爪哇伺服頁(Java Server Pages,JSP)等腳本語言，此網頁文件可以嵌入式的方式，如：“<script language="javascript" src="file_name.js"></script>”將腳本語言與HTML分離成不同的網頁文件。其中“file_name.js”為將Java script分離後所形成的網頁文件的完整名稱(含副檔名)。另外，網頁文件包含有版本訊息(如：“file_name.1.0”)，此版本訊息至少包含文件名稱(如：“file_name”)及版本編號(如：“1.0”)。至於網頁文件及差異文件已於前面自行定義的名詞中作說明，故在此不再多作贅述。

回應模組112用以接收來自客戶端120的瀏覽請求，並執行此瀏覽請求以傳送網頁文件的版本訊息至客戶端120，以及接收來自客戶端120的差異文件的請求以生成並傳送差異文件。舉例來說，假設瀏覽請求所請求的網頁文件是“file_name.php”，那麼，回應模組112在執行此瀏覽請求時會偵測網頁文件“file_name.php”中的版本訊息，如：“file_name.1.0” (“file_name”為文件名稱、“1.0”為版本編號)。之後，再將客戶端120請求的網頁文件的版本訊息傳送至客戶端120。另外，回應模組112也會在接收到差異文件的請求時，根據版本訊息生成差異文件，並且將此差異文件傳送至客戶端120，例如：伺服端110同時儲存有版本編號“1.0”及“2.0”的網頁文件，當差異文件的請求記錄有版本編號“1.0”時，回應模組112會比對分析版本編號‘“2.0”與“1.0”的網頁文件之差異，並且根據此差異生成差異文件。

至於客戶端120的部份，所述客戶端120包含：暫存區域121、請求模組122、比對模組123及顯示模組124。其中，暫存區域121用以儲存暫存文件，所述暫存文件包含暫存版本訊息。在實際實施上，此暫存區域121可以快取(Caching)或任何儲存媒介來實現。特別要說明的是，網頁文件與暫存文件的差異僅在於儲存的位置不同，也就是說，當網頁文件儲存在客戶端120的暫存區域121時即稱為暫存文件，原先提及的網頁文件的版本訊息也隨之改稱為暫存版本訊息。

請求模組122用以傳送瀏覽請求至伺服端110，並且接收伺服端110回應的網頁文件的版本訊息，也就是說，此請求模組122與傳統為了瀏覽網頁所發出的瀏覽請求不同，傳統發出的瀏覽請求會取得網頁文件，而請求模組122所發出的瀏覽請求會取得網頁文件的版本訊息。

比對模組123用以在接收到版本訊息後，將版本訊息與暫存版本訊息進行比對，當版本訊息不同於暫存版本訊息時，向伺服端110請求差異文件，以便從伺服端110下載差異文件並儲存至 暫存區域中。舉例來說，當網頁文件的版本訊息較新，而暫存文件的暫存版本訊息較舊，如：版本訊息的版本編號為“1.1”、暫存版本訊息的版本編號為“1.0”，則代表兩個版本訊息不同(暫存版本訊息比版本訊息舊)。此時，比對模組123便會向伺服端110請求下載這兩個版本的差異文件，此差異文件為暫存文件與網頁文件中的不同訊息。

顯示模組124用以將接收自伺服端110的差異文件與暫存區域121內的暫存文件解析為更新文件，以便根據此更新文件在瀏覽器(Browser)中顯示出相應的網頁畫面。也就是說，將暫存文件與差異文件進行整合以成為更新文件，使更新文件的內容會與伺服端110的網頁文件的內容相同。由於以差異文件進行文件整合的方式為習知技術，故在此不再多作贅述。至於在瀏覽器中顯示更新文件就是解析網頁文件中的HTML及腳本語言，以便輸出網頁畫面，由於瀏覽器的顯示技術為習知技術，故在此不再多作贅述。

特別要說明的是，在實際實施上，伺服端110更可包含維護模組125用以在接收到一個新網頁文件後，擷取此新網頁文件與網頁文件的差異作為差異文件，由於其擷取差異的方式為習知技術，故在此不再多作贅述。

接著，請參閱「第2圖」，「第2圖」為本發明網頁瀏覽方法之方法流程圖，應用在具有暫存區域的客戶端，此暫存區域儲存有暫存文件，所述暫存文件具有暫存版本訊息，其步驟包括：傳送瀏覽請求至伺服端(步驟210)；接收伺服端110反饋的網頁文件的版本訊息(步驟220)；接收到版本訊息後，將版本訊息與暫 存版本訊息進行分析比對(步驟230)；當版本訊息不同於暫存版本訊息時，向伺服端請求差異文件並下載至暫存區域中，其中差異文件為網頁文件與暫存文件中的不同訊息(步驟240)；客戶端將差異文件與暫存文件解析為更新文件並儲存在客戶端的暫存區域中以進行顯示(步驟250)。在實際實施上，在步驟210之後，倘若伺服端110接收到網頁管理者建立的新網頁文件後，將擷取此新網頁文件與網頁文件的差異以作為差異文件，以及將新網頁文件作為網頁文件(步驟211)。透過上述步驟，即可透過客戶端120從伺服端110接收網頁文件的版本訊息，並且在客戶端120根據版本訊息判斷需要下載差異文件時，自伺服端110下載差異文件並與客戶端120的暫存文件整合為更新文件，以及解析所述更新文件以顯示為網頁。

以下配合「第3圖」至「第5圖」以實施例的方式進行如下說明，請先參閱「第3圖」，「第3圖」為本發明網頁文件之示意圖。前面提到，網頁文件包含腳本語言及HTML語言，在實際實施上，如「第3圖」所示意的網頁文件300，其包含的腳本語言位於網頁標籤“<？php”至“？>”之段落中，此腳本語言是在網頁文件300被請求瀏覽時通過伺服端110執行，並且由伺服端110將執行的結果取代網頁文件300中的所述段落後，傳送至發出請求瀏覽的客戶端120以進行顯示。也就是說，客戶端120無法得知網頁文件300中網頁標籤“<？php”至“？>”之段落，而僅能得知此段落執行的結果。另外，網頁文件300可透過“<script language="javascript" src="file_name.js"></script>”將另一個僅具有腳本語言(Java script)的網頁文件“file_name.js”嵌入至網頁 文件300中並進行對應，此對應方式可稱為超連結(或稱為外部連結)。

接著，如「第4圖」所示意，「第4圖」為本發明網頁文件於修改前後及相應的差異文件之示意圖。在一開始時，伺服端110的儲存模組111儲存有網頁文件(即修改前的網頁文件410)，當網頁管理者為了除錯或增加新功能時，將對其進行修改以形成修改後的網頁文件420，接著伺服端110可在接收到差異文件的請求時，根據修改前後的網頁文件生成差異文件430並傳送至客戶端120，或可由網頁管理者根據修改前後的差異，用以記錄成差異文件430並儲存在儲存模組111中，例如：差異文件430的第一行可記錄為“15,R,1”代表網頁文件的「第1行第15個字元」由“0”變為“1”，以及差異文件430的第二行可記錄為“14,R,0”代表網頁文件的「第2行第14個字元」由“1”變為‘“0”，其中，“R”代表「取代」的意思，倘若是「刪除」則可以“D”代表；而「增加」則可以“A”代表。雖然本發明以上述舉例來說明差異文件430的記錄方式，然而並未以此作限定，任何能使修改前的網頁文件410根據差異文件430而轉換成修改後的網頁文件420之記錄方式皆不脫離本發明的應用範疇。

請參閱「第5圖」、「第5圖」為應用本發明瀏覽網頁時，客戶端整合差異文件之示意圖。當客戶端120傳送瀏覽請求至伺服端110時，伺服端110會執行此瀏覽請求，並且傳送相應的網頁文件300的版本訊息(如：“file_name.1.1”)至客戶端120。接著，客戶端120在接收到所述網頁文件300的版本訊息後，會將接收到的版本訊息(如：“file_name.1.1”)與暫存文件的暫存版 本訊息(如：“file_name.1.0”)進行比對，當兩者不同時，客戶端120會從伺服端110下載差異文件430以儲存至暫存區域121中，接著，顯示模組124會將此差異文件430與暫存文件510解析為更新文件，並且儲存至暫存區域121中以進行顯示，所述解析為更新文件是將暫存文件與差異文件進行整合以形成更新文件，使更新文件與網頁文件的內容一致。

承上所述，由於此例中版本訊息“file_name.1.1”與暫存版本訊息“file_name.1.0”不同，所以會下載差異文件430與暫存文件510進行整合，以整合的方式為例，可根據差異文件430的記錄，將暫存文件510的「第1行第15個字元」由“0”變為“1”，以及將暫存文件510的「第2行第14個字元」由“1”變為“0”。如此一來，原先已存在客戶端120的暫存文件510將整合成更新文件511，此更新文件511與伺服端110中修改後的網頁文件420(即最新版本的網頁文件)的內容一致。換句話說，當伺服端110的網頁文件修改後，客戶端120儲存的較舊版本通過本發明即可利用下載差異文件430的方式達到更新的目的。之後，再由客戶端120的顯示模組124解析更新文件511中的超文本標記語言與腳本語言，以便在瀏覽器中以網頁方式呈現此更新文件511。

綜上所述，可知本發明與先前技術之間的差異在於透過客戶端從伺服端接收網頁文件的版本訊息，並且在客戶端根據版本訊息判斷需要下載差異文件時，自伺服端下載差異文件並與客戶端的暫存文件整合為更新文件，以及解析所述更新文件以顯示為網頁，藉由此一技術手段可以解決先前技術所存在的問題，進而達成提高網頁瀏覽效率之技術功效。

雖然本發明以前述之實施例揭露如上，然其並非用以限定本發明，任何熟習相像技藝者，在不脫離本發明之精神和範圍內，當可作些許之更動與潤飾，因此本發明之專利保護範圍須視本說明書所附之申請專利範圍所界定者為準。

110‧‧‧伺服端

111‧‧‧儲存模組

112‧‧‧回應模組

120‧‧‧客戶端

121‧‧‧暫存區域

122‧‧‧請求模組

123‧‧‧比對模組

124‧‧‧顯示模組

125‧‧‧維護模組

130‧‧‧網路

300‧‧‧網頁文件

410‧‧‧修改前的網頁文件

420‧‧‧修改後的網頁文件

430‧‧‧差異文件

510‧‧‧暫存文件

511‧‧‧更新文件

步驟210‧‧‧傳送一瀏覽請求至一伺服端

步驟211‧‧‧伺服端在接收一新網頁文件後，擷取該新網頁文件與該網頁文件的差異以作為該差異文件，以及將該新網頁文件作為該網頁文件

步驟220‧‧‧接收該伺服端反饋的一網頁文件的一版本訊息

步驟230‧‧‧接收到該版本訊息後，將該版本訊息與該暫存版本訊息進行分析比對

步驟240‧‧‧當該版本訊息不同於該暫存版本訊息時，該客戶端向該伺服端請求一差異文件並下載至該暫存區域中，其中該差異文件為該暫存文件與該網頁文件中的不同訊息

步驟250‧‧‧該客戶端將該差異文件與該暫存文件解析為一更新文件並儲存在該客戶端的該暫存區域中以進行顯示

第1圖為本發明網頁瀏覽系統之系統方塊圖。

第2圖為本發明網頁瀏覽方法之方法流程圖。

第3圖為本發明網頁文件之示意圖。

第4圖為本發明網頁文件於修改前後及相應的差異文件之示意圖。

第5圖應用本發明瀏覽網頁時，客戶端整合差異文件之示意圖。

110‧‧‧伺服端

111‧‧‧儲存模組

112‧‧‧回應模組

120‧‧‧客戶端

121‧‧‧暫存區域

122‧‧‧請求模組

123‧‧‧比對模組

124‧‧‧顯示模組

125‧‧‧維護模組

130‧‧‧網路

Claims (10)

1. 一種網頁瀏覽系統，其包含：一伺服端，該伺服端包含：一儲存模組，用以儲存至少一網頁文件，其中所述網頁文件包含一版本訊息；及一回應模組，用以接收一瀏覽請求，並執行該瀏覽請求以傳送所述網頁文件的版本訊息，以及接收一差異文件的請求以生成並傳送該差異文件；及一客戶端，該客戶端包含：一暫存區域，用以儲存一暫存文件，所述暫存文件包含一暫存版本訊息；一請求模組，用以傳送該瀏覽請求以接收所述網頁文件的版本訊息；一比對模組，用以在接收到該版本訊息後，將該版本訊息與該暫存版本訊息進行比對，當該版本訊息不同於該暫存版本訊息時，向該伺服端請求該差異文件並下載至該暫存區域中，其中該差異文件為該暫存文件與該網頁文件中的不同訊息；及一顯示模組，用以將該差異文件與該暫存文件解析為一更新文件並儲存在該客戶端的該暫存區域中以進行顯示。
2. 如申請專利範圍第1項所述之網頁瀏覽系統，其中該版本訊息及該暫存版本訊息至少包含一文件名稱及一版本編號。
3. 如申請專利範圍第2項所述之網頁瀏覽系統，其中該文件名 稱相同且該版本編號不同時，該比對模組判斷為該版本訊息與該暫存版本訊息不同。
4. 如申請專利範圍第1項所述之網頁瀏覽系統，其中該顯示模組解析為該更新文件係將該暫存文件與該差異文件進行整合以成為該更新文件，使該更新文件與該網頁文件的內容一致。
5. 如申請專利範圍第1項所述之網頁瀏覽系統，其中該伺服端更包含一維護模組，用以在接收一新網頁文件後，擷取該新網頁文件與該網頁文件的差異以作為該差異文件。
6. 一種網頁瀏覽方法，應用在具有一暫存區域的一客戶端，該暫存區域儲存有一暫存文件，該暫存文件具有一暫存版本訊息，其步驟包括：傳送一瀏覽請求至一伺服端；接收該伺服端反饋的一網頁文件的一版本訊息；接收到該版本訊息後，將該版本訊息與該暫存版本訊息進行分析比對；當該版本訊息不同於該暫存版本訊息時，該客戶端向該伺服端請求一差異文件並下載至該暫存區域中，其中該差異文件為該暫存文件與該網頁文件中的不同訊息；及該客戶端將該差異文件與該暫存文件解析為一更新文件並儲存在該客戶端的該暫存區域中以進行顯示。
7. 如申請專利範圍第6項所述之網頁瀏覽方法，其中該暫存版本訊息及該版本訊息至少包含一文件名稱及一版本編號。
8. 如申請專利範圍第7項所述之網頁瀏覽方法，其中該文件名 稱相同且該版本編號不同時，判斷為該暫存版本訊息與該版本訊息不同。
9. 如申請專利範圍第6項所述之網頁瀏覽方法，其中該客戶端解析為該更新文件的步驟係將該暫存文件與該差異文件進行整合以成為該更新文件，使該更新文件與該網頁文件的內容一致。
10. 如申請專利範圍第6項所述之網頁瀏覽方法，其中該方法更包含該伺服端在接收一新網頁文件後，擷取該新網頁文件與該網頁文件的差異以作為該差異文件，以及將該新網頁文件作為該網頁文件的步驟。