CN114510241A

CN114510241A - Page rendering method and device

Info

Publication number: CN114510241A
Application number: CN202210108403.2A
Authority: CN
Inventors: 齐雅楠
Original assignee: Beijing Jindi Technology Co Ltd
Current assignee: Beijing Jindi Technology Co Ltd
Priority date: 2022-01-28
Filing date: 2022-01-28
Publication date: 2022-05-17

Abstract

The disclosure provides a page rendering method and device, relates to the technical field of computers, and can be used for rendering scenes on pages. The specific implementation scheme is as follows: generating and rendering a first tag module in a page; generating and rendering at least one tag in the first tag module based on the tag data in the first tag module; in response to there being a next unrendered second tag module in the page, performing the following: generating and rendering a joining element for joining the first label module and the second label module based on the joining relation between the first label module and the second label module and preset relative positioning attribute information of the first joining element; responding to the success of rendering of the joining elements, and generating and rendering a second tag module in the page based on preset relative positioning attribute information of a second joining element; and generating and rendering at least one label in the second label module based on the label data in the second label module.

Description

Page rendering method and device

Technical Field

The present disclosure relates to the field of computer technology, and may be used in a page rendering scenario.

Background

The DMP (data management platform) is a platform for performing tag type screening according to the crowd characteristics and performing corresponding data analysis and accurate marketing according to the screening result. According to product requirements, module classification can be carried out on the selected labels in the DMP, and intersection, union and difference operation of data can be carried out among all label modules. Specifically, when the number of tag modules is greater than 1, there needs to be a join element between two adjacent tag modules, which represents the join relationship between the two tag modules. When the connection relation is 'and', the intersection is taken between the label data of the two label modules; when the concatenation relationship is "or", it represents a union between the tag data of the two tag modules.

For example, the tag selected in the first tag module is "area ═ beijing", and the tag selected in the second tag module is "yes or no VIP". If the linking element between the two tag modules is "and/or" and the currently selected is "and" relationship, the intersection between the two tag modules needs to be calculated, that is, the currently selected population needs to have both the population characteristics of "beijing", and "whether VIP is" the two tag representations ", that is, the currently selected population of users whose domain is beijing and VIP is. If the linking element between the two tag modules is "and/or" and the currently selected relationship is "or", the union between the two tag modules needs to be calculated, that is, the currently selected population needs to have the population characteristics represented by "domain is beijing" tag or "whether VIP is" tag ", that is, the currently selected population of users whose domain is beijing or VIP is selected.

Since the engagement element identifies the engagement relationship between two tagged modules that are engaged, it should always be between the two tagged modules. If the height of the module frame of both tag modules is a fixed value, it is easy to centrally locate the splice element between the two tag modules. However, now the height of each tag module increases with the number of tags contained therein or decreases with the number of tags contained therein. Therefore, how to quickly and effectively enable the connection elements between every two adjacent label modules to be always located between every two adjacent modules is an urgent problem to be solved.

Disclosure of Invention

The disclosure provides a page rendering method and apparatus, a device, a storage medium and a computer program product.

According to an aspect of the present disclosure, there is provided a page rendering method, including: generating and rendering a first tag module in a page; generating and rendering at least one tag in the first tag module based on the tag data in the first tag module; in response to there being a next unrendered second tag module in the page, performing the following: generating and rendering a joining element for joining the first tag module and the second tag module based on a joining relationship between the first tag module and the second tag module and preset relative positioning attribute information of a first joining element; responding to the success of the rendering of the joining elements, and generating and rendering the second tag module in the page based on preset relative positioning attribute information of the second joining elements; and generating and rendering at least one tag in the second tag module based on the tag data in the second tag module.

According to another aspect of the present disclosure, there is provided a page rendering apparatus including: the first rendering module is used for generating and rendering a first tag module in the page; a second rendering module for generating and rendering at least one tag in the first tag module based on the tag data in the first tag module; a third rendering module, configured to, in response to a presence of a next unrendered second tag module in the page, perform a corresponding operation by: a first rendering unit, configured to generate and render an engagement element for engaging the first tag module with the second tag module based on an engagement relationship between the first tag module and the second tag module and preset first engagement element relative positioning attribute information; the second rendering unit is used for responding to the success of rendering of the joining elements, and generating and rendering the second label module in the page based on preset relative positioning attribute information of the second joining elements; and a third rendering unit, configured to generate and render at least one tag in the second tag module based on the tag data in the second tag module.

According to another aspect of the present disclosure, there is provided an electronic device including: at least one processor; and a memory communicatively coupled to the at least one processor; wherein the memory stores instructions executable by the at least one processor to enable the at least one processor to perform the method of the embodiments of the present disclosure.

