CN106708958B

CN106708958B - Method and device for displaying typesetting structure of browser kernel

Info

Publication number: CN106708958B
Application number: CN201611079321.0A
Authority: CN
Inventors: 马金丰
Original assignee: Beijing Xiaomi Mobile Software Co Ltd
Current assignee: Beijing Xiaomi Mobile Software Co Ltd
Priority date: 2016-11-30
Filing date: 2016-11-30
Publication date: 2020-03-17
Anticipated expiration: 2036-11-30
Also published as: CN106708958A

Abstract

The method comprises the steps of when a typesetting structure showing instruction is detected in a webpage, acquiring page typesetting data of each stage of the webpage in the typesetting process according to data attributes of a plurality of stages included by a browser kernel, constructing a content tree based on the page typesetting data of each stage, determining the spatial positions of a plurality of nodes included by the content tree and the node styles of the plurality of nodes, drawing a typesetting structure view of the browser kernel according to the spatial positions and the node styles of the plurality of nodes, displaying the typesetting structure view, and clearly showing each stage of the webpage in the typesetting process due to the fact that the typesetting structure view, therefore, the intuitiveness of the layout structure is improved.

Description

Method and device for displaying typesetting structure of browser kernel

Technical Field

The present disclosure relates to the field of computer technologies, and in particular, to a method and an apparatus for displaying a composition structure of a browser kernel.

Background

With the rapid development of computer technology, browsers are becoming one of the important tools for users to browse web pages. As a core part of the browser, the browser kernel is mainly used for rendering a web page, that is, the browser kernel determines how the browser lays out and displays the web page.

The browser kernels generally include a plurality of types, wherein some browser kernels can describe the typesetting process of the webpage through an internal typesetting structure, such as a WebKit kernel and the like. In the practical application process, in order to locate a fault which may occur in the browser working process or optimize the browser, the browser kernel needs to be analyzed. At present, a set of calling interfaces exist in a WebKit kernel, a typesetting structure of the WebKit kernel can be derived through the calling interfaces, the derived typesetting structure is plain text data, and the browser kernel can be analyzed based on the plain text data.

Disclosure of Invention

In order to overcome the problems in the related art, the present disclosure provides a method and an apparatus for displaying a typesetting structure of a browser kernel.

In a first aspect, a method for displaying a typesetting structure of a browser kernel is provided, where the method includes:

when a typesetting structure showing instruction is detected in a webpage, acquiring page typesetting data of each stage of the webpage in a typesetting process according to data attributes of a plurality of stages included by a browser kernel, wherein the browser kernel is the kernel of a browser currently displaying the webpage;

constructing a content tree based on the page layout data of each stage, wherein the content tree comprises a plurality of nodes;

determining spatial positions of a plurality of nodes included in the content tree and node styles of the plurality of nodes;

and drawing the typesetting structure view of the browser kernel according to the spatial positions and node styles of the nodes, and displaying the typesetting structure view.

Optionally, the determining the spatial positions of the plurality of nodes included in the content tree and the node styles of the plurality of nodes includes:

for each node of a plurality of nodes comprised by the content tree, determining a lateral position, a longitudinal position, and an axial position of the node;

and acquiring a corresponding node style from the stored corresponding relation between the node identification and the node style based on the node identifications of the plurality of nodes.

Optionally, the determining the lateral position, the longitudinal position and the axial position of the node comprises:

determining the width and the node distance of the node, and determining the transverse position of the node based on the width and the node distance of the node, wherein the node distance refers to the distance between the node and the coordinate origin in the transverse direction;

determining a longitudinal position of the node based on a depth of the node in a tree structure of the content tree;

and determining the axial position of the node according to the attribute information of the node and the webpage information of the webpage, wherein the attribute information of the node is used for indicating the level of the node in the typesetting structure view.

Optionally, the determining the width and the node distance of the node includes:

judging whether the node comprises a child node or not, and determining the width of the node as a first preset width when the node does not comprise the child node; when the node comprises N sub-nodes, determining the sum of the widths of the N sub-nodes and the width of the interval between N-1 sub-nodes as the width of the node, wherein N is a positive integer greater than or equal to 1;

judging whether the node belongs to a child node of a father node or not, when the node does not belong to the child node of the father node, determining that the node distance of the node is a preset length, when the node belongs to the ith child node of the father node, determining a first numerical value, and determining the sum of the node distance of the father node and the first numerical value as the node distance of the node, wherein the first numerical value is the sum of the width of the first i-1 child node in the child nodes included in the father node and the interval width between the first i-1 child nodes.

Optionally, the determining the lateral position of the node based on the width of the node and the node distance includes:

determining the transverse position of the node through a first specified formula based on the width of the node and the node distance;

the first specified formula is:

wherein, X is_iIs the lateral position of the node, the offset is the node distance of the node, W_iAnd W is the width of the node and is the first preset width.

Optionally, the determining the longitudinal position of the node based on the depth of the node in the tree structure of the content tree includes:

determining a second value, wherein the second value is the sum of the height of the node and the height of the interval between two adjacent nodes in the longitudinal direction;

determining a product of the second value and a depth of the node in a tree structure of the content tree as a longitudinal position of the node.

Optionally, the determining the axial position of the node according to the attribute information of the node and the web page content of the web page includes:

determining the level of the node in the typesetting structure view according to the attribute information of the node;

determining the number of layers of the typesetting views included in the typesetting structure view and the thickness of each layer of typesetting view according to the page information of the webpage;

and determining the axial position of the node based on the level of the node in the typesetting structure view, the number of layers of the typesetting view included in the typesetting structure view and the thickness of each layer of the typesetting view.

Optionally, the method further comprises:

when the preset operation of a target node is detected, node information of the target node is obtained, the target node is any node in the typesetting structure view, and the node information comprises the display position, the size and the display format of the target node;

and displaying the node information.

In a second aspect, an apparatus for presenting a composition structure of a browser kernel is provided, the apparatus includes:

the first obtaining module is used for obtaining page layout data of each stage of the webpage in the layout process according to data attributes of a plurality of stages included by a browser kernel when a layout structure display instruction is detected in the webpage, wherein the browser kernel is the kernel of a browser for displaying the webpage at present;

the building module is used for building a content tree based on the page layout data of each stage acquired by the first acquiring module, wherein the content tree comprises a plurality of nodes;

a determining module, configured to determine spatial positions of a plurality of nodes included in the content tree constructed by the constructing module and node styles of the plurality of nodes;

and the drawing module is used for drawing the typesetting structure view of the browser kernel according to the spatial positions and the node styles of the nodes determined by the determining module and displaying the typesetting structure view.

Optionally, the determining module includes:

a determining submodule for determining, for each node of a plurality of nodes comprised by the content tree, a lateral position, a longitudinal position and an axial position of the node;

and the obtaining submodule is used for obtaining the corresponding node pattern from the corresponding relation between the stored node identification and the node pattern based on the node identifications of the plurality of nodes.

Optionally, the determining sub-module is configured to:

the first specified formula is:

Optionally, the determining sub-module is configured to:

Optionally, the apparatus further comprises:

a second obtaining module, configured to obtain node information of a target node when a preset operation of the target node is detected, where the target node is any node in the layout structure view, and the node information includes a display position, a size, and a display format of the target node;

and the display module is used for displaying the node information.

In a third aspect, an apparatus for presenting a composition structure of a browser kernel is provided, where the apparatus includes:

a processor;

a memory for storing processor-executable instructions;

wherein the processor is configured to:

The technical scheme provided by the embodiment of the disclosure can have the following beneficial effects: when a typesetting structure showing instruction is detected in a webpage, the typesetting structure of a browser kernel displaying the webpage needs to be analyzed, under the condition, page typesetting data of the webpage at each stage in the typesetting process are obtained according to data attributes of a plurality of stages included by the browser kernel, a content tree comprising a plurality of nodes is constructed according to the obtained page typesetting data, and the spatial positions and node styles of the nodes are determined, so that a typesetting structure view of the browser kernel is drawn, and the typesetting structure view clearly shows each stage of the webpage in the typesetting process, so that the intuitiveness of the typesetting structure is improved.

It is to be understood that both the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the disclosure.

Drawings

The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present disclosure and together with the description, serve to explain the principles of the disclosure.

FIG. 1 is a flowchart illustrating a method for rendering a composition structure of a browser kernel according to an exemplary embodiment.

FIG. 2A is a flowchart illustrating a method for rendering a composition structure of a browser kernel according to another exemplary embodiment.

Fig. 2B is a schematic diagram of page layout data in JSON format according to the embodiment in fig. 2A.

Fig. 2C is a schematic diagram of a tree structure of a content tree according to the embodiment of fig. 2A.

FIG. 2D is a schematic diagram illustrating a layout structure view according to the embodiment in FIG. 2A.

FIG. 3A is a block diagram illustrating an apparatus for rendering a composition structure of a browser kernel according to an example embodiment.

FIG. 3B is a block diagram illustrating one type of determination module 330 according to an example embodiment.

Fig. 3C is a block diagram illustrating a typesetting structure presentation apparatus for a browser kernel according to another exemplary embodiment.

Fig. 4 is a block diagram illustrating an apparatus 400 for presenting a composition structure of a browser kernel according to an exemplary embodiment.

Detailed Description

Reference will now be made in detail to the exemplary embodiments, examples of which are illustrated in the accompanying drawings. When the following description refers to the accompanying drawings, like numbers in different drawings represent the same or similar elements unless otherwise indicated. The implementations described in the exemplary embodiments below are not intended to represent all implementations consistent with the present disclosure. Rather, they are merely examples of apparatus and methods consistent with certain aspects of the present disclosure, as detailed in the appended claims.

