浏览器内核的排版结构展现方法及装置制造方法及图纸

本公开是关于一种浏览器内核的排版结构展现方法及装置，属于计算机技术领域，该方法包括当在网页中检测到排版结构展现指令时，按照浏览器内核包括的多个阶段的数据属性，获取该网页在排版的过程中各个阶段的页面排版数据，该浏览器内核为当前显示该网页的浏览器的内核，基于该各个阶段的页面排版数据，构建内容树，该内容树中包括多个节点，确定该内容树包括的多个节点的空间位置以及该多个节点的节点样式，按照该多个节点的空间位置和节点样式，绘制该浏览器内核的排版结构视图，显示该排版结构视图，由于该排版结构视图清晰的展示了网页在排版过程中的各个阶段，因此，提高了排版结构的直观性。

Typesetting structure, display method and device of browser kernel

The public is a layout structure of the browser kernel display method and a device, belonging to the field of computer technology, the method includes when detected in the page layout structure show instructions, in accordance with the data attributes of multiple stages including the browser kernel, the web page layout data acquisition at all stages of the publishing process, the the browser kernel for the current display the web page of the browser kernel, page layout data of the various stages of the construction based on the content of trees, including a plurality of nodes of the content tree, spatial location of multiple nodes to determine the contents of the tree including a plurality of nodes and the node style, according to the space position and the multi node style a node, layout structure view drawing of the browser kernel, display the layout structure view, the layout structure view clear display of the network The page is at all stages of the typesetting process and, therefore, improves the visibility of the layout structure.

