本公開(kāi)涉及計(jì)算機(jī)技術(shù)領(lǐng)域，尤其涉及一種瀏覽器內(nèi)核的排版結(jié)構(gòu)展現(xiàn)方法及裝置。

背景技術(shù)：

隨著計(jì)算機(jī)技術(shù)的快速發(fā)展，瀏覽器逐漸成為用戶瀏覽網(wǎng)頁(yè)的重要工具之一。作為瀏覽器的核心部分，瀏覽器內(nèi)核主要用于渲染網(wǎng)頁(yè)，也即是，瀏覽器內(nèi)核決定了瀏覽器如何排版并顯示網(wǎng)頁(yè)。

瀏覽器內(nèi)核通常包括多種，其中，一些瀏覽器內(nèi)核可以通過(guò)內(nèi)部的排版結(jié)構(gòu)來(lái)描述網(wǎng)頁(yè)的排版過(guò)程，例如，WebKit內(nèi)核等。在實(shí)際應(yīng)用過(guò)程中，為了能夠定位瀏覽器工作過(guò)程中可能出現(xiàn)的故障，或者對(duì)瀏覽器進(jìn)行優(yōu)化，需要對(duì)瀏覽器內(nèi)核進(jìn)行分析。目前，WebKit內(nèi)核中存在一組調(diào)用接口，通過(guò)該調(diào)用接口可以導(dǎo)出WebKit內(nèi)核的排版結(jié)構(gòu)，導(dǎo)出的排版結(jié)構(gòu)為純文本數(shù)據(jù)，基于該純文本數(shù)據(jù)，可以對(duì)瀏覽器內(nèi)核進(jìn)行分析。

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

為克服相關(guān)技術(shù)中存在的問(wèn)題，本公開(kāi)提供一種瀏覽器內(nèi)核的排版結(jié)構(gòu)展現(xiàn)方法及裝置。

第一方面，提供一種瀏覽器內(nèi)核的排版結(jié)構(gòu)展現(xiàn)方法，所述方法包括：

當(dāng)在網(wǎng)頁(yè)中檢測(cè)到排版結(jié)構(gòu)展現(xiàn)指令時(shí)，按照瀏覽器內(nèi)核包括的多個(gè)階段的數(shù)據(jù)屬性，獲取所述網(wǎng)頁(yè)在排版的過(guò)程中各個(gè)階段的頁(yè)面排版數(shù)據(jù)，所述瀏覽器內(nèi)核為當(dāng)前顯示所述網(wǎng)頁(yè)的瀏覽器的內(nèi)核；

基于所述各個(gè)階段的頁(yè)面排版數(shù)據(jù)，構(gòu)建內(nèi)容樹(shù)，所述內(nèi)容樹(shù)中包括多個(gè)節(jié)點(diǎn)；

確定所述內(nèi)容樹(shù)包括的多個(gè)節(jié)點(diǎn)的空間位置以及所述多個(gè)節(jié)點(diǎn)的節(jié)點(diǎn)樣式；

按照所述多個(gè)節(jié)點(diǎn)的空間位置和節(jié)點(diǎn)樣式，繪制所述瀏覽器內(nèi)核的排版結(jié)構(gòu)視圖，顯示所述排版結(jié)構(gòu)視圖。

可選地，所述確定所述內(nèi)容樹(shù)包括的多個(gè)節(jié)點(diǎn)的空間位置以及所述多個(gè)節(jié)點(diǎn)的節(jié)點(diǎn)樣式，包括：

對(duì)于所述內(nèi)容樹(shù)包括的多個(gè)節(jié)點(diǎn)中的每個(gè)節(jié)點(diǎn)，確定所述節(jié)點(diǎn)的橫向位置、縱向位置和軸向位置；

基于所述多個(gè)節(jié)點(diǎn)的節(jié)點(diǎn)標(biāo)識(shí)，從存儲(chǔ)的節(jié)點(diǎn)標(biāo)識(shí)與節(jié)點(diǎn)樣式之間的對(duì)應(yīng)關(guān)系中，獲取對(duì)應(yīng)的節(jié)點(diǎn)樣式。

可選地，所述確定所述節(jié)點(diǎn)的橫向位置、縱向位置和軸向位置，包括：

確定所述節(jié)點(diǎn)的寬度和節(jié)點(diǎn)距離，基于所述節(jié)點(diǎn)的寬度和所述節(jié)點(diǎn)距離，確定所述節(jié)點(diǎn)的橫向位置，所述節(jié)點(diǎn)距離是指所述節(jié)點(diǎn)在橫向方向上與坐標(biāo)原點(diǎn)之間的距離；

基于所述節(jié)點(diǎn)在所述內(nèi)容樹(shù)的樹(shù)結(jié)構(gòu)中的深度，確定所述節(jié)點(diǎn)的縱向位置；

根據(jù)所述節(jié)點(diǎn)的屬性信息和所述網(wǎng)頁(yè)的網(wǎng)頁(yè)信息，確定所述節(jié)點(diǎn)的軸向位置，所述節(jié)點(diǎn)的屬性信息用于指示所述節(jié)點(diǎn)在所述排版結(jié)構(gòu)視圖中所處的層次。

可選地，所述確定所述節(jié)點(diǎn)的寬度和節(jié)點(diǎn)距離，包括：

判斷所述節(jié)點(diǎn)是否包括有子節(jié)點(diǎn)，當(dāng)所述節(jié)點(diǎn)不包括有子節(jié)點(diǎn)時(shí)，確定所述節(jié)點(diǎn)的寬度為第一預(yù)設(shè)寬度；當(dāng)所述節(jié)點(diǎn)包括有N個(gè)子節(jié)點(diǎn)時(shí)，將所述N個(gè)子節(jié)點(diǎn)的寬度和N-1個(gè)子節(jié)點(diǎn)之間的間隔寬度之和確定為所述節(jié)點(diǎn)的寬度，所述N為大于或等于1的正整數(shù)；

判斷所述節(jié)點(diǎn)是否屬于父節(jié)點(diǎn)的子節(jié)點(diǎn)，當(dāng)所述節(jié)點(diǎn)不屬于所述父節(jié)點(diǎn)的子節(jié)點(diǎn)時(shí)，確定所述節(jié)點(diǎn)的節(jié)點(diǎn)距離為預(yù)設(shè)長(zhǎng)度，當(dāng)所述節(jié)點(diǎn)屬于所述父節(jié)點(diǎn)的第i個(gè)子節(jié)點(diǎn)時(shí)，確定第一數(shù)值，并將所述父節(jié)點(diǎn)的節(jié)點(diǎn)距離與所述第一數(shù)值之和確定為所述節(jié)點(diǎn)的節(jié)點(diǎn)距離，所述第一數(shù)值為所述父節(jié)點(diǎn)包括的子節(jié)點(diǎn)中前i-1個(gè)子節(jié)點(diǎn)的寬度和所述前i-1個(gè)子節(jié)點(diǎn)之間的間隔寬度之和。

可選地，所述基于所述節(jié)點(diǎn)的寬度和所述節(jié)點(diǎn)距離，確定所述節(jié)點(diǎn)的橫向位置，包括：

基于所述節(jié)點(diǎn)的寬度和所述節(jié)點(diǎn)距離，通過(guò)第一指定公式，確定所述節(jié)點(diǎn)的橫向位置；

所述第一指定公式為：

其中，所述X_i為所述節(jié)點(diǎn)的橫向位置，所述offset為所述節(jié)點(diǎn)的節(jié)點(diǎn)距離，所述W_i為所述節(jié)點(diǎn)的寬度，所述W為所述第一預(yù)設(shè)寬度。

可選地，所述基于所述節(jié)點(diǎn)在所述內(nèi)容樹(shù)的樹(shù)結(jié)構(gòu)中的深度，確定所述節(jié)點(diǎn)的縱向位置，包括：

確定第二數(shù)值，所述第二數(shù)值為所述節(jié)點(diǎn)的高度與在縱向方向上相鄰兩個(gè)節(jié)點(diǎn)之間的間隔高度之和；

將所述第二數(shù)值與所述節(jié)點(diǎn)在所述內(nèi)容樹(shù)的樹(shù)結(jié)構(gòu)中的深度之間的乘積確定為所述節(jié)點(diǎn)的縱向位置。

可選地，所述根據(jù)所述節(jié)點(diǎn)的屬性信息和所述網(wǎng)頁(yè)的網(wǎng)頁(yè)內(nèi)容，確定所述節(jié)點(diǎn)的軸向位置，包括：

根據(jù)所述節(jié)點(diǎn)的屬性信息，確定所述節(jié)點(diǎn)在所述排版結(jié)構(gòu)視圖所處的層次；

根據(jù)所述網(wǎng)頁(yè)的頁(yè)面信息，確定所述排版結(jié)構(gòu)視圖中包括的排版視圖的層數(shù)以及每層排版視圖的厚度；

基于所述節(jié)點(diǎn)在所述排版結(jié)構(gòu)視圖所處的層次、所述排版結(jié)構(gòu)視圖中包括的排版視圖的層數(shù)以及每層排版視圖的厚度，確定所述節(jié)點(diǎn)的軸向位置。

可選地，所述方法還包括：