In the related art, since the typesetting structure of the WebKit kernel derived through the calling interface is plain text data, the intuition is poor, and therefore, the embodiment of the disclosure provides a display method of the typesetting structure of the browser kernel, and the problem of poor intuition of the plain text data is solved. The method for displaying the typesetting structure of the browser kernel provided by the embodiment of the disclosure can be executed by a terminal, the terminal can be at least used for running a browser, and in addition, the terminal also has a display function. The terminal may be a terminal such as a mobile phone, a tablet computer, a computer, and the like, which is not limited in this disclosure.

In practical application, it is difficult for a novice user to know the layout structure of the browser kernel, and therefore, in the embodiment of the present disclosure, a display option may be set on the browser, and when the user wants to browse the layout structure of the browser kernel, the display option may be triggered, at this time, the terminal receives the layout structure display instruction and starts to execute subsequent steps to display the layout structure of the browser kernel, so that the user may intuitively and quickly know the layout structure of the browser kernel.

Fig. 1 is a flowchart illustrating a method for displaying a composition structure of a browser kernel according to an exemplary embodiment, where as shown in fig. 1, the method for displaying a composition structure of a browser kernel may include the following steps.

In step 101, when a layout structure presentation instruction is detected in a web page, page layout data of each stage of the web page in the layout process is obtained according to data attributes of a plurality of stages included in a browser kernel, where the browser kernel is a kernel of a browser currently displaying the web page.

In step 102, a content tree is constructed based on the page layout data of each stage, wherein the content tree includes a plurality of nodes.

In step 103, spatial positions of a plurality of nodes included in the content tree and node styles of the plurality of nodes are determined.

In step 104, according to the spatial positions and node styles of the plurality of nodes, drawing a layout structure view of the browser kernel, and displaying the layout structure view.

In the embodiment of the present disclosure, when a layout structure showing instruction is detected in a web page, it is described that a layout structure of a browser kernel displaying the web page needs to be analyzed, and in this case, page layout data of the web page at each stage in a layout process is obtained according to data attributes of a plurality of stages included in the browser kernel, so as to construct a content tree including a plurality of nodes according to the obtained page layout data, and determine spatial positions and node styles of the plurality of nodes, thereby drawing a layout structure view of the browser kernel.

Optionally, determining the spatial positions of the plurality of nodes included in the content tree and the node styles of the plurality of nodes includes:

for each node of a plurality of nodes included in the content tree, determining a lateral position, a longitudinal position, and an axial position of the node;

based on the node identifiers of the plurality of nodes, the corresponding node patterns are obtained from the corresponding relations between the stored node identifiers and the node patterns.

The spatial position of the node can be determined by determining the transverse position, the longitudinal position and the axial position of the node, and the node pattern corresponding to the node identifier of each node can be obtained according to the stored correspondence between the node identifier and the node pattern.

Optionally, determining the lateral position, the longitudinal position, and the axial position of the node comprises:

The above-mentioned determination of the horizontal position of the node is realized based on the width of the node and the distance of the node, the determination of the longitudinal position of the node is realized according to the depth of the node in the tree structure of the content tree, and the determination of the axial position of the node is realized according to the attribute information of the node and the web page information of the web page, thereby determining the spatial position of the node.

Optionally, determining the width and the node distance of the node includes:

judging whether the node belongs to a child node of a father node, when the node does not belong to the child node of the father node, determining that the node distance of the node is a preset length, when the node belongs to the ith child node of the father node, determining a first numerical value, and determining the sum of the node distance of the father node and the first numerical value as the node distance of the node, wherein the first numerical value is the sum of the width of the first i-1 child node and the interval width between the first i-1 child nodes in the child nodes included in the father node.

The spatial position of each node in the content tree is determined by adopting a recursion mode, so that each node is not overlapped and accords with the drawing sequence.

Optionally, determining the lateral position of the node based on the width of the node and the node distance includes:

the first specified formula is:

wherein, the X_iThe lateral position of the node, the offset being the node distance of the node, the W_iThe width of the node is W, which is the first predetermined width.

The determination of the lateral position of the node is realized by the first specified formula based on the width of the node and the distance of the node.

Optionally, determining the longitudinal position of the node based on the depth of the node in the tree structure of the content tree comprises:

the product of the second value and the depth of the node in the tree structure of the content tree is determined as the longitudinal position of the node.

The determination of the longitudinal position of the node is realized according to the height of the node, the height of the interval between two adjacent nodes in the longitudinal direction and the depth of the node in the tree structure of the content tree.

Optionally, determining the axial position of the node according to the attribute information of the node and the web page content of the web page includes:

and determining the axial position of the node based on the level of the node in the layout structure view, the number of layers of the layout views included in the layout structure view and the thickness of each layer of the layout views.

The determination of the axial position of the node in the axial direction is realized by determining the level of the node in the layout structure view, the number of layers included in the layout structure view and the thickness of each layer.

Optionally, the method further comprises:

and displaying the node information.

After the layout structure view is displayed, the node information of any node in the layout structure view can be displayed, so that the node can be further optimized and the like.