According to another aspect of the present disclosure, there is provided a non-transitory computer readable storage medium having stored thereon computer instructions for causing the computer to perform the method according to the embodiments of the present disclosure.

According to another aspect of the present disclosure, a computer program product is provided, comprising a computer program which, when executed by a processor, implements a method according to embodiments of the present disclosure.

It should be understood that the statements in this section do not necessarily identify key or critical features of the embodiments of the present disclosure, nor do they limit the scope of the present disclosure. Other features of the present disclosure will become apparent from the following description.

Drawings

The drawings are included to provide a better understanding of the present solution and are not to be construed as limiting the present disclosure. Wherein:

FIG. 1 illustrates a scene diagram in which embodiments of the disclosure may be implemented;

FIG. 2 illustrates a flow diagram of a page rendering method according to an embodiment of the disclosure;

FIG. 3 illustrates a schematic diagram of a page rendering method according to an embodiment of the present disclosure;

FIG. 4 illustrates a schematic diagram of a tag combination area, according to an embodiment of the present disclosure;

FIGS. 5A and 5B illustrate UI effect diagrams after page rendering according to embodiments of the disclosure;

FIG. 6 illustrates a schematic diagram of a join element rendering process, according to an embodiment of the disclosure;

FIG. 7 illustrates a UI effect diagram after an upstream tag module adds and subtracts tags, according to an embodiment of the disclosure;

FIG. 8 illustrates a UI effect diagram according to an embodiment of the disclosure;

FIG. 9 illustrates a block diagram of a page rendering apparatus according to an embodiment of the present disclosure;

fig. 10 illustrates a block diagram of an electronic device for implementing the page rendering method and apparatus according to the embodiment of the present disclosure.

Detailed Description

Exemplary embodiments of the present disclosure are described below with reference to the accompanying drawings, in which various details of the embodiments of the disclosure are included to assist understanding, and which are to be considered as merely exemplary. Accordingly, those of ordinary skill in the art will recognize that various changes and modifications of the embodiments described herein can be made without departing from the scope and spirit of the present disclosure. Also, descriptions of well-known functions and constructions are omitted in the following description for clarity and conciseness.

Application scenarios suitable for the page rendering method and apparatus of the embodiments of the present disclosure are introduced below.

Fig. 1 illustrates a scene diagram in which embodiments of the present disclosure may be implemented.

As shown in fig. 1, the label combination includes two label modules, namely, combination 1 and combination 2, where the label selected in combination 1 is "beijing city", the label selected in combination 2 is "if VIP is" yes ", and the linking relationship between the two label modules of combination 1 and combination 2 is" and ", therefore, it is desirable to achieve the UI effect shown in fig. 1, that is, the linking element" and/or "the position which is between combination 1 and combination 2 and is close to the left side of the page, on the one hand, the logical relationship between combination 1 and combination 2 can be clearly identified, and on the other hand, the UI layout can be more beautiful and better.

