浏览器内核的排版结构展现方法及装置与流程

本公开涉及计算机技术领域，尤其涉及一种浏览器内核的排版结构展现方法及装置。

背景技术：

随着计算机技术的快速发展，浏览器逐渐成为用户浏览网页的重要工具之一。作为浏览器的核心部分，浏览器内核主要用于渲染网页，也即是，浏览器内核决定了浏览器如何排版并显示网页。

浏览器内核通常包括多种，其中，一些浏览器内核可以通过内部的排版结构来描述网页的排版过程，例如，WebKit内核等。在实际应用过程中，为了能够定位浏览器工作过程中可能出现的故障，或者对浏览器进行优化，需要对浏览器内核进行分析。目前，WebKit内核中存在一组调用接口，通过该调用接口可以导出WebKit内核的排版结构，导出的排版结构为纯文本数据，基于该纯文本数据，可以对浏览器内核进行分析。

技术实现要素：

为克服相关技术中存在的问题，本公开提供一种浏览器内核的排版结构展现方法及装置。

第一方面，提供一种浏览器内核的排版结构展现方法，所述方法包括：

当在网页中检测到排版结构展现指令时，按照浏览器内核包括的多个阶段的数据属性，获取所述网页在排版的过程中各个阶段的页面排版数据，所述浏览器内核为当前显示所述网页的浏览器的内核；

基于所述各个阶段的页面排版数据，构建内容树，所述内容树中包括多个节点；

确定所述内容树包括的多个节点的空间位置以及所述多个节点的节点样式；

按照所述多个节点的空间位置和节点样式，绘制所述浏览器内核的排版结构视图，显示所述排版结构视图。

可选地，所述确定所述内容树包括的多个节点的空间位置以及所述多个节点的节点样式，包括：

对于所述内容树包括的多个节点中的每个节点，确定所述节点的横向位置、纵向位置和轴向位置；

基于所述多个节点的节点标识，从存储的节点标识与节点样式之间的对应关系中，获取对应的节点样式。

可选地，所述确定所述节点的横向位置、纵向位置和轴向位置，包括：

确定所述节点的宽度和节点距离，基于所述节点的宽度和所述节点距离，确定所述节点的横向位置，所述节点距离是指所述节点在横向方向上与坐标原点之间的距离；

基于所述节点在所述内容树的树结构中的深度，确定所述节点的纵向位置；

根据所述节点的属性信息和所述网页的网页信息，确定所述节点的轴向位置，所述节点的属性信息用于指示所述节点在所述排版结构视图中所处的层次。

可选地，所述确定所述节点的宽度和节点距离，包括：

判断所述节点是否包括有子节点，当所述节点不包括有子节点时，确定所述节点的宽度为第一预设宽度；当所述节点包括有N个子节点时，将所述N个子节点的宽度和N-1个子节点之间的间隔宽度之和确定为所述节点的宽度，所述N为大于或等于1的正整数；

判断所述节点是否属于父节点的子节点，当所述节点不属于所述父节点的子节点时，确定所述节点的节点距离为预设长度，当所述节点属于所述父节点的第i个子节点时，确定第一数值，并将所述父节点的节点距离与所述第一数值之和确定为所述节点的节点距离，所述第一数值为所述父节点包括的子节点中前i-1个子节点的宽度和所述前i-1个子节点之间的间隔宽度之和。

可选地，所述基于所述节点的宽度和所述节点距离，确定所述节点的横向位置，包括：

基于所述节点的宽度和所述节点距离，通过第一指定公式，确定所述节点的横向位置；

所述第一指定公式为：

其中，所述X_i为所述节点的横向位置，所述offset为所述节点的节点距离，所述W_i为所述节点的宽度，所述W为所述第一预设宽度。

可选地，所述基于所述节点在所述内容树的树结构中的深度，确定所述节点的纵向位置，包括：

确定第二数值，所述第二数值为所述节点的高度与在纵向方向上相邻两个节点之间的间隔高度之和；

将所述第二数值与所述节点在所述内容树的树结构中的深度之间的乘积确定为所述节点的纵向位置。

可选地，所述根据所述节点的属性信息和所述网页的网页内容，确定所述节点的轴向位置，包括：

根据所述节点的属性信息，确定所述节点在所述排版结构视图所处的层次；

根据所述网页的页面信息，确定所述排版结构视图中包括的排版视图的层数以及每层排版视图的厚度；

基于所述节点在所述排版结构视图所处的层次、所述排版结构视图中包括的排版视图的层数以及每层排版视图的厚度，确定所述节点的轴向位置。

可选地，所述方法还包括：

当检测到目标节点的预设操作时，获取所述目标节点的节点信息，所述目标节点为所述排版结构视图中的任一节点，所述节点信息包括所述目标节点的显示位置、大小和显示格式；

显示所述节点信息。

第二方面，提供一种浏览器内核的排版结构展现装置，所述装置包括：

第一获取模块，用于当在网页中检测到排版结构展现指令时，按照浏览器内核包括的多个阶段的数据属性，获取所述网页在排版的过程中各个阶段的页面排版数据，所述浏览器内核为当前显示所述网页的浏览器的内核；