All the above optional technical solutions can be combined arbitrarily to form optional embodiments of the present disclosure, and the embodiments of the present disclosure are not described in detail again.

Fig. 2A is a flowchart illustrating a method for displaying a composition structure of a browser kernel according to another exemplary embodiment, where as shown in fig. 2A, the method for displaying a composition structure of a browser kernel is used in a terminal, and the method for displaying a composition structure of a browser kernel includes the following steps:

in step 201, when the layout structure showing instruction is detected in the web page, the page layout data of each stage of the web page in the layout process is obtained according to the data attributes of the plurality of stages included in the browser kernel, where the browser kernel is the kernel of the browser currently displaying the web page.

The display instruction of the typesetting structure may be triggered by a user, the user may be triggered by a specified operation, and the specified operation may include a click operation, a slide operation, and the like, which is not limited in this disclosure.

When the terminal detects a layout structure showing instruction in a webpage, it can be determined that a user may need to analyze the kernel of a browser currently displaying the webpage, and therefore, the terminal acquires page layout data of each stage of the webpage in the layout process.

In the composition process, the web page may actually include multiple stages, for example, a composition stage, a rendering stage, a composition stage, and the like, and the data attribute of each stage of the multiple stages may be different, wherein the data attribute of each stage may be used to indicate the type of data used in each stage. And when the terminal receives the layout structure showing instruction, acquiring page layout data of each stage in the stages according to the data attributes of the stages.

In a possible implementation manner, after the terminal acquires the page layout data of each stage, the page layout data of each stage may be stored in a specified format, and an association relationship between the page layout data of each stage is established for subsequent processing. Wherein the specified format includes a JSON (JSON script Object Notation) format.

For example, referring to fig. 2B, fig. 2B is a schematic diagram of page layout data in JSON format according to the embodiment of fig. 2A, where

reference numerals

1, 2, 3, and 4 are respectively used to indicate different stages, and each stage corresponds to a different layer of the layout structure view, and as can be seen from fig. 2B, each stage corresponds to a different data attribute.

In step 202, a content tree is constructed based on the page layout data of the respective stages, wherein the content tree includes a plurality of nodes.

After the terminal obtains the page layout data of each stage in the page layout process, it needs to construct a content tree according to the obtained page layout data of each stage, please refer to fig. 2C, where the content tree includes a plurality of nodes a, b, C, d, e, f, g, and h.

It should be noted that fig. 2C is a schematic diagram illustrating an exemplary tree structure of a content tree, and in practical implementation, the tree structure of the content tree may be in other forms, and the content tree may further include more nodes, and fig. 2C is not shown one by one.

Wherein, for each node in the plurality of nodes, the node may represent a DOM (Document object model) element, and as will be understood, a DOM element may be used to indicate a tag in the web page.

In step 203, spatial positions of a plurality of nodes included in the content tree and node styles of the plurality of nodes are determined.

The specific implementation of determining the spatial positions of the plurality of nodes included in the content tree and the node styles of the plurality of nodes may include the following sub-steps 2031 and 2032:

2031: for each node of a plurality of nodes comprised by the content tree, a lateral position, a longitudinal position and an axial position of the node are determined.

It will be understood that in three-dimensional space, the spatial location of a node requires three directional positions to be determined, namely, a lateral position, a longitudinal position, and an axial position. In a three-dimensional coordinate system, the transverse position is also generally referred to as a position in the X-axis direction, the longitudinal position is also generally referred to as a position in the Y-axis direction, and the axial position is also generally referred to as a position in the Z-axis direction, and in the embodiment of the present disclosure, the spatial position is described by determining the transverse position, the longitudinal position, and the axial position. The implementation process for determining the transverse position, the longitudinal position and the axial position of the node is described in the following (1) to (3):

(1) determining the width and the node distance of the node, and determining the transverse position of the node based on the width and the node distance of the node, wherein the node distance refers to the distance between the node and the coordinate origin in the transverse direction.

Wherein, in the tree structure of the content tree, the node may be a parent node or a child node, and determining the width and the node distance of the node according to the different properties of the node may include the following implementation processes:

in the process of determining the width of the node, the node may be determined in a recursive manner from bottom to top based on the tree structure of the content tree, that is: judging whether the node comprises a child node or not, and determining the width of the node as a first preset width when the node does not comprise the child node; when the node comprises N sub-nodes, determining the sum of the widths of the N sub-nodes and the width of the interval between N-1 sub-nodes as the width of the node, wherein N is a positive integer greater than or equal to 1.

The first preset width may be set by a user according to actual requirements in a user-defined manner, or may be set by a default terminal, which is not limited in the embodiment of the present disclosure.

In addition, the interval width between each two adjacent child nodes is the same, and the interval width may be set by a user according to actual requirements in a self-defined manner or by a default setting of a terminal, which is not limited in the embodiment of the present disclosure. The width of the space between every two adjacent child nodes can be represented as MX here.