當(dāng)檢測(cè)到目標(biāo)節(jié)點(diǎn)的預(yù)設(shè)操作時(shí)，獲取所述目標(biāo)節(jié)點(diǎn)的節(jié)點(diǎn)信息，所述目標(biāo)節(jié)點(diǎn)為所述排版結(jié)構(gòu)視圖中的任一節(jié)點(diǎn)，所述節(jié)點(diǎn)信息包括所述目標(biāo)節(jié)點(diǎn)的顯示位置、大小和顯示格式；

顯示所述節(jié)點(diǎn)信息。

第二方面，提供一種瀏覽器內(nèi)核的排版結(jié)構(gòu)展現(xiàn)裝置，所述裝置包括：

第一獲取模塊，用于當(dāng)在網(wǎng)頁(yè)中檢測(cè)到排版結(jié)構(gòu)展現(xiàn)指令時(shí)，按照瀏覽器內(nèi)核包括的多個(gè)階段的數(shù)據(jù)屬性，獲取所述網(wǎng)頁(yè)在排版的過(guò)程中各個(gè)階段的頁(yè)面排版數(shù)據(jù)，所述瀏覽器內(nèi)核為當(dāng)前顯示所述網(wǎng)頁(yè)的瀏覽器的內(nèi)核；

構(gòu)建模塊，用于基于所述第一獲取模塊獲取的所述各個(gè)階段的頁(yè)面排版數(shù)據(jù)，構(gòu)建內(nèi)容樹(shù)，所述內(nèi)容樹(shù)中包括多個(gè)節(jié)點(diǎn)；

確定模塊，用于確定所述構(gòu)建模塊構(gòu)建的所述內(nèi)容樹(shù)包括的多個(gè)節(jié)點(diǎn)的空間位置以及所述多個(gè)節(jié)點(diǎn)的節(jié)點(diǎn)樣式；

繪制模塊，用于按照所述確定模塊確定的所述多個(gè)節(jié)點(diǎn)的空間位置和節(jié)點(diǎn)樣式，繪制所述瀏覽器內(nèi)核的排版結(jié)構(gòu)視圖，顯示所述排版結(jié)構(gòu)視圖。

可選地，所述確定模塊包括：

確定子模塊，用于對(duì)于所述內(nèi)容樹(shù)包括的多個(gè)節(jié)點(diǎn)中的每個(gè)節(jié)點(diǎn)，確定所述節(jié)點(diǎn)的橫向位置、縱向位置和軸向位置；

獲取子模塊，用于基于所述多個(gè)節(jié)點(diǎn)的節(jié)點(diǎn)標(biāo)識(shí)，從存儲(chǔ)的節(jié)點(diǎn)標(biāo)識(shí)與節(jié)點(diǎn)樣式之間的對(duì)應(yīng)關(guān)系中，獲取對(duì)應(yīng)的節(jié)點(diǎn)樣式。

可選地，所述確定子模塊用于：

確定所述節(jié)點(diǎn)的寬度和節(jié)點(diǎn)距離，基于所述節(jié)點(diǎn)的寬度和所述節(jié)點(diǎn)距離，確定所述節(jié)點(diǎn)的橫向位置，所述節(jié)點(diǎn)距離是指所述節(jié)點(diǎn)在橫向方向上與坐標(biāo)原點(diǎn)之間的距離；

基于所述節(jié)點(diǎn)在所述內(nèi)容樹(shù)的樹(shù)結(jié)構(gòu)中的深度，確定所述節(jié)點(diǎn)的縱向位置；

根據(jù)所述節(jié)點(diǎn)的屬性信息和所述網(wǎng)頁(yè)的網(wǎng)頁(yè)信息，確定所述節(jié)點(diǎn)的軸向位置，所述節(jié)點(diǎn)的屬性信息用于指示所述節(jié)點(diǎn)在所述排版結(jié)構(gòu)視圖中所處的層次。

可選地，所述確定子模塊用于：

判斷所述節(jié)點(diǎn)是否包括有子節(jié)點(diǎn)，當(dāng)所述節(jié)點(diǎn)不包括有子節(jié)點(diǎn)時(shí)，確定所述節(jié)點(diǎn)的寬度為第一預(yù)設(shè)寬度；當(dāng)所述節(jié)點(diǎn)包括有N個(gè)子節(jié)點(diǎn)時(shí)，將所述N個(gè)子節(jié)點(diǎn)的寬度和N-1個(gè)子節(jié)點(diǎn)之間的間隔寬度之和確定為所述節(jié)點(diǎn)的寬度，所述N為大于或等于1的正整數(shù)；

判斷所述節(jié)點(diǎn)是否屬于父節(jié)點(diǎn)的子節(jié)點(diǎn)，當(dāng)所述節(jié)點(diǎn)不屬于所述父節(jié)點(diǎn)的子節(jié)點(diǎn)時(shí)，確定所述節(jié)點(diǎn)的節(jié)點(diǎn)距離為預(yù)設(shè)長(zhǎng)度，當(dāng)所述節(jié)點(diǎn)屬于所述父節(jié)點(diǎn)的第i個(gè)子節(jié)點(diǎn)時(shí)，確定第一數(shù)值，并將所述父節(jié)點(diǎn)的節(jié)點(diǎn)距離與所述第一數(shù)值之和確定為所述節(jié)點(diǎn)的節(jié)點(diǎn)距離，所述第一數(shù)值為所述父節(jié)點(diǎn)包括的子節(jié)點(diǎn)中前i-1個(gè)子節(jié)點(diǎn)的寬度和所述前i-1個(gè)子節(jié)點(diǎn)之間的間隔寬度之和。

可選地，所述確定子模塊用于：

基于所述節(jié)點(diǎn)的寬度和所述節(jié)點(diǎn)距離，通過(guò)第一指定公式，確定所述節(jié)點(diǎn)的橫向位置；

所述第一指定公式為：

其中，所述X_i為所述節(jié)點(diǎn)的橫向位置，所述offset為所述節(jié)點(diǎn)的節(jié)點(diǎn)距離，所述W_i為所述節(jié)點(diǎn)的寬度，所述W為所述第一預(yù)設(shè)寬度。

可選地，所述確定子模塊用于：

確定第二數(shù)值，所述第二數(shù)值為所述節(jié)點(diǎn)的高度與在縱向方向上相鄰兩個(gè)節(jié)點(diǎn)之間的間隔高度之和；

將所述第二數(shù)值與所述節(jié)點(diǎn)在所述內(nèi)容樹(shù)的樹(shù)結(jié)構(gòu)中的深度之間的乘積確定為所述節(jié)點(diǎn)的縱向位置。

可選地，所述確定子模塊用于：

根據(jù)所述節(jié)點(diǎn)的屬性信息，確定所述節(jié)點(diǎn)在所述排版結(jié)構(gòu)視圖所處的層次；

根據(jù)所述網(wǎng)頁(yè)的頁(yè)面信息，確定所述排版結(jié)構(gòu)視圖中包括的排版視圖的層數(shù)以及每層排版視圖的厚度；

基于所述節(jié)點(diǎn)在所述排版結(jié)構(gòu)視圖所處的層次、所述排版結(jié)構(gòu)視圖中包括的排版視圖的層數(shù)以及每層排版視圖的厚度，確定所述節(jié)點(diǎn)的軸向位置。

可選地，所述裝置還包括：

第二獲取模塊，用于當(dāng)檢測(cè)到目標(biāo)節(jié)點(diǎn)的預(yù)設(shè)操作時(shí)，獲取所述目標(biāo)節(jié)點(diǎn)的節(jié)點(diǎn)信息，所述目標(biāo)節(jié)點(diǎn)為所述排版結(jié)構(gòu)視圖中的任一節(jié)點(diǎn)，所述節(jié)點(diǎn)信息包括所述目標(biāo)節(jié)點(diǎn)的顯示位置、大小和顯示格式；

顯示模塊，用于顯示所述節(jié)點(diǎn)信息。

第三方面，提供一種瀏覽器內(nèi)核的排版結(jié)構(gòu)展現(xiàn)裝置，所述裝置包括：

處理器；

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

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

當(dāng)在網(wǎng)頁(yè)中檢測(cè)到排版結(jié)構(gòu)展現(xiàn)指令時(shí)，按照瀏覽器內(nèi)核包括的多個(gè)階段的數(shù)據(jù)屬性，獲取所述網(wǎng)頁(yè)在排版的過(guò)程中各個(gè)階段的頁(yè)面排版數(shù)據(jù)，所述瀏覽器內(nèi)核為當(dāng)前顯示所述網(wǎng)頁(yè)的瀏覽器的內(nèi)核；

基于所述各個(gè)階段的頁(yè)面排版數(shù)據(jù)，構(gòu)建內(nèi)容樹(shù)，所述內(nèi)容樹(shù)中包括多個(gè)節(jié)點(diǎn)；

確定所述內(nèi)容樹(shù)包括的多個(gè)節(jié)點(diǎn)的空間位置以及所述多個(gè)節(jié)點(diǎn)的節(jié)點(diǎn)樣式；

按照所述多個(gè)節(jié)點(diǎn)的空間位置和節(jié)點(diǎn)樣式，繪制所述瀏覽器內(nèi)核的排版結(jié)構(gòu)視圖，顯示所述排版結(jié)構(gòu)視圖。