构建模块，用于基于所述第一获取模块获取的所述各个阶段的页面排版数据，构建内容树，所述内容树中包括多个节点；

确定模块，用于确定所述构建模块构建的所述内容树包括的多个节点的空间位置以及所述多个节点的节点样式；

绘制模块，用于按照所述确定模块确定的所述多个节点的空间位置和节点样式，绘制所述浏览器内核的排版结构视图，显示所述排版结构视图。

可选地，所述确定模块包括：

确定子模块，用于对于所述内容树包括的多个节点中的每个节点，确定所述节点的横向位置、纵向位置和轴向位置；

获取子模块，用于基于所述多个节点的节点标识，从存储的节点标识与节点样式之间的对应关系中，获取对应的节点样式。

可选地，所述确定子模块用于：

确定所述节点的宽度和节点距离，基于所述节点的宽度和所述节点距离，确定所述节点的横向位置，所述节点距离是指所述节点在横向方向上与坐标原点之间的距离；

基于所述节点在所述内容树的树结构中的深度，确定所述节点的纵向位置；

根据所述节点的属性信息和所述网页的网页信息，确定所述节点的轴向位置，所述节点的属性信息用于指示所述节点在所述排版结构视图中所处的层次。

可选地，所述确定子模块用于：

判断所述节点是否包括有子节点，当所述节点不包括有子节点时，确定所述节点的宽度为第一预设宽度；当所述节点包括有N个子节点时，将所述N个子节点的宽度和N-1个子节点之间的间隔宽度之和确定为所述节点的宽度，所述N为大于或等于1的正整数；

判断所述节点是否属于父节点的子节点，当所述节点不属于所述父节点的子节点时，确定所述节点的节点距离为预设长度，当所述节点属于所述父节点的第i个子节点时，确定第一数值，并将所述父节点的节点距离与所述第一数值之和确定为所述节点的节点距离，所述第一数值为所述父节点包括的子节点中前i-1个子节点的宽度和所述前i-1个子节点之间的间隔宽度之和。

可选地，所述确定子模块用于：

基于所述节点的宽度和所述节点距离，通过第一指定公式，确定所述节点的横向位置；

所述第一指定公式为：

其中，所述X_i为所述节点的横向位置，所述offset为所述节点的节点距离，所述W_i为所述节点的宽度，所述W为所述第一预设宽度。

可选地，所述确定子模块用于：

确定第二数值，所述第二数值为所述节点的高度与在纵向方向上相邻两个节点之间的间隔高度之和；

将所述第二数值与所述节点在所述内容树的树结构中的深度之间的乘积确定为所述节点的纵向位置。

可选地，所述确定子模块用于：

根据所述节点的属性信息，确定所述节点在所述排版结构视图所处的层次；

根据所述网页的页面信息，确定所述排版结构视图中包括的排版视图的层数以及每层排版视图的厚度；

基于所述节点在所述排版结构视图所处的层次、所述排版结构视图中包括的排版视图的层数以及每层排版视图的厚度，确定所述节点的轴向位置。

可选地，所述装置还包括：

第二获取模块，用于当检测到目标节点的预设操作时，获取所述目标节点的节点信息，所述目标节点为所述排版结构视图中的任一节点，所述节点信息包括所述目标节点的显示位置、大小和显示格式；

显示模块，用于显示所述节点信息。

第三方面，提供一种浏览器内核的排版结构展现装置，所述装置包括：

处理器；

用于存储处理器可执行指令的存储器；

其中，所述处理器被配置为：

当在网页中检测到排版结构展现指令时，按照浏览器内核包括的多个阶段的数据属性，获取所述网页在排版的过程中各个阶段的页面排版数据，所述浏览器内核为当前显示所述网页的浏览器的内核；

基于所述各个阶段的页面排版数据，构建内容树，所述内容树中包括多个节点；

确定所述内容树包括的多个节点的空间位置以及所述多个节点的节点样式；

按照所述多个节点的空间位置和节点样式，绘制所述浏览器内核的排版结构视图，显示所述排版结构视图。

本公开的实施例提供的技术方案可以包括以下有益效果：当在网页中检测到排版结构展现指令时，说明需要对显示该网页的浏览器内核的排版结构进行分析，在该种情况下，按照该浏览器内核包括的多个阶段的数据属性，获取该网页在排版过程中各个阶段的页面排版数据，以根据获取的该页面排版数据构建包括多个节点的内容树，并确定该多个节点的空间位置和节点样式，从而绘制出该浏览器内核的排版结构视图，由于该排版结构视图清晰的展示了网页在排版过程中的各个阶段，因此，提高了排版结构的直观性。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。

图1是根据一示例性实施例示出的一种浏览器内核的排版结构展现方法的流程图。

图2A是根据另一示例性实施例示出的一种浏览器内核的排版结构展现方法的流程图。

图2B是图2A实施例所涉及的一种JSON格式的页面排版数据的示意图。

