CN119536894A

CN119536894A - Step flow card display method and device

Info

Publication number: CN119536894A
Application number: CN202510095623.XA
Authority: CN
Inventors: 周少博; 寇振芳; 李蕾; 苗宇; 纪啸峥
Original assignee: Oneweb Beijing Technology Co ltd
Current assignee: Oneweb Beijing Technology Co ltd
Priority date: 2025-01-22
Filing date: 2025-01-22
Publication date: 2025-02-28

Abstract

The embodiment of the invention provides a ladder flow card display method, a device and electronic equipment, belonging to the technical field of data processing, wherein the method comprises the steps of constructing an original ternary structure body set SFC= { CD, SF, OP }, wherein the CD is a single card data structure, the SF is a card set structure, and the OP is a single card operation mode structure; and constructing the same first DOM tree and the second DOM tree in the memory based on SFC. Obtaining a first change parameter C1 by card state change, obtaining a second change parameter C2 by an optimization function, respectively inputting two DOM trees to obtain operation times N1 and N2, updating SFC by using C2 to obtain SFU when (N1-N2)/N1 is larger than a preset value alpha 1, obtaining the actual width W1 of a screen and the card display width W2 in the SFU, calculating alpha 2 when W2 is larger than W1, and generating 1+round (N. Alpha 2) cards to display. The method and the system not only remarkably improve the fluency and stability of card display, but also effectively improve the response speed and user interaction experience of the whole system.

Description

Stepped stream card display method and device

Technical Field

The present invention relates to the field of data processing technologies, and in particular, to a method and an apparatus for displaying a ladder flow card, and an electronic device.

Background

With the rapid development of mobile internet and intelligent devices, the interaction modes between users and electronic devices are increasingly rich and varied. How to efficiently and aesthetically present a large amount of information becomes a key issue in various applications (e.g., news information, social, electronic business, etc.). The step flow card display mode is widely applied to various interface designs in a brand-new way in a plurality of information display modes gradually due to the unique visual effect and good user interaction experience.

In the conventional information display technology, although the common list display can simply and directly present information, the common list display is visually lack of layering and attractive, is difficult to highlight key contents, and is easy to generate visual fatigue when a user browses a large amount of information. Tiled presentations can lead to confusion in the layout of the page, especially when the content of the information is large and complex, making it difficult for the user to quickly locate and screen the information he needs.

In contrast, the cascade card display mode organizes information in the form of cards and displays the information according to a certain cascade layout, so that the information hierarchy is clearer, a user can intuitively know the relation between different information blocks, and meanwhile, the user can quickly focus on interested contents. However, existing cascade card display methods still have some problems and challenges in practical applications.

On the one hand, as application functions continue to expand and information complexity increases, card state changes become more frequent and complex. For example, when a user performs operations such as clicking, sliding, expanding/contracting on a card, or when the content of the card needs to be updated in real time, how to efficiently process these state changes to reduce the influence on the system performance is a problem to be solved. At present, when the state of a card is changed, a simpler and direct mode is adopted in many existing methods, and DOM trees of the page are directly operated, so that a large number of unnecessary DOM operations are often caused, the rendering efficiency of the page is reduced, the response speed of an application program is slowed down, and the user experience is affected.

On the other hand, the screen size and resolution of different devices vary widely. On small-screen devices (such as mobile phones), because of limited screen space, if all the ladder flow cards are displayed in a conventional manner, the problems of incomplete card display, disordered layout and the like can be caused, and the readability of information and the operation experience of users are seriously affected. On large-screen devices (such as tablet computers and desktop computers), if the number of displayed cards is too small or the layout is unreasonable, the waste of screen space is caused, and the display advantages of the devices cannot be fully exerted. Therefore, how to dynamically adjust the display quantity and layout of the cascade cards according to the actual width of the device screen, so as to ensure that the best display effect can be achieved on different devices is also an important problem facing the current situation.

The above problems are to be solved.

Disclosure of Invention

In view of the above, embodiments of the present invention provide a method and apparatus for displaying a cascade card, and an electronic device, which at least partially solve the problems existing in the prior art.

In a first aspect, an embodiment of the present invention provides a method for displaying a cascade card, including:

Constructing an original ternary structure set SFC= { CD, SF, OP } containing n ladder cards, wherein CD represents a data structure body of a single ladder card, SF represents a data structure body of a ladder card set, and OP represents an operation mode data structure body of a single ladder card;

Based on the original ternary structure body set SFC, respectively constructing a first DOM tree and a second DOM number with identical structures in a memory, after the state of a card is changed, acquiring a first change parameter C1 corresponding to the state change of the card, inputting the first change parameter into a first optimization function Ff to obtain a second change parameter C2, and respectively inputting the first change parameter C1 and the second change parameter C2 into the first DOM tree and the second DOM number to obtain the operation times N1 of the first DOM tree and the operation times N2 of the second DOM number;

when the ratio of N1-N2 to N1 is larger than a first preset value alpha 1, carrying out parameter updating on the original ternary structure body set SFC based on a second change parameter C2 to obtain an updated ternary structure body set SFU;

Acquiring the actual width W1 of a display screen of the equipment where the cascade cards are located and updating the display width W2 of the cascade cards in the ternary structure body set SFU, and generating a second preset value alpha 2= (W2-W1)/W2 based on the actual width W1 and the display width W2 when W2 is larger than W1;

Based on the updated ternary structure body set SFU and the second preset value alpha 2, 1+round (nalpha 2) cascade cards are generated to be displayed on the current display device, and round is a rounding function.

According to a specific implementation of an embodiment of the present invention, the constructing describes an original ternary structure set sfc= { CD, SF, OP } containing n cascade cards, including:

The data structure body CD of the single ladder card comprises a unique identification of the card, a card type, card content information and a card style attribute field;

The cascade flow card set data structure SF comprises the total number of card sets, the ordering rule of the sets and the hierarchical relation information among cards in the sets;

The operation mode data structure OP of the single ladder card includes definitions of click operation, slide operation, expansion/contraction operation of the card and corresponding response logic.