本公開(kāi)的實(shí)施例提供的技術(shù)方案可以包括以下有益效果：當(dāng)在網(wǎng)頁(yè)中檢測(cè)到排版結(jié)構(gòu)展現(xiàn)指令時(shí)，說(shuō)明需要對(duì)顯示該網(wǎng)頁(yè)的瀏覽器內(nèi)核的排版結(jié)構(gòu)進(jìn)行分析，在該種情況下，按照該瀏覽器內(nèi)核包括的多個(gè)階段的數(shù)據(jù)屬性，獲取該網(wǎng)頁(yè)在排版過(guò)程中各個(gè)階段的頁(yè)面排版數(shù)據(jù)，以根據(jù)獲取的該頁(yè)面排版數(shù)據(jù)構(gòu)建包括多個(gè)節(jié)點(diǎn)的內(nèi)容樹(shù)，并確定該多個(gè)節(jié)點(diǎn)的空間位置和節(jié)點(diǎn)樣式，從而繪制出該瀏覽器內(nèi)核的排版結(jié)構(gòu)視圖，由于該排版結(jié)構(gòu)視圖清晰的展示了網(wǎng)頁(yè)在排版過(guò)程中的各個(gè)階段，因此，提高了排版結(jié)構(gòu)的直觀性。

應(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í)施例示出的一種瀏覽器內(nèi)核的排版結(jié)構(gòu)展現(xiàn)方法的流程圖。

圖2A是根據(jù)另一示例性實(shí)施例示出的一種瀏覽器內(nèi)核的排版結(jié)構(gòu)展現(xiàn)方法的流程圖。

圖2B是圖2A實(shí)施例所涉及的一種JSON格式的頁(yè)面排版數(shù)據(jù)的示意圖。

圖2C是圖2A實(shí)施例所涉及的一種內(nèi)容樹(shù)的樹(shù)結(jié)構(gòu)示意圖。

圖2D是圖2A實(shí)施例所涉及的一種排版結(jié)構(gòu)視圖的顯示示意圖。

圖3A是根據(jù)一示例性實(shí)施例示出的一種瀏覽器內(nèi)核的排版結(jié)構(gòu)展現(xiàn)裝置的框圖。

圖3B是根據(jù)一示例性實(shí)施例示出的一種確定模塊330的框圖。

圖3C是根據(jù)另一示例性實(shí)施例示出的一種瀏覽器內(nèi)核的排版結(jié)構(gòu)展現(xiàn)裝置的框圖。

圖4是根據(jù)一示例性實(shí)施例示出的一種瀏覽器內(nèi)核的排版結(jié)構(gòu)展現(xiàn)裝置400的框圖。

具體實(shí)施方式

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

在相關(guān)技術(shù)中，由于通過(guò)調(diào)用接口導(dǎo)出的WebKit內(nèi)核的排版結(jié)構(gòu)為純文本數(shù)據(jù)，因此，直觀性較差，為此，本公開(kāi)實(shí)施例提供了一種瀏覽器內(nèi)核的排版結(jié)構(gòu)展現(xiàn)方法，解決了純文本數(shù)據(jù)直觀性較差的問(wèn)題。本公開(kāi)實(shí)施例所提供的瀏覽器內(nèi)核的排版結(jié)構(gòu)展現(xiàn)方法可以由終端執(zhí)行，該終端至少可以用于運(yùn)行瀏覽器，另外，該終端還具有顯示功能。該終端可以為諸如手機(jī)、平板電腦和計(jì)算機(jī)等之類的終端，本公開(kāi)實(shí)施例對(duì)此不做限定。

在實(shí)際應(yīng)用中，對(duì)于初學(xué)者用戶來(lái)說(shuō)，難以了解瀏覽器內(nèi)核的排版結(jié)構(gòu)，為此，在本公開(kāi)實(shí)施例中，可以在瀏覽器上設(shè)置有展現(xiàn)選項(xiàng)，當(dāng)用戶想要瀏覽該瀏覽器內(nèi)核的排版結(jié)構(gòu)時(shí)，可以觸發(fā)該展現(xiàn)選項(xiàng)，此時(shí)，終端接收到該排版結(jié)構(gòu)展現(xiàn)指令，開(kāi)始執(zhí)行后續(xù)步驟，以對(duì)瀏覽器內(nèi)核的排版結(jié)構(gòu)進(jìn)行展現(xiàn)，如此，使得用戶可以直觀地、快速地了解瀏覽器內(nèi)核的排版結(jié)構(gòu)。

圖1是根據(jù)一示例性實(shí)施例示出的一種瀏覽器內(nèi)核的排版結(jié)構(gòu)展現(xiàn)方法的流程圖，如圖1所示，該瀏覽器內(nèi)核的排版結(jié)構(gòu)展現(xiàn)可以包括以下步驟。

在步驟101中，當(dāng)在網(wǎng)頁(yè)中檢測(cè)到排版結(jié)構(gòu)展現(xiàn)指令時(shí)，按照瀏覽器內(nèi)核包括的多個(gè)階段的數(shù)據(jù)屬性，獲取該網(wǎng)頁(yè)在排版的過(guò)程中各個(gè)階段的頁(yè)面排版數(shù)據(jù)，該瀏覽器內(nèi)核為當(dāng)前顯示該網(wǎng)頁(yè)的瀏覽器的內(nèi)核。

在步驟102中，基于該各個(gè)階段的頁(yè)面排版數(shù)據(jù)，構(gòu)建內(nèi)容樹(shù)，該內(nèi)容樹(shù)中包括多個(gè)節(jié)點(diǎn)。

在步驟103中，確定該內(nèi)容樹(shù)包括的多個(gè)節(jié)點(diǎn)的空間位置以及該多個(gè)節(jié)點(diǎn)的節(jié)點(diǎn)樣式。

在步驟104中，按照該多個(gè)節(jié)點(diǎn)的空間位置和節(jié)點(diǎn)樣式，繪制該瀏覽器內(nèi)核的排版結(jié)構(gòu)視圖，顯示該排版結(jié)構(gòu)視圖。

在本公開(kāi)實(shí)施例中，當(dāng)在網(wǎng)頁(yè)中檢測(cè)到排版結(jié)構(gòu)展現(xiàn)指令時(shí)，說(shuō)明需要對(duì)顯示該網(wǎng)頁(yè)的瀏覽器內(nèi)核的排版結(jié)構(gòu)進(jìn)行分析，在該種情況下，按照該瀏覽器內(nèi)核包括的多個(gè)階段的數(shù)據(jù)屬性，獲取該網(wǎng)頁(yè)在排版過(guò)程中各個(gè)階段的頁(yè)面排版數(shù)據(jù)，以根據(jù)獲取的該頁(yè)面排版數(shù)據(jù)構(gòu)建包括多個(gè)節(jié)點(diǎn)的內(nèi)容樹(shù)，并確定該多個(gè)節(jié)點(diǎn)的空間位置和節(jié)點(diǎn)樣式，從而繪制出該瀏覽器內(nèi)核的排版結(jié)構(gòu)視圖，由于該排版結(jié)構(gòu)視圖清晰的展示了網(wǎng)頁(yè)在排版過(guò)程中的各個(gè)階段，因此，提高了排版結(jié)構(gòu)的直觀性。

可選地，確定該內(nèi)容樹(shù)包括的多個(gè)節(jié)點(diǎn)的空間位置以及該多個(gè)節(jié)點(diǎn)的節(jié)點(diǎn)樣式，包括：

對(duì)于該內(nèi)容樹(shù)包括的多個(gè)節(jié)點(diǎn)中的每個(gè)節(jié)點(diǎn)，確定該節(jié)點(diǎn)的橫向位置、縱向位置和軸向位置；

基于該多個(gè)節(jié)點(diǎn)的節(jié)點(diǎn)標(biāo)識(shí)，從存儲(chǔ)的節(jié)點(diǎn)標(biāo)識(shí)與節(jié)點(diǎn)樣式之間的對(duì)應(yīng)關(guān)系中，獲取對(duì)應(yīng)的節(jié)點(diǎn)樣式。

上述通過(guò)確定該節(jié)點(diǎn)的橫向位置、縱向位置和軸向位置，即可以確定該節(jié)點(diǎn)的空間位置，以及根據(jù)存儲(chǔ)的節(jié)點(diǎn)標(biāo)識(shí)與節(jié)點(diǎn)樣式之間的對(duì)應(yīng)關(guān)系中，即可以獲取到各個(gè)節(jié)點(diǎn)的節(jié)點(diǎn)標(biāo)識(shí)對(duì)應(yīng)的節(jié)點(diǎn)樣式。

可選地，確定該節(jié)點(diǎn)的橫向位置、縱向位置和軸向位置，包括：

確定該節(jié)點(diǎn)的寬度和節(jié)點(diǎn)距離，基于該節(jié)點(diǎn)的寬度和該節(jié)點(diǎn)距離，確定該節(jié)點(diǎn)的橫向位置，該節(jié)點(diǎn)距離是指該節(jié)點(diǎn)在橫向方向上與坐標(biāo)原點(diǎn)之間的距離；

基于該節(jié)點(diǎn)在該內(nèi)容樹(shù)的樹(shù)結(jié)構(gòu)中的深度，確定該節(jié)點(diǎn)的縱向位置；

根據(jù)該節(jié)點(diǎn)的屬性信息和該網(wǎng)頁(yè)的網(wǎng)頁(yè)信息，確定該節(jié)點(diǎn)的軸向位置，該節(jié)點(diǎn)的屬性信息用于指示該節(jié)點(diǎn)在該排版結(jié)構(gòu)視圖中所處的層次。