图2C是图2A实施例所涉及的一种内容树的树结构示意图。

图2D是图2A实施例所涉及的一种排版结构视图的显示示意图。

图3A是根据一示例性实施例示出的一种浏览器内核的排版结构展现装置的框图。

图3B是根据一示例性实施例示出的一种确定模块330的框图。

图3C是根据另一示例性实施例示出的一种浏览器内核的排版结构展现装置的框图。

图4是根据一示例性实施例示出的一种浏览器内核的排版结构展现装置400的框图。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

在相关技术中，由于通过调用接口导出的WebKit内核的排版结构为纯文本数据，因此，直观性较差，为此，本公开实施例提供了一种浏览器内核的排版结构展现方法，解决了纯文本数据直观性较差的问题。本公开实施例所提供的浏览器内核的排版结构展现方法可以由终端执行，该终端至少可以用于运行浏览器，另外，该终端还具有显示功能。该终端可以为诸如手机、平板电脑和计算机等之类的终端，本公开实施例对此不做限定。

在实际应用中，对于初学者用户来说，难以了解浏览器内核的排版结构，为此，在本公开实施例中，可以在浏览器上设置有展现选项，当用户想要浏览该浏览器内核的排版结构时，可以触发该展现选项，此时，终端接收到该排版结构展现指令，开始执行后续步骤，以对浏览器内核的排版结构进行展现，如此，使得用户可以直观地、快速地了解浏览器内核的排版结构。

图1是根据一示例性实施例示出的一种浏览器内核的排版结构展现方法的流程图，如图1所示，该浏览器内核的排版结构展现可以包括以下步骤。

在步骤101中，当在网页中检测到排版结构展现指令时，按照浏览器内核包括的多个阶段的数据属性，获取该网页在排版的过程中各个阶段的页面排版数据，该浏览器内核为当前显示该网页的浏览器的内核。

在步骤102中，基于该各个阶段的页面排版数据，构建内容树，该内容树中包括多个节点。

在步骤103中，确定该内容树包括的多个节点的空间位置以及该多个节点的节点样式。

在步骤104中，按照该多个节点的空间位置和节点样式，绘制该浏览器内核的排版结构视图，显示该排版结构视图。

在本公开实施例中，当在网页中检测到排版结构展现指令时，说明需要对显示该网页的浏览器内核的排版结构进行分析，在该种情况下，按照该浏览器内核包括的多个阶段的数据属性，获取该网页在排版过程中各个阶段的页面排版数据，以根据获取的该页面排版数据构建包括多个节点的内容树，并确定该多个节点的空间位置和节点样式，从而绘制出该浏览器内核的排版结构视图，由于该排版结构视图清晰的展示了网页在排版过程中的各个阶段，因此，提高了排版结构的直观性。

可选地，确定该内容树包括的多个节点的空间位置以及该多个节点的节点样式，包括：

对于该内容树包括的多个节点中的每个节点，确定该节点的横向位置、纵向位置和轴向位置；

基于该多个节点的节点标识，从存储的节点标识与节点样式之间的对应关系中，获取对应的节点样式。

上述通过确定该节点的横向位置、纵向位置和轴向位置，即可以确定该节点的空间位置，以及根据存储的节点标识与节点样式之间的对应关系中，即可以获取到各个节点的节点标识对应的节点样式。

可选地，确定该节点的横向位置、纵向位置和轴向位置，包括：

确定该节点的宽度和节点距离，基于该节点的宽度和该节点距离，确定该节点的横向位置，该节点距离是指该节点在横向方向上与坐标原点之间的距离；

基于该节点在该内容树的树结构中的深度，确定该节点的纵向位置；

根据该节点的属性信息和该网页的网页信息，确定该节点的轴向位置，该节点的属性信息用于指示该节点在该排版结构视图中所处的层次。

上述基于该节点的宽度和该节点距离，实现了对该节点的横向位置的确定，根据该节点在该内容树的树结构中的深度，实现了对该节点的纵向位置的确定，以及根据该节点的属性信息和该网页的网页信息，实现了对该节点的轴向位置的确定，从而确定了该节点的空间位置。

可选地，确定该节点的宽度和节点距离，包括：

判断该节点是否包括有子节点，当该节点不包括有子节点时，确定该节点的宽度为第一预设宽度；当该节点包括有N个子节点时，将该N个子节点的宽度和N-1个子节点之间的间隔宽度之和确定为该节点的宽度，该N为大于或等于1的正整数；

判断该节点是否属于父节点的子节点，当该节点不属于该父节点的子节点时，确定该节点的节点距离为预设长度，当该节点属于该父节点的第i个子节点时，确定第一数值，并将该父节点的节点距离与该第一数值之和确定为该节点的节点距离，该第一数值为该父节点包括的子节点中前i-1个子节点的宽度和该前i-1个子节点之间的间隔宽度之和。

上述采用递归的方式，确定了内容树中各个节点的空间位置，保证了每个节点不重叠，并符合绘制的先后顺序。

可选地，基于该节点的宽度和该节点距离，确定该节点的横向位置，包括：