According to a specific implementation manner of the embodiment of the present invention, based on the original ternary structure set SFC, a first DOM tree and a second DOM tree with identical structures are respectively built in a memory, including:

Constructing a data structure of each card as a node of a DOM tree according to the hierarchical relation and the ordering rule of the cards in the original ternary structure set SFC;

Assigning corresponding attributes to each DOM tree node, including the position, the size and the display state of the node, wherein the assigned attributes correspond to style attributes in the data structure of the card;

in the construction process, the node structures, the node attributes and the relationships among the nodes of the first DOM tree and the second DOM tree are completely consistent.

According to a specific implementation manner of the embodiment of the present invention, in the step of obtaining the first change parameter C1 corresponding to the card state change after the card state change, the card state change includes:

updating the card content, wherein the first variation parameter C1 comprises updated content information;

The display style of the card is changed, including the color and font size of the card are changed, and the first change parameter C1 contains a new style attribute value;

the operation state of the card is changed, including changing from the folded state to the unfolded state, and the first change parameter C1 contains identification information of the state change.

According to a specific implementation manner of the embodiment of the present invention, in the step of inputting the first variation parameter into a first optimization function Ff to obtain the second variation parameter C2, the first optimization function Ff performs an operation based on the following rule:

carrying out data cleaning and preprocessing on the input first variation parameter C1 to remove redundant information;

converting and calculating the preprocessed parameters according to a preset optimization strategy, wherein the optimization strategy aims at reducing DOM tree operation times so as to improve performance;

after a series of calculations, a second variation parameter C2 is output, which contains the optimized card state variation information.

According to a specific implementation manner of the embodiment of the present invention, when the ratio of N1 to N2 to N1 is greater than the first preset value α1, the parameter updating is performed on the original ternary structure set SFC based on the second variation parameter C2, so as to obtain an updated ternary structure set SFU, including:

When the ratio of N1-N2 to N1 is greater than the first preset value α1, updating the corresponding field in the original ternary structure set SFC according to the second variation parameter C2, where a specific updating rule is as follows:

If the second variation parameter C2 contains card content updating information, updating a card content field in the CD structure body;

If the second variation parameter C2 contains style attribute variation information, updating a style attribute field in the CD structure body;

If the second variation parameter C2 affects the ordering or the hierarchical relation of the card set, updating the related information in the SF structure body;

After the update is completed, an updated ternary structure set SFU is obtained.

According to a specific implementation manner of the embodiment of the present invention, the obtaining the actual width W1 of the display screen of the device where the cascade card is located and updating the display width W2 of the cascade card in the ternary structure body set SFU include:

Acquiring the actual width W1 of a display screen of the equipment through a system interface of the equipment, wherein the interface is adapted according to different operating system types;

And for the display width W2 of the cascade cards in the updated ternary structure body set SFU, calculating according to the style attribute of each card in the SFU and the arrangement relation among the cards.

According to a specific implementation manner of the embodiment of the present invention, the generating 1+round (nα2) cascade cards based on the updated ternary structure set SFU and the second preset value α2 includes:

calculating the number of cards to be displayed according to a second preset value alpha 2, wherein the round function is a rounding function and is used for rounding the result of the nalpha 2;

1+round (nα2) cards are selected from the updated ternary structure set SFU according to a preset ordering rule;

and carrying out layout adjustment on the selected cards, wherein the layout adjustment comprises operations of adjusting the spacing of the cards and scaling the sizes of the cards, so that the selected cards are displayed in the screen width W1 of the current display equipment.

In a second aspect, an embodiment of the present invention further provides a cascade card display apparatus, including:

A building module for building an original ternary structure set SFC= { CD, SF, OP } containing n ladder cards, wherein CD represents a data structure of a single ladder card, SF represents a data structure of a ladder card set, and OP represents a data structure of an operation mode of the single ladder card;

The acquisition module is used for respectively constructing a first DOM tree and a second DOM number with identical structures in a memory based on the original ternary structure body set SFC, acquiring a first change parameter C1 corresponding to the card state change after the card state change, inputting the first change parameter into a first optimization function Ff to obtain a second change parameter C2, and respectively inputting the first change parameter C1 and the second change parameter C2 into the first DOM tree and the second DOM number to obtain the operation times N1 of the first DOM tree and the operation times N2 of the second DOM number;

the updating module is used for updating parameters of the original ternary structure body set SFC based on a second change parameter C2 when the ratio of N1-N2 to N1 is larger than a first preset value alpha 1, so as to obtain an updated ternary structure body set SFU;

The generation module is used for acquiring the actual width W1 of the equipment display screen where the cascade cards are located and updating the display width W2 of the cascade cards in the ternary structure body set SFU, and generating a second preset value alpha 2= (W2-W1)/W2 based on the actual width W1 and the display width W2 when W2 is larger than W1;

And the display module is used for generating 1+round (nα2) ladder flow cards to display on the current display equipment based on the updated ternary structure body set SFU and the second preset value α2, wherein round is a rounding function.

In a third aspect, an embodiment of the present invention further provides 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 described in any one of the implementations of the foregoing Ren Di aspect or the first aspect.

In a fourth aspect, embodiments of the present invention also provide a non-transitory computer readable storage medium storing computer instructions for causing a computer to perform the method described in the foregoing first aspect or any implementation manner of the first aspect.

In a fifth aspect, embodiments of the present invention also provide a computer program product comprising a computer program stored on a non-transitory computer readable storage medium, the computer program comprising program instructions which, when executed by a computer, cause the computer to perform the method as described in the first aspect or any implementation of the first aspect.

Constructing an original ternary structure set SFC= { CD, SF, OP } containing N ladder flow cards, wherein CD represents a data structure body of a single ladder card, SF represents a data structure body of the ladder flow card set, and OP represents an operation mode data structure body of the single ladder card; based on the original three-dimensional structure set SFC, respectively constructing a first DOM tree and a second DOM number with identical structures in a memory, after the state of a card is changed, acquiring a first change parameter C1 corresponding to the state change of the card, inputting the first change parameter C1 into a first optimization function Ff to obtain a second change parameter C2, respectively inputting the first change parameter C1 and the second change parameter C2 into the first DOM tree and the second DOM number to obtain the operation times N1 of the first DOM tree and the operation times N2 of the second DOM number, when the ratio of N1-N2 to N1 is larger than a first preset value alpha 1, updating parameters of the original three-dimensional structure set SFC based on the second change parameter C2 to obtain an updated three-dimensional structure set SFU, acquiring the actual width W1 of a device display screen of the ladder card and the display width W2 of the ladder card in the updated three-dimensional structure set SFU, and generating a second preset value= (W2 and a preset value alpha 2/alpha 2 is equal to the current value alpha 2 of the ladder card and the current three-dimensional structure set SFU) when W2 is larger than W1, and generating a preset value W2/alpha 2 and a current three-dimensional structure alpha 2 and a current value of the device is equal to the current value alpha 2. The scheme has the following beneficial effects:

1. efficient card state management and performance optimization

The related information of the cascade cards is clearly described by constructing the original ternary structure body set SFC, and the related information comprises data of single cards, card sets and operation modes, so that a unified and structured data base is provided for the whole display system, and subsequent management and operation are facilitated.

And constructing two identical DOM trees in the memory, processing the card state change parameters through a first optimization function Ff, comparing the operation times of the two DOM trees, and updating the original structure body set based on the optimized parameters when a certain condition is met. By the method, unnecessary DOM operation can be effectively reduced, and the rendering efficiency and system performance of the page are remarkably improved. Reducing DOM operation times means reducing the calculation burden of the browser, so that the response speed of the page is increased, a user can feel smoother interaction experience when operating a card (such as clicking, sliding, expanding/contracting and the like), and the phenomenon of jamming is avoided.

2. Adaptive card display adjustment

Taking the difference of different equipment screen widths into consideration, the method obtains the actual width W1 of the equipment display screen and the display width W2 of the cascade cards, generates a second preset value alpha 2 according to the relation between the actual width W1 and the display width W2 of the cascade cards, and dynamically adjusts the number of the displayed cards according to the second preset value alpha 2. The adaptive adjustment mechanism can ensure that the cascade cards can be displayed in reasonable layout and quantity on devices with different screen sizes.

On the small screen device, the problem that the display of the cards is incomplete or the layout is disordered due to insufficient space is avoided by reducing the number of the displayed cards, and the readability of information and the convenience of user operation are ensured. On large-screen equipment, the number of displayed cards can be increased appropriately, screen space is fully utilized, more information content is displayed, and the utilization rate of the equipment screen is improved.

3. Flexible data update and extensibility

Based on the second change parameter C2, the original ternary structure body set SFC is subjected to parameter update to obtain an updated ternary structure body set SFU, and the process enables the system to flexibly cope with various changes of card states, whether the card content is updated, the style is changed or the operation state is switched, the changes can be accurately reflected through the updated structure body set, and the consistency and the accuracy of data are ensured.

The design mode based on the structure body set has good expandability, and is convenient for carrying out function expansion and optimization on the system in the follow-up process. For example, if a new card type or operation mode needs to be added, only new fields and logic need to be added in the corresponding structure body, so that the whole system architecture is not greatly influenced, and the cost of system maintenance and upgrading is reduced.

4. Improving user experience

By combining the advantages, the scheme can provide more stable, smooth and self-adaptive ladder flow card display effects for users. The user can easily browse and operate the card on different devices to quickly acquire the required information, and the trouble caused by slow page loading or unreasonable layout is reduced, so that the satisfaction degree and the use frequency of the user on the application program are improved.

Drawings

In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings that are needed in the embodiments will be briefly described below, and it is obvious that the drawings in the following description are only some embodiments of the present invention, and that other drawings can be obtained according to these drawings without inventive effort for a person skilled in the art.

FIG. 1 is a schematic flow chart of a method for displaying a stepwise card according to an embodiment of the present invention;

FIG. 2 is a schematic flow chart of another step flow card display method according to an embodiment of the present invention;

FIG. 3 is a schematic structural diagram of a ladder flow card display device according to an embodiment of the present invention;

fig. 4 is a schematic diagram of an electronic device according to an embodiment of the present invention.

Detailed Description

Embodiments of the present invention will be described in detail below with reference to the accompanying drawings.

Other advantages and effects of the present invention will become apparent to those skilled in the art from the following disclosure, which describes the embodiments of the present invention with reference to specific examples. It will be apparent that the described embodiments are only some, but not all, embodiments of the invention. The invention may be practiced or carried out in other embodiments that depart from the specific details, and the details of the present description may be modified or varied from the spirit and scope of the present invention. It should be noted that the following embodiments and features in the embodiments may be combined with each other without conflict. All other embodiments, which can be made by those skilled in the art based on the embodiments of the invention without making any inventive effort, are intended to be within the scope of the invention.

It is noted that various aspects of the embodiments are described below within the scope of the following claims. It should be apparent that the aspects described herein may be embodied in a wide variety of forms and that any specific structure and/or function described herein is merely illustrative. Based on the present disclosure, one skilled in the art will appreciate that one aspect described herein may be implemented independently of any other aspect, and that two or more of these aspects may be combined in various ways. For example, an apparatus may be implemented and/or a method practiced using any number of the aspects set forth herein. In addition, such apparatus may be implemented and/or such methods practiced using other structure and/or functionality in addition to one or more of the aspects set forth herein.

It should also be noted that the illustrations provided in the following embodiments merely illustrate the basic concept of the present invention by way of illustration, and only the components related to the present invention are shown in the drawings and are not drawn according to the number, shape and size of the components in actual implementation, and the form, number and proportion of the components in actual implementation may be arbitrarily changed, and the layout of the components may be more complicated.

In addition, in the following description, specific details are provided in order to provide a thorough understanding of the examples. However, it will be understood by those skilled in the art that the aspects may be practiced without these specific details.

The embodiment of the invention provides a cascade card display method. The cascade card presentation method provided in the embodiment may be executed by a computing device, which may be implemented as software or as a combination of software and hardware, and the computing device may be integrally provided in a server, a terminal device, or the like.

Referring to fig. 1 and 2, an embodiment of the present invention provides a method for displaying a cascade card, including:

s101, an original ternary structure set sfc= { CD, SF, OP } describing n ladder cards is constructed, CD represents a data structure of a single ladder card, SF represents a ladder card set data structure, OP represents an operation mode data structure of a single ladder card.

Specifically, for a single ladder card data structure CD, it contains the following key information:

And a card unique Identifier (ID) is used for uniquely identifying each card in the whole system, so that the subsequent positioning, operation and management of the cards are facilitated.

Card Type (Type), e.g., news card, merchandise card, social dynamic card, etc., different types of cards may have different presentation styles and interaction logic.

Card Content information (Content) this part stores specific Content presented by the card, such as titles, summaries, picture links of news, names of goods, prices, pictures, etc.

Card Style attributes (Style), including the color, font, background picture, frame Style, etc. of the card, determine the visual presentation effect of the card on the page.

Card Position information (Position) the relative positions of the cards in the stepped stream are recorded for determining the arrangement order and hierarchical relationship of the cards.

The step flow card set data structure SF includes:

and the total number of the card sets (TotalCount) is that the total number n of the cascade cards contained in the sets is defined, so that the whole set is convenient to macroscopically manage and count.

The set ordering rules (SortRule) specify the ordering of cards in the set, e.g., ordering by chronological, importance, heat, etc.

Hierarchical relationship description (Hierarchy) is used to describe the hierarchical structure between cards, determine which cards are peer, which cards have parent-child relationships, etc., so as to implement a ladder layout display.

The operation mode data structure OP of the single ladder card includes:

Click operations ClickAction define specific actions that the user triggers when clicking on the card, such as jumping to a detail page, expanding more content, performing a certain functional operation, etc.

The slide operation SwipeAction describes the response logic of the card under the slide operation, such as switching to an adjacent card, triggering a particular animation effect, etc.

Expansion/contraction operation (Expand/CollapseAction) for a card having expansion and contraction functions, an operation mode of expansion and contraction and corresponding display variation are specified.

By the method, the complete original ternary structure body set SFC is constructed, and a comprehensive data base is provided for subsequent operation.

S102, based on the original ternary structure body set SFC, respectively constructing a first DOM tree and a second DOM number with identical structures in a memory, after the state of a card is changed, acquiring a first change parameter C1 corresponding to the state change of the card, inputting the first change parameter into a first optimization function Ff to obtain a second change parameter C2, and respectively inputting the first change parameter C1 and the second change parameter C2 into the first DOM tree and the second DOM number to obtain the operation times N1 of the first DOM tree and the operation times N2 of the second DOM number.

When the DOM tree is built based on the original ternary structure body set SFC, the data structure body of each card is created as a node of the DOM tree according to the hierarchical relation and the ordering rule of the cards in the set.

For each DOM tree node, style attributes, position information, etc. in the CD structure are mapped to CSS attributes and position coordinates of the node to determine the display style and position of the node in the page.

And constructing parent-child relations among the nodes according to the hierarchical relation description in the SF structure body to form a complete tree structure.

Ensuring that the first DOM tree and the second DOM tree are completely consistent in node structure, attribute setting and node relationship.

When a card state changes, for example:

Card content update, such as the latest report content update of news cards, wherein the first variation parameter C1 contains updated specific content information.

The card style is changed, namely, the user switches the display theme of the card, so that the style attributes such as the color, the font and the like of the card are changed, and the C1 contains new style attribute values.

The card operation state changes, such as from the folded state to the unfolded state, and the C1 carries the identification information of the state change and relevant additional parameters (such as the height after unfolding and the like).

After the first variation parameter C1 corresponding to the card state variation is obtained, the first variation parameter C1 is input into the first optimization function Ff. The first optimization function Ff processes C1 based on a preset optimization strategy:

Firstly, data cleaning is carried out on C1, redundant or invalid information possibly existing in the data is removed, and therefore processing efficiency is improved.

And then converting and calculating parameters in C1 according to the target of system performance optimization. For example, parameters are adjusted to reduce unnecessary DOM operations by predicting the scope of influence of the DOM operations by a particular algorithm.

After a series of processing, a second variation parameter C2 is output.

Inputting a first variation parameter C1 and a second variation parameter C2 into a first DOM tree and a second DOM tree respectively, and simulating the operation on the DOM tree under two conditions:

in the first DOM tree, corresponding operations such as adding, deleting, modifying and the like are directly performed on the tree nodes according to C1 in a traditional mode, and the operation times executed in the operation process are recorded to obtain the operation times N1 of the first DOM tree.

And in the second DOM tree, operating the tree node according to the second variation parameter C2, and recording the operation times to obtain the operation times N2 of the second DOM tree.

And S103, when the ratio of N1-N2 to N1 is larger than a first preset value alpha 1, carrying out parameter updating on the original ternary structure body set SFC based on a second change parameter C2 to obtain an updated ternary structure body set SFU.

The ratio of N1-N2 to N1, i.e., (N1-N2)/N1, was calculated. When the ratio is greater than the first preset value alpha 1, the operation of the DOM tree based on the second variation parameter C2 is illustrated to be capable of remarkably reducing the operation times, so that the system performance is improved. At this time, the original ternary structure set SFC needs to be updated according to the second variation parameter C2:

if the C2 contains card Content updating information, a corresponding CD structure body in the SFC is found, and Content fields in the corresponding CD structure body are updated, so that accuracy and instantaneity of the card Content are ensured.

If the C2 carries card Style changing information, the Style field in the CD structure body is updated, so that the visual presentation of the card meets the new Style requirement.

When C2 involves a card operation state change, in addition to updating the relevant state identification fields in the CD structure, adjustments may be required to the hierarchical relationship descriptions or ordering rules in the SF structure according to the operation to ensure consistency of structure and logic of the entire card set.

After the above updating operation, an updated ternary structure set SFU is obtained, which reflects the latest information after the card state changes.

S104, acquiring the actual width W1 of the equipment display screen where the cascade cards are located and updating the display width W2 of the cascade cards in the ternary structure body set SFU, and generating a second preset value alpha 2= (W2-W1)/W2 based on the actual width W1 and the display width W2 when W2 is larger than W1.

The actual width W1 of the current equipment display screen is obtained by calling an API interface provided by the equipment system, and the interface can be adapted according to different operating systems (such as Android, iOS, windows and the like) so as to ensure that the screen width is accurately obtained.

For updating the display width W2 of the cascade card in the ternary structure body set SFU, the calculation method is as follows:

and determining the arrangement mode of the cards on the page according to the style attribute (such as width setting, margin and the like) in the CD structure of each card in the SFU and the hierarchical relation and the ordering rule in the SF structure.

The display width W2 is obtained by summing up and calculating the total width occupied by all the cards in the horizontal direction, taking into account the spacing between the cards and the possible overlap.

When the calculated display width W2 is greater than the actual width W1 of the display screen of the device, it is indicated that the display layout of the current card will exceed the screen range on the device, and adjustment is required. Based on the actual width W1 and the display width W2, a second preset value α2 is generated according to the formula α2= (W2-W1)/W2. This value reflects the proportion of the current card display width to exceed the screen width for subsequent determination of the number of cards to be reduced for display.

S105, based on the updated ternary structure body set SFU and the second preset value alpha 2, 1+round (n x alpha 2) cascade cards are generated and displayed on the current display device, and round is a rounding function.

Firstly, calculating the proportion of the number of cards to be reduced according to a second preset value alpha 2 and the total number n of cards by a formula n. Then rounding the result of n×α2 using a round rounding function, and adding 1 to obtain the number of cards 1+round (n×α2) that finally needs to be displayed on the current display device.

Selecting a corresponding number of cards from the updated ternary structure body set SFU according to the ordering rule in the SF structure body:

If the ordering rule is in time sequence, the latest 1+round (n x alpha 2) cards are selected for display.

If the ranking rule is based on the importance degree, the cards with higher importance degrees are preferentially selected.

Carrying out layout adjustment on the selected card:

According to the actual width W1 of the equipment screen, the width and the distance of the cards are recalculated, so that all the cards can be reasonably arranged within the width range of the screen, and the situation that the cards overlap or exceed the screen is avoided.

For card styles, appropriate scaling or adjustment may be required depending on screen size to ensure card readability and visual effect.

And finally, displaying the 1+round (n x alpha 2) ladder flow cards subjected to layout adjustment on the current display equipment, and displaying a clear and reasonable information display interface for a user.

As an alternative embodiment, in the process of displaying the cascade card on the current display device, the data to be displayed on the cascade card may be displayed by dynamically highlighting the bar graph, which includes the following steps S1051-S1055:

S1051, obtaining a dynamic highlight histogram set P to be displayed from data to be displayed of a cascade card, extracting configuration parameters of the dynamic highlight histogram set P to obtain configuration parameter sets C= { C1, C2, setting a weight parameter set w= { W1, W2, & gt, wn } corresponding to the configuration parameter set C, and executing a histogram generation function Fc of the configuration parameter set C and the weight parameter set W.

In the running process of the system, in order to meet the requirement of a user on dynamic highlight histogram display, a dynamic highlight histogram set P to be displayed is firstly obtained from a standard data DB.

And extracting configuration parameters of the dynamic highlight histogram set P. Each dynamic highlighting bar graph has a series of specific configuration parameters that determine the appearance of the bar graph, the manner in which the data is displayed, and the like. All relevant configuration parameters are extracted from the set P by a specific parsing algorithm, resulting in a set of configuration parameters c= { C1, C2,..cn }.

In order to be able to perform reasonable calculations according to the importance of different configuration parameters when generating a histogram, a set of weight parameters w= { W1, W2, etc., corresponding to the set of configuration parameters C is set. Each weight parameter Wi corresponds to a configuration parameter Ci, reflecting the relative importance of that configuration parameter in the histogram generation process.

At the same time, a histogram generation function Fc is defined, which takes the configuration parameter set C and the weight parameter set W as inputs, and generates histogram data meeting the requirements through complex algorithms and logic. The specific implementation of the histogram generation function Fc may involve multiple steps of data querying, computing, formatting, etc., to ensure that the generated histogram data is accurate and consistent with the user's expectations.

S1052, receiving a setting parameter Cv input by a user for a histogram at an operation interface, generating a matching configuration parameter Cp e C and a matching weight parameter Wp e W of the histogram based on the setting parameter Cv, and inputting the matching configuration parameter Cp and the matching weight parameter Wp into the histogram generation function Fc to obtain histogram original data dy=fc (Cp, wp).

And receiving setting parameters Cv input by a user for the bar graph in an operation interface. The user can perform personalized setting on the histogram according to the own requirements on the operation interface, and the setting parameters Cv comprise specific requirements of the user on the histogram, such as the color, the data range, the ordering mode and the like of the histogram.

Based on the setting parameter Cv, the configuration parameter Cp matching it is found in the configuration parameter set C. The matching process may involve parsing the setting parameter Cv and comparing it with each element in the set of configuration parameters C, and finding the configuration parameter Cp that best meets the user's needs through a specific matching algorithm, so that Cp e C.

Similarly, a matching weight parameter Wp corresponding to Cp is found in the weight parameter set W, so that Wp e W. The matching weight parameters Wp are used for subsequent calculations to ensure that the influence of each configuration parameter can be reasonably reflected when generating the histogram.

The matching configuration parameters Cp and the matching weight parameters Wp are input into the histogram generation function Fc, and the histogram raw data dy=fc (Cp, wp) is obtained through the operation and processing of the function. The histogram raw data Dy contains basic data information necessary for generating the histogram.

S1053, analyzing the original data Dy of the histogram to obtain a data processing task Tk1 and a data rendering task Tk2 required by displaying the histogram, calculating the time complexity of the data processing task Tk1 as O (Tk 1) and the time complexity of the data rendering task as O (Tk 2), and converting the original data Dy of the histogram into split data Dcf which are executed in k different threads simultaneously based on the time complexity as O (Tk 1) and the time complexity as O (Tk 2).

The original data Dy of the histogram is analyzed, and the original data is decomposed into two main tasks required by displaying the histogram, namely a data processing task Tk1 and a data rendering task Tk2 through a specific analysis algorithm.

The data processing task Tk1 is mainly responsible for preprocessing the original data, such as data cleaning, screening, calculating statistical indexes, and the like, so as to ensure the accuracy and usability of the data. The time complexity of the data processing task Tk1 is calculated as O (Tk 1), which reflects the increasing trend of the time required for the task to execute as the amount of data increases.

The data rendering task Tk2 is responsible for converting the processed data into a visualized histogram, including determining appearance attributes of the histogram, such as position, size, color, etc., and mapping the data onto various elements of the histogram. The temporal complexity of the computing data rendering task Tk2 is O (Tk 2).

Specifically, let the data scale be s, the data processing task is used for ordering the data, and the time complexity O (Tk 01) satisfies the formula:

Wherein the method comprises the steps of Representing the progressive tenseness of the algorithm, wherein the time complexity is the same order as slogs;

For the data rendering task Tk02, involving drawing and style setting for r graphic elements, the time complexity O (Tk 02) is expressed by the following formula:

f (i) is a function related to rendering of the ith graphic element, the function including attribute calculation and position adjustment operations of the element;

A comprehensive complexity evaluation function G (O (Tk 01), O (Tk 02)) is set for determining a strategy for splitting the histogram raw data Dy into k0 parts, defined as:

Wherein α and β are weight coefficients;

dividing original data Dy of the histogram according to task types and data relativity according to a determined splitting strategy, and distributing related data and operations to different parts to form k0 data subsets;

Data subset The dependencies with other subsets are represented by a dependency matrix R,Representing subsetsFor a pair ofThe dependency matrix R satisfies:

Combining the divided data subsets added with the meta information into split data Dcf, storing the split data Dcf by adopting a tree line structure, wherein each node represents one data subset, edges among the nodes represent data dependency relations, the depth of the tree is set as h, the number of the nodes is set as k0, and the depth h of the tree and the number of the nodes are in a relation:

Wherein the method comprises the steps of Representing a rounding down operation.

Based on the time complexity of O (Tk 1) and the time complexity of O (Tk 2), in order to improve the efficiency of data processing and rendering, a multithreading technology is adopted to convert the original data Dy of the histogram into split data Dcf which are executed in k different threads simultaneously. The process of splitting data needs to consider the independence and parallelism of the data, and the original data is divided into k parts through a reasonable algorithm, so that each part can be processed in an independent thread, the advantages of the multi-core processor are fully utilized, and the data processing and rendering speeds are increased.

S1054, respectively generating a corresponding execution plugin for each thread running the split data Dcf to form an execution plugin set P= { P1, P2, & gt, pk }, and generating the display data DP of the histogram based on the execution plugin set.

And generating a corresponding execution plugin for each thread running the split data Dcf to form an execution plugin set P= { P1, P2, &., pk }. Each execution plug-in Pi is responsible for managing and executing the data processing and rendering tasks of the corresponding thread, and it contains various resources and logic required by the thread, such as data processing functions, rendering algorithms, etc.

For each data subset in the split data Dcf, analyzing the corresponding task requirement and function requirement, determining the specific operation and the realized function to be executed by each thread, and for the ith data subset, using a complexity function for the task complexityTo measure:

Wherein the method comprises the steps of Is the number of operations associated with the subset of data,Is a function of the complexity of the j-th operation,Is the relevant parameter for the j-th operation;

According to the task and function requirements of each thread, a corresponding execution plug-in architecture is designed, an input interface, an output interface and an internal processing logic framework of the plug-in are determined, and the data format received by the input interface is vector The data format output by the output interface is vectorAnd there is a linear transformation relationship between input and output, through a matrixThe representation is:

Wherein the method comprises the steps of Is a matrix of r x s, r and s are the dimensions of the output vector and the input vector, respectively,Is an offset vector;

According to the designed execution plug-in architecture, writing specific codes to realize each execution plug-in, and carrying out functional test on each written execution plug-in;

Adding necessary configuration parameters and initialization logic for each execution plug-in to enable the execution plug-in to be flexibly configured according to different running environments and requirements, wherein the configuration parameters are set as follows Comprising p parametersThe relation between the performance and the configuration parameters of the plug-in unit is represented by a response surface functionTo describe:

Wherein the method comprises the steps of And e is a model parameter.

Each plug-in the execution plug-in set independently runs, and split data Dcf is processed in a respective thread. And integrating and summarizing the processed data by executing the cooperative work of the plugins, and generating the display data DP of the histogram based on the execution plugin set. The display data DP is bar graph data which can be directly displayed on the interface after being processed and rendered.

S1055, obtaining the data quantity Nd of the histogram displayed in each page, dividing the display data DP based on the data quantity Nd, and obtaining a paging data set sequence D '= { D'1, D '2, & gt, D'm }, wherein,When the user switches the current page with the page number p, if p >1, p=p-1, if p < m, p=p+1, when the user clicks the next page, the corresponding data D 'p is loaded from the paging data set sequence D' according to the page number when the user switches to the q-th page, and a dynamic highlight histogram corresponding to the page data is displayed on the page of the q-th page.

The data amount Nd of which the histogram is displayed in each page is acquired. The data amount is preset according to factors such as interface layout, user experience and the like, so that the display effect of the histogram on each page is clear, attractive and easy to operate.

The display data DP is divided based on the data amount Nd, and the required total number of pages m is calculated according to the formula m= ⌈ |dp|/Nd ⌉, where ⌈ ⌉ denotes the number of elements included in the display data DP by rounding up the number. The display data DP is divided into a plurality of portions by a division operation, forming a sequence of sets D ' = { D '1, D '2, &..d'm }, each set D ' i corresponding to display data of one page.

When the user performs page switching on the current page with the page number p, the system performs corresponding processing according to the operation of the user. If the user clicks the previous page, firstly judging whether the current page number p is larger than 1, if p > 1, updating the page number p to p-1, if the user clicks the next page, judging whether the current page number p is smaller than the total page number m, and if p < m, updating the page number p to p+1.

When the user switches to page q, the system loads the corresponding data D 'p from the sequence of paged data sets D' according to page number. And then rendering and displaying the loaded data D' p, and displaying a dynamic highlight histogram corresponding to the page data on the page of the q-th page, so that paging browsing and interactive operation of a user on the dynamic highlight histogram are realized.

The invention provides an optimized cascade card display scheme, which aims to improve user experience and system performance. According to the scheme, by introducing a front-end performance optimization technology and a responsive design, efficient card rendering and layout are realized.

Besides the scheme, the technical means of the invention can further comprise the steps of reducing unnecessary DOM operations by utilizing a virtual DOM mechanism of a front end frame, improving rendering efficiency, adopting a lazy loading technology to load images and other resources as required, reducing page initial loading time, enabling cards to keep orderly arranged under different screen sizes by using CSS Grid or Flexbox layout, cutting text in the cards, preventing content overflow from affecting attractive appearance, introducing a hardware acceleration technology, ensuring smooth animation effect, optimizing management of an event monitor, reducing unnecessary calculation and memory occupation, and avoiding memory leakage. Through the technical means, the method and the device not only remarkably improve the fluency and stability of card display, but also effectively improve the response speed and user interaction experience of the whole system, and concretely comprise the following aspects:

1. front end frame optimization

1.1 Introducing virtual DOM

A virtual DOM mechanism of a modern front-end framework (e.g., exact, vue) is employed. The virtual DOM is a programming concept, an ideal DOM tree is maintained in a memory, each time the application state changes, the virtual DOM is changed firstly, then the changed part is compared with the actual DOM, and only the necessary part is updated, so that unnecessary DOM operation is reduced, and the rendering efficiency is improved.

1.2 Modularized development

The card display is modularized, and a modular development mode is adopted. Each card is considered a separate component that includes style, logic, and data processing. The method is convenient to maintain and expand, has high reusability of components, and can remarkably improve development efficiency and code quality.

2. Delay loading technique

2.1 Image delayed loading

And loading the image resource as required by a lazy loading technology. Using Intersection Observer API or other delayed loading libraries, image loading is only performed when the card is scrolled into view. The method effectively reduces the initial loading time of the page and improves the loading speed and the user experience.

2.2 Resource on demand loading

For non-critical resources (e.g., secondary scripts, style sheets, etc.), an on-demand loading policy is employed. These resources are reloaded when needed by the user, rather than being fully loaded at the time of initial loading of the page, thereby further optimizing page performance.

3. Responsive design

3.1 CSS Grid and Flexbox layout

The CSS Grid or Flexbox layout is adopted, so that the cards can be kept in order under different screen sizes. CSS Grid provides a two-dimensional layout system, suitable for complex Grid layouts, and Flexbox provides a one-dimensional layout system, suitable for simple linear arrangements. The two are combined for use, so that various layout requirements can be flexibly met.

3.2 Media query

And adjusting the style and layout of the card according to different screen sizes by using the media inquiry. For example, parameters such as width, spacing, etc. of the cards may be adjusted on the small screen device to ensure optimal display.

4. Content truncation processing

4.1 Text overflow handling

And carrying out proper cutting and overflowing treatment on the text content in the card. And using attributes such as text-overflow ellipsis in CSS to prevent the text from overflowing the boundary of the card, and keeping beautiful appearance and readability. In addition, the long text can be dynamically truncated through JavaScript, and a function of 'viewing more' is provided, and the user can develop the full text after clicking.

5. Animation optimization

5.1 Hardware acceleration

Hardware acceleration techniques were introduced, using CSS3 animation instead of JavaScript animation. The CSS3 animation is accelerated to render by using the GPU, so that smooth animation effect is ensured, and the blocking phenomenon is reduced.

5.2 Animation simplification

Avoiding complex animation effects and selecting simple and efficient animation modes. For example, only critical elements (such as card entry and exit) are animated, reducing unnecessary performance overhead.

6. Event listener optimization

6.1 Event delegation

Using event delegation reduces the number of event listeners. And monitoring the event on the parent element, and processing the event of the child element through an event bubbling mechanism, so that the burden of the browser is reduced.

6.2 Efficient event handling

Avoiding executing a large amount of computation in the event processing function, adopting anti-shake (debounce) and throttling (throttle) technologies, and ensuring the sensitivity and response speed of interaction. For example, for a frequently triggered scroll event, throttling techniques may be used to limit its execution frequency.

7. Memory management

7.1 Memory leak prevention

The event listener and DOM nodes are managed correctly, ensuring that resources that are no longer needed are cleaned up when the component is unloaded. For example, the event listener is removed during the componentWillUnmount lifecycle method of the React component to prevent memory leaks.

7.2 Resource release

And releasing the unused resources in time, and optimizing the memory use. The system stability and performance are improved by combining a garbage collection mechanism built in JavaScript with manual management.

Referring to fig. 2, according to a specific implementation manner of the embodiment of the present invention, the generating 1+round (n×α2) step cards based on the updated ternary structure set SFU and the second preset value α2 is displayed on the current display device, and includes:

S201, calculating the number of cards to be displayed according to a second preset value alpha 2, wherein a round function is a rounding function and is used for rounding the result of n x alpha 2;

s202, 1+round (n is an alpha 2) cards are selected from the updated ternary structure body set SFU according to a preset ordering rule;

S203, performing layout adjustment on the selected cards, including operations of adjusting the spacing of the cards and scaling the sizes of the cards, so that the selected cards are displayed in the screen width W1 of the current display device.

Corresponding to the above method embodiment, referring to fig. 3, an embodiment of the present invention further discloses a cascade card display apparatus 30, including:

a building module 301 that builds an original ternary structure set sfc= { CD, SF, OP }, describing n ladder cards, CD representing a data structure of a single ladder card, SF representing a ladder card set data structure, OP representing an operational mode data structure of a single ladder card;

The obtaining module 302 respectively builds a first DOM tree and a second DOM number with identical structures in a memory based on the original ternary structure body set SFC, obtains a first change parameter C1 corresponding to the card state change after the card state change, inputs the first change parameter into a first optimization function Ff to obtain a second change parameter C2, and respectively inputs the first change parameter C1 and the second change parameter C2 into the first DOM tree and the second DOM number to obtain the operation times N1 of the first DOM tree and the operation times N2 of the second DOM number;

The updating module 303 performs parameter updating on the original ternary structure body set SFC based on the second variation parameter C2 when the ratio of N1-N2 to N1 is greater than a first preset value alpha 1, so as to obtain an updated ternary structure body set SFU;

The generating module 304 acquires an actual width W1 of a display screen of the device where the cascade card is located and updates a display width W2 of the cascade card in the ternary structure body set SFU, and generates a second preset value α2= (W2-W1)/W2 based on the actual width W1 and the display width W2 when W2 is greater than W1;

The display module 305 generates 1+round (n×α2) ladder cards to display on the current display device based on the updated ternary structure set SFU and the second preset value α2, where round is a rounding function.

Referring to fig. 4, an embodiment of the present invention also provides an electronic device 60, 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 cascade card presentation method of the method embodiments described above.

Embodiments of the present invention also provide a non-transitory computer readable storage medium storing computer instructions for causing a computer to perform the foregoing method embodiments.

Embodiments of the present invention also provide a computer program product comprising a computer program stored on a non-transitory computer readable storage medium, the computer program comprising program instructions which, when executed by a computer, cause the computer to perform the step-stream card presentation method of the foregoing method embodiments.

Referring now to fig. 4, a schematic diagram of an electronic device 60 suitable for use in implementing embodiments of the present invention is shown. The electronic device in the embodiment of the present invention may include, but is not limited to, a mobile terminal such as a mobile phone, a notebook computer, a digital broadcast receiver, a PDA (personal digital assistant), a PAD (tablet computer), a PMP (portable multimedia player), a car-mounted terminal (e.g., car navigation terminal), etc., and a stationary terminal such as a digital TV, a desktop computer, etc. The electronic device shown in fig. 4 is only an example and should not be construed as limiting the functionality and scope of use of the embodiments of the invention.

As shown in fig. 4, the electronic device 60 may include a processing means (e.g., a central processing unit, a graphics processor, etc.) 601, which may perform various appropriate actions and processes according to a program stored in a Read Only Memory (ROM) 602 or a program loaded from a storage means 608 into a Random Access Memory (RAM) 603. In the RAM603, various programs and data necessary for the operation of the electronic device 60 are also stored. The processing device 601, the ROM602, and the RAM603 are connected to each other through a bus 604. An input/output (I/O) interface 605 is also connected to bus 604.

In general, devices may be connected to I/O interface 605 including input devices 606, including for example, touch screens, touch pads, keyboards, mice, image sensors, microphones, add-on meters, gyroscopes, etc., output devices 607, including for example, liquid Crystal Displays (LCDs), speakers, vibrators, etc., storage devices 608, including for example, magnetic tape, hard disk, etc., and communication devices 609. The communication means 609 may allow the electronic device 60 to communicate with other devices wirelessly or by wire to exchange data. While fig. 4 shows the electronic device 60 with various means, it is to be understood that not all of the illustrated means are required to be implemented or provided. More or fewer devices may be implemented or provided instead.

In particular, according to embodiments of the present invention, the processes described above with reference to flowcharts may be implemented as computer software programs. For example, embodiments of the present invention include a computer program product comprising a computer program embodied on a computer readable medium, the computer program comprising program code for performing the method shown in the flowcharts. In such an embodiment, the computer program may be downloaded and installed from a network via communication means 609, or from storage means 608, or from ROM 602. The above-described functions defined in the method of the embodiment of the present invention are performed when the computer program is executed by the processing means 601.

The foregoing is merely illustrative of the present invention, and the present invention is not limited thereto, and any changes or substitutions easily contemplated by those skilled in the art within the scope of the present invention should be included in the present invention. Therefore, the protection scope of the invention is subject to the protection scope of the claims.

Claims

1. A method of displaying a cascade card, comprising:

2. The method of claim 1, wherein the constructing the original triplet set sfc= { CD, SF, OP } that describes n cascade cards, comprises:

3. The method according to claim 2, wherein constructing the first DOM tree and the second DOM tree with identical structures in the memory based on the original ternary structure set SFC, respectively, comprises:

4. The method according to claim 3, wherein, in the step of obtaining the first change parameter C1 corresponding to the card status change after the card status change, the card status change includes:

5. The method according to claim 4, wherein in the step of inputting the first variation parameter into a first optimization function Ff, obtaining a second variation parameter C2, the first optimization function Ff operates based on the following rules:

6. The method according to claim 5, wherein when the ratio of N1-N2 to N1 is greater than the first preset value α1, performing parameter updating on the original ternary structure set SFC based on the second variation parameter C2 to obtain an updated ternary structure set SFU, including:

7. The method of claim 6, wherein the step card obtaining the actual width W1 of the display screen of the device where the step card is located and the step card display width W2 in the three-dimensional structure set SFU are updated, includes:

8. The method of claim 7, wherein generating 1+round (nα2) ladder cards for display on a current display device based on the updated triad set SFU and a second preset value α2 comprises:

9. A cascade card display apparatus, comprising:

10. An electronic device, the electronic device comprising:

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 stepped stream card presentation method of any one of claims 1 to 8.