【技术实现步骤摘要】
浏览器内核的排版结构展现方法及装置
本公开涉及计算机
，尤其涉及一种浏览器内核的排版结构展现方法及装置。
技术介绍
随着计算机技术的快速发展，浏览器逐渐成为用户浏览网页的重要工具之一。作为浏览器的核心部分，浏览器内核主要用于渲染网页，也即是，浏览器内核决定了浏览器如何排版并显示网页。浏览器内核通常包括多种，其中，一些浏览器内核可以通过内部的排版结构来描述网页的排版过程，例如，WebKit内核等。在实际应用过程中，为了能够定位浏览器工作过程中可能出现的故障，或者对浏览器进行优化，需要对浏览器内核进行分析。目前，WebKit内核中存在一组调用接口，通过该调用接口可以导出WebKit内核的排版结构，导出的排版结构为纯文本数据，基于该纯文本数据，可以对浏览器内核进行分析。
技术实现思路
为克服相关技术中存在的问题，本公开提供一种浏览器内核的排版结构展现方法及装置。第一方面，提供一种浏览器内核的排版结构展现方法，所述方法包括：当在网页中检测到排版结构展现指令时，按照浏览器内核包括的多个阶段的数据属性，获取所述网页在排版的过程中各个阶段的页面排版数据，所述浏览器内核为当前显示所述网页的浏览器的内核；基于所述各个阶段的页面排版数据，构建内容树，所述内容树中包括多个节点；确定所述内容树包括的多个节点的空间位置以及所述多个节点的节点样式；按照所述多个节点的空间位置和节点样式，绘制所述浏览器内核的排版结构视图，显示所述排版结构视图。可选地，所述确定所述内容树包括的多个节点的空间位置以及所述多个节点的节点样式，包括：对于所述内容树包括的多个节点中的每个节点，确定所述节点的横向位置、纵向位置和轴向位置；基于所述多个节点的节点标识，从存储的节点标识与节点样式之间的对应关系中，获取对应的节点样式。可选地，所述确定所述节点的横向位置、纵向位置和轴向位置，包括：确定所述节点的宽度和节点距离，基于所述节点的宽度和所述节点距离，确定所述节点的横向位置，所述节点距离是指所述节点在横向方向上与坐标原点之间的距离；基于所述节点在所述内容树的树结构中的深度，确定所述节点的纵向位置；根据所述节点的属性信息和所述网页的网页信息，确定所述节点的轴向位置，所述节点的属性信息用于指示所述节点在所述排版结构视图中所处的层次。可选地，所述确定所述节点的宽度和节点距离，包括：判断所述节点是否包括有子节点，当所述节点不包括有子节点时，确定所述节点的宽度为第一预设宽度；当所述节点包括有N个子节点时，将所述N个子节点的宽度和N-1个子节点之间的间隔宽度之和确定为所述节点的宽度，所述N为大于或等于1的正整数；判断所述节点是否属于父节点的子节点，当所述节点不属于所述父节点的子节点时，确定所述节点的节点距离为预设长度，当所述节点属于所述父节点的第i个子节点时，确定第一数值，并将所述父节点的节点距离与所述第一数值之和确定为所述节点的节点距离，所述第一数值为所述父节点包括的子节点中前i-1个子节点的宽度和所述前i-1个子节点之间的间隔宽度之和。可选地，所述基于所述节点的宽度和所述节点距离，确定所述节点的横向位置，包括：基于所述节点的宽度和所述节点距离，通过第一指定公式，确定所述节点的横向位置；所述第一指定公式为：其中，所述Xi为所述节点的横向位置，所述offset为所述节点的节点距离，所述Wi为所述节点的宽度，所述W为所述第一预设宽度。可选地，所述基于所述节点在所述内容树的树结构中的深度，确定所述节点的纵向位置，包括：确定第二数值，所述第二数值为所述节点的高度与在纵向方向上相邻两个节点之间的间隔高度之和；将所述第二数值与所述节点在所述内容树的树结构中的深度之间的乘积确定为所述节点的纵向位置。可选地，所述根据所述节点的属性信息和所述网页的网页内容，确定所述节点的轴向位置，包括：根据所述节点的属性信息，确定所述节点在所述排版结构视图所处的层次；根据所述网页的页面信息，确定所述排版结构视图中包括的排版视图的层数以及每层排版视图的厚度；基于所述节点在所述排版结构视图所处的层次、所述排版结构视图中包括的排版视图的层数以及每层排版视图的厚度，确定所述节点的轴向位置。可选地，所述方法还包括：当检测到目标节点的预设操作时，获取所述目标节点的节点信息，所述目标节点为所述排版结构视图中的任一节点，所述节点信息包括所述目标节点的显示位置、大小和显示格式；显示所述节点信息。第二方面，提供一种浏览器内核的排版结构展现装置，所述装置包括：第一获取模块，用于当在网页中检测到排版结构展现指令时，按照浏览器内核包括的多个阶段的数据属性，获取所述网页在排版的过程中各个阶段的页面排版数据，所述浏览器内核为当前显示所述网页的浏览器的内核；构建模块，用于基于所述第一获取模块获取的所述各个阶段的页面排版数据，构建内容树，所述内容树中包括多个节点；确定模块，用于确定所述构建模块构建的所述内容树包括的多个节点的空间位置以及所述多个节点的节点样式；绘制模块，用于按照所述确定模块确定的所述多个节点的空间位置和节点样式，绘制所述浏览器内核的排版结构视图，显示所述排版结构视图。可选地，所述确定模块包括：确定子模块，用于对于所述内容树包括的多个节点中的每个节点，确定所述节点的横向位置、纵向位置和轴向位置；获取子模块，用于基于所述多个节点的节点标识，从存储的节点标识与节点样式之间的对应关系中，获取对应的节点样式。可选地，所述确定子模块用于：确定所述节点的宽度和节点距离，基于所述节点的宽度和所述节点距离，确定所述节点的横向位置，所述节点距离是指所述节点在横向方向上与坐标原点之间的距离；基于所述节点在所述内容树的树结构中的深度，确定所述节点的纵向位置；根据所述节点的属性信息和所述网页的网页信息，确定所述节点的轴向位置，所述节点的属性信息用于指示所述节点在所述排版结构视图中所处的层次。可选地，所述确定子模块用于：判断所述节点是否包括有子节点，当所述节点不包括有子节点时，确定所述节点的宽度为第一预设宽度；当所述节点包括有N个子节点时，将所述N个子节点的宽度和N-1个子节点之间的间隔宽度之和确定为所述节点的宽度，所述N为大于或等于1的正整数；判断所述节点是否属于父节点的子节点，当所述节点不属于所述父节点的子节点时，确定所述节点的节点距离为预设长度，当所述节点属于所述父节点的第i个子节点时，确定第一数值，并将所述父节点的节点距离与所述第一数值之和确定为所述节点的节点距离，所述第一数值为所述父节点包括的子节点中前i-1个子节点的宽度和所述前i-1个子节点之间的间隔宽度之和。可选地，所述确定子模块用于：基于所述节点的宽度和所述节点距离，通过第一指定公式，确定所述节点的横向位置；所述第一指定公式为：其中，所述Xi为所述节点的横向位置，所述offset为所述节点的节点距离，所述Wi为所述节点的宽度，所述W为所述第一预设宽度。可选地，所述确定子模块用于：确定第二数值，所述第二数值为所述节点的高度与在纵向方向上相邻两个节点之间的间隔高度之和；将所述第二数值与所述节点在所述内容树的树结构中的深度之间的乘积确定为所述节点的纵向位置。可选地，所述确定子模块用于：根据所述节点的属性信息，确定所述节点在所述排版结构视图所处的层次；根据所述网页的页面信息本文档来自技高网...