基于该节点的宽度和该节点距离，通过第一指定公式，确定该节点的横向位置；

该第一指定公式为：

其中，该X_i为该节点的横向位置，该offset为该节点的节点距离，该W_i为该节点的宽度，该W为该第一预设宽度。

上述基于该节点的宽度和该节点距离，通过第一指定公式，实现了对该节点的横向位置的确定。

可选地，基于该节点在该内容树的树结构中的深度，确定该节点的纵向位置，包括：

确定第二数值，该第二数值为该节点的高度与在纵向方向上相邻两个节点之间的间隔高度之和；

将该第二数值与该节点在该内容树的树结构中的深度之间的乘积确定为该节点的纵向位置。

上述根据节点的高度、在纵向方向上相邻两个节点之间的间隔高度以及该节点在该内容树的树结构中的深度，实现了对该节点的纵向位置的确定。

可选地，根据该节点的属性信息和该网页的网页内容，确定该节点的轴向位置，包括：

根据该节点的属性信息，确定该节点在该排版结构视图所处的层次；

根据该网页的页面信息，确定该排版结构视图中包括的排版视图的层数以及每层排版视图的厚度；

基于该节点在该排版结构视图所处的层次、该排版结构视图中包括的排版视图的层数以及每层排版视图的厚度，确定该节点的轴向位置。

上述通过确定该节点在该排版结构视图中所处的层次、该排版结构视图包括的层数以及各层的厚度，实现了对该节点在轴向方向上的轴向位置的确定。

可选地，该方法还包括：

当检测到目标节点的预设操作时，获取该目标节点的节点信息，该目标节点为该排版结构视图中的任一节点，该节点信息包括该目标节点的显示位置、大小和显示格式；

显示该节点信息。

上述在显示该排版结构视图之后，还可以对该排版结构视图中的任一节点的节点信息进行显示，以便于对该节点可以进行进一步地优化等处理。

上述所有可选技术方案，均可按照任意结合形成本公开的可选实施例，本公开实施例对此不再一一赘述。

图2A是根据另一示例性实施例示出的一种浏览器内核的排版结构展现方法的流程图，如图2A所示，该浏览器内核的排版结构展现方法用于终端中，该浏览器内核的排版结构展现方法包括以下步骤：

在步骤201中，当在网页中检测到排版结构展现指令时，按照浏览器内核包括的多个阶段的数据属性，获取该网页在排版的过程中各个阶段的页面排版数据，该浏览器内核为当前显示该网页的浏览器的内核。

其中，该排版结构展现指令可以由用户触发，该用户可以通过指定操作触发，该指定操作可以包括点击操作、滑动操作等，本公开实施例对此不做限定。

当终端在网页中检测到排版结构展现指令时，可以确定用户可能需要对当前显示该网页的浏览器的内核进行分析，为此，终端获取该网页在排版的过程中各个阶段的页面排版数据。

网页在排版过程中，实际上可以包括多个阶段，例如，可能包括排版阶段、渲染阶段、合成阶段等等，且该多个阶段中的每个阶段的数据属性可能均不同，其中，该各个阶段的数据属性可以用于指示各个阶段所使用的数据的类型。终端在接收到排版结构展现指令时，按照该多个阶段的数据属性，来获取该多个阶段中的各个阶段的页面排版数据。

其中，终端获取该多个阶段中的各个阶段的页面排版数据可以是在该浏览器的内核中实现，在一种可能的实现方式中，该终端获取到各个阶段的页面排版数据后，可以将该各个阶段的页面排版数据通过指定格式进行存储，并建立各个阶段的页面排版数据之间的关联关系，以便后续处理。其中，该指定格式包括JSON(JavaScript Object Notation，JS脚本对象表示法)格式。

例如，请参考图2B，该图2B是图2A实施例所涉及的一种JSON格式的页面排版数据的示意图，其中，标号1、2、3和4分别用于表示不同阶段且每个阶段对应排版结构视图的不同层，从该图2B中可以看出，各个阶段对应不同的数据属性。

在步骤202中，基于该各个阶段的页面排版数据，构建内容树，该内容树中包括多个节点。

终端获取网页在排版的过程中的各个阶段的页面排版数据后，需要根据所获取的各个阶段的页面排版数据，构建内容树，请参考图2C，该内容树中包括多个节点a、b、c、d、e、f、g、h。

需要说明的是，上述图2C仅是示例性地示出了一种内容树的树结构的示意图，在实际实现时，该内容树的树结构可以为其它形式，且该内容树中还可能包括更多的节点，图2C不再一一示出。

其中，对于该多个节点中的每个节点，该节点可以代表一个DOM(Document Object Model，文档对象模型)元素，不难理解，一个DOM元素可以用于指示网页中的一个标签。

在步骤203中，确定该内容树包括的多个节点的空间位置以及该多个节点的节点样式。

其中，确定该内容树包括的多个节点的空间位置以及该多个节点的节点样式的具体实现可以包括如下子步骤2031和子步骤2032：

2031：对于该内容树包括的多个节点中的每个节点，确定该节点的横向位置、纵向位置和轴向位置。