For example, referring to fig. 2C, if the node is a node g, since the node g does not include a child node, the width of the node g is determined as a first predetermined width W, and similarly, the width of the node h is also determined as the first predetermined width W. If the node is a node f, since the node f includes two sub-nodes, i.e., a sub-node g and a sub-node h, respectively, i.e., N is 2, the width of the node f can be determined to be (2-1) × MX +2 × W.

By analogy, according to this implementation, the width of each of the plurality of nodes included in the content tree can be determined in a recursive manner from the bottom to the top of the content tree.

In the process of determining the node distance of the node, judging whether the node belongs to a child node of a parent node, when the node does not belong to the child node of the parent node, determining the node distance of the node to be a preset length, when the node belongs to the ith child node of the parent node, determining a first numerical value, and determining the sum of the node distance of the parent node and the first numerical value as the node distance of the node, wherein the first numerical value is the sum of the width of the first i-1 child node and the interval width between the first i-1 child nodes in the child nodes included in the parent node.

The preset length may be set by a user according to actual needs in a user-defined manner, or may be set by a default terminal, which is not limited in the embodiments of the present disclosure. The preset length may be referred to herein as offset 0.

In determining the node distance of the node, a recursive operation may be performed starting from the top of the content tree and proceeding downward to determine the node distance of each node. For example, referring to fig. 2C, if the node is node a, since the node a does not belong to a child node of the parent node, that is, the node a does not have a parent node, the node distance offset of the node a is the predetermined distance offset 0. Further, the node distance between the node b and the node c may be determined, that is, if the node is the node b, since the node b belongs to the 1 st child node of the two child nodes b and c included in the parent node a, that is, N is 2, the node distance offset of the node b may be determined as: offset0+ (1-1) W_a+ (1-1) MX, i.e., still offset0, where W_aRepresenting the width of the child node b. For another example, if the node is a node c, since the node c belongs to the 2 nd child node of the two child nodes b and c included in the parent node a, it may be determined that the node distance offset of the node c is offset0+ (2-1) × W_b+ (2-1) MX, wherein, W_bRepresenting the width of the child node b.

By analogy, according to the determination manner, the node distance of each node in the plurality of nodes included in the content tree can be determined in a sequential recursive manner.

After the width and the node distance of the node are determined, the lateral position of the node can be determined according to the width and the node distance of the node, and the implementation process includes: determining the lateral position of the node through a first specified formula based on the width of the node and the node distance, wherein the first specified formula is as follows:

wherein, the X_iThe lateral position of the node, the offset being the node distance of the node, the W_iFor the node iWidth, W being the first predetermined width.

(2) Based on the depth of the node in the tree structure of the content tree, a longitudinal position of the node is determined.

The above implementation process for determining the longitudinal position of the node based on the depth of the node in the tree structure of the content tree may include: determining a second value, wherein the second value is the sum of the height of the node and the height of the interval between two adjacent nodes in the longitudinal direction; the product of the second value and the depth of the node in the tree structure of the content tree is determined as the longitudinal position of the node.

Similar to the above gap widths, in the embodiment of the present disclosure, the gap heights between every two adjacent nodes are also the same, and may be set by a user according to actual needs in a customized manner, or may be set by a terminal in a default manner, which is not limited in the embodiment of the present disclosure. The width of the interval between every two adjacent child nodes can be denoted as MY herein.

For example, referring to fig. 2C, if the depth of the node a is 0, the depth of the node b is 1, the depth of the node d is 2, and so on, the depth of the node g is 3.

According to the foregoing, after the terminal obtains the depth of the node in the tree structure of the content tree, it may determine that the longitudinal position of the node is D × (H + MY), where D represents the depth of the node in the tree structure of the content tree, and H represents the height of the node, which may be set by a user in a customized manner according to actual requirements or may be set by the terminal in a default manner.

(3) And determining the axial position of the node according to the attribute information of the node and the webpage information of the webpage, wherein the attribute information of the node is used for indicating the level of the node in the typesetting structure view.

The implementation process for determining the axial position of the node according to the attribute information of the node and the web page information of the web page may include: determining the level of the node in the layout structure view according to the attribute information of the node, determining the number of layers of the layout view and the thickness of each layer of the layout view included in the layout structure view according to the page information of the webpage, and determining the axial position of the node based on the level of the node in the layout structure view, the number of layers of the layout view included in the layout structure view and the thickness of each layer of the layout view.

The attribute information of the node may be carried by the web page itself, and according to the attribute information of the node, a level of the node in the layout structure view may be determined based on CSS (Cascading Style Sheets) standard, for example, if the attribute information of the node carries a z-index attribute, an attribute value of the z-index attribute is used to indicate the level of the node in the layout structure view. Or, if the attribute information of the node carries the positioning attribute, similarly, the attribute value of the positioning attribute may also be used to indicate the level of the node in the layout structure view.

