Step flow card display method and device

Abstract

The embodiment of the invention provides a step flow card display method and device and electronic equipment, and belongs to the technical field of data processing, and the method comprises the steps that an original ternary structure set SFC = {CD, SF and OP} is constructed, 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 second DOM tree in the memory based on the SFC. Obtaining a first change parameter C1 through card state change, obtaining a second change parameter C2 through an optimization function, and respectively inputting the first change parameter C1 and the second change parameter C2 into the two DOM trees to obtain operation times N1 and N2; when (N1-N2) / N1 is greater than a preset value alpha 1, updating the SFC by using C2 to obtain an SFU; and obtaining the actual width W1 of the screen and the display width W2 of the cards in the SFU, calculating alpha 2 when W2 is greater than W1, and generating 1 + round (n * alpha 2) card display according to the alpha 2. According to the method, the smoothness and the stability of card display are remarkably improved, and the response speed of the whole system and the user interaction experience are effectively improved.

Description

Technical Field

[0001] The present invention relates to the field of data processing technology, and in particular to a step-flow card display method, device and electronic equipment. Background Art

[0002] With the rapid development of mobile Internet and smart devices, the ways of interaction between users and electronic devices are becoming increasingly diverse. In various applications (such as news information, social networking, e-commerce, etc.), how to efficiently and beautifully display a large amount of information has become a key issue. The ladder flow card display method has gradually emerged among many information display methods due to its unique visual effects and good user interaction experience, and is widely used in various interface designs.

[0003] In traditional information display technology, although the common list-style display can present information simply and directly, it lacks visual hierarchy and appeal, and it is difficult to highlight the key content. Users are prone to visual fatigue when browsing a large amount of information. Tiled display may lead to a messy page layout, especially when the information content is large and complex, it is difficult for users to quickly locate and filter the information they need.

[0004] In contrast, the step-by-step card display method organizes information in the form of cards and displays them in a certain step-by-step layout, making the information hierarchy clearer. Users can more intuitively understand the relationship between different information blocks and quickly focus on the content they are interested in. However, the existing step-by-step card display method still has some problems and challenges in practical applications.

[0005] On the one hand, with the continuous expansion of application functions and the increase in information complexity, the changes in card states are becoming more frequent and complex. For example, when users click, slide, expand / collapse, and perform other operations on cards, or when the card content needs to be updated in real time, how to efficiently handle these state changes to reduce the impact on system performance is an urgent problem to be solved. At present, many existing methods use a relatively simple and direct approach to handle card state changes, directly operating the DOM tree of the page, which often leads to a large number of unnecessary DOM operations, thereby reducing the rendering efficiency of the page, slowing down the response speed of the application, and affecting the user experience.

[0006] On the other hand, the screen sizes and resolutions of different devices vary greatly. On small-screen devices (such as mobile phones), due to limited screen space, if all the ladder flow cards are displayed in the conventional way, it may lead to problems such as incomplete card display and chaotic layout, which seriously affects the readability of information and the user's operating experience. On large-screen devices (such as tablets and desktop computers), if the number of displayed cards is too small or the layout is unreasonable, it will cause a waste of screen space and fail to give full play to the display advantages of the device. Therefore, how to dynamically adjust the display quantity and layout of the ladder flow cards according to the actual width of the device screen to ensure the best display effect on different devices is also an important issue currently faced.

[0007] The above problems become technical problems that need to be solved. Summary of the invention

[0008] In view of this, an embodiment of the present invention provides a stepped flow card display method, device and electronic device, which at least partially solve the problems existing in the prior art.

[0009] In a first aspect, an embodiment of the present invention provides a stepped flow card display method, comprising:

[0010] Construct a primitive ternary structure set SFC={CD, SF, OP} describing n ladder flow cards, where CD represents the data structure of a single ladder card, SF represents the data structure of a ladder flow card set, and OP represents the data structure of the operation mode of a single ladder card;

[0011] Based on the original ternary structure set SFC, a first DOM tree and a second DOM number with identical structures are respectively constructed in the memory, when the state of the card changes, a first change parameter C1 corresponding to the change of the card state is obtained, the first change parameter is input into the first optimization function Ff to obtain a second change parameter C2, the first change parameter C1 and the second change parameter C2 are respectively input into the first DOM tree and the second DOM number to obtain the number of operations N1 of the first DOM tree and the number of operations N2 of the second DOM number;

[0012] When the ratio of N1-N2 to N1 is greater than the first preset value α1, the original ternary structure set SFC is updated based on the second change parameter C2 to obtain an updated ternary structure set SFU;

[0013] Obtain the actual width W1 of the display screen of the device where the step flow card is located and update the display width W2 of the step flow card in the ternary structure set SFU. When W2 is greater than W1, generate a second preset value α2=(W2-W1) / W2 based on the actual width W1 and the display width W2;

[0014] Based on the updated ternary structure set SFU and the second preset value α2, 1+round(nα2) step flow cards are generated and displayed on the current display device, where round is a rounding function.

[0015] According to a specific implementation of an embodiment of the present invention, the construction description includes an original ternary structure set SFC={CD, SF, OP} of n step flow cards, including:

[0016] The data structure CD of a single ladder card contains the card's unique identifier, card type, card content information, and card style attribute fields;

[0017] The ladder flow card set data structure SF contains the total number of card sets, the sorting rules of the sets, and the hierarchical relationship information between the cards in the sets;

[0018] The operation mode data structure OP of a single ladder card includes the definition of the card's click operation, slide operation, and expand / contract operation and the corresponding response logic.

[0019] According to a specific implementation of an embodiment of the present invention, based on the original ternary structure set SFC, respectively constructing a first DOM tree and a second DOM tree with completely identical structures in the memory includes:

[0020] According to the hierarchical relationship and sorting rules of the cards in the original ternary structure set SFC, the data structure of each card is constructed as a node of the DOM tree;

[0021] Assign corresponding attributes to each DOM tree node, including the node's position, size, and display status. The assigned attributes correspond to the style attributes in the card's data structure.

[0022] During the construction process, the node structures, node attributes and the relationships between nodes of the first DOM tree and the second DOM tree are made completely consistent.

[0023] According to a specific implementation of an embodiment of the present invention, when the state of the card changes, in the step of obtaining a first change parameter C1 corresponding to the change in the state of the card, the change in the state of the card includes:

[0024] Update of card content, in which case the first change parameter C1 contains updated content information;

[0025] The display style of the card changes, including the color and font size of the card. The first change parameter C1 includes the new style attribute value.

[0026] The operation state of the card changes, including changing from a folded state to an unfolded state, and the first change parameter C1 includes identification information of the state change.

[0027] According to a specific implementation of the embodiment of the present invention, in the step of inputting the first change parameter into the first optimization function Ff to obtain the second change parameter C2, the first optimization function Ff is calculated based on the following rules:

[0028] Perform data cleaning and preprocessing on the input first change parameter C1 to remove redundant information;