不难理解，在三维空间中，节点的空间位置需要三个方向的位置来确定，即横向位置、纵向位置和轴向位置。在三维坐标系中，该横向位置通常又被称为在X轴方向上的位置，纵向位置通常又被称为在Y轴方向上的位置，轴线位置通常又被称为在Z轴方向上的位置，在本公开实施例中，以该空间位置通过横向位置、纵向位置和轴向位置确定来进行描述。其中，确定该节点的横向位置、纵向位置和轴向位置的实现过程请参见如下(1)-(3)：

(1)确定该节点的宽度和节点距离，基于该节点的宽度和该节点距离，确定该节点的横向位置，该节点距离是指该节点在横向方向上与坐标原点之间的距离。

其中，在该内容树的树结构中，该节点可能为父节点，也可能为子节点，根据该节点的性质不同，确定该节点的宽度和节点距离可以包括如下实现过程：

在确定该节点的宽度的过程中，可以基于该内容树的树结构自底向上，采用递归方式来确定，也即是：判断该节点是否包括有子节点，当该节点不包括有子节点时，确定该节点的宽度为第一预设宽度；当该节点包括有N个子节点时，将该N个子节点的宽度和N-1个子节点之间的间隔宽度之和确定为该节点的宽度，该N为大于或等于1的正整数。

其中，上述第一预设宽度可以由用户根据实际需求自定义设置，也可以由终端默认设置，本公开实施例对此不做限定。

另外，上述每相邻两个子节点之间的间隔宽度均相同，该间隔宽度可以由用户根据实际需求自定义设置，也可以由终端默认设置，本公开实施例对此不做限定。这里可以将每相邻两个子节点之间的间隔宽度表示为MX。

例如，请参考图2C，若该节点为节点g，由于该节点g不包括子节点，因此，将该节点g的宽度确定为第一预设宽度W，同理，节点h的宽度也为该第一预设宽度W。若该节点为节点f，由于该节点f包括两个子节点，分别为子节点g和子节点h，即上述N为2，因此，可以确定该节点f的宽度为(2-1)*MX+2*W。

以此类推，按照该种实现方式，从该内容树的底部至顶部，采用递归的方式即可以确定该内容树包括的多个节点中每个节点的宽度。

在确定该节点的节点距离的过程中，判断该节点是否属于父节点的子节点，当该节点不属于该父节点的子节点时，确定该节点的节点距离为预设长度，当该节点属于该父节点的第i个子节点时，确定第一数值，并将该父节点的节点距离与该第一数值之和确定为该节点的节点距离，该第一数值为该父节点包括的子节点中前i-1个子节点的宽度和该前i-1个子节点之间的间隔宽度之和。

其中，该预设长度为可以由用户根据实际需求自定义设置，也可以由终端默认设置，本公开实施例对此不做限定。这里可以将该预设长度表示为offset0。

在确定该节点的节点距离的过程中，可以从该内容树的顶部开始向下进行递归运算，以确定每个节点的节点距离。例如，请参考图2C，若该节点为节点a，由于该节点a不属于父节点的子节点，即该节点a没有父节点，因此，该节点a的节点距离offset为预设距离offset0。进一步可以确定节点b和节点c的节点距离，即若该节点为节点b，由于该节点b属于父节点a包括的两个子节点b和c中的第1个子节点，也即是，上述N为2，因此，可以确定该节点b的节点距离offset为：offset0+(1-1)W_a+(1-1)MX，即仍为offset0，其中，W_a代表子节点b的宽度。再如，若该节点为节点c，由于该节点c属于父节点a包括的两个子节点b和c中的第2个子节点，因此，可以确定该节点c的节点距离offset为offset0+(2-1)*W_b+(2-1)*MX，其中，W_b代表子节点b的宽度。

以此类推，按照上述确定方式，通过依次递归的方式，可以确定该内容树包括的多个节点中的每个节点的节点距离。

确定了该节点的宽度和节点距离之后，即可以根据该节点的宽度和该节点距离，确定该节点的横向位置，实现过程包括：基于该节点的宽度和该节点距离，通过第一指定公式，确定该节点的横向位置，该第一指定公式为：

其中，该X_i为该节点的横向位置，该offset为该节点的节点距离，该W_i为该节点i的宽度，该W为该第一预设宽度。

(2)基于该节点在该内容树的树结构中的深度，确定该节点的纵向位置。

上述基于该节点在该内容树的树结构中的深度，确定该节点的纵向位置的实现过程可以包括：确定第二数值，该第二数值为该节点的高度与在纵向方向上相邻两个节点之间的间隔高度之和；将该第二数值与该节点在该内容树的树结构中的深度之间的乘积确定为该节点的纵向位置。

其中，与上述间隔宽度类似，在本公开实施例中，每相邻两个节点之间的间隔高度也均相同，且可以由用户根据实际需求自定义设置，也可以由终端默认设置，本公开实施例对此不做限定。这里可以将每相邻两个子节点之间的间隔宽度表示为MY。