In addition, since the layout structure view actually includes a plurality of layers, each layer has a certain thickness, the terminal needs to determine not only which layer in the layout structure view the node is located in, but also the thickness of each layer, so that the terminal can determine the axial position of the node in the axial direction.

The page information of the web page includes the number of layers of the layout view and the thickness of each layer of the layout view included in the layout structure view, so that the terminal can directly determine the number of layers of the layout view and the thickness of each layer of the layout view based on the page information of the web page.

After determining the level of the node in the layout structure view, the number of layers of the layout views included in the layout structure view and the thickness of each layer of the layout view, the terminal may determine the axial position of the node in a layer-by-layer overlapping manner.

2032: based on the node identifiers of the plurality of nodes, the corresponding node patterns are obtained from the corresponding relations between the stored node identifiers and the node patterns.

Wherein the node identification can be used to uniquely identify a node. That is, in the browser kernel, the corresponding relationship between the node identifiers and the node styles may be stored, so that the terminal may obtain the node styles corresponding to the respective node identifiers according to the node identifiers of the respective nodes.

Wherein the node style may be used to indicate the color, size, etc. of the corresponding node.

It should be noted here that the sub-steps 2031 and 2032 are only used to illustrate the determination of the spatial positions of the nodes included in the content tree and the node patterns of the nodes, and in the actual implementation process, the sub-steps 2031 and 2032 have no sequence executed first and then.

In step 204, a layout structure view of the browser kernel is drawn according to the spatial positions and node styles of the plurality of nodes, and the layout structure view is displayed.

After determining the spatial positions of the plurality of nodes included in the content tree and acquiring the node styles of the plurality of nodes, the terminal may draw the view of the layout structure of the browser kernel, and in a possible implementation manner, the terminal may draw and display the view of the layout structure through a Javascript (JS script) 3D (third dimensions) Library encapsulating WebGL (Web Graphics Library).

Referring to fig. 2D, fig. 2D exemplarily shows a rendered Layout structure view, which includes multiple layers, including a LOT (Layout Object Tree) 1, a PLT (Paint Layer Tree) 2, a CLM (Composited Layout Mapping) 3, a GLT (Graphics Layer Tree) 4, and a PLD (Page Layout Details) 5. Each layer may represent each stage in the web page layout process.

It should be noted that, the LOT and PLD may include multiple layers, that is, in the process of determining the number of layers included in the layout structure view according to the webpage information of the page, the number of layers included in the LOT and PLD may be actually determined, that is, the number of layers included in the LOT and PLD may be determined according to the webpage information of the page, and the thickness of each layer included in the LOT and PLD may also be determined according to the page information of the webpage.

The terminal constructs the content tree comprising a plurality of nodes according to the page layout data of each stage, namely the drawn layout structure view directly associates the page layout data of each stage, so the integrity of the page layout data is ensured.

Therefore, the method for displaying the typesetting structure of the browser kernel is realized. In addition, in the actual implementation process, it may be necessary to further optimize a certain node among the plurality of nodes, and for this reason, in the embodiment of the present disclosure, a node information display function is further provided, specifically, refer to the following step 205 and step 206.

In step 205, when the preset operation of the target node is detected, node information of the target node is obtained, where the target node is any node in the layout structure view, and the node information includes a display position, a size, and a display format of the target node.

The preset operation may be set by a user according to actual needs in a user-defined manner, or may be set by a default of a terminal, which is not limited in the embodiment of the present disclosure. For example, the preset operation may be a mouse click operation or the like.

It should be noted that, in the embodiment of the present disclosure, the description is only given by taking the example that the node information includes the display position, the size, and the display format of the target node, and in another embodiment, the node information may further include other information, which is not limited in this disclosure.

In step 206, the node information is displayed.

In one possible implementation manner, when the node information is displayed, the node information of the target node may be displayed in the vicinity of the target node in a manner of a floating frame or the like.

In addition, when the node information of the target node is displayed, the node and the node information to be displayed can be filtered according to various filtering conditions based on the logical relationship of the browser kernel, or the node and the node information to be displayed can be filtered according to the established relevance. The filtering condition may include floatability, a positioning mode, a video tag, and an ID (Identification) and a class attribute on an HTML (Hyper Text Markup Language) tag, and the established association may include an association relationship between a node and a rendering layer, which is not described in detail in the embodiments of the present disclosure.

FIG. 3A is a block diagram illustrating an apparatus for rendering a composition structure of a browser kernel, according to an example embodiment. Referring to fig. 3A, the apparatus includes a first acquisition module 310, a construction module 320, a determination module 330, and a drawing module 340.

A first obtaining module 310, configured to, when a layout structure presentation instruction is detected in a web page, obtain page layout data of each stage of the web page in a layout process according to data attributes of a plurality of stages included in a browser kernel, where the browser kernel is a kernel of a browser currently displaying the web page;

a constructing module 320, configured to construct a content tree based on the page layout data of each stage acquired by the first acquiring module 310, where the content tree includes a plurality of nodes;