[0029] The preprocessed parameters are converted and calculated according to a preset optimization strategy, wherein the optimization strategy is intended to reduce the number of DOM tree operations to improve performance;

[0030] After a series of calculations, a second change parameter C2 is output, which contains the optimized card state change information.

[0031] According to a specific implementation of an embodiment of the present invention, when the ratio of N1-N2 to N1 is greater than a first preset value α1, the original ternary structure set SFC is updated based on a second change parameter C2 to obtain an updated ternary structure set SFU, including:

[0032] When the ratio of N1-N2 to N1 is greater than the first preset value α1, the corresponding fields in the original ternary structure set SFC are updated according to the second change parameter C2. The specific update rules are as follows:

[0033] If the second change parameter C2 contains the card content update information, then the card content field in the CD structure is updated;

[0034] If the second change parameter C2 contains style attribute change information, the style attribute field in the CD structure is updated;

[0035] If the second change parameter C2 affects the order or hierarchical relationship of the card set, the relevant information in the SF structure is updated;

[0036] After the update is completed, the updated ternary structure set SFU is obtained.

[0037] According to a specific implementation of an embodiment of the present invention, the obtaining of the actual width W1 of the display screen of the device where the stepped flow card is located and the updating of the display width W2 of the stepped flow card in the ternary structure set SFU include:

[0038] The actual width W1 of the device display screen is obtained through the device's system interface, which is adapted according to different operating system types;

[0039] For updating the display width W2 of the step flow cards in the ternary structure set SFU, it is calculated according to the style attributes of each card in the SFU and the arrangement relationship between the cards.

[0040] According to a specific implementation of an embodiment of the present invention, generating 1+round(nα2) step flow cards based on the updated ternary structure set SFU and the second preset value α2 for display on the current display device includes:

[0041] Calculate the number of cards to be displayed according to the second preset value α2, wherein the round function is a rounding function used to round the result of nα2;

[0042] Select 1+round(nα2) cards from the update ternary structure set SFU according to the preset sorting rules;

[0043] The layout of the selected card is adjusted, including adjusting the spacing between the cards and scaling the size of the cards, so that the selected card is displayed within the screen width W1 of the current display device.

[0044] In a second aspect, an embodiment of the present invention further provides a stepped flow card display device, comprising:

[0045] Construction module, constructs the original ternary structure set SFC={CD, SF, OP} describing n ladder flow cards, CD represents the data structure of a single ladder card, SF represents the data structure of the ladder flow card set, and OP represents the operation mode data structure of a single ladder card;

[0046] an acquisition module, based on the original ternary structure set SFC, constructs a first DOM tree and a second DOM number with identical structures in a memory, respectively, and when the state of the card changes, acquires a first change parameter C1 corresponding to the change of the card state, inputs the first change parameter into a first optimization function Ff, obtains a second change parameter C2, inputs the first change parameter C1 and the second change parameter C2 into the first DOM tree and the second DOM number, respectively, and obtains an operation number N1 of the first DOM tree and an operation number N2 of the second DOM number;

[0047] An updating module, when the ratio of N1-N2 to N1 is greater than a first preset value α1, updates the parameters of the original ternary structure set SFC based on a second change parameter C2 to obtain an updated ternary structure set SFU;

[0048] A generation module is used to obtain the actual width W1 of the display screen of the device where the step flow card is located and to update the display width W2 of the step flow card in the ternary structure set SFU. When W2 is greater than W1, a second preset value α2=(W2-W1) / W2 is generated based on the actual width W1 and the display width W2.

[0049] The display module generates 1+round(nα2) step flow cards based on the updated ternary structure set SFU and the second preset value α2 for display on the current display device, where round is a rounding function.

[0050] In a third aspect, an embodiment of the present invention further provides an electronic device, the electronic device comprising:

[0051] at least one processor; and,

[0052] a memory communicatively connected to the at least one processor; wherein,

[0053] The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to execute the method described in any of the first aspects or any of the implementations of the first aspect.

[0054] In a fourth aspect, an embodiment of the present invention further provides a non-transitory computer-readable storage medium, which stores computer instructions, and the computer instructions are used to enable the computer to execute the method described in the first aspect or any implementation of the first aspect.

[0055] In the fifth aspect, an embodiment of the present invention further provides a computer program product, which includes a computer program stored on a non-transitory computer-readable storage medium, and the computer program includes program instructions. When the program instructions are executed by a computer, the computer executes the method described in the first aspect or any implementation of the first aspect.

[0056] The scheme in the embodiment of the present invention includes: constructing an original ternary structure set SFC={CD, SF, OP} describing n ladder flow cards, where CD represents a data structure of a single ladder card, SF represents a data structure of a ladder flow card set, and OP represents an operation mode data structure of a single ladder card; based on the original ternary structure set SFC, respectively constructing a first DOM tree and a second DOM number with completely the same structure in a memory, when the state of the card changes, obtaining a first change parameter C1 corresponding to the change of the card state, inputting the first change parameter 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 a first The number of operations N1 of the DOM tree and the number of operations N2 of the second DOM tree; when the ratio of N1-N2 to N1 is greater than the first preset value α1, the original ternary structure set SFC is updated based on the second change parameter C2 to obtain the updated ternary structure set SFU; the actual width W1 of the display screen of the device where the step flow card is located and the display width W2 of the step flow card in the updated ternary structure set SFU are obtained, and when W2 is greater than W1, a second preset value α2=(W2-W1) / W2 is generated based on the actual width W1 and the display width W2; based on the updated ternary structure set SFU and the second preset value α2, 1+round(nα2) step flow cards are generated and displayed on the current display device, where round is a rounding function. This solution has the following beneficial effects:

[0057] 1. Efficient card status management and performance optimization

[0058] By constructing the original ternary structure set SFC to clearly describe the information related to the ladder flow cards, including the data of a single card, the card set and the operation method, a unified and structured data foundation is provided for the entire display system, which is convenient for subsequent management and operation.

[0059] Two identical DOM trees are constructed in memory, and the card state change parameters are processed through the first optimization function Ff. The number of operations of the two DOM trees is compared, and the original structure set is updated based on the optimized parameters when certain conditions are met. This method can effectively reduce unnecessary DOM operations and significantly improve page rendering efficiency and system performance. Reducing the number of DOM operations means reducing the browser's computing burden, thereby speeding up the page's response speed, allowing users to experience a smoother interactive experience when operating cards (such as clicking, sliding, expanding / shrinking, etc.), avoiding freezes.

[0060] 2. Adaptive card display adjustment

[0061] Taking into account the differences in screen widths of different devices, this solution obtains the actual width W1 of the device display screen and the display width W2 of the ladder flow card, generates a second preset value α2 based on the relationship between the two, and dynamically adjusts the number of displayed cards accordingly. This adaptive adjustment mechanism can ensure that the ladder flow cards can be displayed in a reasonable layout and quantity on devices with different screen sizes.