其中，该节点在内容树的树结构中的深度可以由用户根据实际需求自定义设置，例如，请参考图2C，若该节点a的深度为0，则该节点b的深度为1，节点d的深度为2，以此类推，节点g的深度为3。

根据前文所述，终端获取该节点在该内容树的树结构中的深度后，即可以确定该节点的纵向位置为D*(H+MY)，其中，D代表该节点在该内容树的树结构中的深度，H代表节点的高度，可以由用户根据实际需求自定义设置，也可以由终端默认设置。

(3)根据该节点的属性信息和该网页的网页信息，确定该节点的轴向位置，该节点的属性信息用于指示该节点在该排版结构视图中所处的层次。

上述根据该节点的属性信息和该网页的网页信息，确定该节点的轴向位置的实现过程可以包括：根据该节点的属性信息，确定该节点在该排版结构视图所处的层次，根据该网页的页面信息，确定该排版结构视图中包括的排版视图的层数以及每层排版视图的厚度，基于该节点在该排版结构视图所处的层次、该排版结构视图中包括的排版视图的层数以及每层排版视图的厚度，确定该节点的轴向位置。

其中，该节点的属性信息可以由该网页自身携带，根据该节点的属性信息，可以基于CSS(Cascading Style Sheets，层叠样式表)标准，来确定该节点在该排版结构视图所处的层次，例如，若该节点的属性信息中携带z-index属性，该z-index属性的属性值即用于指示该节点在该排版结构视图所处的层次。或者，若该节点的属性信息中携带定位属性，同理，该定位属性的属性值也可以用于指示该节点在该排版结构视图所处的层次。

另外，由于该排版结构视图实际上包括多层，各层均具有一定的厚度，因此，终端不仅需要确定该节点处于该排版结构视图中的哪一层中，还需要确定各层的厚度，如此，该终端才可以确定该节点在轴向方向上的轴向位置。

其中，由于该网页的页面信息中包括了该排版结构视图中包括的排版视图的层数以及每层排版视图的厚度，因此，终端可以直接基于该网页的页面信息来确定排版视图的层数以及每层排版视图的厚度。

在确定了该节点在该排版结构视图中所处的层次、该排版结构视图中包括的排版视图的层数以及每层排版视图的厚度后，终端可以通过逐层叠加的方式确定该节点的轴向位置。

上述采用递归的方式，确定了内容树中各个节点的空间位置，保证了每个节点不重叠，并符合绘制的先后顺序。

2032：基于该多个节点的节点标识，从存储的节点标识与节点样式之间的对应关系中，获取对应的节点样式。

其中，节点标识可以用于唯一标识一个节点。也即是，在该浏览器内核中，可以存储节点标识与节点样式之间的对应关系，如此，该终端即可根据各个节点的节点标识，获取各自的节点标识对应的节点样式。

其中，该节点样式可以用于指示对应的节点的颜色和大小等。

这里需要说明的是，上述子步骤2031和子步骤2032仅仅是用于说明确定该内容树包括的多个节点的空间位置以及该多个节点的节点样式，在实际实现过程中，该子步骤2031和子步骤2032没有先后执行顺序。

在步骤204中，按照该多个节点的空间位置和节点样式，绘制该浏览器内核的排版结构视图，显示该排版结构视图。

终端确定上述内容树包括的多个节点中的空间位置以及获取到该多个节点的节点样式后，即可以绘制该浏览器内核的排版结构视图，在一种可能的实现方式中，终端可以通过封装了WebGL(Web Graphics Library，页面图像库)的Javascript(JS脚本)3D(Third Dimensions，三维)库来绘制并展现该排版结构视图。

请参考图2D，该图2D示例性地示出了一种绘制的排版结构视图，该排版结构视图中包括多层，包括有LOT(Layout Object Tree，布局对象树)1、PLT(Paint Layer Tree，绘制层)2、CLM(Composited Layout Mapping，合成布局映射)3、GLT(Graphics Layer Tree，图形层树)4和PLD(Page Layout Details，页面布局细节)5。其中，各层可以代表网页排版过程中的各个阶段。

需要说明的是，上述LOT和PLD的内部可能包括多层，也即是，在上述根据页面的网页信息，确定该排版结构视图包括的层数过程中，实际上包括确定该LOT和PLD内部包括的层数，即该LOT和PLD内部包括的层数可以根据页面的网页信息确定，并且，该LOT和PLD包括的每层的厚度也可以根据该网页的页面信息来确定。

上述由于终端是根据各个阶段的页面排版数据构建包括多个节点的内容树，即所绘制的该排版结构视图将各个阶段的页面排版数据直接关联起来，因此，保证了页面排版数据的完整性。

至此，本公开实施例实现了浏览器内核的排版结构展现方法。另外，在实际实现过程中，可能还需要对该多个节点中的某个节点进行进一步地优化，为此，在本公开实施例中，还提供了节点信息显示功能，具体请参见如下步骤205和步骤206。

在步骤205中，当检测到目标节点的预设操作时，获取该目标节点的节点信息，该目标节点为该排版结构视图中的任一节点，该节点信息包括该目标节点的显示位置、大小和显示格式。