【技术保护点】
一种浏览器内核的排版结构展现方法，其特征在于，所述方法包括：当在网页中检测到排版结构展现指令时，按照浏览器内核包括的多个阶段的数据属性，获取所述网页在排版的过程中各个阶段的页面排版数据，所述浏览器内核为当前显示所述网页的浏览器的内核；基于所述各个阶段的页面排版数据，构建内容树，所述内容树中包括多个节点；确定所述内容树包括的多个节点的空间位置以及所述多个节点的节点样式；按照所述多个节点的空间位置和节点样式，绘制所述浏览器内核的排版结构视图，显示所述排版结构视图。

【技术特征摘要】
1.一种浏览器内核的排版结构展现方法，其特征在于，所述方法包括：当在网页中检测到排版结构展现指令时，按照浏览器内核包括的多个阶段的数据属性，获取所述网页在排版的过程中各个阶段的页面排版数据，所述浏览器内核为当前显示所述网页的浏览器的内核；基于所述各个阶段的页面排版数据，构建内容树，所述内容树中包括多个节点；确定所述内容树包括的多个节点的空间位置以及所述多个节点的节点样式；按照所述多个节点的空间位置和节点样式，绘制所述浏览器内核的排版结构视图，显示所述排版结构视图。2.如权利要求1所述的方法，其特征在于，所述确定所述内容树包括的多个节点的空间位置以及所述多个节点的节点样式，包括：对于所述内容树包括的多个节点中的每个节点，确定所述节点的横向位置、纵向位置和轴向位置；基于所述多个节点的节点标识，从存储的节点标识与节点样式之间的对应关系中，获取对应的节点样式。3.如权利要求2所述的方法，其特征在于，所述确定所述节点的横向位置、纵向位置和轴向位置，包括：确定所述节点的宽度和节点距离，基于所述节点的宽度和所述节点距离，确定所述节点的横向位置，所述节点距离是指所述节点在横向方向上与坐标原点之间的距离；基于所述节点在所述内容树的树结构中的深度，确定所述节点的纵向位置；根据所述节点的属性信息和所述网页的网页信息，确定所述节点的轴向位置，所述节点的属性信息用于指示所述节点在所述排版结构视图中所处的层次。4.如权利要求3所述的方法，其特征在于，所述确定所述节点的宽度和节点距离，包括：判断所述节点是否包括有子节点，当所述节点不包括有子节点时，确定所述节点的宽度为第一预设宽度；当所述节点包括有N个子节点时，将所述N个子节点的宽度和N-1个子节点之间的间隔宽度之和确定为所述节点的宽度，所述N为大于或等于1的正整数；判断所述节点是否属于父节点的子节点，当所述节点不属于所述父节点的子节点时，确定所述节点的节点距离为预设长度，当所述节点属于所述父节点的第i个子节点时，确定第一数值，并将所述父节点的节点距离与所述第一数值之和确定为所述节点的节点距离，所述第一数值为所述父节点包括的子节点中前i-1个子节点的宽度和所述前i-1个子节点之间的间隔宽度之和。5.如权利要求4所述的方法，其特征在于，所述基于所述节点的宽度和所述节点距离，确定所述节点的横向位置，包括：基于所述节点的宽度和所述节点距离，通过第一指定公式，确定所述节点的横向位置；所述第一指定公式为：其中，所述Xi为所述节点的横向位置，所述offset为所述节点的节点距离，所述Wi为所述节点的宽度，所述W为所述第一预设宽度。6.如权利要求3所述的方法，其特征在于，所述基于所述节点在所述内容树的树结构中的深度，确定所述节点的纵向位置，包括：确定第二数值，所述第二数值为所述节点的高度与在纵向方向上相邻两个节点之间的间隔高度之和；将所述第二数值与所述节点在所述内容树的树结构中的深度之间的乘积确定为所述节点的纵向位置。7.如权利要求3所述的方法，其特征在于，所述根据所述节点的属性信息和所述网页的网页内容，确定所述节点的轴向位置，包括：根据所述节点的属性信息，确定所述节点在所述排版结构视图所处的层次；根据所述网页的页面信息，确定所述排版结构视图中包括的排版视图的层数以及每层排版视图的厚度；基于所述节点在所述排版结构视图所处的层次、所述排版结构视图中包括的排版视图的层数以及每层排版视图的厚度，确定所述节点的轴向位置。8.如权利要求1所述的方法，其特征在于，所述方法还包括：当检测到目标节点的预设操作时，获取所述目标节点的节点信息，所述目标节点为所述排版结构视图中的任一节点，所述节点信息包括所述目标节点的显示位置、大小和显示格式；显示所述节点信息。9.一种浏览器内核的排版结构展现装置，其特征在于，所述装置包括：第一获取模块，用于当在网页中检测到排版结构展现指令时，按照浏览器内核包括的多个阶段的数据属性，获取所述网页在排版的过程中各个阶段的页面排版数据，所述浏览器内核为当前显示所...

【专利技术属性】
技术研发人员：马金丰，
申请(专利权)人：北京小米移动软件有限公司，
类型：发明
国别省市：北京,11