[0062] On small-screen devices, by reducing the number of displayed cards, the problem of incomplete display or chaotic layout of cards due to insufficient space is avoided, ensuring the readability of information and the convenience of user operation. On large-screen devices, the number of displayed cards can be appropriately increased to make full use of the screen space, display more information content, and improve the utilization rate of the device screen.

[0063] 3. Flexible data update and scalability

[0064] Based on the second change parameter C2, the parameters of the original ternary structure set SFC are updated to obtain the updated ternary structure set SFU. This process enables the system to flexibly respond to various changes in the card status, whether it is the update of card content, the change of style or the switching of operation status, these changes can be accurately reflected by updating the structure set, ensuring the consistency and accuracy of the data.

[0065] This design method based on structure collection has good scalability, which is convenient for subsequent functional expansion and optimization of the system. For example, if you need to add a new card type or operation method, you only need to add new fields and logic to the corresponding structure without causing a major impact on the overall system architecture, reducing the cost of system maintenance and upgrades.

[0066] 4. Improve user experience

[0067] Combining the above advantages, this solution can provide users with a more stable, smooth and adaptive ladder flow card display effect. Users can easily browse and operate cards on different devices, quickly obtain the required information, reduce the trouble caused by slow page loading or unreasonable layout, and thus improve user satisfaction and usage frequency of the application. BRIEF DESCRIPTION OF THE DRAWINGS

[0068] In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings required for use in the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0069] Figure 1A schematic diagram of a step-by-step card display method provided by an embodiment of the present invention;

[0070] Figure 2 A schematic diagram of another step flow card display method provided by an embodiment of the present invention;

[0071] Figure 3 A schematic diagram of the structure of a stepped flow card display device provided in an embodiment of the present invention;

[0072] Figure 4 A schematic diagram of an electronic device provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0073] The embodiments of the present invention are described in detail below with reference to the accompanying drawings.

[0074] The following describes the embodiments of the present invention through specific examples, and those skilled in the art can easily understand other advantages and effects of the present invention from the contents disclosed in this specification. Obviously, the described embodiments are only part of the embodiments of the present invention, rather than all of the embodiments. The present invention can also be implemented or applied through other different specific embodiments, and the details in this specification can also be modified or changed in various ways based on different viewpoints and applications without departing from the spirit of the present invention. It should be noted that the following embodiments and features in the embodiments can be combined with each other without conflict. Based on the embodiments in the present invention, all other embodiments obtained by ordinary technicians in this field without making creative work belong to the scope of protection of the present invention.

[0075] It should be noted that various aspects of the embodiments within the scope of the appended claims are described below. It should be apparent that the aspects described herein can be embodied in a wide variety of forms, and any specific structure and / or function described herein is merely illustrative. Based on the present invention, it should be understood by those skilled in the art that an aspect described herein can be implemented independently of any other aspect, and two or more of these aspects can be combined in various ways. For example, any number of aspects described herein can be used to implement the device and / or practice the method. In addition, other structures and / or functionalities other than one or more of the aspects described herein can be used to implement this device and / or practice this method.

[0076] It should also be noted that the illustrations provided in the following embodiments are only schematic illustrations of the basic concept of the present invention. The drawings only show components related to the present invention rather than being drawn according to the number, shape and size of components in actual implementation. In actual implementation, the type, quantity and proportion of each component may be changed arbitrarily, and the component layout may also be more complicated.

[0077] Additionally, in the following description, specific details are provided to facilitate a thorough understanding of the examples. However, it will be understood by those skilled in the art that the aspects described may be practiced without these specific details.

[0078] The embodiment of the present invention provides a step flow card display method. The step flow card display method provided in this embodiment can be executed by a computing device, which can be implemented as software, or as a combination of software and hardware, and the computing device can be integrated in a server, a terminal device, etc.

[0079] See also Figure 1 and Figure 2 , an embodiment of the present invention provides a step flow card display method, comprising:

[0080] S101, construct an original ternary structure set SFC={CD, SF, OP} describing n step flow cards, where CD represents the data structure of a single step card, SF represents the data structure of the step flow card set, and OP represents the operation mode data structure of a single step card.

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

[0082] Card unique identifier (ID): used to uniquely identify each card in the entire system, facilitating subsequent card location, operation and management.

[0083] Card type: For example, news cards, product cards, social dynamic cards, etc. Different types of cards may have different display styles and interaction logic.

[0084] Card content information (Content): This part stores the specific content displayed by the card, such as the title, summary, and image link of the news; the name, price, and image of the product, etc.

[0085] Card style attributes (Style): including the card's color, font, background image, border style, etc., which determine the visual presentation of the card on the page.

[0086] Card position information (Position): records the relative position of the card in the ladder flow, which is used to determine the arrangement order and hierarchical relationship of the cards.

[0087] The ladder flow card set data structure SF contains:

[0088] Total number of card sets (TotalCount): specifies the total number n of ladder flow cards contained in the set, which facilitates macro management and statistics of the entire set.

[0089] Collection sorting rule (SortRule): specifies the order in which cards are arranged in a collection, such as sorting by time, importance, popularity, etc.

[0090] Hierarchy description: used to describe the hierarchical structure between cards, determine which cards are at the same level, which cards have parent-child relationships, etc., to achieve a stepped layout display.

[0091] The operation mode data structure OP of a single ladder card contains:

[0092] ClickAction: defines the specific behavior triggered when the user clicks on the card, such as jumping to the detail page, expanding more content, performing a certain function operation, etc.

[0093] SwipeAction: describes the response logic of a card under a sliding operation, such as switching to an adjacent card, triggering a specific animation effect, etc.

[0094] Expand / CollapseAction: For cards with expand and collapse functions, specify the expansion and collapse operation methods and corresponding display changes.

[0095] Through the above method, a complete original ternary structure set SFC is constructed, which provides a comprehensive data basis for subsequent operations.

[0096] S102, based on the original ternary structure set SFC, respectively construct a first DOM tree and a second DOM number with completely identical structures in the memory, when the state of the card changes, obtain a first change parameter C1 corresponding to the card state change, input the first change parameter into a first optimization function Ff to obtain a second change parameter C2, input the first change parameter C1 and the second change parameter C2 into the first DOM tree and the second DOM number, respectively, to obtain an operation number N1 of the first DOM tree and an operation number N2 of the second DOM number.

[0097] When constructing a DOM tree based on the original ternary structure set SFC, the data structure of each card is created as a node of the DOM tree according to the hierarchical relationship and sorting rules of the cards in the set.

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

[0099] According to the hierarchical relationship description in the SF structure, the parent-child relationship between nodes is constructed to form a complete tree structure.

[0100] Ensure that the first DOM tree and the second DOM tree are completely consistent in node structure, attribute settings, and node relationships.

[0101] When the card state changes, for example:

[0102] Card content update: For example, the latest report content of a news card is updated. In this case, the first change parameter C1 includes the updated specific content information.

[0103] Card style changes: The user switches the display theme of the card, which causes the card's color, font and other style attributes to change. C1 contains the new style attribute values.

[0104] The card operation state changes: for example, from the folded state to the unfolded state, C1 carries the identification information of the state change and related additional parameters (such as the height after unfolding, etc.).

[0105] After obtaining the first change parameter C1 corresponding to the card state change, it is input into the first optimization function Ff. The first optimization function Ff processes C1 based on a preset optimization strategy:

[0106] First, data cleaning is performed on C1 to remove any redundant or invalid information that may exist in it, so as to improve processing efficiency.

[0107] Then, according to the goal of optimizing system performance, the parameters in C1 are converted and calculated. For example, the influence range of DOM operations is predicted through a specific algorithm, and the parameters are adjusted to reduce unnecessary DOM operations.

[0108] After a series of processing, the second change parameter C2 is output.

[0109] The first change parameter C1 and the second change parameter C2 are input into the first DOM tree and the second DOM tree respectively, simulating the operation of the DOM tree in two cases:

[0110] In the first DOM tree, according to the traditional method, the tree nodes are directly added, deleted, modified, etc. according to C1, and the number of operations performed during the operation is recorded to obtain the number of operations N1 of the first DOM tree.

[0111] In the second DOM tree, the tree nodes are operated according to the second change parameter C2, and the operation times are also recorded to obtain the operation times N2 of the second DOM tree.

[0112] S103, when the ratio of N1-N2 to N1 is greater than the first preset value α1, the original ternary structure set SFC is updated based on the second change parameter C2 to obtain an updated ternary structure set SFU.

[0113] Calculate the ratio of N1-N2 to N1, that is, (N1-N2) / N1. When the ratio is greater than the first preset value α1, it means that operating the DOM tree based on the second change parameter C2 can significantly reduce the number of operations, thereby improving system performance. At this time, the original ternary structure set SFC needs to be updated according to the second change parameter C2:

[0114] If C2 contains card content update information, find the corresponding CD structure in SFC and update the Content field therein to ensure the accuracy and timeliness of the card content.

[0115] If C2 carries the card style change information, the Style field in the CD structure is updated so that the visual presentation of the card meets the new style requirements.

[0116] When C2 involves a change in the card operation status, in addition to updating the relevant status identification fields in the CD structure, it may also be necessary to adjust the hierarchical relationship description or sorting rules in the SF structure according to the operation to ensure the structural and logical consistency of the entire card set.

[0117] After the above update operation, an update ternary structure set SFU is obtained, which reflects the latest information after the card status changes.

[0118] S104, obtain the actual width W1 of the display screen of the device where the step flow card is located and update the display width W2 of the step flow card in the ternary structure set SFU. When W2 is greater than W1, generate a second preset value α2=(W2-W1) / W2 based on the actual width W1 and the display width W2.

[0119] By calling the API interface provided by the device system, the actual width W1 of the current device display screen is obtained. This interface can be adapted according to different operating systems (such as Android, iOS, Windows, etc.) to ensure accurate acquisition of the screen width.

[0120] For updating the display width W2 of the step flow card in the ternary structure set SFU, the calculation method is as follows:

[0121] The arrangement of cards on the page is determined based on the style attributes (such as width settings, margins, etc.) in the CD structure of each card in the SFU and the hierarchical relationship and sorting rules in the SF structure.

[0122] Taking into account the spacing between cards and possible overlaps, the total width occupied by all cards in the horizontal direction is accumulated and calculated to obtain the display width W2.

[0123] When the calculated display width W2 is greater than the actual width W1 of the device display screen, it means that the display layout of the current card will exceed the screen range on the device and needs to be adjusted. Based on the actual width W1 and the display width W2, the 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 exceeding the screen width, which is used to subsequently determine the number of cards that need to be reduced in display.

[0124] S105, based on the updated ternary structure set SFU and the second preset value α2, generate 1+round(n*α2) stepped flow cards for display on the current display device, where round is a rounding function.

[0125] First, according to the second preset value α2 and the total number of cards n, the ratio of the number of cards that need to be reduced is calculated by the formula n*α2. Then the result of n*α2 is rounded up using the round function, and 1 is added to obtain the final number of cards that need to be displayed on the current display device, 1+round(n*α2).

[0126] Select the corresponding number of cards from the update ternary structure set SFU according to the sorting rules in the SF structure:

[0127] If the sorting rule is in chronological order, then the latest 1+round(n*α2) cards are selected for display.

[0128] If the sorting rule is based on importance, cards with higher importance are selected first.

[0129] Adjust the layout of the selected card:

[0130] Recalculate the width and spacing of the cards based on the actual width W1 of the device screen to ensure that all cards can be arranged reasonably within the screen width and avoid card overlap or exceeding the screen.

[0131] For the style of the card, it may be necessary to scale or adjust it appropriately according to the screen size to ensure the readability and visual effect of the card.

[0132] Finally, the 1+round(n*α2) stepped flow cards after layout adjustment are displayed on the current display device, presenting a clear and reasonable information display interface for users.

[0133] As an optional implementation, in the process of displaying the stepped flow card on the current display device, the data to be displayed on the stepped flow card can be displayed by a dynamic highlight bar chart, including the following steps S1051-S1055:

[0134] S1051, obtain the dynamic highlight bar chart set P to be displayed from the data to be displayed in the stepped flow card, extract the configuration parameters of the dynamic highlight bar chart set P, obtain the configuration parameter set C={C1,C2,...,Cn}, set the weight parameter set W={W1,W2,...,Wn} corresponding to the configuration parameter set C, and execute the bar chart generation function Fc of the configuration parameter set C and the weight parameter set W.

[0135] During the operation of the system, in order to meet the user's demand for dynamic highlight bar chart display, firstly, a set P of dynamic highlight bar charts to be displayed is obtained from the standard data DB.

[0136] Extract configuration parameters from the dynamic highlight bar graph set P. Each dynamic highlight bar graph has a series of specific configuration parameters, which determine the appearance of the bar graph, data display method and other characteristics. Through a specific parsing algorithm, extract all relevant configuration parameters from the set P to obtain the configuration parameter set C = {C1, C2,..., Cn}.

[0137] In order to make reasonable calculations based on the importance of different configuration parameters when generating histograms, a weight parameter set W = {W1, W2, …, Wn} corresponding to the configuration parameter set C is set. Each weight parameter Wi corresponds to a configuration parameter Ci, reflecting the relative importance of the configuration parameter in the histogram generation process.

[0138] 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 input, and generates the required histogram data through complex algorithms and logic. The specific implementation of the histogram generation function Fc may involve multiple steps such as data query, calculation, and formatting to ensure that the generated histogram data is accurate and meets user expectations.

[0139] S1052, receiving the setting parameters Cv input by the user for the bar graph in the operation interface, generating the matching configuration parameters Cp∈C and matching weight parameters Wp∈W of the bar graph based on the setting parameters Cv, inputting the matching configuration parameters Cp and matching weight parameters Wp into the bar graph generation function Fc, and obtaining the bar graph original data Dy=Fc(Cp,Wp).

[0140] Receive the setting parameters Cv input by the user for the bar graph in the operation interface. The user can personalize the bar graph according to his or her needs in the operation interface. These setting parameters Cv include the user's specific requirements for the bar graph, such as the color, data range, sorting method, etc. of the bar graph.

[0141] Based on the setting parameter Cv, search for the matching configuration parameter Cp in the configuration parameter set C. The matching process may involve parsing the setting parameter Cv and comparing it with each element in the configuration parameter set C, and finding the configuration parameter Cp that best meets the user's needs through a specific matching algorithm, so that Cp ∈ C.

[0142] Similarly, find the matching weight parameter Wp corresponding to Cp in the weight parameter set W, so that Wp ∈ W. The matching weight parameter Wp will be used in subsequent calculations to ensure that the influence of each configuration parameter can be reasonably reflected when generating the histogram.

[0143] Input the matching configuration parameter Cp and the matching weight parameter Wp into the histogram generation function Fc, and obtain the histogram raw data Dy = Fc(Cp, Wp) through the function operation and processing. The histogram raw data Dy contains the basic data information required to generate the histogram.

[0144] S1053, parse the bar chart original data Dy to obtain the data processing task Tk1 and the data rendering task Tk2 required to display the bar chart, calculate the time complexity of the data processing task Tk1 to be O(Tk1) and the time complexity of the data rendering task to be O(Tk2), and based on the time complexity of O(Tk1) and the time complexity of O(Tk2), convert the bar chart original data Dy into split data Dcf that is executed simultaneously in k different threads.

[0145] The original data Dy of the bar chart is parsed and decomposed into two main tasks required to display the bar chart through a specific parsing algorithm: data processing task Tk1 and data rendering task Tk2.

[0146] The data processing task Tk1 is mainly responsible for preprocessing the raw data, such as data cleaning, screening, and calculating statistical indicators to ensure the accuracy and availability of the data. The time complexity of calculating the data processing task Tk1 is O(Tk1), which reflects the increasing trend of the time required to execute the task as the amount of data increases.

[0147] The data rendering task Tk2 is responsible for converting the processed data into a visual bar chart, including determining the appearance attributes of the bar chart, such as position, size, and color, and mapping the data to each element of the bar chart. The time complexity of calculating the data rendering task Tk2 is O(Tk2).

[0148] Specifically, let the data size be s, and the data processing task is used to sort the data, and the time complexity O(Tk01) satisfies the formula:

[0149]

[0150] in It represents the asymptotically tight bound of the algorithm, and its time complexity is of the same order as slogs;

[0151] For the data rendering task Tk02, which involves drawing and styling r graphic elements, the time complexity O(Tk02) is expressed by the following formula:

[0152]

[0153] f(i) is a function related to the rendering of the i-th graphic element, which includes the attribute calculation and position adjustment operations of the element;

[0154] Set the comprehensive complexity evaluation function G(O(Tk01), O(Tk02)) to determine the strategy of splitting the bar chart original data Dy into k0 parts, which is defined as:

[0155]

[0156] Where α and β are weight coefficients;

[0157] According to the determined splitting strategy, the original bar graph data Dy is divided according to the task type and data relevance, and the related data and operations are allocated to different parts to form k0 data subsets;

[0158] Data subset The dependency relationship with other subsets is represented by the dependency matrix R. Representation Subset right The degree of dependence, the dependence matrix R satisfies:

[0159]

[0160] The data subsets that have been divided and added with metadata are combined into split data Dcf. The split data Dcf is stored in a tree row structure. Each node represents a data subset, and the edges between nodes represent data dependencies. Suppose the depth of the tree is h and the number of nodes is k0. The depth h of the tree and the number of nodes k0 satisfy the relationship:

[0161]

[0162] in Indicates a floor operation.

[0163] Based on the time complexity of O(Tk1) and the time complexity of O(Tk2), in order to improve the efficiency of data processing and rendering, multi-threading technology is used to convert the original bar chart data Dy into split data DCF executed simultaneously in k different threads. The process of splitting data needs to consider the independence and parallelism of the data. The original data is divided into k parts through a reasonable algorithm, so that each part can be processed in an independent thread, thereby making full use of the advantages of multi-core processors and speeding up data processing and rendering.

[0164] S1054, generating a corresponding execution plug-in for each thread running the split data DCF, forming an execution plug-in set P={P1, P2, . . . , Pk}, and generating the display data DP of the bar chart based on the execution plug-in set.

[0165] A corresponding execution plug-in is generated for each thread running the split data Dcf, forming an execution plug-in 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. It contains various resources and logics required by the thread, such as data processing functions, rendering algorithms, etc.

[0166] For each data subset in the split data Dcf, analyze its corresponding task requirements and functional requirements, determine the specific operations and functions that each thread needs to perform, and for the i-th data subset, its task complexity is expressed by the complexity function To measure:

[0167]

[0168] in is the number of operations associated with this subset of data, is the complexity function of the jth operation, is the relevant parameter of the jth operation;

[0169] According to the tasks and functional requirements of each thread, design the corresponding execution plug-in architecture, determine the plug-in input interface, output interface and internal processing logic framework, and the data format received by the input interface is vector The data format of the output interface is vector , and there is a linear transformation relationship between the input and output, through a matrix express:

[0170]

[0171] in is an r×s matrix, where r and s are the dimensions of the output vector and the input vector respectively. is an offset vector;

[0172] According to the designed execution plug-in architecture, write specific code to implement each execution plug-in, and conduct functional tests on each written execution plug-in;

[0173] Add necessary configuration parameters and initialization logic to each execution plug-in to enable it to be flexibly configured according to different operating environments and requirements. The configuration parameter set is , including p parameters , and the relationship between the performance of the plug-in and the configuration parameters is described by the response surface function as follows:

[0174]

[0175] where and e are model parameters.

[0176] Each plug-in in the execution plug-in set runs independently and processes the split data Dcf in its own thread. Through the collaborative work of the execution plug-ins, the processed data is integrated and summarized, and the display data DP of the bar chart is generated based on the execution plug-in set. The display data DP is the bar chart data that can be directly displayed on the interface after being processed and rendered.

[0177] S1055, obtain the data volume Nd displayed by the bar chart on each page, and split the display data DP based on the data volume Nd to obtain the paging data set sequence D' = {D'1, D'2,..., D'm}, where , represents rounding up the numerical value, |DP| represents the number of elements included in the display data DP. When the user switches the page of the current page with page number p, if the user clicks the previous page and p > 1, then p = p - 1; if the user clicks the next page and p < m, then p = p + 1. When the user switches to the qth page, load the corresponding data D'p from the paging data set sequence D' according to the page number, and display the dynamic highlighted bar chart corresponding to the data of this page on the page of the qth page.

[0178] Obtain the data volume Nd displayed by the bar chart on each page. This data volume is preset according to factors such as interface layout and user experience to ensure that the display effect of the bar chart on each page is clear, beautiful and easy to operate.

[0179] The display data DP is segmented based on the data volume Nd, and the total number of pages m required is calculated according to the formula m = ⌈|DP| / Nd⌉, where ⌈⌉ represents the rounding up of the logarithmic value, and |DP| represents the number of elements contained in the display data DP. Through the segmentation operation, the display data DP is divided into multiple parts to form a paging data set sequence D' = {D'1, D'2, …, D'm}, and each set D'i corresponds to a page of display data.

[0180] When the user switches to the current page with page number p, the system will process the page accordingly. If the user clicks the previous page, first determine whether the current page number p is greater than 1. If p > 1, update the page number p to p - 1. If the user clicks the next page, determine whether the current page number p is less than the total number of pages m. If p < m, update the page number p to p + 1.

[0181] When the user switches to the qth page, the system loads the corresponding data D'p from the paging data set sequence D' according to the page number. Then, the loaded data D'p is rendered and displayed, and the dynamic highlight bar chart corresponding to the page data is presented on the qth page, thereby enabling the user to browse and interact with the dynamic highlight bar chart by page.

[0182] The present invention proposes an optimized step-by-step card display solution, which aims to improve user experience and system performance. The solution achieves efficient card rendering and layout by introducing front-end performance optimization technology and responsive design.

[0183] In addition to the above scheme, the technical means of the present invention may also include: using the virtual DOM mechanism of the front-end framework to reduce unnecessary DOM operations and improve rendering efficiency; using lazy loading technology to load images and other resources on demand to reduce the initial loading time of the page; using CSS Grid or Flexbox layout to keep the cards neatly arranged under different screen sizes; truncating the text in the card to prevent content overflow from affecting the appearance; introducing hardware acceleration technology to ensure smooth animation effects; optimizing the management of event listeners, reducing unnecessary calculations and memory usage, and avoiding memory leaks. Through these technical means, the present invention not only significantly improves the smoothness and stability of card display, but also effectively improves the response speed of the overall system and the user interaction experience. Specifically, it includes the following aspects:

[0184] 1. Front-end framework optimization

[0185] 1.1 Introducing Virtual DOM

[0186] Adopt the virtual DOM mechanism of modern front-end frameworks (such as React and Vue). Virtual DOM is a programming concept that maintains an ideal DOM tree in memory. Whenever the application state changes, the change is first made in the virtual DOM, and then the changed part is compared with the actual DOM, and only the necessary part is updated, thereby reducing unnecessary DOM operations and improving rendering efficiency.

[0187] 1.2 Component-based development

[0188] Modularize the card display and adopt a component-based development approach. Each card is considered an independent component, which includes style, logic, and data processing. This approach is easy to maintain and expand, and the components are highly reusable, which can significantly improve development efficiency and code quality.

[0189] 2. Lazy loading technology

[0190] 2.1 Image lazy loading

[0191] Use lazy loading to load image resources on demand. Use the Intersection Observer API or other lazy loading libraries to load images only when the card is scrolled into the viewport. This method effectively reduces the initial page loading time, improves loading speed and user experience.

[0192] 2.2 Loading resources on demand

[0193] For non-critical resources (such as secondary scripts, style sheets, etc.), adopt an on-demand loading strategy. Load these resources when users need them, rather than loading them all at the initial page load, thereby further optimizing page performance.

[0194] 3. Responsive Design

[0195] 3.1 CSS Grid and Flexbox Layout

[0196] Use CSS Grid or Flexbox layout to keep cards neatly arranged on different screen sizes. CSSGrid provides a two-dimensional layout system suitable for complex grid layouts; Flexbox provides a one-dimensional layout system suitable for simple linear arrangements. The combination of the two can flexibly respond to various layout requirements.

[0197] 3.2 Media Queries

[0198] Use media queries to adjust the style and layout of cards according to different screen sizes. For example, on small-screen devices, you can adjust card width, spacing and other parameters to ensure the best display effect.

[0199] 4. Content truncation

[0200] 4.1 Text Overflow Handling

[0201] Appropriately truncate and overflow the text content in the card. Use properties such as text-overflow:ellipsis in CSS to prevent text from overflowing the card boundary and maintain beauty and readability. In addition, long text can be dynamically truncated through JavaScript, and a "see more" function is provided so that users can expand the full text after clicking.

[0202] 5. Animation Optimization

[0203] 5.1 Hardware Acceleration

[0204] Introduce hardware acceleration technology and use CSS3 animation instead of JavaScript animation. CSS3 animation uses GPU to accelerate rendering to ensure smooth animation effects and reduce freezes.

[0205] 5.2 Animation Simplification

[0206] Avoid complex animation effects and choose simple and efficient animation methods. For example, only animate key elements (such as the entry and exit of cards) to reduce unnecessary performance overhead.

[0207] 6. Event listener optimization

[0208] 6.1 Event delegation

[0209] Use event delegation to reduce the number of event listeners. Listen to events on the parent element and process child element events through the event bubbling mechanism to reduce the burden on the browser.

[0210] 6.2 Efficient event handling

[0211] Avoid performing a lot of calculations in event processing functions, and use debounce and throttle techniques to ensure the sensitivity and response speed of the interaction. For example, for frequently triggered scroll events, throttling techniques can be used to limit their execution frequency.

[0212] 7. Memory Management

[0213] 7.1 Memory Leak Prevention

[0214] Properly manage event listeners and DOM nodes to ensure that no longer needed resources are cleaned up when the component is unmounted. For example, remove event listeners in the componentWillUnmount lifecycle method of React components to prevent memory leaks.

[0215] 7.2 Resource Release

[0216] Timely release of unused resources to optimize memory usage. Improve system stability and performance by combining JavaScript's built-in garbage collection mechanism with manual management.

[0217] According to a specific implementation of an embodiment of the present invention, the construction description includes an original ternary structure set SFC={CD, SF, OP} of n step flow cards, including:

[0218] The data structure CD of a single ladder card contains the card's unique identifier, card type, card content information, and card style attribute fields;

[0219] The ladder flow card set data structure SF contains the total number of card sets, the sorting rules of the sets, and the hierarchical relationship information between the cards in the sets;

[0220] The operation mode data structure OP of a single ladder card includes the definition of the card's click operation, slide operation, and expand / contract operation and the corresponding response logic.

[0221] According to a specific implementation of an embodiment of the present invention, based on the original ternary structure set SFC, respectively constructing a first DOM tree and a second DOM tree with completely identical structures in the memory includes:

[0222] According to the hierarchical relationship and sorting rules of the cards in the original ternary structure set SFC, the data structure of each card is constructed as a node of the DOM tree;

[0223] Assign corresponding attributes to each DOM tree node, including the node's position, size, and display status. The assigned attributes correspond to the style attributes in the card's data structure.

[0224] During the construction process, the node structures, node attributes and the relationships between nodes of the first DOM tree and the second DOM tree are made completely consistent.

[0225] According to a specific implementation of an embodiment of the present invention, when the state of the card changes, in the step of obtaining a first change parameter C1 corresponding to the change in the state of the card, the change in the state of the card includes:

[0226] Update of card content, in which case the first change parameter C1 contains updated content information;

[0227] The display style of the card changes, including the color and font size of the card. The first change parameter C1 includes the new style attribute value.

[0228] The operation state of the card changes, including changing from a folded state to an unfolded state, and the first change parameter C1 includes identification information of the state change.

[0229] According to a specific implementation of the embodiment of the present invention, in the step of inputting the first change parameter into the first optimization function Ff to obtain the second change parameter C2, the first optimization function Ff is calculated based on the following rules:

[0230] Perform data cleaning and preprocessing on the input first change parameter C1 to remove redundant information;

[0231] The preprocessed parameters are converted and calculated according to a preset optimization strategy, wherein the optimization strategy is intended to reduce the number of DOM tree operations to improve performance;

[0232] After a series of calculations, a second change parameter C2 is output, which contains the optimized card state change information.

[0233] According to a specific implementation of an embodiment of the present invention, when the ratio of N1-N2 to N1 is greater than a first preset value α1, the original ternary structure set SFC is updated based on a second change parameter C2 to obtain an updated ternary structure set SFU, including:

[0234] When the ratio of N1-N2 to N1 is greater than the first preset value α1, the corresponding fields in the original ternary structure set SFC are updated according to the second change parameter C2. The specific update rules are as follows:

[0235] If the second change parameter C2 contains the card content update information, then the card content field in the CD structure is updated;

[0236] If the second change parameter C2 contains style attribute change information, the style attribute field in the CD structure is updated;

[0237] If the second change parameter C2 affects the order or hierarchical relationship of the card set, the relevant information in the SF structure is updated;

[0238] After the update is completed, the updated ternary structure set SFU is obtained.

[0239] According to a specific implementation of an embodiment of the present invention, the obtaining of the actual width W1 of the display screen of the device where the stepped flow card is located and the updating of the display width W2 of the stepped flow card in the ternary structure set SFU include:

[0240] The actual width W1 of the device display screen is obtained through the device's system interface, which is adapted according to different operating system types;

[0241] For updating the display width W2 of the step flow cards in the ternary structure set SFU, it is calculated according to the style attributes of each card in the SFU and the arrangement relationship between the cards.

[0242] See also Figure 2 According to a specific implementation of an embodiment of the present invention, based on the updated ternary structure set SFU and the second preset value α2, 1+round(n*α2) step flow cards are generated and displayed on the current display device, including:

[0243] S201, calculating the number of cards to be displayed according to a second preset value α2, wherein the round function is a rounding function for rounding the result of n*α2;

[0244] S202, select 1+round(n*α2) cards from the update ternary structure set SFU according to a preset sorting rule;

[0245] S203, adjusting the layout of the selected cards, including adjusting the spacing between the cards and scaling the sizes of the cards, so that the selected cards are displayed within the screen width W1 of the current display device.

[0246] Corresponding to the above method embodiment, see Figure 3 The embodiment of the present invention further discloses a stepped flow card display device 30, comprising:

[0247] Construction module 301, constructs an original ternary structure set SFC={CD, SF, OP} describing n ladder flow cards, where CD represents a data structure of a single ladder card, SF represents a data structure of a ladder flow card set, and OP represents an operation mode data structure of a single ladder card;

[0248] The acquisition module 302 constructs a first DOM tree and a second DOM number with identical structures in the memory based on the original ternary structure set SFC, and when the state of the card changes, obtains a first change parameter C1 corresponding to the change of the card state, inputs the first change parameter into the first optimization function Ff, obtains a second change parameter C2, inputs the first change parameter C1 and the second change parameter C2 into the first DOM tree and the second DOM number, respectively, and obtains the operation number N1 of the first DOM tree and the operation number N2 of the second DOM number;

[0249] An updating module 303, when the ratio of N1-N2 to N1 is greater than a first preset value α1, updates the parameters of the original ternary structure set SFC based on a second change parameter C2 to obtain an updated ternary structure set SFU;

[0250] The generation module 304 obtains the actual width W1 of the display screen of the device where the step flow card is located and updates the display width W2 of the step flow card in the ternary structure set SFU. When W2 is greater than W1, a second preset value α2=(W2-W1) / W2 is generated based on the actual width W1 and the display width W2;

[0251] The display module 305 generates 1+round(n*α2) stepped flow cards based on the updated ternary structure set SFU and the second preset value α2 for display on the current display device, where round is a rounding function.

[0252] See also Figure 4 The embodiment of the present invention further provides an electronic device 60, the electronic device comprising:

[0253] at least one processor; and,

[0254] a memory communicatively connected to the at least one processor; wherein,

[0255] The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute the step-by-step card display method in the aforementioned method embodiment.

[0256] An embodiment of the present invention further provides a non-transitory computer-readable storage medium, which stores computer instructions, and the computer instructions are used to enable the computer to execute the aforementioned method embodiment.

[0257] An embodiment of the present invention also provides a computer program product, which includes a computer program stored on a non-transitory computer-readable storage medium. The computer program includes program instructions, which, when executed by a computer, enable the computer to execute the step flow card display method in the aforementioned method embodiment.

[0258] Reference below Figure 4 , which shows a schematic diagram of the structure of an electronic device 60 suitable for implementing the embodiment of the present invention. The electronic device in the embodiment of the present invention may include, but is not limited to, mobile terminals such as mobile phones, notebook computers, digital broadcast receivers, PDAs (personal digital assistants), PADs (tablet computers), PMPs (portable multimedia players), vehicle-mounted terminals (such as vehicle-mounted navigation terminals), etc., and fixed terminals such as digital TVs, desktop computers, etc. Figure 4 The electronic device shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present invention.

[0259] like Figure 4As shown, the electronic device 60 may include a processing device (e.g., a central processing unit, a graphics processing unit, etc.) 601, which can 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 device 608 into a random access memory (RAM) 603. In the RAM 603, various programs and data required for the operation of the electronic device 60 are also stored. The processing device 601, the ROM 602, and the RAM 603 are connected to each other via a bus 604. An input / output (I / O) interface 605 is also connected to the bus 604.

[0260] Typically, the following devices may be connected to the I / O interface 605: an input device 606 including, for example, a touch screen, a touch pad, a keyboard, a mouse, an image sensor, a microphone, a gage, a gyroscope, etc.; an output device 607 including, for example, a liquid crystal display (LCD), a speaker, a vibrator, etc.; a storage device 608 including, for example, a magnetic tape, a hard disk, etc.; and a communication device 609. The communication device 609 may allow the electronic device 60 to communicate with other devices wirelessly or by wire to exchange data. Although Figure 4 The electronic device 60 is shown with various devices, but it should be understood that it is not required to implement or have all the devices shown. More or fewer devices may be implemented or have instead.

[0261] In particular, according to an embodiment of the present invention, the process described above with reference to the flowchart can be implemented as a computer software program. For example, an embodiment of the present invention includes a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program contains program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from the network through the communication device 609, or installed from the storage device 608, or installed from the ROM 602. When the computer program is executed by the processing device 601, the above-mentioned functions defined in the method of the embodiment of the present invention are executed.

[0262] The above is only a specific embodiment of the present invention, but the protection scope of the present invention is not limited thereto. Any changes or substitutions that can be easily thought of by a person skilled in the art within the technical scope disclosed by the present invention should be included in the protection scope of the present invention. Therefore, the protection scope of the present invention shall be subject to the protection scope of the claims.

Claims

1. A step flow card display method, characterized in that: include: Construct an original ternary structure set SFC={CD, SF, OP} describing n ladder flow cards, where CD represents the data structure of a single ladder card, SF represents the data structure of a ladder flow card set, and OP represents the data structure of the operation mode of a single ladder card; Based on the original ternary structure set SFC, a first DOM tree and a second DOM number with identical structures are respectively constructed in the memory, when the state of the card changes, a first change parameter C1 corresponding to the change of the card state is obtained, the first change parameter is input into the first optimization function Ff to obtain a second change parameter C2, the first change parameter C1 and the second change parameter C2 are respectively input into the first DOM tree and the second DOM number to obtain the number of operations N1 of the first DOM tree and the number of operations N2 of the second DOM number; When the ratio of N1-N2 to N1 is greater than a first preset value α1, the original ternary structure set SFC is updated based on the second change parameter C2 to obtain an updated ternary structure set SFU; Obtain the actual width W1 of the display screen of the device where the step flow card is located and update the display width W2 of the step flow card in the ternary structure set SFU. When W2 is greater than W1, generate a second preset value α2=(W2-W1) / W2 based on the actual width W1 and the display width W2; Based on the updated ternary structure set SFU and the second preset value α2, 1+round(nα2) step flow cards are generated and displayed on the current display device, where round is a rounding function.

2. The method according to claim 1, characterized in that The construction description includes an original ternary structure set SFC={CD, SF, OP} of n step flow cards, including: The data structure CD of a single ladder card contains the card's unique identifier, card type, card content information, and card style attribute fields; The ladder flow card set data structure SF contains the total number of card sets, the sorting rules of the sets, and the hierarchical relationship information between the cards in the sets; The operation mode data structure OP of a single ladder card includes the definition of the card's click operation, slide operation, and expand / contract operation and the corresponding response logic.

3. The method according to claim 2, characterized in that The method of constructing a first DOM tree and a second DOM tree with identical structures in memory based on the original ternary structure set SFC includes: According to the hierarchical relationship and sorting rules of the cards in the original ternary structure set SFC, the data structure of each card is constructed as a node of the DOM tree; Assign corresponding attributes to each DOM tree node, including the node's position, size, and display status. The assigned attributes correspond to the style attributes in the card's data structure. During the construction process, the node structures, node attributes and the relationships between nodes of the first DOM tree and the second DOM tree are made completely consistent.

4. The method according to claim 3, characterized in that When the state of the card changes, in the step of obtaining the first change parameter C1 corresponding to the change of the state of the card, the change of the state of the card includes: Update of card content, in which case the first change parameter C1 contains updated content information; The display style of the card changes, including the color and font size of the card. The first change parameter C1 includes the new style attribute value. The operation state of the card changes, including changing from a folded state to an unfolded state, and the first change parameter C1 includes identification information of the state change.

5. The method according to claim 4, characterized in that In the step of inputting the first variation parameter into the first optimization function Ff to obtain the second variation parameter C2, the first optimization function Ff is operated based on the following rules: Perform data cleaning and preprocessing on the input first change parameter C1 to remove redundant information; The preprocessed parameters are converted and calculated according to a preset optimization strategy, wherein the optimization strategy is intended to reduce the number of DOM tree operations to improve performance; After a series of calculations, a second change parameter C2 is output, which contains the optimized card state change information.

6. The method according to claim 5, characterized in that When the ratio of N1-N2 to N1 is greater than the first preset value α1, the original ternary structure set SFC is updated based on the second change parameter C2 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, the corresponding fields in the original ternary structure set SFC are updated according to the second change parameter C2. The specific update rules are as follows: If the second change parameter C2 contains the card content update information, then the card content field in the CD structure is updated; If the second change parameter C2 contains style attribute change information, the style attribute field in the CD structure is updated; If the second change parameter C2 affects the order or hierarchical relationship of the card set, the relevant information in the SF structure is updated; After the update is completed, the updated ternary structure set SFU is obtained.

7. The method according to claim 6, characterized in that The method of obtaining the actual width W1 of the display screen of the device where the step flow card is located and updating the display width W2 of the step flow card in the ternary structure set SFU includes: The actual width W1 of the device display screen is obtained through the device's system interface, which is adapted according to different operating system types; For updating the display width W2 of the step flow cards in the ternary structure set SFU, it is calculated according to the style attributes of each card in the SFU and the arrangement relationship between the cards.

8. The method according to claim 7, characterized in that The method of generating 1+round(nα2) step flow cards based on the updated ternary structure set SFU and the second preset value α2 for display on the current display device includes: Calculate the number of cards to be displayed according to the second preset value α2, wherein the round function is a rounding function used to round the result of nα2; Select 1+round(nα2) cards from the update ternary structure set SFU according to the preset sorting rules; The layout of the selected card is adjusted, including adjusting the spacing between the cards and scaling the size of the cards, so that the selected card is displayed within the screen width W1 of the current display device.

9. A stepped flow card display device, characterized in that: include: Construction module, constructs the original ternary structure set SFC={CD, SF, OP} describing n ladder flow cards, CD represents the data structure of a single ladder card, SF represents the data structure of the ladder flow card set, and OP represents the operation mode data structure of a single ladder card; an acquisition module, based on the original ternary structure set SFC, constructs a first DOM tree and a second DOM number with identical structures in a memory, respectively, and when the state of the card changes, acquires a first change parameter C1 corresponding to the change of the card state, inputs the first change parameter into a first optimization function Ff, obtains a second change parameter C2, inputs the first change parameter C1 and the second change parameter C2 into the first DOM tree and the second DOM number, respectively, and obtains an operation number N1 of the first DOM tree and an operation number N2 of the second DOM number; An updating module, when the ratio of N1-N2 to N1 is greater than a first preset value α1, updates the parameters of the original ternary structure set SFC based on a second change parameter C2 to obtain an updated ternary structure set SFU; A generation module is used to obtain the actual width W1 of the display screen of the device where the step flow card is located and to update the display width W2 of the step flow card in the ternary structure set SFU. When W2 is greater than W1, a second preset value α2=(W2-W1) / W2 is generated based on the actual width W1 and the display width W2. The display module generates 1+round(nα2) step flow cards based on the updated ternary structure set SFU and the second preset value α2 for display on the current display device, where round is a rounding function.

10. An electronic device, characterized in that: The electronic device comprises: at least one processor; and, a memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute the step flow card display method described in any one of claims 1 to 8.

Images