其中，该预设操作可以由用户根据实际需求自定义设置，也可以由终端默认设置，本公开实施例对此不做限定。例如，该预设操作可以为鼠标点击操作等。

需要说明的是，在本公开实施例中，仅是以该节点信息包括该目标节点的显示位置、大小和显示格式为例进行说明，在另一实施例中，该节点信息还可以包括其它信息，本公开实施例对此不做限定。

在步骤206中，显示该节点信息。

其中，在一种可能的实现方式中，在显示该节点信息时，可以以悬浮框等方式，在该目标节点的附近对该目标节点的节点信息进行显示。

另外，在显示目标节点的节点信息时，还可以基于浏览器内核的逻辑关系，根据各种过滤条件过滤要展现的节点和节点信息，或者，根据上述建立的关联性过滤要展现的节点和节点信息。其中，该过滤条件可以包括浮动性、定位方式、video(视频)标签以及HTML(Hyper Text Markup Language，超文本标记语言)标签上的ID(Identification，身份标识)和类属性等，建立的关联性可以包括节点和渲染层的关联关系等，本公开实施例对此不作详细介绍。

在本公开实施例中，当在网页中检测到排版结构展现指令时，说明需要对显示该网页的浏览器内核的排版结构进行分析，在该种情况下，按照该浏览器内核包括的多个阶段的数据属性，获取该网页在排版过程中各个阶段的页面排版数据，以根据获取的该页面排版数据构建包括多个节点的内容树，并确定该多个节点的空间位置和节点样式，从而绘制出该浏览器内核的排版结构视图，由于该排版结构视图清晰的展示了网页在排版过程中的各个阶段，因此，提高了排版结构的直观性。

图3A是根据一示例性实施例示出的一种浏览器内核的排版结构展现装置框图。参照图3A，该装置包括第一获取模块310，构建模块320、确定模块330和绘制模块340。

第一获取模块310，用于当在网页中检测到排版结构展现指令时，按照浏览器内核包括的多个阶段的数据属性，获取该网页在排版的过程中各个阶段的页面排版数据，该浏览器内核为当前显示该网页的浏览器的内核；

构建模块320，用于基于该第一获取模块310获取的该各个阶段的页面排版数据，构建内容树，该内容树中包括多个节点；

确定模块330，用于确定该构建模块320构建的该内容树包括的多个节点的空间位置以及该多个节点的节点样式；

绘制模块340，用于按照该确定模块330确定的该多个节点的空间位置和节点样式，绘制该浏览器内核的排版结构视图，显示该排版结构视图。

可选地，请参考图3B至图3C，该确定模块330包括：

确定子模块330a，用于对于该内容树包括的多个节点中的每个节点，确定该节点的横向位置、纵向位置和轴向位置；

获取子模块330b，用于基于该多个节点的节点标识，从存储的节点标识与节点样式之间的对应关系中，获取对应的节点样式。

可选地，该确定子模块330a用于：

确定该节点的宽度和节点距离，基于该节点的宽度和该节点距离，确定该节点的横向位置，该节点距离是指该节点在横向方向上与坐标原点之间的距离；

基于该节点在该内容树的树结构中的深度，确定该节点的纵向位置；

根据该节点的属性信息和该网页的网页信息，确定该节点的轴向位置，该节点的属性信息用于指示该节点在该排版结构视图中所处的层次。

可选地，该确定子模块330a用于：

判断该节点是否包括有子节点，当该节点不包括有子节点时，确定该节点的宽度为第一预设宽度；当该节点包括有N个子节点时，将该N个子节点的宽度和N-1个子节点之间的间隔宽度之和确定为该节点的宽度，该N为大于或等于1的正整数；

判断该节点是否属于父节点的子节点，当该节点不属于该父节点的子节点时，确定该节点的节点距离为预设长度，当该节点属于该父节点的第i个子节点时，确定第一数值，并将该父节点的节点距离与该第一数值之和确定为该节点的节点距离，该第一数值为该父节点包括的子节点中前i-1个子节点的宽度和该前i-1个子节点之间的间隔宽度之和。

可选地，该确定子模块330a用于：

基于该节点的宽度和该节点距离，通过第一指定公式，确定该节点的横向位置；

该第一指定公式为：

其中，该X_i为该节点的横向位置，该offset为该节点的节点距离，该W_i为该节点的宽度，该W为该第一预设宽度。

可选地，该确定子模块330a用于：

确定第二数值，该第二数值为该节点的高度与在纵向方向上相邻两个节点之间的间隔高度之和；

将该第二数值与该节点在该内容树的树结构中的深度之间的乘积确定为该节点的纵向位置。

可选地，该确定子模块330a用于：

根据该节点的属性信息，确定该节点在该排版结构视图所处的层次；

根据该网页的页面信息，确定该排版结构视图中包括的排版视图的层数以及每层排版视图的厚度；

基于该节点在该排版结构视图所处的层次、该排版结构视图中包括的排版视图的层数以及每层排版视图的厚度，确定该节点的轴向位置。