In some embodiments, to achieve the UI effect shown in fig. 1, the position attribute of each join element (e.g., "and/or") may be set to absolute (absolute position), and the variation of the height of each tag module may be monitored through java Script, so as to dynamically adjust the Top attribute value of each join element (i.e., adjust the distance between the Top of the frame of the join element and the Top of the frame of the tag module whose front end is connected, such as adjust the distance between the Top of the frame of "and/or" join element and the Top of the frame of combination 1 whose front end is connected "in fig. 1), so as to achieve the UI effect that the join element is always located between two tag modules which are connected.

It should be understood that, when the technical scheme is adopted to realize the UI effect shown in FIG. 1, the DOM structure of the page is clearer and easier to understand, and the condition judgment is reduced during traversal rendering. However, by adopting the technical scheme, real-time monitoring needs to be performed through a java Script, and risks such as performance consumption and calculation errors exist.

In this regard, embodiments of the present disclosure provide a page rendering scheme that can accurately center and display the engagement elements, such as to achieve the UI effect shown in fig. 1, regardless of whether the height of the tag module is fixed or dynamically changing.

According to an embodiment of the present disclosure, there is provided a page rendering method.

FIG. 2 illustrates a flow chart of a page rendering method according to an embodiment of the disclosure.

As shown in FIG. 2, the method 200 may include operations S210-S250.

In operation S210, a first tab module in a page is generated and rendered.

In operation S220, at least one tag in the first tag module is generated and rendered based on the tag data in the first tag module.

In response to the presence of the next unrendered second tag module in the page, the following operations S230-S250 are performed.

In operation S230, based on the engagement relationship between the first tag module and the second tag module and the preset relative positioning attribute information of the first engagement element, engagement elements for engaging the first tag module and the second tag module are generated and rendered.

In operation S240, in response to the success of rendering the join element, a second tag module in the page is generated and rendered based on the preset relative positioning attribute information of the second join element.

In operation S250, at least one tag in the second tag module is generated and rendered based on the tag data in the second tag module.

In the embodiment of the present disclosure, when a page is generated and rendered, the module data array may be traversed, if there is a tag module that is not rendered, a corresponding tag module (module 1) is generated and rendered in the page, if there is a tag module that is not rendered, a selected tag is generated according to the tag data in the tag module, then the module data array is traversed continuously, if there is a next tag module that is not rendered (module 2), a DOM node where the tag module that is just generated and rendered (module 1) and the tag module that is to be generated and rendered next (module 2) are determined to be linked according to a predefined page DOM structure, and a linking relationship between the module 1 and the module 2 is determined according to the linking DOM node to generate a corresponding linking element (e.g., "and/or"), then relative position information between the module 1 and the linking element is set in advance, the join element is located and rendered in the page, and then module 2 and the selected tags contained therein continue to be generated and rendered in a manner similar to that of module 1. It should be noted that when rendering the module 2, it needs to be positioned and rendered according to the preset layout defined by the relative position information between the module 2 and the join element. Then, the module data array may be continuously traversed, and whether there is a next unrendered tab module (block 3 … …) may be determined, and the above corresponding operations may be repeatedly performed until all tab modules in the page are rendered successfully, so as to achieve the corresponding UI effect.

It should be noted that, in the embodiment of the present disclosure, when traversing the module data array, if there is no tag module that is not rendered any more, the traversal rendering is ended, and the corresponding UI effect is displayed.

Illustratively, referring back to fig. 1, such as user addition generates two tag modules, combination 1 and combination 2, respectively, and adds a zone tag in the first tag module and selects "zone-yes", and adds a VIP tag in the second tag module and selects "VIP-yes". To this end, the module data array is initially traversed: 1) while traversing the first tag module, the first tag module is generated and rendered (combination 1), while the content of the selected tag is generated and rendered based on the tag data within the module ("zone: beijing city "); 2) judging whether a next unrendered tag module exists or not, and if not, finishing traversal rendering; if so, generating a join element (and/or, where the selected is "and" relationship, and the "and" element is represented as a darker color in the figure), and locating and rendering the join element according to the combination 1 and the relative position information between the "and/or" join elements; then generating a second tag module (combination 2), generating and rendering the content of the selected tag (whether VIP: Yes) according to the tag data in the module, wherein combination 2 needs to be located and rendered according to the relative position information between combination 2 and "and/or" connection element; 3) and repeating the step 2), and finally generating all label modules and connecting elements in the label combination to realize the corresponding UI effect.

Through this disclosed embodiment, because the linking element location attribute that sets up is relative (location), therefore no matter the height of label module is fixed or dynamic change, can all be accurate centering location and show linking element, be about to link the element location show in the middle of its two label modules that link up.

In addition, according to the embodiment of the disclosure, because the set positioning attribute of the connected element is relative, real-time monitoring is not required through a java Script, no extra performance consumption risk exists, and no risk caused by calculation error exists in the page.

It should be noted that, in the embodiment of the present disclosure, the tab modules in the page may be arranged longitudinally along a vertical line, or may be arranged transversely along a horizontal line. In the case of being arranged along the vertical line of the lead, the linking element may be positioned and displayed at the middle of two tag modules that are linked together, or at a position that is further to the left from the middle (e.g., a position that is closer to the left boundary of the page in the middle), or at a position that is further to the right from the middle (e.g., a position that is closer to the right boundary of the page in the middle), which is not limited by the embodiments of the present disclosure. In the case of horizontal alignment, the linking element may be positioned and displayed at the middle of the two tab modules that it links up, or at a position above the middle (e.g., a position centered near the upper border of the page), or at a position below the middle (e.g., a position centered near the lower border of the page), which is not limited by the embodiments of the present disclosure.

Illustratively, as shown in FIG. 3, the operation of generating and rendering a page may include operations S310 to S350.

In operation S310, traversing the tag module data array, and determining whether there is a next unrendered tag module; if so, perform operation S320; if not, operation S350 is performed;

in operation S320, generating an engagement element for engaging two adjacent tag modules (a current tag module and a next unrendered tag module);

rendering the join element and the previous next unrendered tag module based on the outer edge distance of the join element and the outer edge distances of the two adjacent tag modules joined in front and behind the join element in operation S330;

in operation S340, the join element is moved to a specified position (e.g., to a position as in the middle of two tag modules it joins and near the left edge of the page) based on the outer margin (e.g., the right margin) of the join element and the outer margin (e.g., the left margin) of the current tag module.

And circularly executing the above operations until the traversal rendering is finished.

In operation S350, the traversal rendering is ended, and the corresponding UI effect is implemented.

It should be noted that, in the embodiment of the present disclosure, a DOM structure of a page to be rendered may be defined in advance. As shown in fig. 4, the layout of the page tag combination area may be divided into two parts, namely, a left area for displaying the association relationship between the tag modules, that is, displaying the join elements, and a right area for displaying the tag modules and the tag content specifically included in each tag module.

In addition, a straight line (a straight line passing through "and/or" the join element as shown in fig. 1) having the same height as that of the parent container (the height of the parent container depends on the combined height of the tag modules in the right area, and the parent container refers to the parent container of each tag module) may be further disposed in the left area for identifying the association relationship between the corresponding tag modules together with each join element.

As an optional embodiment, the first engagement element relative positioning attribute information includes: a first opposing outer margin and a first opposing left margin. Wherein the first relative outer margin is determined by the outer margin of the first tag module and/or the outer margin of the join element, and the first relative left margin is determined by the left margin of the first tag module and/or the right margin of the join element.

The method includes the following steps of generating and rendering a joining element for joining a first tag module and a second tag module based on a joining relation between the first tag module and the second tag module and preset relative positioning attribute information of the first joining element.

And generating corresponding connection elements based on the connection relation between the first label module and the second label module.

Rendering the corresponding engagement elements on the page based on the first relative outer margin and the first relative left margin.

It should be noted that, in some embodiments of the present disclosure, when performing page rendering, relative positioning (relative positioning) may be implemented by using a BFC (Block Formatting Context) layout rule, so that positioning of a join element is automatically adjusted along with a change in height of a tag module, and real-time monitoring and setting through a java Script are avoided.

It should be understood that BFC specifies the following layout rules: 1) each BFC can be understood as a container, which is an independent layout environment, and in one BFC, DOM sub-elements inside the container do not influence DOM elements outside the container, and vice versa, namely, the DOM sub-elements inside the container and the DOM elements outside the container do not influence each other; 2) in a BFC, both the block boxes (where the contents do not fill the entire row) and the row boxes (where the contents fill the entire row) inside the container are placed vertically (vertically) next to each other along the border of its parent element; 3) in a BFC, the distance in the vertical direction between adjacent boxes (e.g., two adjacent tag modules or two adjacent tags in a tag module may be two adjacent boxes) is determined by their margin. And two adjacent boxes belonging to the same BFC may overlap each other, indicating that the two adjacent boxes overlap each other when margin of the two adjacent boxes is negative. When the margin of two adjacent boxes is a negative value, the maximum margin of the absolute values can be taken as the margin of the two adjacent boxes, and if the margin of one Box is-2 pix and the margin of the other Box is-3 pix, the margin of the two adjacent boxes is-1 pix, that is, the Box at the rear end is moved by 1pix from the 0 position in the negative direction; when the margin of two adjacent boxes is a positive value, the maximum one of the two adjacent boxes can be taken as the margin of the two adjacent boxes, and if the margin of one Box is 2pix and the margin of the other Box is 3pix, the margin of the two adjacent boxes is 3pix, that is, the Box at the rear end is moved by 3pix from the 0 position in the positive direction; when the margin of two adjacent boxes is a positive value and the other is a negative value, the two values can be taken to be summed as the margin of the two adjacent boxes, and if the margin of one Box is-2 pix and the margin of the other Box is 3pix, the margin of the two adjacent boxes is 1pix, that is, the Box at the rear end is moved 1pix from the 0 position in the positive direction.

Therefore, in some embodiments of the present disclosure, based on the BFC layout rule, the first tag module and the join element described above can be regarded as two boxes, and thus the distance between the first tag module and the join element can be calculated by their margin according to the above rule.

Furthermore, in other embodiments of the present disclosure, the first relative outer margin may also be determined according to only one of the outer margin of the first tag module or the outer margin of the join element, that is, the outer margin of the first tag module is directly taken as the first relative outer margin; alternatively, the outer margin of the join element is directly taken as the first relative outer margin. Specifically, it may be decided which scheme is selected to determine the first relative outer edge distance according to a user setting.

As mentioned above, the tab modules in the page may be arranged longitudinally along a vertical line or transversely along a horizontal line. In the case of a vertical alignment along the lead line, the splice element can be positioned and displayed at the middle of the two tag modules that it splices, or at a position to the left of the middle (e.g., at the middle near the left border of the page), or at a position to the right of the middle (e.g., at the middle near the right border of the page). In the case of a horizontal line, the join element may be positioned to be displayed at the exact middle of the two tag modules that it joins, or at a position above the middle (e.g., centered near the upper border of the page), or below the middle (e.g., centered near the lower border of the page).

The UI effect of the join element displayed in the middle of the two connected tab modules is shown in fig. 5A, and the UI effect of the join element displayed in the left position of the middle of the two connected tab modules is shown in fig. 5B. To achieve the UI effect as shown in fig. 5B, the first relative Left margin needs to be determined according to the Left margin (i.e. Left attribute value) of the first tag module and/or the Right margin (i.e. Right attribute value) of the join element to finally locate and/or join the position of the element in the page. The specific calculation method of the first relative left margin is similar to the specific calculation method of the first relative outer margin, and is not described herein again.

Through this disclosed embodiment, adopt BFC overall arrangement rule to realize linking up the relative positioning of element, and then realized linking up the effect that the element lies in the middle of its two label modules that link up, compare with the absolute positioning scheme that adopts linking up the element, this scheme realization cost reduction, and the error is less.

This is because, in the absolute positioning scheme, CSS style setting needs to be dynamically performed by a java Script, and this process needs to acquire attribute values of offset Top, client Top, and the like of a DOM node to fix the position of the DOM node, which all cause rearrangement of page elements, and thus have a greater impact on a browser and lower page performance. According to the scheme, the DOM node is not operated by the script, so that the influence on the browser is smaller, and the page performance is improved.

It should be noted that, in the embodiment of the present disclosure, the above CSS attributes of each tag module and each link element in the page may be predefined.

Further, as an optional embodiment, rendering the corresponding join element on the page based on the first relative outer margin and the first relative left margin includes: the corresponding engagement elements are rendered directly at the page positions determined by the first relative outer margin and the first relative left margin.

Specifically, the display position of the engagement element on the page may be determined according to the first relative outer side distance and the first relative left side distance, and then the engagement element is rendered and displayed on the display position. Illustratively, the "and/or" engagement element may be presented directly in the position shown in FIG. 5B.

Or, as another alternative embodiment, rendering the corresponding join element on the page based on the first relative outer margin and the first relative left margin includes the following operations.

Based on the first relative outer margin, rendering a corresponding engagement element at a first position of the page.

And moving the corresponding connecting element from the first position to the second position based on the first relative left margin.

Specifically, the linking element may be displayed in the middle of two tag modules that are linked together according to the first relative left margin, and then the linking element may be moved to the corresponding offset position according to the first relative left margin. For example, the "and/or" join element may be displayed at the 610 position shown in fig. 6 according to the first relative left margin, and then moved from the 610 position shown in fig. 6 to the 620 position shown in fig. 6 according to the first relative left margin.

Further, as an optional embodiment, the method further comprises: and in response to increasing or decreasing the number of tags in the first tag module, controlling the first tag module to maintain a constant relative position with the corresponding join element based on the first relative outer margin, and controlling the second tag module to maintain a constant relative position with the corresponding join element based on the second join element relative positioning attribute information, wherein the first tag module increases longitudinally as the number of tags therein increases, and decreases longitudinally as the number of tags therein decreases.

In the embodiment of the present disclosure, as long as neither the outer edge distance of the first tag module nor the outer edge distance of the corresponding engagement element is modified or the relative outer edge distance calculated from the two outer edge distances is not changed, the display position of the corresponding engagement element in the page may be automatically adjusted adaptively according to the above corresponding operation, and as long as neither the outer edge distance of the second tag module nor the outer edge distance of the corresponding engagement element is modified or the relative outer edge distance calculated from the two outer edge distances is changed, the display position of the second tag module in the page may also be automatically adjusted adaptively according to the above corresponding operation, so as to ensure that the relative positions of the first tag module, the corresponding engagement element, and the second tag module are kept unchanged.

Through this disclosed embodiment, no matter the height of label module is fixed or dynamic change, can all accurately be fixed position and show the linking element between two label modules that link up with linking element location show in the middle of.

Illustratively, on the basis of the UI effect shown in fig. 5, if an active tag is added to the combination 1, the UI effect shown in fig. 7 can be obtained. On the contrary, on the basis of the UI effect shown in fig. 7, if one active tag is reduced in combination 1, the UI effect shown in fig. 5 can be obtained.

As an optional embodiment, the first relative outer edge distance is a negative value, so that the distance between the first label module and the second label module is smaller than a preset threshold, and the UI layout is more attractive and reasonable.

As an alternative embodiment, the second engagement element relative positioning attribute information includes: a second relative outer margin, wherein the second relative outer margin is determined by an outer margin of the second tag module and/or an outer margin of the join element. Correspondingly, based on the preset relative positioning attribute information of the second joining element, a second tag module in the page is generated and rendered, and the method comprises the following steps: rendering a second tag module on the page based on the second relative outer margin.

It should be understood that the method for determining the second relative outer edge distance is similar to the method for determining the first relative outer edge distance, and the embodiment of the disclosure is not described herein again. In addition, a method for rendering a second tag module on the page based on the second relative external margin is similar to a method for rendering a corresponding join element on the page based on the first relative external margin, and details of the embodiment of the disclosure are not repeated herein.

With the page rendering method provided by the embodiment of the present disclosure, no matter how much the tag content is in the tag module (e.g., combination 1 shown in fig. 8 and combination 1 shown in fig. 7), how high the height is, the join element (e.g., "and/or") is always between the two tag modules that it joins.

As an optional embodiment, similar to the first relative outer edge distance being a negative value, the second relative outer edge distance is also a negative value, so that the distance between the first label module and the second label module can be smaller than a preset threshold value, and the UI layout is more attractive and reasonable.

It should be appreciated that depending on the BFC creation conditions, relative positioning cannot create a single BFC, and in this case, although the join element (e.g., and/or) can be moved to the left side of the page by setting the left attribute value, it still occupies the height of the position between the two tag modules that it joins, so that the space between the two tag modules is relatively large and is not beautiful. However, in the UI layout, the distance between two modules is usually required to be relatively small, so according to the BFC layout rule, the margin attribute value (margin)) may be set to a negative pixel value, so that the distance between the front and rear modules becomes smaller, and thus the distance required by the UI layout is set, and finally, the presentation effect may refer to fig. 8.

According to the embodiment of the disclosure, the disclosure also provides a page rendering device.

Fig. 9 illustrates a block diagram of a page rendering apparatus according to an embodiment of the present disclosure.

As shown in fig. 9, the apparatus 900 may include: a first rendering module 910, a second rendering module 920, and a third rendering module 930. Wherein the third rendering module 930 comprises: a first rendering unit 931, a second rendering unit 932, and a third rendering unit 933.

A first rendering module 910 configured to generate and render a first tag module in a page.

A second rendering module 920, configured to generate and render at least one tag in the first tag module based on the tag data in the first tag module.

A third rendering module 930, configured to, in response to a second tag module not rendered next in the page, perform a corresponding operation through the following units.

A first rendering unit 931, configured to generate and render an engagement element for engaging the first tag module with the second tag module, based on the engagement relationship between the first tag module and the second tag module and preset first engagement element relative positioning attribute information.

A second rendering unit 932, configured to generate and render the second tab module in the page based on the preset second joining element relative positioning attribute information in response to the successful rendering of the joining element.

A third rendering unit 933, configured to generate and render at least one tag in the second tag module based on the tag data in the second tag module.

As an alternative embodiment, wherein: the first engagement element relative positioning attribute information includes: a first relative outer margin and a first relative left margin, wherein the first relative outer margin is determined by the outer margin of the first tag module and/or the outer margin of the join element, and the first relative left margin is determined by the left margin of the first tag module and/or the right margin of the join element. Correspondingly, the first rendering unit comprises: the generating subunit is used for generating corresponding connection elements based on the connection relation between the first label module and the second label module; and a rendering subunit, configured to render the corresponding join element on the page based on the first relative outer margin and the first relative left margin.

As another alternative embodiment, the rendering subunit is further configured to: rendering the corresponding join element directly at a page position determined by the first relative outer margin and the first relative left margin.

Or, as another alternative embodiment, the rendering subunit is further configured to: rendering the corresponding engagement element at a first location of the page based on the first relative outer margin; and moving the corresponding connection element from the first position to a second position based on the first relative left margin.

Further, as an alternative embodiment, the apparatus includes: a control module, configured to control the first tag module and the corresponding connection element to keep unchanged relative positions based on the first relative outer edge distance in response to increasing or decreasing tags in the first tag module, and control the second tag module and the corresponding connection element to keep unchanged relative positions based on the second connection element relative positioning attribute information, wherein the first tag module longitudinally increases as the number of tags therein increases, and longitudinally decreases as the number of tags therein decreases.

As an alternative embodiment, the first relative outer distance is negative.

As an alternative embodiment, the second engagement element relative positioning attribute information includes: a second relative outer margin, wherein the second relative outer margin is determined by an outer margin of the second tag module and/or an outer margin of the engagement element; correspondingly, the second rendering unit is further configured to: rendering the second tag module on the page based on the second relative outer margin.

As an alternative embodiment, the second relative outer distance is negative.

It should be understood that the device embodiments of the present disclosure correspond to the method embodiments of the present disclosure, and the technical problems to be solved and the technical effects to be achieved also correspond to the same or similar, and the detailed description of the device embodiments of the present disclosure is omitted here.

The present disclosure also provides an electronic device, a readable storage medium, and a computer program product according to embodiments of the present disclosure.

FIG. 10 illustrates a schematic block diagram of an example electronic device 1000 that can be used to implement embodiments of the present disclosure. Electronic devices are intended to represent various forms of digital computers, such as laptops, desktops, workstations, personal digital assistants, servers, blade servers, mainframes, and other appropriate computers. The electronic device may also represent various forms of mobile devices, such as personal digital processing, cellular phones, smart phones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions, are meant to be examples only, and are not meant to limit implementations of the disclosure described and/or claimed herein.

As shown in fig. 10, the electronic device 1000 includes a computing unit 1001 that can perform various appropriate actions and processes according to a computer program stored in a Read Only Memory (ROM)1002 or a computer program loaded from a storage unit 1008 into a Random Access Memory (RAM) 1003. In the RAM 1003, various programs and data necessary for the operation of the electronic apparatus 1000 can also be stored. The calculation unit 1001, the ROM1002, and the RAM 1003 are connected to each other by a bus 1004. An input/output (I/O) interface 1005 is also connected to bus 1004.

A number of components in the electronic device 1000 are connected to the I/O interface 1005, including: an input unit 1006 such as a keyboard, a mouse, and the like; an output unit 1007 such as various types of displays, speakers, and the like; a storage unit 1008 such as a magnetic disk, an optical disk, or the like; and a communication unit 1009 such as a network card, a modem, a wireless communication transceiver, or the like. The communication unit 1009 allows the device 1000 to exchange information/data with other devices through a computer network such as the internet and/or various telecommunication networks.

Computing unit 1001 may be a variety of general and/or special purpose processing components with processing and computing capabilities. Some examples of the computing unit 1001 include, but are not limited to, a Central Processing Unit (CPU), a Graphics Processing Unit (GPU), various dedicated Artificial Intelligence (AI) computing chips, various computing units running machine learning model algorithms, a Digital Signal Processor (DSP), and any suitable processor, controller, microcontroller, and so forth. The calculation unit 1001 executes the respective methods and processes described above, such as a page rendering method. For example, in some embodiments, the page rendering method may be implemented as a computer software program tangibly embodied in a machine-readable medium, such as storage unit 1008. In some embodiments, part or all of the computer program may be loaded and/or installed onto device 1000 via ROM1002 and/or communications unit 1009. When the computer program is loaded into RAM 1003 and executed by the computing unit 1001, one or more steps of the page rendering method described above may be performed. Alternatively, in other embodiments, the computing unit 1001 may be configured to perform the page rendering method by any other suitable means (e.g., by means of firmware).

Various implementations of the systems and techniques described here above may be implemented in digital electronic circuitry, integrated circuitry, Field Programmable Gate Arrays (FPGAs), Application Specific Integrated Circuits (ASICs), Application Specific Standard Products (ASSPs), system on a chip (SOCs), load programmable logic devices (CPLDs), computer hardware, firmware, software, and/or combinations thereof. These various embodiments may include: implemented in one or more computer programs that are executable and/or interpretable on a programmable system including at least one programmable processor, which may be special or general purpose, receiving data and instructions from, and transmitting data and instructions to, a storage system, at least one input device, and at least one output device.

Program code for implementing the methods of the present disclosure may be written in any combination of one or more programming languages. These program codes may be provided to a processor or controller of a general purpose computer, special purpose computer, or other programmable data processing apparatus, such that the program codes, when executed by the processor or controller, cause the functions/operations specified in the flowchart and/or block diagram to be performed. The program code may execute entirely on the machine, partly on the machine, as a stand-alone software package partly on the machine and partly on a remote machine or entirely on the remote machine or server.

In the context of this disclosure, a machine-readable medium may be a tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. The machine-readable medium may be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium may include, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any suitable combination of the foregoing. More specific examples of a machine-readable storage medium would include an electrical connection based on one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

To provide for interaction with a user, the systems and techniques described here can be implemented on a computer having: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to a user; and a keyboard and a pointing device (e.g., a mouse or a trackball) by which a user can provide input to the computer. Other kinds of devices may also be used to provide for interaction with a user; for example, feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user may be received in any form, including acoustic, speech, or tactile input.

The systems and techniques described here can be implemented in a computing system that includes a back-end component (e.g., as a data server), or that includes a middleware component (e.g., an application server), or that includes a front-end component (e.g., a user computer having a graphical user interface or a web browser through which a user can interact with an implementation of the systems and techniques described here), or any combination of such back-end, middleware, or front-end components. The components of the system can be interconnected by any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include: local Area Networks (LANs), Wide Area Networks (WANs), and the Internet.

The computer system may include clients and servers. A client and server are generally remote from each other and typically interact through a communication network. The relationship of client and server arises by virtue of computer programs running on the respective computers and having a client-server relationship to each other.

It should be understood that various forms of the flows shown above may be used, with steps reordered, added, or deleted. For example, the steps described in the present disclosure may be executed in parallel, sequentially, or in different orders, as long as the desired results of the technical solutions disclosed in the present disclosure can be achieved, and the present disclosure is not limited herein.

The above detailed description should not be construed as limiting the scope of the disclosure. It should be understood by those skilled in the art that various modifications, combinations, sub-combinations and substitutions may be made in accordance with design requirements and other factors. Any modification, equivalent replacement, and improvement made within the spirit and principle of the present disclosure should be included in the scope of protection of the present disclosure.

Claims

1. A page rendering method, comprising:

generating and rendering a first tag module in a page;

generating and rendering at least one tag in the first tag module based on the tag data in the first tag module;

in response to there being a next unrendered second tag module in the page, performing the following:

generating and rendering a joining element for joining the first tag module and the second tag module based on a joining relationship between the first tag module and the second tag module and preset relative positioning attribute information of a first joining element;

responding to the success of the rendering of the joining elements, and generating and rendering the second tag module in the page based on preset relative positioning attribute information of the second joining elements; and

generating and rendering at least one tag in the second tag module based on the tag data in the second tag module.

2. The method of claim 1, wherein:

the first engagement element relative positioning attribute information includes: a first relative outer margin and a first relative left margin, wherein the first relative outer margin is determined by the outer margin of the first tag module and/or the outer margin of the join element, and the first relative left margin is determined by the left margin of the first tag module and/or the right margin of the join element;

generating and rendering the joining element for joining the first tag module and the second tag module based on the joining relationship between the first tag module and the second tag module and the preset relative positioning attribute information of the first joining element, including:

generating corresponding connection elements based on the connection relation between the first label module and the second label module; and

3. The method of claim 2, wherein rendering the corresponding engagement element on the page based on the first relative outer margin and the first relative left margin comprises:

rendering the corresponding join element directly on a page position determined by the first relative outer margin and the first relative left margin.

4. The method of claim 2, wherein rendering the corresponding engagement element on the page based on the first relative outer margin and the first relative left margin comprises:

rendering the corresponding engagement element at a first location of the page based on the first relative outer margin; and

moving the corresponding engagement element from the first position to a second position based on the first relative left margin.

5. The method of claim 3 or 4, further comprising:

in response to adding or subtracting tags in the first tag module, controlling the first tag module to maintain a constant relative position with respect to the corresponding engagement element based on the first relative outer edge distance, and controlling the second tag module to maintain a constant relative position with respect to the corresponding engagement element based on the second engagement element relative positioning attribute information,

wherein the first label module increases longitudinally as the number of labels therein increases and decreases longitudinally as the number of labels therein decreases.

6. The method of claim 1, wherein the first relative outer margin is a negative value.

7. The method of claim 1, wherein:

the second engagement element relative positioning attribute information includes: a second relative outer margin, wherein the second relative outer margin is determined by an outer margin of the second tag module and/or an outer margin of the engagement element;

generating and rendering the second tag module in the page based on the preset relative positioning attribute information of the second joining element, wherein the generating and rendering process comprises the following steps: rendering the second tag module on a page based on the second relative outer margin.

8. The method of claim 7, wherein the second relative outer margin is a negative value.

9. A page rendering apparatus, comprising:

the first rendering module is used for generating and rendering a first tag module in the page;

a second rendering module for generating and rendering at least one tag in the first tag module based on the tag data in the first tag module;

a third rendering module, configured to, in response to a second tag module that is not rendered next in the page, perform corresponding operations by:

a first rendering unit, configured to generate and render an engagement element for engaging the first tag module with the second tag module based on an engagement relationship between the first tag module and the second tag module and preset first engagement element relative positioning attribute information;

the second rendering unit is used for responding to the success of rendering of the joining elements, and generating and rendering the second label module in the page based on preset relative positioning attribute information of the second joining elements; and

and the third rendering unit is used for generating and rendering at least one label in the second label module based on the label data in the second label module.

10. An electronic device, comprising:

at least one processor; and

a memory communicatively coupled to the at least one processor; wherein the content of the first and second substances,

the memory stores instructions executable by the at least one processor to enable the at least one processor to perform the method of any one of claims 1-8.

11. A non-transitory computer readable storage medium having stored thereon computer instructions for causing the computer to perform the method of any one of claims 1-8.

12. A computer program product comprising a computer program which, when executed by a processor, implements the method according to any one of claims 1-8.