加載和顯示。
[0049] 更新客戶端界面時，只需要加載和渲染一次新的網(wǎng)頁頁面即可，在不影響用戶體 驗的基礎(chǔ)上，能夠大大靈活客戶端的展現(xiàn)能力
[0050] 此外，可以理解，可以只對其中的部分頁面片段進(jìn)行更新，也可以對所有頁面片段 進(jìn)行更新。必要時，根據(jù)已疊加的本地組件調(diào)整頁面片段的位置和/或大小，或甚至是重新 疊加本地組件于瀏覽器組件上方。
[0051 ] 優(yōu)選地，若頁面的url (統(tǒng)一資源定位）地址不變，但是內(nèi)容發(fā)生變更了，這樣客戶 端會去檢查加載的內(nèi)容是否和緩存里的一致，如果不一致則進(jìn)行更新；若頁面變更后url 發(fā)生變化，那客戶端會去重新加載新的資源。
[0052] 如圖1所示，客戶端界面上具有四個區(qū)塊，每個區(qū)塊表示一個可視化的頁面組件 (view)，其可以由native組件（本地組件）或由webview組件（瀏覽器組件）加載頁面來實 現(xiàn)，可以看到圖 1 分別不出了 nativel、webviewl、native2、webview2 組件。其中，webview 組件為客戶端上的用于加載頁面的可視化組件，在webview組件中加載的html中的內(nèi)容 (在html動態(tài)區(qū)塊中的頁面片段）的位置可以通過js(jaVaSCript腳本語言）來控制，并 且native組件也可以通過js來控制html中的內(nèi)容（位置、大小、背景等等）。這樣，可以 任意的控制客戶端界面上不同區(qū)塊的位置。
[0053] 通常是將各頁面組件按順序布局到客戶端界面上，如圖2所示，先渲染nativel組 件，放到布局中；接著使用webviewl組件加載h5(html5)頁面片段，加載到布局；然后植染 native2組件，放到布局中；最后使用webview2組件加載h5頁面片段，加載到布局以形成 客戶端界面。這樣，如果有η個h5頁面片段，客戶端就需要創(chuàng)建η個webview組件，加載η 個頁面片段，初始化和渲染η個頁面片段。由于webview組件本身就比較消耗資源，所以這 樣的做法有比較嚴(yán)重的性能問題，目前我們只能盡量的少使用webview組件來減少性能的 影響，因此失去了不少靈活性。
[0054] 而在本發(fā)明的一個優(yōu)選例中，使用單個webview組件來承載任意個、任意位置的 html動態(tài)區(qū)塊（例如圖5中所示的html動態(tài)區(qū)塊1、html動態(tài)區(qū)塊2)中的頁面片段， native組件疊加于其上以形成客戶端界面。具體地，如圖5和圖6所示，客戶端先將一個 webview組件加載的頁面作為背景放在客戶端界面里；然后客戶端根據(jù)業(yè)務(wù)規(guī)則將不同的 native組件（例如nativel組件和native2組件）定位到屏幕的固定位置（遮蓋掉webview 組件的一部分）；最后如有必要或者改變，nat i ve組件可以根據(jù)當(dāng)前的位置通知web V i ew組 件中的頁面片段進(jìn)行調(diào)整（位置，大小等）。
[0055] 表1通常方法與本發(fā)明方法的比較
[0056]
[0057] 我們將上述通常方法與本發(fā)明方法在表1中進(jìn)行了比較，可以看到，本發(fā)明方法 能夠很好的提高客戶端的靈活度又不失性能。
[0058] 也就是說，客戶端通過一個背景的webview組件來加載響應(yīng)的h5頁面片段集合 (即由這些h5頁面片段組合的一個頁面），并把由這些h5頁面片段組合的一個頁面添加到 客戶端界面（例如手機視圖window)的最底層。η個h5頁面片段都在一個html的頁面當(dāng) 中，它們的布局是可以隨native組件的位置進(jìn)行相應(yīng)調(diào)整。因此，只需要加載和渲染一次 html就可以了。客戶端植染native組件，按照位置約定覆蓋到背景（即最底層）的webview 組件上，重復(fù)該步驟依次添加 native組件到響應(yīng)的位置上。
[0059] 然后，native組件和h5頁面片段進(jìn)行通訊，從而判斷h5頁面片段的位置是否要進(jìn) 行相應(yīng)的調(diào)整?？梢岳斫猓琱5頁面片段可以通過jsbridge的應(yīng)用編程接口（Application Programming Interface，簡稱"API"）與native組件進(jìn)行通訊，native組件可以通過 webview組件的相關(guān)API與h5頁面片段進(jìn)行通訊，從而可以實現(xiàn)native組件和h5頁面片 段的雙向通訊。具體地，可以把覆蓋在webview組件上的native組件的位置傳遞給h5頁 面片段，將native組件的位置和當(dāng)前的h5頁面片段位置進(jìn)行比較；如果需要調(diào)整，則通過 javascript操作當(dāng)前的h5頁面片段，進(jìn)行調(diào)整。
[0060] 因為native組件是覆蓋在webview組件的上面，native組件的位置可能和html 動態(tài)區(qū)塊的位置有些重疊或者不是非常合適，所以根據(jù)native組件的位置可以動態(tài)的跳 轉(zhuǎn)h5頁面片段的坐標(biāo)和長寬等。具體過程主要如下：
[0061] 1.計算當(dāng)前native組件的位置信息；
[0062] 2.通過webview組件的API，把對應(yīng)的native組件信息及相應(yīng)的位置信息報告給 webview組件中的h5頁面片段；
[0063] 3.得到native組件的相關(guān)信息后，使用js對比當(dāng)前的h5頁面片段的位置信息， 計算出需要改變的尺寸或坐標(biāo)；
[0064] 4.通過js操作h5頁面片段，進(jìn)行相應(yīng)的位置和大小調(diào)整。
[0065] 由上可以看到，webview組件和native組件通常視為一個層面上的頁面組件，若 要顯示在native組件兩側(cè)的頁面片段時，往往需要利用多個webview組件加載多個頁面片 段來實現(xiàn)與native組件的混合。而在本發(fā)明中，使用單個webview組件加載由多個頁面片 段組合的一個頁面，并將native組件疊加于該單個webview組件上方，能夠在視覺上達(dá)到 同樣的效果，并且同時保證了客戶端界面的靈活度和性能，具有很大的優(yōu)勢。
[0066] 以上僅為本發(fā)明的一個優(yōu)選例，可以根據(jù)實際情況使用其他瀏覽器組件對其他類 型和版本的頁面進(jìn)行加載，并將本地組件疊加于瀏覽器組件上方，以實現(xiàn)頁面片段與本地 組件的混合。此外，可以根據(jù)需要在客戶端界面上顯示任意數(shù)量的本地組件和頁面片段，不 限于上述的兩個和上述的布局。
[0067] 本發(fā)明的各方法實施方式均可以以軟件、硬件、固件等方式實現(xiàn)。不管本發(fā)明是 以軟件、硬件、還是固件方式實現(xiàn)，指令代碼都可以存儲在任何類型的計算機可訪問的存儲 器中（例如永久的或者可修改的，易失性的或者非易失性的，固態(tài)的或者非固態(tài)的，固定的 或者可更換的介質(zhì)等等）。同樣，存儲器可以例如是可編程陣列邏輯（Programmable Array Logic，簡稱"PAL"）、隨機存取存儲器（Random Access Memory，簡稱"RAM"）、可編程只讀存 儲器（Programmable Read Only Memory，簡稱 "PROM"）、只讀存儲器（Read-Only Memory， 簡稱"ROM")、電可擦除可編程只讀存儲器（Electrically Erasable Programmable ROM，簡 稱"EEPR0M"）、磁盤、光盤、數(shù)字通用光盤（Digital Versatile Disc，簡稱"DVD"）等等。
[0068] 本發(fā)明第三實施方式涉及一種混合型客戶端界面實現(xiàn)系統(tǒng)。圖7是該混合型客戶 端界面實現(xiàn)系統(tǒng)的結(jié)構(gòu)示意圖。該客戶端界面中包括至少兩個頁面片段和至少一個本地組 件，該系統(tǒng)包括：
[0069] 生成模塊，用于生成一個瀏覽器組件和至少一個本地組件。
[0070] 組合模塊，用于將至少兩個頁面片段組合成一個頁面。優(yōu)選地，各頁面片段具有不 同業(yè)務(wù)內(nèi)容。能夠使客戶端界面同時顯示不同業(yè)務(wù)內(nèi)容，以更好地適應(yīng)不同需求。此外，可 以理解，在本發(fā)明的其他實施方式中，各頁面片段也可以是相同業(yè)務(wù)內(nèi)容。
[0071] 加載模塊，用于控制生成模塊生成的瀏覽器組件加載和顯示組合模塊組合的頁 面，其中至少兩個頁面片段分布在至少一個本地組件的兩側(cè)。以及
[0072] 疊加模塊，用于將生成模塊生成的本地組件疊加于瀏覽器組件上方的指定位置， 以形成客戶端界面。
[0073] 在本實施方式的混合型客戶端界