上述基于該節(jié)點(diǎn)的寬度和該節(jié)點(diǎn)距離，實(shí)現(xiàn)了對(duì)該節(jié)點(diǎn)的橫向位置的確定，根據(jù)該節(jié)點(diǎn)在該內(nèi)容樹(shù)的樹(shù)結(jié)構(gòu)中的深度，實(shí)現(xiàn)了對(duì)該節(jié)點(diǎn)的縱向位置的確定，以及根據(jù)該節(jié)點(diǎn)的屬性信息和該網(wǎng)頁(yè)的網(wǎng)頁(yè)信息，實(shí)現(xiàn)了對(duì)該節(jié)點(diǎn)的軸向位置的確定，從而確定了該節(jié)點(diǎn)的空間位置。

可選地，確定該節(jié)點(diǎn)的寬度和節(jié)點(diǎn)距離，包括：

判斷該節(jié)點(diǎn)是否包括有子節(jié)點(diǎn)，當(dāng)該節(jié)點(diǎn)不包括有子節(jié)點(diǎn)時(shí)，確定該節(jié)點(diǎn)的寬度為第一預(yù)設(shè)寬度；當(dāng)該節(jié)點(diǎn)包括有N個(gè)子節(jié)點(diǎn)時(shí)，將該N個(gè)子節(jié)點(diǎn)的寬度和N-1個(gè)子節(jié)點(diǎn)之間的間隔寬度之和確定為該節(jié)點(diǎn)的寬度，該N為大于或等于1的正整數(shù)；

判斷該節(jié)點(diǎn)是否屬于父節(jié)點(diǎn)的子節(jié)點(diǎn)，當(dāng)該節(jié)點(diǎn)不屬于該父節(jié)點(diǎn)的子節(jié)點(diǎn)時(shí)，確定該節(jié)點(diǎn)的節(jié)點(diǎn)距離為預(yù)設(shè)長(zhǎng)度，當(dāng)該節(jié)點(diǎn)屬于該父節(jié)點(diǎn)的第i個(gè)子節(jié)點(diǎn)時(shí)，確定第一數(shù)值，并將該父節(jié)點(diǎn)的節(jié)點(diǎn)距離與該第一數(shù)值之和確定為該節(jié)點(diǎn)的節(jié)點(diǎn)距離，該第一數(shù)值為該父節(jié)點(diǎn)包括的子節(jié)點(diǎn)中前i-1個(gè)子節(jié)點(diǎn)的寬度和該前i-1個(gè)子節(jié)點(diǎn)之間的間隔寬度之和。

上述采用遞歸的方式，確定了內(nèi)容樹(shù)中各個(gè)節(jié)點(diǎn)的空間位置，保證了每個(gè)節(jié)點(diǎn)不重疊，并符合繪制的先后順序。

可選地，基于該節(jié)點(diǎn)的寬度和該節(jié)點(diǎn)距離，確定該節(jié)點(diǎn)的橫向位置，包括：

基于該節(jié)點(diǎn)的寬度和該節(jié)點(diǎn)距離，通過(guò)第一指定公式，確定該節(jié)點(diǎn)的橫向位置；

該第一指定公式為：

其中，該X_i為該節(jié)點(diǎn)的橫向位置，該offset為該節(jié)點(diǎn)的節(jié)點(diǎn)距離，該W_i為該節(jié)點(diǎn)的寬度，該W為該第一預(yù)設(shè)寬度。

上述基于該節(jié)點(diǎn)的寬度和該節(jié)點(diǎn)距離，通過(guò)第一指定公式，實(shí)現(xiàn)了對(duì)該節(jié)點(diǎn)的橫向位置的確定。

可選地，基于該節(jié)點(diǎn)在該內(nèi)容樹(shù)的樹(shù)結(jié)構(gòu)中的深度，確定該節(jié)點(diǎn)的縱向位置，包括：

確定第二數(shù)值，該第二數(shù)值為該節(jié)點(diǎn)的高度與在縱向方向上相鄰兩個(gè)節(jié)點(diǎn)之間的間隔高度之和；

將該第二數(shù)值與該節(jié)點(diǎn)在該內(nèi)容樹(shù)的樹(shù)結(jié)構(gòu)中的深度之間的乘積確定為該節(jié)點(diǎn)的縱向位置。

上述根據(jù)節(jié)點(diǎn)的高度、在縱向方向上相鄰兩個(gè)節(jié)點(diǎn)之間的間隔高度以及該節(jié)點(diǎn)在該內(nèi)容樹(shù)的樹(shù)結(jié)構(gòu)中的深度，實(shí)現(xiàn)了對(duì)該節(jié)點(diǎn)的縱向位置的確定。

可選地，根據(jù)該節(jié)點(diǎn)的屬性信息和該網(wǎng)頁(yè)的網(wǎng)頁(yè)內(nèi)容，確定該節(jié)點(diǎn)的軸向位置，包括：

根據(jù)該節(jié)點(diǎn)的屬性信息，確定該節(jié)點(diǎn)在該排版結(jié)構(gòu)視圖所處的層次；

根據(jù)該網(wǎng)頁(yè)的頁(yè)面信息，確定該排版結(jié)構(gòu)視圖中包括的排版視圖的層數(shù)以及每層排版視圖的厚度；

基于該節(jié)點(diǎn)在該排版結(jié)構(gòu)視圖所處的層次、該排版結(jié)構(gòu)視圖中包括的排版視圖的層數(shù)以及每層排版視圖的厚度，確定該節(jié)點(diǎn)的軸向位置。

上述通過(guò)確定該節(jié)點(diǎn)在該排版結(jié)構(gòu)視圖中所處的層次、該排版結(jié)構(gòu)視圖包括的層數(shù)以及各層的厚度，實(shí)現(xiàn)了對(duì)該節(jié)點(diǎn)在軸向方向上的軸向位置的確定。

可選地，該方法還包括：

當(dāng)檢測(cè)到目標(biāo)節(jié)點(diǎn)的預(yù)設(shè)操作時(shí)，獲取該目標(biāo)節(jié)點(diǎn)的節(jié)點(diǎn)信息，該目標(biāo)節(jié)點(diǎn)為該排版結(jié)構(gòu)視圖中的任一節(jié)點(diǎn)，該節(jié)點(diǎn)信息包括該目標(biāo)節(jié)點(diǎn)的顯示位置、大小和顯示格式；

顯示該節(jié)點(diǎn)信息。

上述在顯示該排版結(jié)構(gòu)視圖之后，還可以對(duì)該排版結(jié)構(gòu)視圖中的任一節(jié)點(diǎn)的節(jié)點(diǎn)信息進(jìn)行顯示，以便于對(duì)該節(jié)點(diǎn)可以進(jìn)行進(jìn)一步地優(yōu)化等處理。

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

圖2A是根據(jù)另一示例性實(shí)施例示出的一種瀏覽器內(nèi)核的排版結(jié)構(gòu)展現(xiàn)方法的流程圖，如圖2A所示，該瀏覽器內(nèi)核的排版結(jié)構(gòu)展現(xiàn)方法用于終端中，該瀏覽器內(nèi)核的排版結(jié)構(gòu)展現(xiàn)方法包括以下步驟：

在步驟201中，當(dāng)在網(wǎng)頁(yè)中檢測(cè)到排版結(jié)構(gòu)展現(xiàn)指令時(shí)，按照瀏覽器內(nèi)核包括的多個(gè)階段的數(shù)據(jù)屬性，獲取該網(wǎng)頁(yè)在排版的過(guò)程中各個(gè)階段的頁(yè)面排版數(shù)據(jù)，該瀏覽器內(nèi)核為當(dāng)前顯示該網(wǎng)頁(yè)的瀏覽器的內(nèi)核。

其中，該排版結(jié)構(gòu)展現(xiàn)指令可以由用戶觸發(fā)，該用戶可以通過(guò)指定操作觸發(fā)，該指定操作可以包括點(diǎn)擊操作、滑動(dòng)操作等，本公開(kāi)實(shí)施例對(duì)此不做限定。

當(dāng)終端在網(wǎng)頁(yè)中檢測(cè)到排版結(jié)構(gòu)展現(xiàn)指令時(shí)，可以確定用戶可能需要對(duì)當(dāng)前顯示該網(wǎng)頁(yè)的瀏覽器的內(nèi)核進(jìn)行分析，為此，終端獲取該網(wǎng)頁(yè)在排版的過(guò)程中各個(gè)階段的頁(yè)面排版數(shù)據(jù)。

網(wǎng)頁(yè)在排版過(guò)程中，實(shí)際上可以包括多個(gè)階段，例如，可能包括排版階段、渲染階段、合成階段等等，且該多個(gè)階段中的每個(gè)階段的數(shù)據(jù)屬性可能均不同，其中，該各個(gè)階段的數(shù)據(jù)屬性可以用于指示各個(gè)階段所使用的數(shù)據(jù)的類型。終端在接收到排版結(jié)構(gòu)展現(xiàn)指令時(shí)，按照該多個(gè)階段的數(shù)據(jù)屬性，來(lái)獲取該多個(gè)階段中的各個(gè)階段的頁(yè)面排版數(shù)據(jù)。

其中，終端獲取該多個(gè)階段中的各個(gè)階段的頁(yè)面排版數(shù)據(jù)可以是在該瀏覽器的內(nèi)核中實(shí)現(xiàn)，在一種可能的實(shí)現(xiàn)方式中，該終端獲取到各個(gè)階段的頁(yè)面排版數(shù)據(jù)后，可以將該各個(gè)階段的頁(yè)面排版數(shù)據(jù)通過(guò)指定格式進(jìn)行存儲(chǔ)，并建立各個(gè)階段的頁(yè)面排版數(shù)據(jù)之間的關(guān)聯(lián)關(guān)系，以便后續(xù)處理。其中，該指定格式包括JSON(JavaScript Object Notation，JS腳本對(duì)象表示法)格式。

例如，請(qǐng)參考圖2B，該圖2B是圖2A實(shí)施例所涉及的一種JSON格式的頁(yè)面排版數(shù)據(jù)的示意圖，其中，標(biāo)號(hào)1、2、3和4分別用于表示不同階段且每個(gè)階段對(duì)應(yīng)排版結(jié)構(gòu)視圖的不同層，從該圖2B中可以看出，各個(gè)階段對(duì)應(yīng)不同的數(shù)據(jù)屬性。

在步驟202中，基于該各個(gè)階段的頁(yè)面排版數(shù)據(jù)，構(gòu)建內(nèi)容樹(shù)，該內(nèi)容樹(shù)中包括多個(gè)節(jié)點(diǎn)。

終端獲取網(wǎng)頁(yè)在排版的過(guò)程中的各個(gè)階段的頁(yè)面排版數(shù)據(jù)后，需要根據(jù)所獲取的各個(gè)階段的頁(yè)面排版數(shù)據(jù)，構(gòu)建內(nèi)容樹(shù)，請(qǐng)參考圖2C，該內(nèi)容樹(shù)中包括多個(gè)節(jié)點(diǎn)a、b、c、d、e、f、g、h。

需要說(shuō)明的是，上述圖2C僅是示例性地示出了一種內(nèi)容樹(shù)的樹(shù)結(jié)構(gòu)的示意圖，在實(shí)際實(shí)現(xiàn)時(shí)，該內(nèi)容樹(shù)的樹(shù)結(jié)構(gòu)可以為其它形式，且該內(nèi)容樹(shù)中還可能包括更多的節(jié)點(diǎn)，圖2C不再一一示出。

其中，對(duì)于該多個(gè)節(jié)點(diǎn)中的每個(gè)節(jié)點(diǎn)，該節(jié)點(diǎn)可以代表一個(gè)DOM(Document Object Model，文檔對(duì)象模型)元素，不難理解，一個(gè)DOM元素可以用于指示網(wǎng)頁(yè)中的一個(gè)標(biāo)簽。

在步驟203中，確定該內(nèi)容樹(shù)包括的多個(gè)節(jié)點(diǎn)的空間位置以及該多個(gè)節(jié)點(diǎn)的節(jié)點(diǎn)樣式。

其中，確定該內(nèi)容樹(shù)包括的多個(gè)節(jié)點(diǎn)的空間位置以及該多個(gè)節(jié)點(diǎn)的節(jié)點(diǎn)樣式的具體實(shí)現(xiàn)可以包括如下子步驟2031和子步驟2032：

2031：對(duì)于該內(nèi)容樹(shù)包括的多個(gè)節(jié)點(diǎn)中的每個(gè)節(jié)點(diǎn)，確定該節(jié)點(diǎn)的橫向位置、縱向位置和軸向位置。

不難理解，在三維空間中，節(jié)點(diǎn)的空間位置需要三個(gè)方向的位置來(lái)確定，即橫向位置、縱向位置和軸向位置。在三維坐標(biāo)系中，該橫向位置通常又被稱為在X軸方向上的位置，縱向位置通常又被稱為在Y軸方向上的位置，軸線位置通常又被稱為在Z軸方向上的位置，在本公開(kāi)實(shí)施例中，以該空間位置通過(guò)橫向位置、縱向位置和軸向位置確定來(lái)進(jìn)行描述。其中，確定該節(jié)點(diǎn)的橫向位置、縱向位置和軸向位置的實(shí)現(xiàn)過(guò)程請(qǐng)參見(jiàn)如下(1)-(3)：

(1)確定該節(jié)點(diǎn)的寬度和節(jié)點(diǎn)距離，基于該節(jié)點(diǎn)的寬度和該節(jié)點(diǎn)距離，確定該節(jié)點(diǎn)的橫向位置，該節(jié)點(diǎn)距離是指該節(jié)點(diǎn)在橫向方向上與坐標(biāo)原點(diǎn)之間的距離。

其中，在該內(nèi)容樹(shù)的樹(shù)結(jié)構(gòu)中，該節(jié)點(diǎn)可能為父節(jié)點(diǎn)，也可能為子節(jié)點(diǎn)，根據(jù)該節(jié)點(diǎn)的性質(zhì)不同，確定該節(jié)點(diǎn)的寬度和節(jié)點(diǎn)距離可以包括如下實(shí)現(xiàn)過(guò)程：

在確定該節(jié)點(diǎn)的寬度的過(guò)程中，可以基于該內(nèi)容樹(shù)的樹(shù)結(jié)構(gòu)自底向上，采用遞歸方式來(lái)確定，也即是：判斷該節(jié)點(diǎn)是否包括有子節(jié)點(diǎn)，當(dāng)該節(jié)點(diǎn)不包括有子節(jié)點(diǎn)時(shí)，確定該節(jié)點(diǎn)的寬度為第一預(yù)設(shè)寬度；當(dāng)該節(jié)點(diǎn)包括有N個(gè)子節(jié)點(diǎn)時(shí)，將該N個(gè)子節(jié)點(diǎn)的寬度和N-1個(gè)子節(jié)點(diǎn)之間的間隔寬度之和確定為該節(jié)點(diǎn)的寬度，該N為大于或等于1的正整數(shù)。

其中，上述第一預(yù)設(shè)寬度可以由用戶根據(jù)實(shí)際需求自定義設(shè)置，也可以由終端默認(rèn)設(shè)置，本公開(kāi)實(shí)施例對(duì)此不做限定。

另外，上述每相鄰兩個(gè)子節(jié)點(diǎn)之間的間隔寬度均相同，該間隔寬度可以由用戶根據(jù)實(shí)際需求自定義設(shè)置，也可以由終端默認(rèn)設(shè)置，本公開(kāi)實(shí)施例對(duì)此不做限定。這里可以將每相鄰兩個(gè)子節(jié)點(diǎn)之間的間隔寬度表示為MX。

例如，請(qǐng)參考圖2C，若該節(jié)點(diǎn)為節(jié)點(diǎn)g，由于該節(jié)點(diǎn)g不包括子節(jié)點(diǎn)，因此，將該節(jié)點(diǎn)g的寬度確定為第一預(yù)設(shè)寬度W，同理，節(jié)點(diǎn)h的寬度也為該第一預(yù)設(shè)寬度W。若該節(jié)點(diǎn)為節(jié)點(diǎn)f，由于該節(jié)點(diǎn)f包括兩個(gè)子節(jié)點(diǎn)，分別為子節(jié)點(diǎn)g和子節(jié)點(diǎn)h，即上述N為2，因此，可以確定該節(jié)點(diǎn)f的寬度為(2-1)*MX+2*W。

以此類推，按照該種實(shí)現(xiàn)方式，從該內(nèi)容樹(shù)的底部至頂部，采用遞歸的方式即可以確定該內(nèi)容樹(shù)包括的多個(gè)節(jié)點(diǎn)中每個(gè)節(jié)點(diǎn)的寬度。

在確定該節(jié)點(diǎn)的節(jié)點(diǎn)距離的過(guò)程中，判斷該節(jié)點(diǎn)是否屬于父節(jié)點(diǎn)的子節(jié)點(diǎn)，當(dāng)該節(jié)點(diǎn)不屬于該父節(jié)點(diǎn)的子節(jié)點(diǎn)時(shí)，確定該節(jié)點(diǎn)的節(jié)點(diǎn)距離為預(yù)設(shè)長(zhǎng)度，當(dāng)該節(jié)點(diǎn)屬于該父節(jié)點(diǎn)的第i個(gè)子節(jié)點(diǎn)時(shí)，確定第一數(shù)值，并將該父節(jié)點(diǎn)的節(jié)點(diǎn)距離與該第一數(shù)值之和確定為該節(jié)點(diǎn)的節(jié)點(diǎn)距離，該第一數(shù)值為該父節(jié)點(diǎn)包括的子節(jié)點(diǎn)中前i-1個(gè)子節(jié)點(diǎn)的寬度和該前i-1個(gè)子節(jié)點(diǎn)之間的間隔寬度之和。

其中，該預(yù)設(shè)長(zhǎng)度為可以由用戶根據(jù)實(shí)際需求自定義設(shè)置，也可以由終端默認(rèn)設(shè)置，本公開(kāi)實(shí)施例對(duì)此不做限定。這里可以將該預(yù)設(shè)長(zhǎng)度表示為offset0。

在確定該節(jié)點(diǎn)的節(jié)點(diǎn)距離的過(guò)程中，可以從該內(nèi)容樹(shù)的頂部開(kāi)始向下進(jìn)行遞歸運(yùn)算，以確定每個(gè)節(jié)點(diǎn)的節(jié)點(diǎn)距離。例如，請(qǐng)參考圖2C，若該節(jié)點(diǎn)為節(jié)點(diǎn)a，由于該節(jié)點(diǎn)a不屬于父節(jié)點(diǎn)的子節(jié)點(diǎn)，即該節(jié)點(diǎn)a沒(méi)有父節(jié)點(diǎn)，因此，該節(jié)點(diǎn)a的節(jié)點(diǎn)距離offset為預(yù)設(shè)距離offset0。進(jìn)一步可以確定節(jié)點(diǎn)b和節(jié)點(diǎn)c的節(jié)點(diǎn)距離，即若該節(jié)點(diǎn)為節(jié)點(diǎn)b，由于該節(jié)點(diǎn)b屬于父節(jié)點(diǎn)a包括的兩個(gè)子節(jié)點(diǎn)b和c中的第1個(gè)子節(jié)點(diǎn)，也即是，上述N為2，因此，可以確定該節(jié)點(diǎn)b的節(jié)點(diǎn)距離offset為：offset0+(1-1)W_a+(1-1)MX，即仍為offset0，其中，W_a代表子節(jié)點(diǎn)b的寬度。再如，若該節(jié)點(diǎn)為節(jié)點(diǎn)c，由于該節(jié)點(diǎn)c屬于父節(jié)點(diǎn)a包括的兩個(gè)子節(jié)點(diǎn)b和c中的第2個(gè)子節(jié)點(diǎn)，因此，可以確定該節(jié)點(diǎn)c的節(jié)點(diǎn)距離offset為offset0+(2-1)*W_b+(2-1)*MX，其中，W_b代表子節(jié)點(diǎn)b的寬度。

以此類推，按照上述確定方式，通過(guò)依次遞歸的方式，可以確定該內(nèi)容樹(shù)包括的多個(gè)節(jié)點(diǎn)中的每個(gè)節(jié)點(diǎn)的節(jié)點(diǎn)距離。

確定了該節(jié)點(diǎn)的寬度和節(jié)點(diǎn)距離之后，即可以根據(jù)該節(jié)點(diǎn)的寬度和該節(jié)點(diǎn)距離，確定該節(jié)點(diǎn)的橫向位置，實(shí)現(xiàn)過(guò)程包括：基于該節(jié)點(diǎn)的寬度和該節(jié)點(diǎn)距離，通過(guò)第一指定公式，確定該節(jié)點(diǎn)的橫向位置，該第一指定公式為：

其中，該X_i為該節(jié)點(diǎn)的橫向位置，該offset為該節(jié)點(diǎn)的節(jié)點(diǎn)距離，該W_i為該節(jié)點(diǎn)i的寬度，該W為該第一預(yù)設(shè)寬度。

(2)基于該節(jié)點(diǎn)在該內(nèi)容樹(shù)的樹(shù)結(jié)構(gòu)中的深度，確定該節(jié)點(diǎn)的縱向位置。

上述基于該節(jié)點(diǎn)在該內(nèi)容樹(shù)的樹(shù)結(jié)構(gòu)中的深度，確定該節(jié)點(diǎn)的縱向位置的實(shí)現(xiàn)過(guò)程可以包括：確定第二數(shù)值，該第二數(shù)值為該節(jié)點(diǎn)的高度與在縱向方向上相鄰兩個(gè)節(jié)點(diǎn)之間的間隔高度之和；將該第二數(shù)值與該節(jié)點(diǎn)在該內(nèi)容樹(shù)的樹(shù)結(jié)構(gòu)中的深度之間的乘積確定為該節(jié)點(diǎn)的縱向位置。

其中，與上述間隔寬度類似，在本公開(kāi)實(shí)施例中，每相鄰兩個(gè)節(jié)點(diǎn)之間的間隔高度也均相同，且可以由用戶根據(jù)實(shí)際需求自定義設(shè)置，也可以由終端默認(rèn)設(shè)置，本公開(kāi)實(shí)施例對(duì)此不做限定。這里可以將每相鄰兩個(gè)子節(jié)點(diǎn)之間的間隔寬度表示為MY。

其中，該節(jié)點(diǎn)在內(nèi)容樹(shù)的樹(shù)結(jié)構(gòu)中的深度可以由用戶根據(jù)實(shí)際需求自定義設(shè)置，例如，請(qǐng)參考圖2C，若該節(jié)點(diǎn)a的深度為0，則該節(jié)點(diǎn)b的深度為1，節(jié)點(diǎn)d的深度為2，以此類推，節(jié)點(diǎn)g的深度為3。

根據(jù)前文所述，終端獲取該節(jié)點(diǎn)在該內(nèi)容樹(shù)的樹(shù)結(jié)構(gòu)中的深度后，即可以確定該節(jié)點(diǎn)的縱向位置為D*(H+MY)，其中，D代表該節(jié)點(diǎn)在該內(nèi)容樹(shù)的樹(shù)結(jié)構(gòu)中的深度，H代表節(jié)點(diǎn)的高度，可以由用戶根據(jù)實(shí)際需求自定義設(shè)置，也可以由終端默認(rèn)設(shè)置。

(3)根據(jù)該節(jié)點(diǎn)的屬性信息和該網(wǎng)頁(yè)的網(wǎng)頁(yè)信息，確定該節(jié)點(diǎn)的軸向位置，該節(jié)點(diǎn)的屬性信息用于指示該節(jié)點(diǎn)在該排版結(jié)構(gòu)視圖中所處的層次。

上述根據(jù)該節(jié)點(diǎn)的屬性信息和該網(wǎng)頁(yè)的網(wǎng)頁(yè)信息，確定該節(jié)點(diǎn)的軸向位置的實(shí)現(xiàn)過(guò)程可以包括：根據(jù)該節(jié)點(diǎn)的屬性信息，確定該節(jié)點(diǎn)在該排版結(jié)構(gòu)視圖所處的層次，根據(jù)該網(wǎng)頁(yè)的頁(yè)面信息，確定該排版結(jié)構(gòu)視圖中包括的排版視圖的層數(shù)以及每層排版視圖的厚度，基于該節(jié)點(diǎn)在該排版結(jié)構(gòu)視圖所處的層次、該排版結(jié)構(gòu)視圖中包括的排版視圖的層數(shù)以及每層排版視圖的厚度，確定該節(jié)點(diǎn)的軸向位置。

其中，該節(jié)點(diǎn)的屬性信息可以由該網(wǎng)頁(yè)自身攜帶，根據(jù)該節(jié)點(diǎn)的屬性信息，可以基于CSS(Cascading Style Sheets，層疊樣式表)標(biāo)準(zhǔn)，來(lái)確定該節(jié)點(diǎn)在該排版結(jié)構(gòu)視圖所處的層次，例如，若該節(jié)點(diǎn)的屬性信息中攜帶z-index屬性，該z-index屬性的屬性值即用于指示該節(jié)點(diǎn)在該排版結(jié)構(gòu)視圖所處的層次?；蛘?，若該節(jié)點(diǎn)的屬性信息中攜帶定位屬性，同理，該定位屬性的屬性值也可以用于指示該節(jié)點(diǎn)在該排版結(jié)構(gòu)視圖所處的層次。

另外，由于該排版結(jié)構(gòu)視圖實(shí)際上包括多層，各層均具有一定的厚度，因此，終端不僅需要確定該節(jié)點(diǎn)處于該排版結(jié)構(gòu)視圖中的哪一層中，還需要確定各層的厚度，如此，該終端才可以確定該節(jié)點(diǎn)在軸向方向上的軸向位置。

其中，由于該網(wǎng)頁(yè)的頁(yè)面信息中包括了該排版結(jié)構(gòu)視圖中包括的排版視圖的層數(shù)以及每層排版視圖的厚度，因此，終端可以直接基于該網(wǎng)頁(yè)的頁(yè)面信息來(lái)確定排版視圖的層數(shù)以及每層排版視圖的厚度。

在確定了該節(jié)點(diǎn)在該排版結(jié)構(gòu)視圖中所處的層次、該排版結(jié)構(gòu)視圖中包括的排版視圖的層數(shù)以及每層排版視圖的厚度后，終端可以通過(guò)逐層疊加的方式確定該節(jié)點(diǎn)的軸向位置。

上述采用遞歸的方式，確定了內(nèi)容樹(shù)中各個(gè)節(jié)點(diǎn)的空間位置，保證了每個(gè)節(jié)點(diǎn)不重疊，并符合繪制的先后順序。

2032：基于該多個(gè)節(jié)點(diǎn)的節(jié)點(diǎn)標(biāo)識(shí)，從存儲(chǔ)的節(jié)點(diǎn)標(biāo)識(shí)與節(jié)點(diǎn)樣式之間的對(duì)應(yīng)關(guān)系中，獲取對(duì)應(yīng)的節(jié)點(diǎn)樣式。

其中，節(jié)點(diǎn)標(biāo)識(shí)可以用于唯一標(biāo)識(shí)一個(gè)節(jié)點(diǎn)。也即是，在該瀏覽器內(nèi)核中，可以存儲(chǔ)節(jié)點(diǎn)標(biāo)識(shí)與節(jié)點(diǎn)樣式之間的對(duì)應(yīng)關(guān)系，如此，該終端即可根據(jù)各個(gè)節(jié)點(diǎn)的節(jié)點(diǎn)標(biāo)識(shí)，獲取各自的節(jié)點(diǎn)標(biāo)識(shí)對(duì)應(yīng)的節(jié)點(diǎn)樣式。

其中，該節(jié)點(diǎn)樣式可以用于指示對(duì)應(yīng)的節(jié)點(diǎn)的顏色和大小等。

這里需要說(shuō)明的是，上述子步驟2031和子步驟2032僅僅是用于說(shuō)明確定該內(nèi)容樹(shù)包括的多個(gè)節(jié)點(diǎn)的空間位置以及該多個(gè)節(jié)點(diǎn)的節(jié)點(diǎn)樣式，在實(shí)際實(shí)現(xiàn)過(guò)程中，該子步驟2031和子步驟2032沒(méi)有先后執(zhí)行順序。

在步驟204中，按照該多個(gè)節(jié)點(diǎn)的空間位置和節(jié)點(diǎn)樣式，繪制該瀏覽器內(nèi)核的排版結(jié)構(gòu)視圖，顯示該排版結(jié)構(gòu)視圖。

終端確定上述內(nèi)容樹(shù)包括的多個(gè)節(jié)點(diǎn)中的空間位置以及獲取到該多個(gè)節(jié)點(diǎn)的節(jié)點(diǎn)樣式后，即可以繪制該瀏覽器內(nèi)核的排版結(jié)構(gòu)視圖，在一種可能的實(shí)現(xiàn)方式中，終端可以通過(guò)封裝了WebGL(Web Graphics Library，頁(yè)面圖像庫(kù))的Javascript(JS腳本)3D(Third Dimensions，三維)庫(kù)來(lái)繪制并展現(xiàn)該排版結(jié)構(gòu)視圖。

請(qǐng)參考圖2D，該圖2D示例性地示出了一種繪制的排版結(jié)構(gòu)視圖，該排版結(jié)構(gòu)視圖中包括多層，包括有LOT(Layout Object Tree，布局對(duì)象樹(shù))1、PLT(Paint Layer Tree，繪制層)2、CLM(Composited Layout Mapping，合成布局映射)3、GLT(Graphics Layer Tree，圖形層樹(shù))4和PLD(Page Layout Details，頁(yè)面布局細(xì)節(jié))5。其中，各層可以代表網(wǎng)頁(yè)排版過(guò)程中的各個(gè)階段。

需要說(shuō)明的是，上述LOT和PLD的內(nèi)部可能包括多層，也即是，在上述根據(jù)頁(yè)面的網(wǎng)頁(yè)信息，確定該排版結(jié)構(gòu)視圖包括的層數(shù)過(guò)程中，實(shí)際上包括確定該LOT和PLD內(nèi)部包括的層數(shù)，即該LOT和PLD內(nèi)部包括的層數(shù)可以根據(jù)頁(yè)面的網(wǎng)頁(yè)信息確定，并且，該LOT和PLD包括的每層的厚度也可以根據(jù)該網(wǎng)頁(yè)的頁(yè)面信息來(lái)確定。

上述由于終端是根據(jù)各個(gè)階段的頁(yè)面排版數(shù)據(jù)構(gòu)建包括多個(gè)節(jié)點(diǎn)的內(nèi)容樹(shù)，即所繪制的該排版結(jié)構(gòu)視圖將各個(gè)階段的頁(yè)面排版數(shù)據(jù)直接關(guān)聯(lián)起來(lái)，因此，保證了頁(yè)面排版數(shù)據(jù)的完整性。

至此，本公開(kāi)實(shí)施例實(shí)現(xiàn)了瀏覽器內(nèi)核的排版結(jié)構(gòu)展現(xiàn)方法。另外，在實(shí)際實(shí)現(xiàn)過(guò)程中，可能還需要對(duì)該多個(gè)節(jié)點(diǎn)中的某個(gè)節(jié)點(diǎn)進(jìn)行進(jìn)一步地優(yōu)化，為此，在本公開(kāi)實(shí)施例中，還提供了節(jié)點(diǎn)信息顯示功能，具體請(qǐng)參見(jiàn)如下步驟205和步驟206。

在步驟205中，當(dāng)檢測(cè)到目標(biāo)節(jié)點(diǎn)的預(yù)設(shè)操作時(shí)，獲取該目標(biāo)節(jié)點(diǎn)的節(jié)點(diǎn)信息，該目標(biāo)節(jié)點(diǎn)為該排版結(jié)構(gòu)視圖中的任一節(jié)點(diǎn)，該節(jié)點(diǎn)信息包括該目標(biāo)節(jié)點(diǎn)的顯示位置、大小和顯示格式。

其中，該預(yù)設(shè)操作可以由用戶根據(jù)實(shí)際需求自定義設(shè)置，也可以由終端默認(rèn)設(shè)置，本公開(kāi)實(shí)施例對(duì)此不做限定。例如，該預(yù)設(shè)操作可以為鼠標(biāo)點(diǎn)擊操作等。

需要說(shuō)明的是，在本公開(kāi)實(shí)施例中，僅是以該節(jié)點(diǎn)信息包括該目標(biāo)節(jié)點(diǎn)的顯示位置、大小和顯示格式為例進(jìn)行說(shuō)明，在另一實(shí)施例中，該節(jié)點(diǎn)信息還可以包括其它信息，本公開(kāi)實(shí)施例對(duì)此不做限定。

在步驟206中，顯示該節(jié)點(diǎn)信息。

其中，在一種可能的實(shí)現(xiàn)方式中，在顯示該節(jié)點(diǎn)信息時(shí)，可以以懸浮框等方式，在該目標(biāo)節(jié)點(diǎn)的附近對(duì)該目標(biāo)節(jié)點(diǎn)的節(jié)點(diǎn)信息進(jìn)行顯示。

另外，在顯示目標(biāo)節(jié)點(diǎn)的節(jié)點(diǎn)信息時(shí)，還可以基于瀏覽器內(nèi)核的邏輯關(guān)系，根據(jù)各種過(guò)濾條件過(guò)濾要展現(xiàn)的節(jié)點(diǎn)和節(jié)點(diǎn)信息，或者，根據(jù)上述建立的關(guān)聯(lián)性過(guò)濾要展現(xiàn)的節(jié)點(diǎn)和節(jié)點(diǎn)信息。其中，該過(guò)濾條件可以包括浮動(dòng)性、定位方式、video(視頻)標(biāo)簽以及HTML(Hyper Text Markup Language，超文本標(biāo)記語(yǔ)言)標(biāo)簽上的ID(Identification，身份標(biāo)識(shí))和類屬性等，建立的關(guān)聯(lián)性可以包括節(jié)點(diǎn)和渲染層的關(guān)聯(lián)關(guān)系等，本公開(kāi)實(shí)施例對(duì)此不作詳細(xì)介紹。

在本公開(kāi)實(shí)施例中，當(dāng)在網(wǎng)頁(yè)中檢測(cè)到排版結(jié)構(gòu)展現(xiàn)指令時(shí)，說(shuō)明需要對(duì)顯示該網(wǎng)頁(yè)的瀏覽器內(nèi)核的排版結(jié)構(gòu)進(jìn)行分析，在該種情況下，按照該瀏覽器內(nèi)核包括的多個(gè)階段的數(shù)據(jù)屬性，獲取該網(wǎng)頁(yè)在排版過(guò)程中各個(gè)階段的頁(yè)面排版數(shù)據(jù)，以根據(jù)獲取的該頁(yè)面排版數(shù)據(jù)構(gòu)建包括多個(gè)節(jié)點(diǎn)的內(nèi)容樹(shù)，并確定該多個(gè)節(jié)點(diǎn)的空間位置和節(jié)點(diǎn)樣式，從而繪制出該瀏覽器內(nèi)核的排版結(jié)構(gòu)視圖，由于該排版結(jié)構(gòu)視圖清晰的展示了網(wǎng)頁(yè)在排版過(guò)程中的各個(gè)階段，因此，提高了排版結(jié)構(gòu)的直觀性。

圖3A是根據(jù)一示例性實(shí)施例示出的一種瀏覽器內(nèi)核的排版結(jié)構(gòu)展現(xiàn)裝置框圖。參照?qǐng)D3A，該裝置包括第一獲取模塊310，構(gòu)建模塊320、確定模塊330和繪制模塊340。

第一獲取模塊310，用于當(dāng)在網(wǎng)頁(yè)中檢測(cè)到排版結(jié)構(gòu)展現(xiàn)指令時(shí)，按照瀏覽器內(nèi)核包括的多個(gè)階段的數(shù)據(jù)屬性，獲取該網(wǎng)頁(yè)在排版的過(guò)程中各個(gè)階段的頁(yè)面排版數(shù)據(jù)，該瀏覽器內(nèi)核為當(dāng)前顯示該網(wǎng)頁(yè)的瀏覽器的內(nèi)核；

構(gòu)建模塊320，用于基于該第一獲取模塊310獲取的該各個(gè)階段的頁(yè)面排版數(shù)據(jù)，構(gòu)建內(nèi)容樹(shù)，該內(nèi)容樹(shù)中包括多個(gè)節(jié)點(diǎn)；

確定模塊330，用于確定該構(gòu)建模塊320構(gòu)建的該內(nèi)容樹(shù)包括的多個(gè)節(jié)點(diǎn)的空間位置以及該多個(gè)節(jié)點(diǎn)的節(jié)點(diǎn)樣式；

繪制模塊340，用于按照該確定模塊330確定的該多個(gè)節(jié)點(diǎn)的空間位置和節(jié)點(diǎn)樣式，繪制該瀏覽器內(nèi)核的排版結(jié)構(gòu)視圖，顯示該排版結(jié)構(gòu)視圖。

可選地，請(qǐng)參考圖3B至圖3C，該確定模塊330包括：

確定子模塊330a，用于對(duì)于該內(nèi)容樹(shù)包括的多個(gè)節(jié)點(diǎn)中的每個(gè)節(jié)點(diǎn)，確定該節(jié)點(diǎn)的橫向位置、縱向位置和軸向位置；

獲取子模塊330b，用于基于該多個(gè)節(jié)點(diǎn)的節(jié)點(diǎn)標(biāo)識(shí)，從存儲(chǔ)的節(jié)點(diǎn)標(biāo)識(shí)與節(jié)點(diǎn)樣式之間的對(duì)應(yīng)關(guān)系中，獲取對(duì)應(yīng)的節(jié)點(diǎn)樣式。

可選地，該確定子模塊330a用于：

確定該節(jié)點(diǎn)的寬度和節(jié)點(diǎn)距離，基于該節(jié)點(diǎn)的寬度和該節(jié)點(diǎn)距離，確定該節(jié)點(diǎn)的橫向位置，該節(jié)點(diǎn)距離是指該節(jié)點(diǎn)在橫向方向上與坐標(biāo)原點(diǎn)之間的距離；

基于該節(jié)點(diǎn)在該內(nèi)容樹(shù)的樹(shù)結(jié)構(gòu)中的深度，確定該節(jié)點(diǎn)的縱向位置；

根據(jù)該節(jié)點(diǎn)的屬性信息和該網(wǎng)頁(yè)的網(wǎng)頁(yè)信息，確定該節(jié)點(diǎn)的軸向位置，該節(jié)點(diǎn)的屬性信息用于指示該節(jié)點(diǎn)在該排版結(jié)構(gòu)視圖中所處的層次。

可選地，該確定子模塊330a用于：

判斷該節(jié)點(diǎn)是否包括有子節(jié)點(diǎn)，當(dāng)該節(jié)點(diǎn)不包括有子節(jié)點(diǎn)時(shí)，確定該節(jié)點(diǎn)的寬度為第一預(yù)設(shè)寬度；當(dāng)該節(jié)點(diǎn)包括有N個(gè)子節(jié)點(diǎn)時(shí)，將該N個(gè)子節(jié)點(diǎn)的寬度和N-1個(gè)子節(jié)點(diǎn)之間的間隔寬度之和確定為該節(jié)點(diǎn)的寬度，該N為大于或等于1的正整數(shù)；

判斷該節(jié)點(diǎn)是否屬于父節(jié)點(diǎn)的子節(jié)點(diǎn)，當(dāng)該節(jié)點(diǎn)不屬于該父節(jié)點(diǎn)的子節(jié)點(diǎn)時(shí)，確定該節(jié)點(diǎn)的節(jié)點(diǎn)距離為預(yù)設(shè)長(zhǎng)度，當(dāng)該節(jié)點(diǎn)屬于該父節(jié)點(diǎn)的第i個(gè)子節(jié)點(diǎn)時(shí)，確定第一數(shù)值，并將該父節(jié)點(diǎn)的節(jié)點(diǎn)距離與該第一數(shù)值之和確定為該節(jié)點(diǎn)的節(jié)點(diǎn)距離，該第一數(shù)值為該父節(jié)點(diǎn)包括的子節(jié)點(diǎn)中前i-1個(gè)子節(jié)點(diǎn)的寬度和該前i-1個(gè)子節(jié)點(diǎn)之間的間隔寬度之和。

可選地，該確定子模塊330a用于：

基于該節(jié)點(diǎn)的寬度和該節(jié)點(diǎn)距離，通過(guò)第一指定公式，確定該節(jié)點(diǎn)的橫向位置；

該第一指定公式為：

其中，該X_i為該節(jié)點(diǎn)的橫向位置，該offset為該節(jié)點(diǎn)的節(jié)點(diǎn)距離，該W_i為該節(jié)點(diǎn)的寬度，該W為該第一預(yù)設(shè)寬度。

可選地，該確定子模塊330a用于：

確定第二數(shù)值，該第二數(shù)值為該節(jié)點(diǎn)的高度與在縱向方向上相鄰兩個(gè)節(jié)點(diǎn)之間的間隔高度之和；

將該第二數(shù)值與該節(jié)點(diǎn)在該內(nèi)容樹(shù)的樹(shù)結(jié)構(gòu)中的深度之間的乘積確定為該節(jié)點(diǎn)的縱向位置。

可選地，該確定子模塊330a用于：

根據(jù)該節(jié)點(diǎn)的屬性信息，確定該節(jié)點(diǎn)在該排版結(jié)構(gòu)視圖所處的層次；

根據(jù)該網(wǎng)頁(yè)的頁(yè)面信息，確定該排版結(jié)構(gòu)視圖中包括的排版視圖的層數(shù)以及每層排版視圖的厚度；

基于該節(jié)點(diǎn)在該排版結(jié)構(gòu)視圖所處的層次、該排版結(jié)構(gòu)視圖中包括的排版視圖的層數(shù)以及每層排版視圖的厚度，確定該節(jié)點(diǎn)的軸向位置。

可選地，該裝置還包括：

第二獲取模塊350，用于當(dāng)檢測(cè)到目標(biāo)節(jié)點(diǎn)的預(yù)設(shè)操作時(shí)，獲取該目標(biāo)節(jié)點(diǎn)的節(jié)點(diǎn)信息，該目標(biāo)節(jié)點(diǎn)為該排版結(jié)構(gòu)視圖中的任一節(jié)點(diǎn)，該節(jié)點(diǎn)信息包括該目標(biāo)節(jié)點(diǎn)的顯示位置、大小和顯示格式；

顯示模塊360，用于顯示該節(jié)點(diǎn)信息。

在本公開(kāi)實(shí)施例中，當(dāng)在網(wǎng)頁(yè)中檢測(cè)到排版結(jié)構(gòu)展現(xiàn)指令時(shí)，說(shuō)明需要對(duì)顯示該網(wǎng)頁(yè)的瀏覽器內(nèi)核的排版結(jié)構(gòu)進(jìn)行分析，在該種情況下，按照該瀏覽器內(nèi)核包括的多個(gè)階段的數(shù)據(jù)屬性，獲取該網(wǎng)頁(yè)在排版過(guò)程中各個(gè)階段的頁(yè)面排版數(shù)據(jù)，以根據(jù)獲取的該頁(yè)面排版數(shù)據(jù)構(gòu)建包括多個(gè)節(jié)點(diǎn)的內(nèi)容樹(shù)，并確定該多個(gè)節(jié)點(diǎn)的空間位置和節(jié)點(diǎn)樣式，從而繪制出該瀏覽器內(nèi)核的排版結(jié)構(gòu)視圖，由于該排版結(jié)構(gòu)視圖清晰的展示了網(wǎng)頁(yè)在排版過(guò)程中的各個(gè)階段，因此，提高了排版結(jié)構(gòu)的直觀性。

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

圖4是根據(jù)一示例性實(shí)施例示出的一種瀏覽器內(nèi)核的排版結(jié)構(gòu)展現(xiàn)裝置400的框圖。例如，裝置400可以是移動(dòng)電話，計(jì)算機(jī)，數(shù)字廣播終端，消息收發(fā)設(shè)備，游戲控制臺(tái)，平板設(shè)備，醫(yī)療設(shè)備，健身設(shè)備，個(gè)人數(shù)字助理等。

參照?qǐng)D4，裝置400可以包括以下一個(gè)或多個(gè)組件：處理組件402，存儲(chǔ)器404，電源組件406，多媒體組件408，音頻組件410，輸入/輸出(I/O)的接口412，傳感器組件414，以及通信組件416。

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

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

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

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

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

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

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

通信組件416被配置為便于裝置400和其他設(shè)備之間有線或無(wú)線方式的通信。裝置400可以接入基于通信標(biāo)準(zhǔn)的無(wú)線網(wǎng)絡(luò)，如WiFi，2G或3G，或它們的組合。在一個(gè)示例性實(shí)施例中，通信組件416經(jīng)由廣播信道接收來(lái)自外部廣播管理系統(tǒng)的廣播信號(hào)或廣播相關(guān)信息。在一個(gè)示例性實(shí)施例中，所述通信組件416還包括近場(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í)施例中，裝置400可以被一個(gè)或多個(gè)應(yīng)用專用集成電路(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ǔ)器404，上述指令可由裝置400的處理器420執(zhí)行以完成上述方法。例如，所述非臨時(shí)性計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)可以是ROM、隨機(jī)存取存儲(chǔ)器(RAM)、CD-ROM、磁帶、軟盤(pán)和光數(shù)據(jù)存儲(chǔ)設(shè)備等。

一種非臨時(shí)性計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)，當(dāng)所述存儲(chǔ)介質(zhì)中的指令由移動(dòng)終端的處理器執(zhí)行時(shí)，使得移動(dòng)終端能夠執(zhí)行上述圖1或圖2A實(shí)施例所涉及的瀏覽器內(nèi)核的排版結(jié)構(gòu)展現(xiàn)方法。

本領(lǐng)域技術(shù)人員在考慮說(shuō)明書(shū)及實(shí)踐這里公開(kāi)的發(fā)明后，將容易想到本公開(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)限制。