a determining module 330, configured to determine spatial positions of a plurality of nodes included in the content tree constructed by the constructing module 320 and node styles of the plurality of nodes;

the drawing module 340 is configured to draw the layout structure view of the browser kernel according to the spatial positions and the node styles of the plurality of nodes determined by the determining module 330, and display the layout structure view.

Optionally, referring to fig. 3B to 3C, the determining module 330 includes:

a determining submodule 330a for determining, for each node of a plurality of nodes included in the content tree, a lateral position, a longitudinal position, and an axial position of the node;

the obtaining sub-module 330b is configured to obtain, based on the node identifiers of the multiple nodes, a corresponding node style from the stored correspondence between the node identifiers and the node styles.

Optionally, the determining submodule 330a is configured to:

the first specified formula is:

Optionally, the determining submodule 330a is configured to:

Optionally, the apparatus further comprises:

a second obtaining module 350, configured to, when a preset operation of a target node is detected, obtain node information of the target node, where the target node is any node in the layout structure view, and the node information includes a display position, a size, and a display format of the target node;

and a display module 360, configured to display the node information.

With regard to the apparatus in the above-described embodiment, the specific manner in which each module performs the operation has been described in detail in the embodiment related to the method, and will not be elaborated here.

Fig. 4 is a block diagram illustrating an apparatus 400 for presenting a composition structure of a browser kernel according to an exemplary embodiment. For example, the apparatus 400 may be a mobile phone, a computer, a digital broadcast terminal, a messaging device, a game console, a tablet device, a medical device, an exercise device, a personal digital assistant, and the like.

Referring to fig. 4, the apparatus 400 may include one or more of the following components: processing components 402, memory 404, power components 406, multimedia components 408, audio components 410, input/output (I/O) interfaces 412, sensor components 414, and communication components 416.

The processing component 402 generally controls overall operation of the apparatus 400, such as operations associated with display, telephone calls, data communications, camera operations, and recording operations. The processing component 402 may include one or more processors 420 to execute instructions to perform all or a portion of the steps of the methods described above. Further, the processing component 402 can include one or more modules that facilitate interaction between the processing component 402 and other components. For example, the processing component 402 can include a multimedia module to facilitate interaction between the multimedia component 408 and the processing component 402.

The memory 404 is configured to store various types of data to support operations at the apparatus 400. Examples of such data include instructions for any application or method operating on the device 400, contact data, phonebook data, messages, pictures, videos, and so forth. The memory 404 may be implemented by any type or combination of volatile or non-volatile memory devices such as Static Random Access Memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic memory, flash memory, magnetic or optical disks.

Power supply components 406 provide power to the various components of device 400. The power components 406 may include a power management system, one or more power supplies, and other components associated with generating, managing, and distributing power supplies for the apparatus 400.

The multimedia component 408 includes a screen that provides an output interface between the device 400 and the user. In some embodiments, the screen may include a Liquid Crystal Display (LCD) and a Touch Panel (TP). If the screen includes a touch panel, the screen may be implemented as a touch screen to receive an input signal from a user. The touch panel includes one or more touch sensors to sense touch, slide, and gestures on the touch panel. The touch sensor may not only sense the boundary of a touch or slide action, but also detect the duration and pressure associated with the touch or slide operation. In some embodiments, the multimedia component 408 includes a front facing camera and/or a rear facing camera. The front camera and/or the rear camera may receive external multimedia data when the apparatus 400 is in an operation mode, such as a photographing mode or a video mode. Each front camera and rear camera may be a fixed optical lens system or have a focal length and optical zoom capability.

The audio component 410 is configured to output and/or input audio signals. For example, audio component 410 includes a Microphone (MIC) configured to receive external audio signals when apparatus 400 is in an operational mode, such as a call mode, a recording mode, and a voice recognition mode. The received audio signals may further be stored in the memory 404 or transmitted via the communication component 416. In some embodiments, audio component 410 also includes a speaker for outputting audio signals.

The I/O interface 412 provides an interface between the processing component 402 and peripheral interface modules, which may be keyboards, click wheels, buttons, etc. These buttons may include: a home button, a volume button, a start button, and a lock button.

The sensor component 414 includes one or more sensors for providing various aspects of status assessment for the apparatus 400. For example, the sensor assembly 414 may detect an open/closed state of the apparatus 400, the relative positioning of the components, such as a display and keypad of the apparatus 400, the sensor assembly 414 may also detect a change in the position of the apparatus 400 or a component of the apparatus 400, the presence or absence of user contact with the apparatus 400, orientation or acceleration/deceleration of the apparatus 400, and a change in the temperature of the apparatus 400. The sensor assembly 414 may include a proximity sensor configured to detect the presence of a nearby object without any physical contact. The sensor assembly 414 may also include a light sensor, such as a CMOS or CCD image sensor, for use in imaging applications. In some embodiments, the sensor assembly 414 may also include an acceleration sensor, a gyroscope sensor, a magnetic sensor, a pressure sensor, or a temperature sensor.

