本公開(kāi)涉及計(jì)算機(jī)技術(shù)領(lǐng)域，尤其涉及一種頁(yè)面顯示方法、裝置及存儲(chǔ)介質(zhì)。

背景技術(shù)：

隨著計(jì)算機(jī)技術(shù)的發(fā)展，為了方便用戶(hù)使用，各種網(wǎng)頁(yè)應(yīng)用被開(kāi)發(fā)出來(lái)。由于用戶(hù)在瀏覽網(wǎng)頁(yè)應(yīng)用的頁(yè)面時(shí)，頁(yè)面的顯示效果直接影響了用戶(hù)的瀏覽體驗(yàn)，因此，為了提高用戶(hù)的瀏覽體驗(yàn)，如何進(jìn)行頁(yè)面顯示成為本領(lǐng)域人員較為關(guān)注的問(wèn)題。

相關(guān)技術(shù)在進(jìn)行頁(yè)面顯示時(shí)，主要借助頁(yè)面顯示裝置，該頁(yè)面顯示裝置包括javascript執(zhí)行層和瀏覽器內(nèi)核，具體顯示過(guò)程為：javascript執(zhí)行層對(duì)請(qǐng)求顯示的指定網(wǎng)頁(yè)進(jìn)行解析，得到j(luò)avascript文件；在執(zhí)行javascript文件的過(guò)程中，javascript執(zhí)行層生成虛擬樹(shù)形結(jié)構(gòu)；javascript執(zhí)行層將虛擬樹(shù)形結(jié)構(gòu)轉(zhuǎn)換為瀏覽器內(nèi)核可識(shí)別的樹(shù)形結(jié)構(gòu)，并將該樹(shù)形結(jié)構(gòu)發(fā)送至瀏覽器內(nèi)核；瀏覽器內(nèi)核根據(jù)該樹(shù)形結(jié)構(gòu)進(jìn)行頁(yè)面顯示。

技術(shù)實(shí)現(xiàn)要素：

本公開(kāi)提供一種頁(yè)面顯示方法、裝置及存儲(chǔ)介質(zhì)。

根據(jù)本公開(kāi)實(shí)施例的第一方面，提供一種頁(yè)面顯示方法，所述方法應(yīng)用于頁(yè)面顯示裝置中，所述頁(yè)面顯示裝置包括javascript執(zhí)行層、轉(zhuǎn)換層及原生層，所述方法包括：

所述javascript執(zhí)行層對(duì)請(qǐng)求顯示的指定網(wǎng)頁(yè)進(jìn)行解析，得到j(luò)avascript文件；

在執(zhí)行所述javascript文件的過(guò)程中，所述javascript執(zhí)行層生成虛擬樹(shù)形結(jié)構(gòu)，并向所述轉(zhuǎn)換層發(fā)送第一繪制消息，所述第一繪制消息包括所述虛擬樹(shù)形結(jié)構(gòu)，所述虛擬樹(shù)形結(jié)構(gòu)包括多個(gè)元素，每個(gè)元素均采用javascript語(yǔ)句進(jìn)行描述；

所述轉(zhuǎn)換層將所述虛擬樹(shù)形結(jié)構(gòu)中的多個(gè)元素轉(zhuǎn)換為所述原生層可識(shí)別的多個(gè)第一視圖，并將所述多個(gè)第一視圖發(fā)送至所述原生層，每個(gè)第一視圖包括視圖數(shù)據(jù)和視圖結(jié)構(gòu)數(shù)據(jù)；

對(duì)于任一第一視圖，當(dāng)資源池中緩存有所述第一視圖的視圖結(jié)構(gòu)數(shù)據(jù)對(duì)應(yīng)的視圖結(jié)構(gòu)，所述原生層從所述資源池中獲取所述視圖結(jié)構(gòu)，并將所述第一視圖的視圖數(shù)據(jù)添加到所述視圖結(jié)構(gòu)中，以實(shí)現(xiàn)頁(yè)面顯示。

在本公開(kāi)的另一個(gè)實(shí)施例中，所述當(dāng)資源池中緩存有所述第一視圖的視圖結(jié)構(gòu)數(shù)據(jù)對(duì)應(yīng)的視圖結(jié)構(gòu)，所述原生層從所述資源池中獲取所述視圖結(jié)構(gòu)，包括：

所述原生層從所述視圖結(jié)構(gòu)數(shù)據(jù)中獲取目標(biāo)視圖結(jié)構(gòu)標(biāo)識(shí)，并根據(jù)所述目標(biāo)視圖結(jié)構(gòu)標(biāo)識(shí)，從所述資源池中查找結(jié)構(gòu)標(biāo)識(shí)與所述目標(biāo)結(jié)構(gòu)標(biāo)識(shí)相同的視圖結(jié)構(gòu)；

當(dāng)查找到結(jié)構(gòu)標(biāo)識(shí)與所述目標(biāo)結(jié)構(gòu)標(biāo)識(shí)相同的視圖結(jié)構(gòu)，所述原生層從所述資源池中獲取所述視圖結(jié)構(gòu)。

在本公開(kāi)的另一個(gè)實(shí)施例中，所述將所述第一視圖的視圖數(shù)據(jù)添加到所述視圖結(jié)構(gòu)中，以實(shí)現(xiàn)頁(yè)面顯示，包括：

所述原生層根據(jù)所述第一視圖之外的其他第一視圖的視圖結(jié)構(gòu)數(shù)據(jù)，繪制其他第一視圖對(duì)應(yīng)的視圖結(jié)構(gòu)，并將所述視圖結(jié)構(gòu)整合到所繪制的視圖結(jié)構(gòu)中，得到所述指定網(wǎng)頁(yè)對(duì)應(yīng)的視圖結(jié)構(gòu)；

所述原生層將所述第一視圖的視圖數(shù)據(jù)及其他第一視圖的視圖數(shù)據(jù)添加到所述指定網(wǎng)頁(yè)對(duì)應(yīng)的視圖結(jié)構(gòu)中，得到所述指定網(wǎng)頁(yè)對(duì)應(yīng)的原生頁(yè)面；

所述原生層顯示所述原生頁(yè)面。

在本公開(kāi)的另一個(gè)實(shí)施例中，所述方法還包括：

當(dāng)所述第一視圖處于隱藏狀態(tài)時(shí)，所述原生層獲取所述第一視圖的視圖結(jié)構(gòu)數(shù)據(jù)對(duì)應(yīng)的視圖結(jié)構(gòu)，并將所述視圖結(jié)構(gòu)存儲(chǔ)到所述資源池中。

在本公開(kāi)的另一個(gè)實(shí)施例中，所述向所述轉(zhuǎn)換層發(fā)送第一繪制消息，包括：

所述javascript執(zhí)行層調(diào)用與所述轉(zhuǎn)換層之間的通信接口向所述轉(zhuǎn)換層發(fā)送第一繪制消息。

在本公開(kāi)的另一個(gè)實(shí)施例中，所述轉(zhuǎn)換層將所述虛擬樹(shù)形結(jié)構(gòu)中的多個(gè)元素轉(zhuǎn)換為所述原生層可識(shí)別的多個(gè)第一視圖，包括：

基于預(yù)先構(gòu)建的規(guī)則數(shù)據(jù)庫(kù)，所述轉(zhuǎn)換層將所述虛擬樹(shù)形結(jié)構(gòu)中的多個(gè)元素轉(zhuǎn)換為所述原生層可識(shí)別的多個(gè)第一視圖，所述規(guī)則數(shù)據(jù)庫(kù)中存儲(chǔ)有javascript語(yǔ)句與視圖之間的對(duì)應(yīng)關(guān)系。

在本公開(kāi)的另一個(gè)實(shí)施例中，所述方法還包括：

當(dāng)獲取到更新的javascript語(yǔ)句和更新的視圖，所述轉(zhuǎn)換層根據(jù)所述更新的javascript語(yǔ)句和所述更新的視圖，對(duì)所述規(guī)則數(shù)據(jù)庫(kù)進(jìn)行更新。

在本公開(kāi)的另一個(gè)實(shí)施例中，所述方法還包括：

當(dāng)在所述指定網(wǎng)頁(yè)上檢測(cè)到觸發(fā)操作時(shí)，所述原生層向所述javascript執(zhí)行層發(fā)送通知消息，所述通知消息包括變更的元素標(biāo)識(shí)；

所述javascript執(zhí)行層根據(jù)所述變更的元素標(biāo)識(shí)，修改所述虛擬樹(shù)形結(jié)構(gòu)，并向所述轉(zhuǎn)換層發(fā)送第二繪制消息，所述第二繪制消息包括所述修改后的虛擬樹(shù)形結(jié)構(gòu)；

所述轉(zhuǎn)換層將所述修改后的虛擬樹(shù)形結(jié)構(gòu)中的多個(gè)元素轉(zhuǎn)換為所述原生層可識(shí)別的多個(gè)第二視圖，并將所述多個(gè)第二視圖發(fā)送至所述原生層，由所述原生層進(jìn)行頁(yè)面顯示。

在本公開(kāi)的另一個(gè)實(shí)施例中，所述原生層向所述javascript執(zhí)行層發(fā)送通知消息，包括：

所述原生層調(diào)用所述與所述javascript執(zhí)行層之間的通信接口向所述javascript執(zhí)行層發(fā)送通知消息。

根據(jù)本公開(kāi)實(shí)施例的第二方面，提供一種頁(yè)面顯示裝置，所述頁(yè)面顯示裝置包括javascript執(zhí)行層、轉(zhuǎn)換層及原生層；

所述javascript執(zhí)行層，用于對(duì)請(qǐng)求顯示的指定網(wǎng)頁(yè)進(jìn)行解析，得到j(luò)avascript文件；

所述javascript執(zhí)行層，用于在執(zhí)行所述javascript文件的過(guò)程中，生成虛擬樹(shù)形結(jié)構(gòu)，并向所述轉(zhuǎn)換層發(fā)送第一繪制消息，所述第一繪制消息包括所述虛擬樹(shù)形結(jié)構(gòu)，所述虛擬樹(shù)形結(jié)構(gòu)包括多個(gè)元素，每個(gè)元素均采用javascript語(yǔ)句進(jìn)行描述；

所述轉(zhuǎn)換層，用于將所述虛擬樹(shù)形結(jié)構(gòu)中的多個(gè)元素轉(zhuǎn)換為所述原生層可識(shí)別的多個(gè)第一視圖，并將所述多個(gè)第一視圖發(fā)送至所述原生層，每個(gè)第一視圖包括視圖數(shù)據(jù)和視圖結(jié)構(gòu)數(shù)據(jù)；

對(duì)于任一第一視圖，所述原生層，用于當(dāng)資源池中緩存有所述第一視圖的視圖結(jié)構(gòu)數(shù)據(jù)對(duì)應(yīng)的視圖結(jié)構(gòu)，從所述資源池中獲取所述視圖結(jié)構(gòu)，并將所述第一視圖的視圖數(shù)據(jù)添加到所述視圖結(jié)構(gòu)中，以實(shí)現(xiàn)頁(yè)面顯示。

在本公開(kāi)的另一個(gè)實(shí)施例中，所述原生層，還用于從所述視圖結(jié)構(gòu)數(shù)據(jù)中獲取目標(biāo)視圖結(jié)構(gòu)標(biāo)識(shí)，并根據(jù)所述目標(biāo)視圖結(jié)構(gòu)標(biāo)識(shí)，從所述資源池中查找結(jié)構(gòu)標(biāo)識(shí)與所述目標(biāo)結(jié)構(gòu)標(biāo)識(shí)相同的視圖結(jié)構(gòu)；

所述原生層，還用于當(dāng)查找到結(jié)構(gòu)標(biāo)識(shí)與所述目標(biāo)結(jié)構(gòu)標(biāo)識(shí)相同的視圖結(jié)構(gòu)，從所述資源池中獲取所述視圖結(jié)構(gòu)。

在本公開(kāi)的另一個(gè)實(shí)施例中，所述原生層，還用于根據(jù)所述第一視圖之外的其他第一視圖的視圖結(jié)構(gòu)數(shù)據(jù)，繪制其他第一視圖對(duì)應(yīng)的視圖結(jié)構(gòu)，并將所述視圖結(jié)構(gòu)整合到所繪制的視圖結(jié)構(gòu)中，得到所述指定網(wǎng)頁(yè)對(duì)應(yīng)的視圖結(jié)構(gòu)；

所述原生層，還用于將所述第一視圖的視圖數(shù)據(jù)及其他第一視圖的視圖數(shù)據(jù)添加到所述指定網(wǎng)頁(yè)對(duì)應(yīng)的視圖結(jié)構(gòu)中，得到所述指定網(wǎng)頁(yè)對(duì)應(yīng)的原生頁(yè)面；

所述原生層，還用于顯示所述原生頁(yè)面。

在本公開(kāi)的另一個(gè)實(shí)施例中，所述原生層，還用于當(dāng)所述第一視圖處于隱藏狀態(tài)時(shí)，獲取所述第一視圖的視圖結(jié)構(gòu)數(shù)據(jù)對(duì)應(yīng)的視圖結(jié)構(gòu)，并將所述視圖結(jié)構(gòu)存儲(chǔ)到所述資源池中。

在本公開(kāi)的另一個(gè)實(shí)施例中，所述javascript執(zhí)行層，還用于調(diào)用與所述轉(zhuǎn)換層之間的通信接口向所述轉(zhuǎn)換層發(fā)送第一繪制消息。

在本公開(kāi)的另一個(gè)實(shí)施例中，所述轉(zhuǎn)換層，還用于基于預(yù)先構(gòu)建的規(guī)則數(shù)據(jù)庫(kù)，將所述虛擬樹(shù)形結(jié)構(gòu)中的多個(gè)元素轉(zhuǎn)換為所述原生層可識(shí)別的多個(gè)第一視圖，所述規(guī)則數(shù)據(jù)庫(kù)中存儲(chǔ)有javascript語(yǔ)句與視圖之間的對(duì)應(yīng)關(guān)系。

在本公開(kāi)的另一個(gè)實(shí)施例中，所述轉(zhuǎn)換層，還用于當(dāng)獲取到更新的javascript語(yǔ)句和更新的視圖，根據(jù)所述更新的javascript語(yǔ)句和所述更新的視圖，對(duì)所述規(guī)則數(shù)據(jù)庫(kù)進(jìn)行更新。

在本公開(kāi)的另一個(gè)實(shí)施例中，所述原生層，還用于當(dāng)在所述指定網(wǎng)頁(yè)上檢測(cè)到觸發(fā)操作時(shí)，向所述javascript執(zhí)行層發(fā)送通知消息，所述通知消息包括變更的元素標(biāo)識(shí)；

所述javascript執(zhí)行層，還用于根據(jù)所述變更的元素標(biāo)識(shí)，修改所述虛擬樹(shù)形結(jié)構(gòu)，并向所述轉(zhuǎn)換層發(fā)送第二繪制消息，所述第二繪制消息包括所述修改后的虛擬樹(shù)形結(jié)構(gòu)；

所述轉(zhuǎn)換層，還用于將所述修改后的虛擬樹(shù)形結(jié)構(gòu)中的多個(gè)元素轉(zhuǎn)換為所述原生層可識(shí)別的多個(gè)第二視圖，并將所述多個(gè)第二視圖發(fā)送至所述原生層，由所述原生層進(jìn)行頁(yè)面顯示。

在本公開(kāi)的另一個(gè)實(shí)施例中，所述原生層，還用于調(diào)用所述與所述javascript執(zhí)行層之間的通信接口向所述javascript執(zhí)行層發(fā)送通知消息。

根據(jù)本公開(kāi)實(shí)施例的第三方面，提供了一種頁(yè)面顯示裝置，包括：

處理器；

用于存儲(chǔ)處理器可執(zhí)行的指令的存儲(chǔ)器；

其中，所述處理器被配置為：

javascript執(zhí)行層對(duì)請(qǐng)求顯示的指定網(wǎng)頁(yè)進(jìn)行解析，得到j(luò)avascript文件；

在執(zhí)行所述javascript文件的過(guò)程中，所述javascript執(zhí)行層生成虛擬樹(shù)形結(jié)構(gòu)，并向轉(zhuǎn)換層發(fā)送第一繪制消息，所述第一繪制消息包括所述虛擬樹(shù)形結(jié)構(gòu)，所述虛擬樹(shù)形結(jié)構(gòu)包括多個(gè)元素，每個(gè)元素均采用javascript語(yǔ)句進(jìn)行描述；

所述轉(zhuǎn)換層將所述虛擬樹(shù)形結(jié)構(gòu)中的多個(gè)元素轉(zhuǎn)換為原生層可識(shí)別的多個(gè)第一視圖，并將所述多個(gè)第一視圖發(fā)送至所述原生層，每個(gè)第一視圖包括視圖數(shù)據(jù)和視圖結(jié)構(gòu)數(shù)據(jù)；

對(duì)于任一第一視圖，當(dāng)資源池中緩存有所述第一視圖的視圖結(jié)構(gòu)數(shù)據(jù)對(duì)應(yīng)的視圖結(jié)構(gòu)，所述原生層從所述資源池中獲取所述視圖結(jié)構(gòu)，并將所述第一視圖的視圖數(shù)據(jù)添加到所述視圖結(jié)構(gòu)中，以實(shí)現(xiàn)頁(yè)面顯示。

根據(jù)本公開(kāi)實(shí)施例的第四方面，提供了一種計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)，所述存儲(chǔ)介質(zhì)中存儲(chǔ)有至少一條指令至少一條指令，所述至少一條指令由處理器加載并執(zhí)行以實(shí)現(xiàn)第一方面所述的頁(yè)面顯示方法。

本公開(kāi)的實(shí)施例提供的技術(shù)方案可以包括以下有益效果：

原生層在接收到第一視圖后，將判斷資源池中是否緩存有第一視圖的視圖結(jié)構(gòu)數(shù)據(jù)對(duì)應(yīng)的視圖結(jié)構(gòu)，如果資源池中緩存有對(duì)應(yīng)的視圖結(jié)構(gòu)，則無(wú)需重新繪制，可根據(jù)緩存的視圖結(jié)構(gòu)進(jìn)行頁(yè)面顯示。該過(guò)程縮短了頁(yè)面繪制時(shí)間，降低了系統(tǒng)內(nèi)存占用量，大大提升了系統(tǒng)性能。

應(yīng)當(dāng)理解的是，以上的一般描述和后文的細(xì)節(jié)描述僅是示例性和解釋性的，并不能限制本公開(kāi)。

附圖說(shuō)明

此處的附圖被并入說(shuō)明書(shū)中并構(gòu)成本說(shuō)明書(shū)的一部分，示出了符合本公開(kāi)的實(shí)施例，并與說(shuō)明書(shū)一起用于解釋本公開(kāi)的原理。

圖1是根據(jù)一示例性實(shí)施例示出的一種頁(yè)面顯示方法所涉及的實(shí)施環(huán)境。

圖2是根據(jù)一示例性實(shí)施例示出的一種頁(yè)面顯示方法的流程圖。

圖3是根據(jù)一示例性實(shí)施例示出的一種頁(yè)面顯示方法的流程圖。

圖4是根據(jù)一示例性實(shí)施例示出的一種頁(yè)面顯示裝置的框圖。

圖5是根據(jù)一示例性實(shí)施例示出的一種頁(yè)面顯示裝置的框圖。

具體實(shí)施方式

這里將詳細(xì)地對(duì)示例性實(shí)施例進(jìn)行說(shuō)明，其示例表示在附圖中。下面的描述涉及附圖時(shí)，除非另有表示，不同附圖中的相同數(shù)字表示相同或相似的要素。以下示例性實(shí)施例中所描述的實(shí)施方式并不代表與本公開(kāi)相一致的所有實(shí)施方式。相反，它們僅是與如所附權(quán)利要求書(shū)中所詳述的、本公開(kāi)的一些方面相一致的裝置和方法的例子。

參見(jiàn)圖1，其示出了本公開(kāi)實(shí)施例提供的頁(yè)面顯示方法所涉及的實(shí)施環(huán)境，該實(shí)施環(huán)境包括：終端101。

其中，終端101可以為智能手機(jī)、平板電腦、筆記本電腦等設(shè)備，本公開(kāi)實(shí)施例不對(duì)終端101的產(chǎn)品形態(tài)進(jìn)行具體限定。該終端101能夠運(yùn)行并顯示網(wǎng)頁(yè)應(yīng)用對(duì)應(yīng)的頁(yè)面。具體地，終端可通過(guò)操作系統(tǒng)提供的全局搜索框內(nèi)搜索網(wǎng)頁(yè)應(yīng)用，進(jìn)而在檢測(cè)到對(duì)該網(wǎng)頁(yè)應(yīng)用的點(diǎn)擊操作后，運(yùn)行并顯示該網(wǎng)頁(yè)應(yīng)用對(duì)應(yīng)的頁(yè)面；該終端101還可在檢測(cè)到對(duì)網(wǎng)頁(yè)應(yīng)用的快捷圖標(biāo)的點(diǎn)擊操作后，運(yùn)行并顯示該網(wǎng)頁(yè)應(yīng)用對(duì)應(yīng)的頁(yè)面。為了提高顯示效果，終端101包括頁(yè)面顯示裝置，該頁(yè)面顯示裝置包括javascript執(zhí)行層、轉(zhuǎn)換層及原生層。

其中，javascript執(zhí)行層為終端操作系統(tǒng)提供的、能夠執(zhí)行javascript語(yǔ)句的邏輯層。該javascript執(zhí)行層能夠?qū)W(wǎng)頁(yè)進(jìn)行解析，得到j(luò)avascript文件，并根據(jù)該javascript文件生成虛擬樹(shù)形結(jié)構(gòu)；該javascript執(zhí)行層還能夠?qū)μ摂M樹(shù)形結(jié)構(gòu)進(jìn)行修改，以使修改后的虛擬樹(shù)形結(jié)構(gòu)滿(mǎn)足用戶(hù)當(dāng)前的顯示需求。

轉(zhuǎn)換層為終端操作系統(tǒng)提供的、能夠進(jìn)行語(yǔ)句轉(zhuǎn)換的業(yè)務(wù)層，該轉(zhuǎn)換層可以為操作系統(tǒng)內(nèi)一個(gè)獨(dú)立的業(yè)務(wù)層，也可以為原生層內(nèi)負(fù)責(zé)語(yǔ)句轉(zhuǎn)換的一個(gè)子層，本公開(kāi)實(shí)施例不對(duì)轉(zhuǎn)換層作具體的限定。該轉(zhuǎn)換層內(nèi)存儲(chǔ)有javascript語(yǔ)句與視圖之間的對(duì)應(yīng)關(guān)系，能夠?qū)avascript執(zhí)行層發(fā)送的虛擬樹(shù)形結(jié)構(gòu)轉(zhuǎn)換成原生層可識(shí)別的視圖，從而實(shí)現(xiàn)了web頁(yè)面到原生頁(yè)面的轉(zhuǎn)換。

原生層為終端操作系統(tǒng)提供的、能夠進(jìn)行頁(yè)面渲染的業(yè)務(wù)層。該原生層能夠調(diào)用操作系統(tǒng)提供的通信接口，以觸發(fā)操作系統(tǒng)進(jìn)行頁(yè)面的渲染；該原生層還能夠在檢測(cè)到對(duì)當(dāng)前顯示的頁(yè)面的觸發(fā)操作后，向javascript執(zhí)行層發(fā)送通知消息，以使javascript執(zhí)行層修改虛擬樹(shù)形結(jié)構(gòu)，重新執(zhí)行頁(yè)面渲染邏輯。

上述實(shí)施環(huán)境還可以包括服務(wù)器102。該服務(wù)器102為網(wǎng)頁(yè)應(yīng)用對(duì)應(yīng)的后臺(tái)服務(wù)器，該服務(wù)器102用于向終端101提供html5(hypertextmarkuplanguage，超文本標(biāo)記語(yǔ)言)數(shù)據(jù)和javascript文件。

在本公開(kāi)實(shí)施例中，終端101與服務(wù)器102之間可通過(guò)有線(xiàn)網(wǎng)絡(luò)或無(wú)線(xiàn)網(wǎng)絡(luò)進(jìn)行通信，從而保證終端101能夠從服務(wù)器102上獲取顯示網(wǎng)頁(yè)應(yīng)用所需的數(shù)據(jù)。

圖2是根據(jù)一示例性實(shí)施例示出的一種頁(yè)面顯示方法的流程圖，如圖2所示，頁(yè)面顯示方法用于終端中，該終端包括頁(yè)面顯示裝置，該頁(yè)面顯示裝置包括javascript執(zhí)行層、轉(zhuǎn)換層及原生層。該方法包括以下步驟。

在步驟s201中，javascript執(zhí)行層對(duì)請(qǐng)求顯示的指定網(wǎng)頁(yè)進(jìn)行解析，得到j(luò)avascript文件。

在步驟s202中，在執(zhí)行javascript文件的過(guò)程中，javascript執(zhí)行層生成虛擬樹(shù)形結(jié)構(gòu)，并向轉(zhuǎn)換層發(fā)送第一繪制消息。

其中，第一繪制消息包括虛擬樹(shù)形結(jié)構(gòu)，虛擬樹(shù)形結(jié)構(gòu)包括多個(gè)元素，每個(gè)元素均采用javascript語(yǔ)句進(jìn)行描述。

在步驟s203中，轉(zhuǎn)換層將虛擬樹(shù)形結(jié)構(gòu)中的多個(gè)元素轉(zhuǎn)換為原生層可識(shí)別的多個(gè)第一視圖，并將多個(gè)第一視圖發(fā)送至原生層。

其中，每個(gè)第一視圖包括視圖數(shù)據(jù)和視圖結(jié)構(gòu)數(shù)據(jù)。

在步驟s204中，對(duì)于任一第一視圖，當(dāng)資源池中緩存有第一視圖的視圖結(jié)構(gòu)數(shù)據(jù)對(duì)應(yīng)的視圖結(jié)構(gòu)，原生層從資源池中獲取視圖結(jié)構(gòu)，并將第一視圖的視圖數(shù)據(jù)添加到視圖結(jié)構(gòu)中，以實(shí)現(xiàn)頁(yè)面顯示。

本公開(kāi)實(shí)施例提供的方法，原生層在接收到第一視圖后，將判斷資源池中是否緩存有第一視圖的視圖結(jié)構(gòu)數(shù)據(jù)對(duì)應(yīng)的視圖結(jié)構(gòu)，如果資源池中緩存有對(duì)應(yīng)的視圖結(jié)構(gòu)，則無(wú)需重新繪制，可根據(jù)緩存的視圖結(jié)構(gòu)進(jìn)行頁(yè)面顯示。該過(guò)程縮短了頁(yè)面繪制時(shí)間，降低了系統(tǒng)內(nèi)存占用量，大大提升了系統(tǒng)性能。

在本公開(kāi)的另一個(gè)實(shí)施例中，當(dāng)資源池中緩存有第一視圖的視圖結(jié)構(gòu)數(shù)據(jù)對(duì)應(yīng)的視圖結(jié)構(gòu)，原生層從資源池中獲取視圖結(jié)構(gòu)，包括：

原生層從視圖結(jié)構(gòu)數(shù)據(jù)中獲取目標(biāo)視圖結(jié)構(gòu)標(biāo)識(shí)，并根據(jù)目標(biāo)視圖結(jié)構(gòu)標(biāo)識(shí)，從資源池中查找結(jié)構(gòu)標(biāo)識(shí)與目標(biāo)結(jié)構(gòu)標(biāo)識(shí)相同的視圖結(jié)構(gòu)；

當(dāng)查找到結(jié)構(gòu)標(biāo)識(shí)與目標(biāo)結(jié)構(gòu)標(biāo)識(shí)相同的視圖結(jié)構(gòu)，原生層從資源池中獲取視圖結(jié)構(gòu)。

在本公開(kāi)的另一個(gè)實(shí)施例中，將第一視圖的視圖數(shù)據(jù)添加到視圖結(jié)構(gòu)中，以實(shí)現(xiàn)頁(yè)面顯示，包括：

原生層根據(jù)第一視圖之外的其他第一視圖的視圖結(jié)構(gòu)數(shù)據(jù)，繪制其他第一視圖對(duì)應(yīng)的視圖結(jié)構(gòu)，并將視圖結(jié)構(gòu)整合到所繪制的視圖結(jié)構(gòu)中，得到指定網(wǎng)頁(yè)對(duì)應(yīng)的視圖結(jié)構(gòu)；

原生層將第一視圖的視圖數(shù)據(jù)及其他第一視圖的視圖數(shù)據(jù)添加到指定網(wǎng)頁(yè)對(duì)應(yīng)的視圖結(jié)構(gòu)中，得到指定網(wǎng)頁(yè)對(duì)應(yīng)的原生頁(yè)面；

原生層顯示原生頁(yè)面。

在本公開(kāi)的另一個(gè)實(shí)施例中，該方法還包括：

當(dāng)?shù)谝灰晥D處于隱藏狀態(tài)時(shí)，原生層獲取第一視圖的視圖結(jié)構(gòu)數(shù)據(jù)對(duì)應(yīng)的視圖結(jié)構(gòu)，并將視圖結(jié)構(gòu)存儲(chǔ)到資源池中。

在本公開(kāi)的另一個(gè)實(shí)施例中，向轉(zhuǎn)換層發(fā)送第一繪制消息，包括：

javascript執(zhí)行層調(diào)用與轉(zhuǎn)換層之間的通信接口向轉(zhuǎn)換層發(fā)送第一繪制消息。

在本公開(kāi)的另一個(gè)實(shí)施例中，轉(zhuǎn)換層將虛擬樹(shù)形結(jié)構(gòu)中的多個(gè)元素轉(zhuǎn)換為原生層可識(shí)別的多個(gè)第一視圖，包括：

基于預(yù)先構(gòu)建的規(guī)則數(shù)據(jù)庫(kù)，轉(zhuǎn)換層將虛擬樹(shù)形結(jié)構(gòu)中的多個(gè)元素轉(zhuǎn)換為原生層可識(shí)別的多個(gè)第一視圖，規(guī)則數(shù)據(jù)庫(kù)中存儲(chǔ)有javascript語(yǔ)句與視圖之間的對(duì)應(yīng)關(guān)系。

在本公開(kāi)的另一個(gè)實(shí)施例中，該方法還包括：

當(dāng)獲取到更新的javascript語(yǔ)句和更新的視圖，轉(zhuǎn)換層根據(jù)更新的javascript語(yǔ)句和更新的視圖，對(duì)規(guī)則數(shù)據(jù)庫(kù)進(jìn)行更新。

在本公開(kāi)的另一個(gè)實(shí)施例中，該方法還包括：

當(dāng)在指定網(wǎng)頁(yè)上檢測(cè)到觸發(fā)操作時(shí)，原生層向javascript執(zhí)行層發(fā)送通知消息，通知消息包括變更的元素標(biāo)識(shí)；

javascript執(zhí)行層根據(jù)變更的元素標(biāo)識(shí)，修改虛擬樹(shù)形結(jié)構(gòu)，并向轉(zhuǎn)換層發(fā)送第二繪制消息，第二繪制消息包括修改后的虛擬樹(shù)形結(jié)構(gòu)；

轉(zhuǎn)換層將修改后的虛擬樹(shù)形結(jié)構(gòu)中的多個(gè)元素轉(zhuǎn)換為原生層可識(shí)別的多個(gè)第二視圖，并將多個(gè)第二視圖發(fā)送至原生層，由原生層進(jìn)行頁(yè)面顯示。

在本公開(kāi)的另一個(gè)實(shí)施例中，原生層向javascript執(zhí)行層發(fā)送通知消息，包括：

原生層調(diào)用與javascript執(zhí)行層之間的通信接口向javascript執(zhí)行層發(fā)送通知消息。

上述所有可選技術(shù)方案，可以采用任意結(jié)合形成本公開(kāi)的可選實(shí)施例，在此不再一一贅述。

圖3是根據(jù)一示例性實(shí)施例示出的一種頁(yè)面顯示方法的流程圖，如圖3所示，頁(yè)面顯示方法用于終端中，該終端包括頁(yè)面顯示裝置，該頁(yè)面顯示裝置包括javascript執(zhí)行層、轉(zhuǎn)換層及原生層。該方法包括以下步驟。

在步驟s301中，javascript執(zhí)行層對(duì)請(qǐng)求顯示的指定網(wǎng)頁(yè)進(jìn)行解析，得到j(luò)avascript文件。

其中，指定網(wǎng)頁(yè)為網(wǎng)頁(yè)應(yīng)用中的一個(gè)網(wǎng)頁(yè)，該指定網(wǎng)頁(yè)可以為網(wǎng)頁(yè)應(yīng)用中一級(jí)網(wǎng)頁(yè)，可以為網(wǎng)頁(yè)應(yīng)用中的二級(jí)以上網(wǎng)頁(yè)。當(dāng)指定網(wǎng)頁(yè)為一級(jí)網(wǎng)頁(yè)時(shí)，指定網(wǎng)頁(yè)源代碼在獲取時(shí)，可采用如下兩種方式：

第一種方式、在瀏覽器啟動(dòng)的過(guò)程中，用戶(hù)可根據(jù)自身的閱讀需求，借助鼠標(biāo)等設(shè)備在瀏覽器或操作系統(tǒng)的全局搜索框中輸入網(wǎng)頁(yè)應(yīng)用的名稱(chēng)，當(dāng)檢測(cè)到用戶(hù)對(duì)終端的瀏覽器或全局搜索框上所顯示的網(wǎng)頁(yè)應(yīng)用鏈接的點(diǎn)擊操作時(shí)，終端生成對(duì)指定網(wǎng)頁(yè)的顯示請(qǐng)求，在對(duì)指定網(wǎng)頁(yè)的顯示請(qǐng)求的觸發(fā)下，終端可從服務(wù)器上獲取指定網(wǎng)頁(yè)源代碼。其中，對(duì)指定網(wǎng)頁(yè)的顯示請(qǐng)求中至少攜帶指定網(wǎng)頁(yè)的屬性信息，包括網(wǎng)頁(yè)標(biāo)識(shí)、網(wǎng)頁(yè)類(lèi)型、網(wǎng)頁(yè)大小等等。指定網(wǎng)頁(yè)源代碼包括javascript代碼和html5數(shù)據(jù)。

第二種方式、如果終端本地存儲(chǔ)器中存儲(chǔ)有該指定網(wǎng)頁(yè)鏈接，例如，桌面上顯示有該指定網(wǎng)頁(yè)對(duì)應(yīng)的快捷圖標(biāo)等，則終端可在檢測(cè)到用戶(hù)對(duì)該快捷圖標(biāo)的點(diǎn)擊操作時(shí)，生成對(duì)指定網(wǎng)頁(yè)的顯示請(qǐng)求，在對(duì)指定網(wǎng)頁(yè)的顯示請(qǐng)求的觸發(fā)下，終端可從服務(wù)器上獲取該指定網(wǎng)頁(yè)源代碼。

當(dāng)指定網(wǎng)頁(yè)為二級(jí)以上網(wǎng)頁(yè)時(shí)，指定網(wǎng)頁(yè)源代碼在獲取時(shí)，可采用如下方式：當(dāng)檢測(cè)到對(duì)網(wǎng)頁(yè)應(yīng)用中一級(jí)網(wǎng)頁(yè)上任一條目(該條目為具有網(wǎng)頁(yè)鏈接性質(zhì)的標(biāo)題、圖標(biāo)等)的點(diǎn)擊操作時(shí)，終端生成對(duì)指定網(wǎng)頁(yè)的顯示請(qǐng)求，在對(duì)指定網(wǎng)頁(yè)的顯示請(qǐng)求的觸發(fā)下，終端可從服務(wù)器上獲取指定網(wǎng)頁(yè)的源代碼。

在對(duì)指定網(wǎng)頁(yè)顯示請(qǐng)求的觸發(fā)下，終端內(nèi)的javascript執(zhí)行層對(duì)請(qǐng)求顯示的指定網(wǎng)頁(yè)進(jìn)行javascript解析，得到j(luò)avascript文件，該javascript文件中包括整個(gè)頁(yè)面顯示過(guò)程的邏輯代碼。

在步驟s302中，在執(zhí)行javascript文件的過(guò)程中，javascript執(zhí)行層生成虛擬樹(shù)形結(jié)構(gòu)。

在執(zhí)行javascript文件的過(guò)程中，javascript執(zhí)行層可對(duì)html5數(shù)據(jù)進(jìn)行html解析，得到虛擬樹(shù)形結(jié)構(gòu)。該虛擬樹(shù)形結(jié)構(gòu)包括多個(gè)元素。其中，元素為指定網(wǎng)頁(yè)中用于描述網(wǎng)頁(yè)屬性信息、網(wǎng)頁(yè)內(nèi)容等的數(shù)據(jù)，且每個(gè)元素均采用javascript語(yǔ)句進(jìn)行描述。在本公開(kāi)實(shí)施例中，虛擬樹(shù)形結(jié)構(gòu)可以為vdom(virtualdocumentobjectmodel，文檔對(duì)象模型)樹(shù)。

在步驟s303中，javascript執(zhí)行層調(diào)用與轉(zhuǎn)換層之間的通信接口向轉(zhuǎn)換層發(fā)送第一繪制消息。

由于虛擬樹(shù)形結(jié)構(gòu)中每個(gè)元素均采用javascript語(yǔ)句進(jìn)行描述，而javascript語(yǔ)句無(wú)法被原生層識(shí)別，這使得相關(guān)技術(shù)在獲取到虛擬樹(shù)形結(jié)構(gòu)之后，只能將虛擬樹(shù)形結(jié)構(gòu)轉(zhuǎn)換為瀏覽器內(nèi)核可識(shí)別的樹(shù)形結(jié)構(gòu)，進(jìn)而由瀏覽器內(nèi)核渲染成web頁(yè)面進(jìn)行顯示。由于該過(guò)程所顯示的頁(yè)面為web頁(yè)面，因而頁(yè)面顯示效果不佳。

為了提高頁(yè)面顯示效果，最大限度地還原頁(yè)面的真實(shí)形態(tài)，同時(shí)為用戶(hù)營(yíng)銷(xiāo)一種安裝該網(wǎng)頁(yè)應(yīng)用的真實(shí)體驗(yàn)，本公開(kāi)實(shí)施例提供的方法，在生成虛擬樹(shù)形結(jié)構(gòu)之后，javascript執(zhí)行層還將生成第一繪制消息，進(jìn)而向轉(zhuǎn)換層發(fā)送第一繪制消息，該第一繪制消息包括虛擬樹(shù)形結(jié)構(gòu)等，用于觸發(fā)轉(zhuǎn)換層進(jìn)行語(yǔ)句轉(zhuǎn)換，從而顯示指定網(wǎng)頁(yè)對(duì)應(yīng)的原生頁(yè)面。進(jìn)一步地，本公開(kāi)實(shí)施例還提供了一種通信接口，該種通信接口能夠?qū)崿F(xiàn)javascript執(zhí)行層與轉(zhuǎn)換層之間的通信，基于該種通信接口，javascript執(zhí)行層在向轉(zhuǎn)換層發(fā)送第一繪制消息時(shí)，可調(diào)用與轉(zhuǎn)換層之間的通信接口進(jìn)行發(fā)送。

在步驟s304中，轉(zhuǎn)換層將虛擬樹(shù)形結(jié)構(gòu)中的多個(gè)元素轉(zhuǎn)換為原生層可識(shí)別的多個(gè)第一視圖。

對(duì)于很多應(yīng)用，研發(fā)人員在開(kāi)發(fā)時(shí)通常會(huì)開(kāi)發(fā)兩種類(lèi)型，一種是無(wú)需安裝的網(wǎng)頁(yè)應(yīng)用，一種是需要安裝的應(yīng)用，這樣，對(duì)于同一應(yīng)用，就存在瀏覽器內(nèi)核能夠識(shí)別的html5數(shù)據(jù)和javascript代碼、以及終端原生層能夠識(shí)別的視圖。在實(shí)際使用過(guò)程中，研發(fā)人員很難獲知用戶(hù)具體使用哪種類(lèi)型的應(yīng)用，因此，研發(fā)人員通常會(huì)將html5數(shù)據(jù)、javascript文件及視圖一同打包在所開(kāi)發(fā)的應(yīng)用中。這樣，當(dāng)用戶(hù)瀏覽網(wǎng)頁(yè)應(yīng)用對(duì)應(yīng)的網(wǎng)頁(yè)時(shí)，終端內(nèi)的轉(zhuǎn)換層可從javascript執(zhí)行層解析后的數(shù)據(jù)中，獲取javascript語(yǔ)句和視圖?；谒@取到的javascript語(yǔ)句和視圖，轉(zhuǎn)換層可建立一個(gè)規(guī)則數(shù)據(jù)庫(kù)。該規(guī)則數(shù)據(jù)庫(kù)中存儲(chǔ)有javascript語(yǔ)句與視圖之間的對(duì)應(yīng)關(guān)系。為了便于后續(xù)應(yīng)用，轉(zhuǎn)換層還將存儲(chǔ)所建立的規(guī)則數(shù)據(jù)庫(kù)。

基于預(yù)先構(gòu)建的規(guī)則數(shù)據(jù)庫(kù)，轉(zhuǎn)換層在將虛擬樹(shù)形結(jié)構(gòu)中的多個(gè)元素轉(zhuǎn)換為原生層可識(shí)別的多個(gè)第一視圖時(shí)，可從規(guī)則數(shù)據(jù)庫(kù)中獲取虛擬樹(shù)形結(jié)構(gòu)中用于描述每個(gè)元素的javascript語(yǔ)句對(duì)應(yīng)的視圖，并將獲取到的視圖作為第一視圖。其中，第一視圖包括視圖數(shù)據(jù)和視圖結(jié)構(gòu)數(shù)據(jù)，該視圖數(shù)據(jù)用于確定該第一視圖對(duì)應(yīng)的頁(yè)面內(nèi)容，該視圖結(jié)構(gòu)數(shù)據(jù)用于確定第一視圖對(duì)應(yīng)的頁(yè)面布局。

由于javascript語(yǔ)句并不是固定不變的，為了保證規(guī)則數(shù)據(jù)庫(kù)的實(shí)時(shí)有效性，當(dāng)獲取到更新的javascript語(yǔ)句和更新的視圖后，轉(zhuǎn)換層還將根據(jù)更新的javascript語(yǔ)句和更新的視圖，對(duì)規(guī)則數(shù)據(jù)庫(kù)進(jìn)行更新。

在步驟s305中，轉(zhuǎn)換層將多個(gè)第一視圖發(fā)送至原生層。

本公開(kāi)實(shí)施例提供了一種通信接口，該種通信接口能夠?qū)崿F(xiàn)轉(zhuǎn)換層與原生層之間的通信，基于該種通信接口，轉(zhuǎn)換層可將虛擬樹(shù)形結(jié)構(gòu)中的多個(gè)元素所轉(zhuǎn)換的多個(gè)第一視圖發(fā)送至原生層，進(jìn)而由原生層進(jìn)行頁(yè)面顯示。

在步驟s306中，對(duì)于任一第一視圖，當(dāng)資源池中緩存有第一視圖的視圖結(jié)構(gòu)數(shù)據(jù)對(duì)應(yīng)的視圖結(jié)構(gòu)，原生層從資源池中獲取視圖結(jié)構(gòu)，并將第一視圖的視圖數(shù)據(jù)添加到視圖結(jié)構(gòu)中，以實(shí)現(xiàn)頁(yè)面顯示。

本公開(kāi)實(shí)施例中，原生層維護(hù)多個(gè)資源池，每個(gè)資源池用于存儲(chǔ)一種類(lèi)型的視圖結(jié)構(gòu)。當(dāng)采用本公開(kāi)實(shí)施例提供的方法進(jìn)行頁(yè)面顯示時(shí)，如果因用戶(hù)的觸發(fā)操作任一視圖由顯示狀態(tài)切換到隱藏狀態(tài)時(shí)，原生層將獲取該視圖的視圖數(shù)據(jù)對(duì)應(yīng)的視圖結(jié)構(gòu)，并將該視圖結(jié)構(gòu)存儲(chǔ)到資源池中。由于網(wǎng)頁(yè)布局千變?nèi)f化，相應(yīng)地網(wǎng)頁(yè)對(duì)應(yīng)的視圖結(jié)構(gòu)也有很多種，為了便于在頁(yè)面顯示過(guò)程中查找能夠復(fù)用的視圖結(jié)構(gòu)，原生層獲取到視圖結(jié)構(gòu)后，可按照視圖結(jié)構(gòu)標(biāo)識(shí)將視圖結(jié)構(gòu)存儲(chǔ)到資源池中。其中，視圖結(jié)構(gòu)標(biāo)識(shí)用于標(biāo)識(shí)視圖的結(jié)構(gòu)，可在網(wǎng)頁(yè)應(yīng)用開(kāi)發(fā)過(guò)程中由開(kāi)發(fā)人員設(shè)置，且不同的視圖結(jié)構(gòu)對(duì)應(yīng)不同的視圖結(jié)構(gòu)標(biāo)識(shí)。

在本公開(kāi)實(shí)施例中，原生層接收到轉(zhuǎn)換層發(fā)送的第一視圖后，原生層并不會(huì)直接繪制該第一視圖，而是判斷資源池中是否存儲(chǔ)有該第一視圖的視圖結(jié)構(gòu)數(shù)據(jù)對(duì)應(yīng)的視圖結(jié)構(gòu)，進(jìn)而根據(jù)資源池中是否存儲(chǔ)有該第一視圖的視圖結(jié)構(gòu)數(shù)據(jù)對(duì)應(yīng)的視圖結(jié)構(gòu)，采用不同的方法獲取對(duì)應(yīng)的視圖結(jié)構(gòu)。具體實(shí)施時(shí)，原生層可從視圖結(jié)構(gòu)數(shù)據(jù)中獲取目標(biāo)視圖結(jié)構(gòu)標(biāo)識(shí)，并根據(jù)目標(biāo)視圖結(jié)構(gòu)標(biāo)識(shí)，從資源池中查找結(jié)構(gòu)標(biāo)識(shí)與目標(biāo)結(jié)構(gòu)標(biāo)識(shí)相同的視圖結(jié)構(gòu)，當(dāng)查找到結(jié)構(gòu)標(biāo)識(shí)與目標(biāo)結(jié)構(gòu)標(biāo)識(shí)相同的視圖結(jié)構(gòu)，原生層從資源池中獲取視圖結(jié)構(gòu)；當(dāng)未查找到結(jié)構(gòu)標(biāo)識(shí)與目標(biāo)結(jié)構(gòu)標(biāo)識(shí)相同的視圖結(jié)構(gòu)，原生層可根據(jù)第一視圖的視圖結(jié)構(gòu)數(shù)據(jù)，繪制對(duì)應(yīng)的視圖結(jié)構(gòu)?？紤]到實(shí)際顯示過(guò)程中，網(wǎng)頁(yè)形態(tài)的多樣性，同一視圖結(jié)構(gòu)標(biāo)識(shí)可能對(duì)應(yīng)多個(gè)視圖結(jié)構(gòu)，這樣，原生層在從資源池中獲取視圖結(jié)構(gòu)時(shí)，可隨機(jī)獲取一個(gè)視圖結(jié)構(gòu)，在后續(xù)顯示過(guò)程中，如果無(wú)法正常顯示，可從資源池中獲取其他視圖結(jié)構(gòu)，以避免影響用戶(hù)的體驗(yàn)。

進(jìn)一步地，當(dāng)原生層從資源池中獲取該視圖結(jié)構(gòu)后，資源池中將不再緩存該視圖結(jié)構(gòu)，也即是，本公開(kāi)的資源池中緩存的是已繪制但當(dāng)前未使用的視圖結(jié)構(gòu)。

當(dāng)從資源池中獲取到視圖結(jié)構(gòu)后，原生層將第一視圖的視圖數(shù)據(jù)添加到視圖結(jié)構(gòu)中，以實(shí)現(xiàn)頁(yè)面顯示。具體實(shí)施時(shí)，可采用如下步驟s3061～s3063：

s3061、原生層根據(jù)第一視圖之外的其他第一視圖的視圖結(jié)構(gòu)數(shù)據(jù)，繪制其他第一視圖對(duì)應(yīng)的視圖結(jié)構(gòu)，并將視圖結(jié)構(gòu)整合到所繪制的視圖結(jié)構(gòu)中，得到指定網(wǎng)頁(yè)對(duì)應(yīng)的視圖結(jié)構(gòu)。

在實(shí)際整合時(shí)，可根據(jù)第一視圖與其他第一視圖之間的位置關(guān)系進(jìn)行整合。

s3062、原生層將該第一視圖的視圖數(shù)據(jù)及其他第一視圖的視圖數(shù)據(jù)添加到指定網(wǎng)頁(yè)對(duì)應(yīng)的視圖結(jié)構(gòu)中，得到指定網(wǎng)頁(yè)對(duì)應(yīng)的原生頁(yè)面。

原生層通過(guò)調(diào)用操作系統(tǒng)nativegui(graphicaluserinterface，圖形用戶(hù)界面)的api(applicationprogramminginterface，應(yīng)用程序編程接口)對(duì)指定網(wǎng)頁(yè)對(duì)應(yīng)的視圖結(jié)構(gòu)進(jìn)行渲染，得到指定網(wǎng)頁(yè)布局，進(jìn)而將每個(gè)第一視圖的視圖數(shù)據(jù)繪制到視圖結(jié)構(gòu)對(duì)應(yīng)的網(wǎng)頁(yè)布局中，得到指定網(wǎng)頁(yè)對(duì)應(yīng)的原生頁(yè)面。

s3063、原生層顯示原生頁(yè)面。

需要說(shuō)明的是：上述步驟s3061～s3063以復(fù)用一個(gè)第一視圖對(duì)應(yīng)的視圖結(jié)構(gòu)為例，實(shí)際應(yīng)用中，如果多個(gè)第一視圖的視圖結(jié)構(gòu)可以復(fù)用，則可復(fù)用多個(gè)第一視圖的視圖結(jié)構(gòu)，對(duì)于復(fù)用的每個(gè)第一視圖的視圖結(jié)構(gòu)，均可按照上述步驟s3061～s3063進(jìn)行頁(yè)面顯示。

在本公開(kāi)的另一個(gè)實(shí)施例中，因用戶(hù)的操作，當(dāng)?shù)谝灰晥D由顯示狀態(tài)切換到隱藏狀態(tài)時(shí)，原生層可獲取該第一視圖的視圖結(jié)構(gòu)數(shù)據(jù)對(duì)應(yīng)的視圖結(jié)構(gòu)，并將視圖結(jié)構(gòu)存儲(chǔ)到資源池中，以在后續(xù)進(jìn)行頁(yè)面顯示時(shí)復(fù)用。

在步驟s307中，當(dāng)在指定網(wǎng)頁(yè)上檢測(cè)到觸發(fā)操作時(shí)，原生層調(diào)用與javascript執(zhí)行層之間的通信接口向javascript執(zhí)行層發(fā)送通知消息。

其中，觸發(fā)操作包括但不限于滑動(dòng)操作和點(diǎn)擊操作等。在指定網(wǎng)頁(yè)對(duì)應(yīng)的原生頁(yè)面的顯示過(guò)程中，當(dāng)檢測(cè)到對(duì)該原生頁(yè)面的滑動(dòng)操作時(shí)，或者檢測(cè)到對(duì)該原生頁(yè)面上任一網(wǎng)頁(yè)鏈接的點(diǎn)擊操作時(shí)，原生頁(yè)面上所顯示的內(nèi)容將發(fā)生變化，此時(shí)原生層將向javascript執(zhí)行層發(fā)送通知消息，該通知消息用于重新觸發(fā)上述頁(yè)面顯示邏輯，以使所顯示的頁(yè)面滿(mǎn)足用戶(hù)當(dāng)前的瀏覽需求。其中，通知消息包括變更的元素標(biāo)識(shí)及操作類(lèi)型，該操作類(lèi)型包括增加操作、刪除操作等等。

上述原生層在向javascript執(zhí)行層發(fā)送通知消息時(shí)，可調(diào)用與javascript執(zhí)行層之間的通信接口向javascript執(zhí)行層發(fā)送通知消息。

在步驟s308中，javascript執(zhí)行層根據(jù)變更的元素標(biāo)識(shí)，修改虛擬樹(shù)形結(jié)構(gòu)，并向轉(zhuǎn)換層發(fā)送第二繪制消息。

當(dāng)接收到通知消息后，javascript執(zhí)行層按照對(duì)變更的元素標(biāo)識(shí)對(duì)應(yīng)元素的操作類(lèi)型，修改虛擬樹(shù)形結(jié)構(gòu)。例如，如果操作類(lèi)型為刪除操作，則javascript執(zhí)行層將刪除虛擬樹(shù)形結(jié)構(gòu)中該元素標(biāo)識(shí)對(duì)應(yīng)元素；如果操作類(lèi)型為增加操作，則javascript執(zhí)行層將增加虛擬樹(shù)形機(jī)構(gòu)中該元素標(biāo)識(shí)對(duì)應(yīng)元素。

基于修改后的修改虛擬樹(shù)形結(jié)構(gòu)，javascript執(zhí)行層將生成第二繪制消息，該第二繪制消息包括修改后的虛擬樹(shù)形結(jié)構(gòu)等，進(jìn)而通過(guò)調(diào)用與轉(zhuǎn)換層之間的通信接口向轉(zhuǎn)換層發(fā)送第二繪制消息。

在步驟s309中，轉(zhuǎn)換層將修改后的虛擬樹(shù)形結(jié)構(gòu)中的多個(gè)元素轉(zhuǎn)換為原生層可識(shí)別的多個(gè)第二視圖，并將多個(gè)第二視圖發(fā)送至原生層，由原生層進(jìn)行頁(yè)面顯示。

當(dāng)接收到第二繪制消息后，轉(zhuǎn)換層基于預(yù)先構(gòu)建的規(guī)則數(shù)據(jù)庫(kù)，將修改后的虛擬樹(shù)形結(jié)構(gòu)中的多個(gè)元素轉(zhuǎn)換為原生層可識(shí)別的多個(gè)第二視圖。

此處需要說(shuō)明的是，第一視圖和第二視圖僅為了說(shuō)明頁(yè)面顯示內(nèi)容變化時(shí)，不同的元素所對(duì)應(yīng)的視圖將發(fā)生變化，實(shí)際上，觸發(fā)操作前后，頁(yè)面上同一元素對(duì)應(yīng)的第一視圖和第二視圖是相同的。

當(dāng)獲取到多個(gè)第二視圖后，轉(zhuǎn)換層通過(guò)調(diào)用與原生層之間的通信接口將多個(gè)第二視圖發(fā)送至原生層，進(jìn)而由原生層根據(jù)第二視圖進(jìn)行頁(yè)面顯示。原生層在根據(jù)轉(zhuǎn)換層發(fā)送的多個(gè)第二視圖進(jìn)行頁(yè)面顯示時(shí)，可采用如下方式：原生層獲取變更的元素標(biāo)識(shí)對(duì)應(yīng)的第一視圖，并判斷資源池中是否緩存有變更的元素標(biāo)識(shí)對(duì)應(yīng)的第一視圖，當(dāng)資源池中緩存有該第一視圖的視圖結(jié)構(gòu)數(shù)據(jù)對(duì)應(yīng)的視圖結(jié)構(gòu)，原生層從資源池中獲取該視圖結(jié)構(gòu)，同時(shí)原生層獲取未變更的元素標(biāo)識(shí)對(duì)應(yīng)的視圖結(jié)構(gòu)，該視圖結(jié)構(gòu)內(nèi)已添加了視圖數(shù)據(jù)，進(jìn)而將獲取到的視圖結(jié)構(gòu)和未變更的元素標(biāo)識(shí)對(duì)應(yīng)的視圖結(jié)構(gòu)進(jìn)行整合，得到變更后的指定網(wǎng)頁(yè)對(duì)應(yīng)的視圖結(jié)構(gòu)，進(jìn)而將變更的視圖元素標(biāo)識(shí)對(duì)應(yīng)的第一視圖的視圖數(shù)據(jù)添加到相應(yīng)的視圖結(jié)構(gòu)中，得到變更后的指定網(wǎng)頁(yè)對(duì)應(yīng)的原生頁(yè)面。

本公開(kāi)實(shí)施例提供的方法，原生層在接收到第一視圖后，將判斷資源池中是否緩存有第一視圖的視圖結(jié)構(gòu)數(shù)據(jù)對(duì)應(yīng)的視圖結(jié)構(gòu)，如果資源池中緩存有對(duì)應(yīng)的視圖結(jié)構(gòu)，則無(wú)需重新繪制，可根據(jù)緩存的視圖結(jié)構(gòu)進(jìn)行頁(yè)面顯示。該過(guò)程縮短了頁(yè)面繪制時(shí)間，降低了系統(tǒng)內(nèi)存占用量，大大提升了系統(tǒng)性能。

圖4是根據(jù)一示例性實(shí)施例示出的一種頁(yè)面顯示裝置示意圖。參照?qǐng)D4，該頁(yè)面顯示裝置包括：javascript執(zhí)行層、轉(zhuǎn)換層及原生層。

javascript執(zhí)行層401被配置為對(duì)請(qǐng)求顯示的指定網(wǎng)頁(yè)進(jìn)行解析，得到j(luò)avascript文件；

javascript執(zhí)行層被配置為在執(zhí)行javascript文件的過(guò)程中，生成虛擬樹(shù)形結(jié)構(gòu)，并向轉(zhuǎn)換層402發(fā)送第一繪制消息，該第一繪制消息包括虛擬樹(shù)形結(jié)構(gòu)，虛擬樹(shù)形結(jié)構(gòu)包括多個(gè)元素，每個(gè)元素均采用javascript語(yǔ)句進(jìn)行描述；

轉(zhuǎn)換層402被配置為將虛擬樹(shù)形結(jié)構(gòu)中的多個(gè)元素轉(zhuǎn)換為原生層403可識(shí)別的多個(gè)第一視圖，并將多個(gè)第一視圖發(fā)送至原生層，每個(gè)第一視圖包括視圖數(shù)據(jù)和視圖結(jié)構(gòu)數(shù)據(jù)；

對(duì)于任一第一視圖，原生層403被配置為當(dāng)資源池中緩存有第一視圖的視圖結(jié)構(gòu)數(shù)據(jù)對(duì)應(yīng)的視圖結(jié)構(gòu)，從資源池中獲取視圖結(jié)構(gòu)，并將第一視圖的視圖數(shù)據(jù)添加到視圖結(jié)構(gòu)中，以實(shí)現(xiàn)頁(yè)面顯示。

在本公開(kāi)的另一個(gè)實(shí)施例中，原生層403被配置為從視圖結(jié)構(gòu)數(shù)據(jù)中獲取目標(biāo)視圖結(jié)構(gòu)標(biāo)識(shí)，并根據(jù)目標(biāo)視圖結(jié)構(gòu)標(biāo)識(shí)，從資源池中查找結(jié)構(gòu)標(biāo)識(shí)與目標(biāo)結(jié)構(gòu)標(biāo)識(shí)相同的視圖結(jié)構(gòu)；

原生層403被配置為當(dāng)查找到結(jié)構(gòu)標(biāo)識(shí)與目標(biāo)結(jié)構(gòu)標(biāo)識(shí)相同的視圖結(jié)構(gòu)，從資源池中獲取視圖結(jié)構(gòu)。

在本公開(kāi)的另一個(gè)實(shí)施例中，原生層403被配置為根據(jù)第一視圖之外的其他第一視圖的視圖結(jié)構(gòu)數(shù)據(jù)，繪制其他第一視圖對(duì)應(yīng)的視圖結(jié)構(gòu)，并將視圖結(jié)構(gòu)整合到所繪制的視圖結(jié)構(gòu)中，得到指定網(wǎng)頁(yè)對(duì)應(yīng)的視圖結(jié)構(gòu)；

原生層403被配置為將第一視圖的視圖數(shù)據(jù)及其他第一視圖的視圖數(shù)據(jù)添加到指定網(wǎng)頁(yè)對(duì)應(yīng)的視圖結(jié)構(gòu)中，得到指定網(wǎng)頁(yè)對(duì)應(yīng)的原生頁(yè)面；

原生層403被配置為顯示原生頁(yè)面。

在本公開(kāi)的另一個(gè)實(shí)施例中，原生層403被配置為當(dāng)?shù)谝灰晥D處于隱藏狀態(tài)時(shí)，獲取第一視圖的視圖結(jié)構(gòu)數(shù)據(jù)對(duì)應(yīng)的視圖結(jié)構(gòu)，并將視圖結(jié)構(gòu)存儲(chǔ)到資源池中。

在本公開(kāi)的另一個(gè)實(shí)施例中，javascript執(zhí)行層401被配置為調(diào)用與轉(zhuǎn)換層402之間的通信接口向轉(zhuǎn)換層發(fā)送第一繪制消息。

在本公開(kāi)的另一個(gè)實(shí)施例中，轉(zhuǎn)換層402被配置為基于預(yù)先構(gòu)建的規(guī)則數(shù)據(jù)庫(kù)，將虛擬樹(shù)形結(jié)構(gòu)中的多個(gè)元素轉(zhuǎn)換為原生層可識(shí)別的多個(gè)第一視圖，該規(guī)則數(shù)據(jù)庫(kù)中存儲(chǔ)有javascript語(yǔ)句與視圖之間的對(duì)應(yīng)關(guān)系。

在本公開(kāi)的另一個(gè)實(shí)施例中，轉(zhuǎn)換層402被配置為當(dāng)獲取到更新的javascript語(yǔ)句和更新的視圖，根據(jù)更新的javascript語(yǔ)句和更新的視圖，對(duì)規(guī)則數(shù)據(jù)庫(kù)進(jìn)行更新。

在本公開(kāi)的另一個(gè)實(shí)施例中，原生層403被配置為當(dāng)在指定網(wǎng)頁(yè)上檢測(cè)到觸發(fā)操作時(shí)，向javascript執(zhí)行層發(fā)送通知消息，通知消息包括變更的元素標(biāo)識(shí)；

javascript執(zhí)行層401被配置為根據(jù)變更的元素標(biāo)識(shí)，修改虛擬樹(shù)形結(jié)構(gòu)，并向轉(zhuǎn)換層發(fā)送第二繪制消息，該第二繪制消息包括修改后的虛擬樹(shù)形結(jié)構(gòu)；

轉(zhuǎn)換層402被配置為將修改后的虛擬樹(shù)形結(jié)構(gòu)中的多個(gè)元素轉(zhuǎn)換為原生層可識(shí)別的多個(gè)第二視圖，并將多個(gè)第二視圖發(fā)送至原生層，由原生層進(jìn)行頁(yè)面顯示。

在本公開(kāi)的另一個(gè)實(shí)施例中，原生層402被配置為調(diào)用與javascript執(zhí)行層之間的通信接口向javascript執(zhí)行層發(fā)送通知消息。

本公開(kāi)實(shí)施例提供的裝置，原生層在接收到第一視圖后，將判斷資源池中是否緩存有第一視圖的視圖結(jié)構(gòu)數(shù)據(jù)對(duì)應(yīng)的視圖結(jié)構(gòu)，如果資源池中緩存有對(duì)應(yīng)的視圖結(jié)構(gòu)，則無(wú)需重新繪制，可根據(jù)緩存的視圖結(jié)構(gòu)進(jìn)行頁(yè)面顯示。該過(guò)程縮短了頁(yè)面繪制時(shí)間，降低了系統(tǒng)內(nèi)存占用量，大大提升了系統(tǒng)性能。

關(guān)于上述實(shí)施例中的裝置，其中各個(gè)模塊執(zhí)行操作的具體方式已經(jīng)在有關(guān)該方法的實(shí)施例中進(jìn)行了詳細(xì)描述，此處將不做詳細(xì)闡述說(shuō)明。

圖5是根據(jù)一示例性實(shí)施例示出的一種用于頁(yè)面顯示的裝置500的框圖。例如，裝置500可以是移動(dòng)電話(huà)，計(jì)算機(jī)，數(shù)字廣播終端，消息收發(fā)設(shè)備，游戲控制臺(tái)，平板設(shè)備，醫(yī)療設(shè)備，健身設(shè)備，個(gè)人數(shù)字助理等。

參照?qǐng)D5，裝置500可以包括以下一個(gè)或多個(gè)組件：處理組件502，存儲(chǔ)器504，電源組件506，多媒體組件508，音頻組件510，輸入/輸出(i/o)接口512，傳感器組件514，以及通信組件516。

處理組件502通?？刂蒲b置500的整體操作，諸如與顯示，電話(huà)呼叫，數(shù)據(jù)通信，相機(jī)操作和記錄操作相關(guān)聯(lián)的操作。處理組件502可以包括一個(gè)或多個(gè)處理器520來(lái)執(zhí)行指令，以完成上述的方法的全部或部分步驟。此外，處理組件502可以包括一個(gè)或多個(gè)模塊，便于處理組件502和其他組件之間的交互。例如，處理組件502可以包括多媒體模塊，以方便多媒體組件508和處理組件502之間的交互。

存儲(chǔ)器504被配置為存儲(chǔ)各種類(lèi)型的數(shù)據(jù)以支持在裝置500的操作。這些數(shù)據(jù)的示例包括用于在裝置500上操作的任何應(yīng)用程序或方法的指令，聯(lián)系人數(shù)據(jù)，電話(huà)簿數(shù)據(jù)，消息，圖片，視頻等。存儲(chǔ)器504可以由任何類(lèi)型的易失性或非易失性存儲(chǔ)設(shè)備或者它們的組合實(shí)現(xiàn)，如靜態(tài)隨機(jī)存取存儲(chǔ)器(sram)，電可擦除可編程只讀存儲(chǔ)器(eeprom)，可擦除可編程只讀存儲(chǔ)器(eprom)，可編程只讀存儲(chǔ)器(prom)，只讀存儲(chǔ)器(rom)，磁存儲(chǔ)器，快閃存儲(chǔ)器，磁盤(pán)或光盤(pán)。

電源組件506為裝置500的各種組件提供電力。電源組件506可以包括電源管理系統(tǒng)，一個(gè)或多個(gè)電源，及其他與為裝置500生成、管理和分配電力相關(guān)聯(lián)的組件。

多媒體組件508包括在所述裝置500和用戶(hù)之間的提供一個(gè)輸出接口的屏幕。在一些實(shí)施例中，屏幕可以包括液晶顯示器(lcd)和觸摸面板(tp)。如果屏幕包括觸摸面板，屏幕可以被實(shí)現(xiàn)為觸摸屏，以接收來(lái)自用戶(hù)的輸入信號(hào)。觸摸面板包括一個(gè)或多個(gè)觸摸傳感器以感測(cè)觸摸、滑動(dòng)和觸摸面板上的手勢(shì)。所述觸摸傳感器可以不僅感測(cè)觸摸或滑動(dòng)動(dòng)作的邊界，而且還檢測(cè)與所述觸摸或滑動(dòng)操作相關(guān)的持續(xù)時(shí)間和壓力。在一些實(shí)施例中，多媒體組件508包括一個(gè)前置攝像頭和/或后置攝像頭。當(dāng)裝置500處于操作模式，如拍攝模式或視頻模式時(shí)，前置攝像頭和/或后置攝像頭可以接收外部的多媒體數(shù)據(jù)。每個(gè)前置攝像頭和后置攝像頭可以是一個(gè)固定的光學(xué)透鏡系統(tǒng)或具有焦距和光學(xué)變焦能力。

音頻組件510被配置為輸出和/或輸入音頻信號(hào)。例如，音頻組件510包括一個(gè)麥克風(fēng)(mic)，當(dāng)裝置500處于操作模式，如呼叫模式、記錄模式和語(yǔ)音識(shí)別模式時(shí)，麥克風(fēng)被配置為接收外部音頻信號(hào)。所接收的音頻信號(hào)可以被進(jìn)一步存儲(chǔ)在存儲(chǔ)器504或經(jīng)由通信組件516發(fā)送。在一些實(shí)施例中，音頻組件510還包括一個(gè)揚(yáng)聲器，用于輸出音頻信號(hào)。

i/o接口512為處理組件502和外圍接口模塊之間提供接口，上述外圍接口模塊可以是鍵盤(pán)，點(diǎn)擊輪，按鈕等。這些按鈕可包括但不限于：主頁(yè)按鈕、音量按鈕、啟動(dòng)按鈕和鎖定按鈕。

傳感器組件514包括一個(gè)或多個(gè)傳感器，用于為裝置500提供各個(gè)方面的狀態(tài)評(píng)估。例如，傳感器組件514可以檢測(cè)到裝置500的打開(kāi)/關(guān)閉狀態(tài)，組件的相對(duì)定位，例如所述組件為裝置500的顯示器和小鍵盤(pán)，傳感器組件514還可以檢測(cè)裝置500或裝置500一個(gè)組件的位置改變，用戶(hù)與裝置500接觸的存在或不存在，裝置500方位或加速/減速和裝置500的溫度變化。傳感器組件514可以包括接近傳感器，被配置用來(lái)在沒(méi)有任何的物理接觸時(shí)檢測(cè)附近物體的存在。傳感器組件514還可以包括光傳感器，如cmos或ccd圖像傳感器，用于在成像應(yīng)用中使用。在一些實(shí)施例中，該傳感器組件514還可以包括加速度傳感器，陀螺儀傳感器，磁傳感器，壓力傳感器或溫度傳感器。

通信組件516被配置為便于裝置500和其他設(shè)備之間有線(xiàn)或無(wú)線(xiàn)方式的通信。裝置500可以接入基于通信標(biāo)準(zhǔn)的無(wú)線(xiàn)網(wǎng)絡(luò)，如wifi，2g或3g，或它們的組合。在一個(gè)示例性實(shí)施例中，通信組件516經(jīng)由廣播信道接收來(lái)自外部廣播管理系統(tǒng)的廣播信號(hào)或廣播相關(guān)信息。在一個(gè)示例性實(shí)施例中，所述通信組件516還包括近場(chǎng)通信(nfc)模塊，以促進(jìn)短程通信。例如，在nfc模塊可基于射頻識(shí)別(rfid)技術(shù)，紅外數(shù)據(jù)協(xié)會(huì)(irda)技術(shù)，超寬帶(uwb)技術(shù)，藍(lán)牙(bt)技術(shù)和其他技術(shù)來(lái)實(shí)現(xiàn)。

在示例性實(shí)施例中，裝置500可以被一個(gè)或多個(gè)應(yīng)用專(zhuān)用集成電路(asic)、數(shù)字信號(hào)處理器(dsp)、數(shù)字信號(hào)處理設(shè)備(dspd)、可編程邏輯器件(pld)、現(xiàn)場(chǎng)可編程門(mén)陣列(fpga)、控制器、微控制器、微處理器或其他電子元件實(shí)現(xiàn)，用于執(zhí)行上述方法。

在示例性實(shí)施例中，還提供了一種包括指令的非臨時(shí)性計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)，例如包括指令的存儲(chǔ)器504，上述指令可由裝置500的處理器520執(zhí)行以完成上述方法。例如，所述非臨時(shí)性計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)可以是rom、隨機(jī)存取存儲(chǔ)器(ram)、cd-rom、磁帶、軟盤(pán)和光數(shù)據(jù)存儲(chǔ)設(shè)備等。

本公開(kāi)實(shí)施例提供的裝置，原生層在接收到第一視圖后，將判斷資源池中是否緩存有第一視圖的視圖結(jié)構(gòu)數(shù)據(jù)對(duì)應(yīng)的視圖結(jié)構(gòu)，如果資源池中緩存有對(duì)應(yīng)的視圖結(jié)構(gòu)，則無(wú)需重新繪制，可根據(jù)緩存的視圖結(jié)構(gòu)進(jìn)行頁(yè)面顯示。該過(guò)程縮短了頁(yè)面繪制時(shí)間，降低了系統(tǒng)內(nèi)存占用量，大大提升了系統(tǒng)性能。

本公開(kāi)實(shí)施例提供了一種計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)，所述存儲(chǔ)介質(zhì)中存儲(chǔ)有至少一條指令至少一條指令，所述至少一條指令由處理器加載并執(zhí)行以實(shí)現(xiàn)圖2或圖3所述的頁(yè)面顯示方法。

本公開(kāi)實(shí)施例提供的計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)，原生層在接收到第一視圖后，將判斷資源池中是否緩存有第一視圖的視圖結(jié)構(gòu)數(shù)據(jù)對(duì)應(yīng)的視圖結(jié)構(gòu)，如果資源池中緩存有對(duì)應(yīng)的視圖結(jié)構(gòu)，則無(wú)需重新繪制，可根據(jù)緩存的視圖結(jié)構(gòu)進(jìn)行頁(yè)面顯示。該過(guò)程縮短了頁(yè)面繪制時(shí)間，降低了系統(tǒng)內(nèi)存占用量，大大提升了系統(tǒng)性能。

本領(lǐng)域技術(shù)人員在考慮說(shuō)明書(shū)及實(shí)踐這里公開(kāi)的公開(kāi)后，將容易想到本公開(kāi)的其它實(shí)施方案。本申請(qǐng)旨在涵蓋本公開(kāi)的任何變型、用途或者適應(yīng)性變化，這些變型、用途或者適應(yīng)性變化遵循本公開(kāi)的一般性原理并包括本公開(kāi)未公開(kāi)的本技術(shù)領(lǐng)域中的公知常識(shí)或慣用技術(shù)手段。說(shuō)明書(shū)和實(shí)施例僅被視為示例性的，本公開(kāi)的真正范圍和精神由下面的權(quán)利要求指出。

應(yīng)當(dāng)理解的是，本公開(kāi)并不局限于上面已經(jīng)描述并在附圖中示出的精確結(jié)構(gòu)，并且可以在不脫離其范圍進(jìn)行各種修改和改變。本公開(kāi)的范圍僅由所附的權(quán)利要求來(lái)限制。