可选地，该装置还包括：

第二获取模块350，用于当检测到目标节点的预设操作时，获取该目标节点的节点信息，该目标节点为该排版结构视图中的任一节点，该节点信息包括该目标节点的显示位置、大小和显示格式；

显示模块360，用于显示该节点信息。

在本公开实施例中，当在网页中检测到排版结构展现指令时，说明需要对显示该网页的浏览器内核的排版结构进行分析，在该种情况下，按照该浏览器内核包括的多个阶段的数据属性，获取该网页在排版过程中各个阶段的页面排版数据，以根据获取的该页面排版数据构建包括多个节点的内容树，并确定该多个节点的空间位置和节点样式，从而绘制出该浏览器内核的排版结构视图，由于该排版结构视图清晰的展示了网页在排版过程中的各个阶段，因此，提高了排版结构的直观性。

关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

图4是根据一示例性实施例示出的一种浏览器内核的排版结构展现装置400的框图。例如，装置400可以是移动电话，计算机，数字广播终端，消息收发设备，游戏控制台，平板设备，医疗设备，健身设备，个人数字助理等。

参照图4，装置400可以包括以下一个或多个组件：处理组件402，存储器404，电源组件406，多媒体组件408，音频组件410，输入/输出(I/O)的接口412，传感器组件414，以及通信组件416。

处理组件402通常控制装置400的整体操作，诸如与显示，电话呼叫，数据通信，相机操作和记录操作相关联的操作。处理组件402可以包括一个或多个处理器420来执行指令，以完成上述的方法的全部或部分步骤。此外，处理组件402可以包括一个或多个模块，便于处理组件402和其他组件之间的交互。例如，处理组件402可以包括多媒体模块，以方便多媒体组件408和处理组件402之间的交互。

存储器404被配置为存储各种类型的数据以支持在装置400的操作。这些数据的示例包括用于在装置400上操作的任何应用程序或方法的指令，联系人数据，电话簿数据，消息，图片，视频等。存储器404可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。

电源组件406为装置400的各种组件提供电源。电源组件406可以包括电源管理系统，一个或多个电源，及其他与为装置400生成、管理和分配电源相关联的组件。

多媒体组件408包括在所述装置400和用户之间的提供一个输出接口的屏幕。在一些实施例中，屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与所述触摸或滑动操作相关的持续时间和压力。在一些实施例中，多媒体组件408包括一个前置摄像头和/或后置摄像头。当装置400处于操作模式，如拍摄模式或视频模式时，前置摄像头和/或后置摄像头可以接收外部的多媒体数据。每个前置摄像头和后置摄像头可以是一个固定的光学透镜系统或具有焦距和光学变焦能力。

音频组件410被配置为输出和/或输入音频信号。例如，音频组件410包括一个麦克风(MIC)，当装置400处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器404或经由通信组件416发送。在一些实施例中，音频组件410还包括一个扬声器，用于输出音频信号。

I/O接口412为处理组件402和外围接口模块之间提供接口，上述外围接口模块可以是键盘，点击轮，按钮等。这些按钮可包括：主页按钮、音量按钮、启动按钮和锁定按钮。

传感器组件414包括一个或多个传感器，用于为装置400提供各个方面的状态评估。例如，传感器组件414可以检测到装置400的打开/关闭状态，组件的相对定位，例如所述组件为装置400的显示器和小键盘，传感器组件414还可以检测装置400或装置400一个组件的位置改变，用户与装置400接触的存在或不存在，装置400方位或加速/减速和装置400的温度变化。传感器组件414可以包括接近传感器，被配置用来在没有任何的物理接触时检测附近物体的存在。传感器组件414还可以包括光传感器，如CMOS或CCD图像传感器，用于在成像应用中使用。在一些实施例中，该传感器组件414还可以包括加速度传感器，陀螺仪传感器，磁传感器，压力传感器或温度传感器。

通信组件416被配置为便于装置400和其他设备之间有线或无线方式的通信。装置400可以接入基于通信标准的无线网络，如WiFi，2G或3G，或它们的组合。在一个示例性实施例中，通信组件416经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中，所述通信组件416还包括近场通信(NFC)模块，以促进短程通信。例如，在NFC模块可基于射频识别(RFID)技术，红外数据协会(IrDA)技术，超宽带(UWB)技术，蓝牙(BT)技术和其他技术来实现。

在示例性实施例中，装置400可以被一个或多个应用专用集成电路(ASIC)、数字信号处理器(DSP)、数字信号处理设备(DSPD)、可编程逻辑器件(PLD)、现场可编程门阵列(FPGA)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述方法。

在示例性实施例中，还提供了一种包括指令的非临时性计算机可读存储介质，例如包括指令的存储器404，上述指令可由装置400的处理器420执行以完成上述方法。例如，所述非临时性计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

一种非临时性计算机可读存储介质，当所述存储介质中的指令由移动终端的处理器执行时，使得移动终端能够执行上述图1或图2A实施例所涉及的浏览器内核的排版结构展现方法。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。