The communication component 416 is configured to facilitate wired or wireless communication between the apparatus 400 and other devices. The apparatus 400 may access a wireless network based on a communication standard, such as WiFi, 2G or 3G, or a combination thereof. In an exemplary embodiment, the communication component 416 receives broadcast signals or broadcast related information from an external broadcast management system via a broadcast channel. In an exemplary embodiment, the communication component 416 further includes a Near Field Communication (NFC) module to facilitate short-range communications. For example, the NFC module may be implemented based on Radio Frequency Identification (RFID) technology, infrared data association (IrDA) technology, Ultra Wideband (UWB) technology, Bluetooth (BT) technology, and other technologies.

In an exemplary embodiment, the apparatus 400 may be implemented by one or more Application Specific Integrated Circuits (ASICs), Digital Signal Processors (DSPs), Digital Signal Processing Devices (DSPDs), Programmable Logic Devices (PLDs), Field Programmable Gate Arrays (FPGAs), controllers, micro-controllers, microprocessors or other electronic components for performing the above-described methods.

In an exemplary embodiment, a non-transitory computer-readable storage medium comprising instructions, such as the memory 404 comprising instructions, executable by the processor 420 of the apparatus 400 to perform the above-described method is also provided. For example, the non-transitory computer readable storage medium may be a ROM, a Random Access Memory (RAM), a CD-ROM, a magnetic tape, a floppy disk, an optical data storage device, and the like.

A non-transitory computer readable storage medium, wherein when instructions in the storage medium are executed by a processor of a mobile terminal, the mobile terminal is enabled to execute the method for presenting the typesetting structure of the browser kernel according to the embodiment in fig. 1 or fig. 2A.

Other embodiments of the disclosure will be apparent to those skilled in the art from consideration of the specification and practice of the disclosure disclosed herein. This application is intended to cover any variations, uses, or adaptations of the disclosure following, in general, the principles of the disclosure and including such departures from the present disclosure as come within known or customary practice within the art to which the disclosure pertains. It is intended that the specification and examples be considered as exemplary only, with a true scope and spirit of the disclosure being indicated by the following claims.

It will be understood that the present disclosure is not limited to the precise arrangements described above and shown in the drawings and that various modifications and changes may be made without departing from the scope thereof. The scope of the present disclosure is limited only by the appended claims.

Claims

1. A method for showing a typesetting structure of a browser kernel is applied to a terminal, and comprises the following steps:

determining spatial positions of a plurality of nodes comprised by the content tree and a node pattern of the plurality of nodes, the spatial position of each node being determined by a lateral position, a longitudinal position and an axial position;

and drawing a typesetting structure view of the browser kernel according to the spatial positions and node styles of the nodes, and displaying the typesetting structure view, wherein the typesetting structure view comprises multiple layers, and each layer represents each stage in the webpage typesetting process.

2. The method of claim 1, wherein the determining the spatial locations of the plurality of nodes included in the content tree and the node patterns of the plurality of nodes comprises:

3. The method of claim 2, wherein said determining the lateral, longitudinal, and axial positions of the nodes comprises:

4. The method of claim 3, wherein said determining the width and distance of the nodes comprises:

5. The method of claim 4, wherein said determining the lateral position of the node based on the width of the node and the node distance comprises:

the first specified formula is:

6. The method of claim 3, wherein said determining a longitudinal position of the node based on a depth of the node in a tree structure of the content tree comprises:

7. The method of claim 3, wherein determining the axial location of the node based on the attribute information of the node and the web page content of the web page comprises:

8. The method of claim 1, wherein the method further comprises:

and displaying the node information.

9. A display device of a typesetting structure of a browser kernel is characterized in that the display device is applied to a terminal, and the display device comprises:

a determining module, configured to determine spatial positions of a plurality of nodes included in the content tree constructed by the constructing module and node patterns of the plurality of nodes, wherein the spatial position of each node is determined by a horizontal position, a vertical position and an axial position;

and the drawing module is used for drawing the typesetting structure view of the browser kernel according to the spatial positions and the node styles of the nodes determined by the determining module and displaying the typesetting structure view, wherein the typesetting structure view comprises a plurality of layers, and each layer represents each stage in the webpage typesetting process.

10. The apparatus of claim 9, wherein the determining module comprises:

11. The apparatus of claim 10, wherein the determination submodule is to:

12. The apparatus of claim 11, wherein the determination submodule is to:

13. The apparatus of claim 12, wherein the determination submodule is to:

the first specified formula is:

14. The apparatus of claim 11, wherein the determination submodule is to:

15. The apparatus of claim 11, wherein the determination submodule is to:

16. The apparatus of claim 9, wherein the apparatus further comprises:

and the display module is used for displaying the node information.

17. A display device of a typesetting structure of a browser kernel is configured in a terminal, and the device comprises:

a processor;

a memory for storing processor-executable instructions;

wherein the processor is configured to: