Page display method and device, equipment and medium

Abstract

The invention provides a page display method and device, equipment and a medium, and relates to the technical field of computers, in particular to the technical field of page display and rendering. According to the implementation scheme, the method comprises the steps of determining at least one first object based on a display area of a page visual area and display areas of a plurality of to-be-displayed initial objects; creating at least one display node based on the at least one first object; rendering based on the at least one display node to obtain page display content displayed in the page visual area; in response to a received movement instruction for the page display content, determining at least one first target node corresponding to at least one second object to be moved out of the page visual area; based on the moving instruction, determining at least one third object to be displayed in the visual area of the page; and updating the display content of the at least one first target node and the position of the display content in the page visual area based on the at least one third object so as to obtain the moved page display content.

Description

Technical Field

[0001] This disclosure relates to the field of computer technology, and more particularly to the field of page display and rendering technology, specifically to a page display method, apparatus, electronic device, computer-readable storage medium, and computer program product. Background Technology

[0002] With the rapid development of internet technology, the amount of data that web pages and applications need to process and display is constantly increasing. For example, in scenarios such as e-commerce back-end management systems, social media feeds, and live streaming interactive lists, users often need to browse long lists containing hundreds or even thousands of items. Related technologies typically use full-scale rendering to display list data, which consumes significant storage and computing resources, easily causing display lag and thus affecting the user experience.

[0003] The methods described in this section are not necessarily methods that had been previously conceived or adopted. Unless otherwise specified, no method described in this section should be assumed to be prior art simply because it is included in this section. Similarly, unless otherwise specified, the issues mentioned in this section should not be considered to be accepted in any prior art. Summary of the Invention

[0004] This disclosure provides a page display method, apparatus, electronic device, computer-readable storage medium, and computer program product.

[0005] According to one aspect of this disclosure, a page display method is provided, comprising: determining at least one first object from the plurality of initial objects based on the display area of ​​the page's visible region and the display area of ​​the plurality of initial objects to be displayed; creating at least one display node based on the at least one first object; rendering based on the at least one display node to obtain page display content displayed in the page's visible region; in response to receiving a movement instruction for the page display content, determining at least one first target node corresponding to at least one second object to be moved out of the page's visible region from the at least one display node; determining at least one third object to be displayed in the page's visible region based on the movement instruction from the initial sequence; and updating the display content of the at least one first target node and the position of the at least one first target node in the page's visible region based on the at least one third object to obtain the moved page display content.

[0006] According to another aspect of this disclosure, a page display apparatus is provided, comprising: a first determining unit configured to determine at least one first object from the plurality of initial objects based on the display area of ​​a page's visible region and the display area of ​​a plurality of initial objects to be displayed; a creating unit configured to create at least one display node based on the at least one first object; a rendering unit configured to render based on the at least one display node to obtain page display content displayed in the page's visible region; a second determining unit configured to, in response to receiving a movement instruction for the page display content, determine at least one first target node corresponding to at least one second object to be moved out of the page's visible region from the at least one display node; a third determining unit configured to determine at least one third object to be displayed in the page's visible region from the initial sequence based on the movement instruction; and an updating unit configured to update the display content of the at least one first target node and the position of the at least one first target node in the page's visible region based on the at least one third object to obtain the moved page display content.

[0007] According to another aspect of this disclosure, an electronic device is provided, comprising: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, the instructions being executed by the at least one processor to enable the at least one processor to perform the page display method described above.

[0008] According to another aspect of this disclosure, a non-transitory computer-readable storage medium is provided storing computer instructions, wherein the computer instructions are used to cause the computer to perform the page display method described above.

[0009] According to another aspect of this disclosure, a computer program product is provided, including a computer program, wherein the computer program, when executed by a processor, is capable of implementing the above-described page display method.

[0010] According to one or more embodiments of this disclosure, page rendering and display efficiency can be improved, and computing resources can be saved.

[0011] It should be understood that the description in this section is not intended to identify key or essential features of the embodiments of this disclosure, nor is it intended to limit the scope of this disclosure. Other features of this disclosure will become readily apparent from the following description. Attached Figure Description

[0012] The accompanying drawings exemplify embodiments and form part of the specification, serving together with the textual description to explain exemplary implementations of the embodiments. The illustrated embodiments are for illustrative purposes only and do not limit the scope of the claims. Throughout the drawings, the same reference numerals refer to similar but not necessarily identical elements.

[0013] Figure 1 A schematic diagram of an exemplary system in which various methods described herein may be implemented, according to exemplary embodiments of the present disclosure; Figure 2 A flowchart of a page display method according to an exemplary embodiment of the present disclosure is shown; Figure 3 A schematic diagram illustrating a page rendering process according to an exemplary embodiment of the present disclosure is shown; Figure 4 A schematic diagram illustrating the update process of page display content according to an exemplary embodiment of the present disclosure is shown; Figure 5 A structural block diagram of a page display apparatus according to an exemplary embodiment of the present disclosure is shown; Figure 6 A structural block diagram of an exemplary electronic device that can be used to implement embodiments of the present disclosure is shown. Detailed Implementation

[0014] The exemplary embodiments of this disclosure are described below with reference to the accompanying drawings, including various details of the embodiments to aid understanding, and should be considered merely exemplary. Therefore, those skilled in the art will recognize that various changes and modifications can be made to the embodiments described herein without departing from the scope of this disclosure. Similarly, for clarity and brevity, descriptions of well-known functions and structures are omitted in the following description.

[0015] In this disclosure, unless otherwise stated, the use of terms such as "first," "second," etc., to describe various elements is not intended to limit the positional, temporal, or importance relationships of these elements; such terms are merely used to distinguish one element from another. In some examples, the first element and the second element may refer to the same instance of that element, while in other cases, based on the context, they may refer to different instances.

[0016] The terminology used in the description of the various examples described in this disclosure is for the purpose of describing particular examples only and is not intended to be limiting. Unless the context explicitly indicates otherwise, an element may be one or more unless the number of elements is specifically limited. Furthermore, the term "and / or" as used in this disclosure covers any one of the listed items and all possible combinations thereof.

[0017] The embodiments of this disclosure will now be described in detail with reference to the accompanying drawings.

[0018] Figure 1 A schematic diagram of an exemplary system 100 in which the various methods and apparatus described herein can be implemented according to embodiments of this disclosure is shown. Reference Figure 1 The system 100 includes one or more client devices 101, 102, 103, 104, 105 and 106, a server 120, and one or more communication networks 110 coupling the one or more client devices to the server 120. The client devices 101, 102, 103, 104, 105 and 106 can be configured to execute one or more applications.

[0019] In embodiments of this disclosure, server 120 may run one or more services or software applications that enable the execution of page display methods.

[0020] In some embodiments, server 120 may also provide other services or software applications, which may include non-virtual and virtual environments. In some embodiments, these services may be provided as web-based services or cloud services, such as to users of client devices 101, 102, 103, 104, 105 and / or 106 under a Software as a Service (SaaS) model.

[0021] exist Figure 1 In the configuration shown, server 120 may include one or more components that implement the functions performed by server 120. These components may include software components, hardware components, or combinations thereof that can be executed by one or more processors. Users operating client devices 101, 102, 103, 104, 105, and / or 106 can sequentially interact with server 120 using one or more client applications to utilize the services provided by these components. It should be understood that various different system configurations are possible and may differ from system 100. Therefore, Figure 1 This is an example of a system used to implement the various methods described herein, and is not intended to be limiting.

[0022] Users can use client devices 101, 102, 103, 104, 105, and / or 106 to browse pages and perform interactive operations. The client devices can provide interfaces that enable users to interact with them. The client devices can also output information to the user through these interfaces. Although... Figure 1 Only six client devices are described, but those skilled in the art will understand that this disclosure can support any number of client devices.

[0023] Client devices 101, 102, 103, 104, 105, and / or 106 may include various categories of computer devices, such as portable handheld devices, general-purpose computers (such as personal computers and laptops), workstation computers, wearable devices, smart screen devices, self-service terminal devices, service robots, gaming systems, thin clients, various messaging devices, sensors, or other sensing devices. These computer devices can run various categories and versions of software applications and operating systems, such as Microsoft Windows, Apple iOS, UNIX-like operating systems, Linux or Linux-like operating systems (such as Google Chrome OS); or include various mobile operating systems, such as Microsoft Windows Mobile OS, iOS, Windows Phone, and Android. Portable handheld devices may include cellular phones, smartphones, tablets, personal digital assistants (PDAs), etc. Wearable devices may include head-mounted displays (such as smart glasses) and other devices. Gaming systems may include various handheld gaming devices, internet-enabled gaming devices, etc. Client devices are capable of executing various applications, such as various internet-related applications, communication applications (such as email applications), short message service (SMS) applications, and can use various communication protocols.

[0024] Network 110 can be any type of network well known to those skilled in the art, and can support data communication using any of a variety of available protocols (including, but not limited to, TCP / IP, SNA, IPX, etc.). By way of example only, one or more networks 110 can be a local area network (LAN), an Ethernet-based network, a token ring network, a wide area network (WAN), the Internet, a virtual network, a virtual private network (VPN), an intranet, an extranet, a blockchain network, a public switched telephone network (PSTN), an infrared network, a wireless network (e.g., Bluetooth, WIFI), and / or any combination of these and / or other networks.

[0025] Server 120 may include one or more general-purpose computers, special-purpose server computers (e.g., PC (personal computer) servers, UNIX servers, mid-range servers), blade servers, mainframe computers, server clusters, or any other suitable arrangement and / or combination. Server 120 may include one or more virtual machines running a virtual operating system, or other computing architectures involving virtualization (e.g., one or more flexible pools of logical storage devices that can be virtualized to maintain virtual storage devices for servers). In various embodiments, server 120 may run one or more services or software applications that provide the functionality described below.

[0026] The computing unit in server 120 can run one or more operating systems, including any of the aforementioned operating systems and any commercially available server operating system. Server 120 can also run any of a variety of additional server applications and / or middleware applications, including HTTP servers, FTP servers, CGI servers, JAVA servers, database servers, etc.

[0027] In some implementations, server 120 may include one or more applications to analyze and merge data feeds and / or event updates received from users of client devices 101, 102, 103, 104, 105, and 106. Server 120 may also include one or more applications to display data feeds and / or real-time events via one or more display devices of client devices 101, 102, 103, 104, 105, and 106.

[0028] In some implementations, server 120 can be a server for a distributed system or a server integrated with blockchain. Server 120 can also be a cloud server, or an intelligent cloud computing server or intelligent cloud host with artificial intelligence technology. A cloud server is a host product in the cloud computing service system, designed to address the shortcomings of traditional physical hosts and Virtual Private Server (VPS) services, such as high management difficulty and weak business scalability.

[0029] System 100 may also include one or more databases 130. In some embodiments, these databases may be used to store data and other information. For example, one or more of the databases 130 may be used to store information such as audio files and video files. Databases 130 may reside in various locations. For example, a database used by server 120 may be local to server 120, or it may be located away from server 120 and may communicate with server 120 via a network-based or dedicated connection. Databases 130 may be of different categories. In some embodiments, the database used by server 120 may be, for example, a relational database. One or more of these databases may store, update, and retrieve data from and from the databases in response to commands.

[0030] In some embodiments, one or more of the databases 130 may also be used by an application to store application data. The databases used by the application may be different categories of databases, such as key-value stores, object stores, or regular stores supported by a file system.

[0031] Figure 1The system 100 can be configured and operated in various ways to enable the application of the various methods and apparatus described in this disclosure.

[0032] With the rapid development of internet technology, the amount of data that web pages and applications need to process and display is constantly increasing. For example, in scenarios such as e-commerce back-end management systems, social media feeds, and live streaming interactive lists, users often need to browse long lists containing hundreds or even thousands of items.

[0033] In related technologies, a full-scale rendering approach is typically used to display list data. This involves creating a corresponding Document Object Model (DOM) node for each data object to be displayed (such as a product information or an information card) and arranging all these nodes in the page document flow at once. When the list data volume is large, this method generates a massive number of DOM nodes, consuming a huge amount of memory resources. Furthermore, when the user scrolls the page or updates data, causing the page display content to need adjustment, the browser must destroy the old nodes that have moved off-screen and recreate the new nodes that have entered the screen, requiring the browser to perform reflow and repaint operations. This frequent node destruction and creation, as well as the browser's reflow and repaint operations, consumes a large amount of computing resources, leading to a decrease in page frame rate, resulting in noticeable stuttering, blank screen flickering, or even browser crashes, severely impacting the user's interactive experience.

[0034] Based on this, this disclosure provides a page display method that creates display nodes and performs partial rendering only for the visible area of ​​the page to obtain the corresponding page display content for the visible area. When the page display content needs to be moved (e.g., the page is scrolled up or the user drags a node), the node to be scrolled out of the visible area is detected and reused (updating its content and position) to display the new content that is about to enter the visible area. In this way, a limited number of display nodes adapted to the area of ​​the visible page can be used to complete the display, saving computational resources for creating new nodes or reflowing and redrawing the page without affecting the user's browsing experience, thus improving the efficiency of page rendering and display.

[0035] Figure 2 A flowchart of a page display method 200 according to an exemplary embodiment of the present disclosure is shown. Figure 2 As shown, method 200 includes: Step S201: Based on the display area of ​​the visible area of ​​the page and the display area of ​​the multiple initial objects to be displayed, determine at least one first object from the multiple initial objects; Step S202: Based on the at least one first object, create at least one display node; Step S203: Render based on the at least one display node to obtain the page display content displayed in the visible area of ​​the page; Step S204: In response to receiving a movement instruction for the page display content, determine at least one first target node corresponding to at least one second object to be moved out of the visible area of ​​the page from the at least one display node; Step S205: Based on the movement command, determine at least one third object to be displayed in the visible area of ​​the page from the initial sequence; and Step S206: Update the display content of the at least one first target node and the position of the at least one first target node in the visible area of ​​the page based on the at least one third object, so as to obtain the moved page display content.

[0036] By applying the method described above 200, it is no longer necessary to render all the data to be displayed. Instead, only the necessary display nodes are created and partially rendered within the visible area of ​​the page, resulting in page content that only covers the visible area. When the page content needs to move (e.g., when a user swipes up to browse more content or drags to adjust the node order), nodes that are about to or have already slid out of the visible area can be identified based on the movement command, recycled and reused, and their bound data content and display position are updated to transform them into carriers for new content that is about to enter the visible area. In this case, the front-end page always maintains only a limited number (e.g., a few dozen) of display nodes that are adapted to the size of the visible area. This mechanism greatly saves the computing resources required for frequently creating or destroying display nodes without affecting the user's experience of browsing complete data, significantly reduces memory usage and garbage collection frequency, and thus greatly improves the efficiency of page rendering and display.

[0037] In some examples, multiple initial objects to be displayed correspond to a collection of raw data waiting to be rendered onto the page. In one example, these initial objects exist as an array or list data structure, such as an array of JSON objects. Each initial object contains various attribute information required for display; when the initial object to be displayed is a product, its attribute information includes product name, price, inventory status, inventory quantity, product image information (such as thumbnail identifiers or thumbnail links), unique identifier (ID), etc. By constructing and rendering the page based on the data from these multiple initial objects, the visual elements of the front-end page displayed to the user can be obtained. In some examples, the multiple initial objects constitute a sequence of initial objects, and the first object can be determined based on the object order information contained in this sequence.

[0038] In some examples, the visible area of ​​a page refers to the list container area that the user can currently see in the browser window or application screen. The display area of ​​the visible area can be determined by obtaining the size information of the page's display container. The display area of ​​multiple initial objects to be displayed can be determined based on the fixed height preset in the page display design, or by obtaining the attribute information of the initial objects (such as the amount of data to be displayed, the size of the images to be displayed, etc.), or by dynamically measuring the height of the rendering nodes. Based on the display area of ​​the visible area and the similar areas of multiple initial objects, the capacity of the visible area can be accurately calculated. For example, if the visible area height is 800 pixels, and the rendered height of each initial object is 100 pixels, then the visible area can accommodate 8 objects, and the first 8 initial objects among the multiple initial objects can be determined as the first object.

[0039] According to some embodiments, determining at least one first object from the plurality of initial objects based on the display area of ​​the visible area of ​​the page and the display area of ​​the plurality of initial objects in step S201 includes: determining a target rendering area based on the display area of ​​the visible area of ​​the page and the buffer display area; and determining the at least one first object from the plurality of initial objects based on the target rendering area and the display area of ​​the plurality of initial objects.

[0040] Therefore, a buffer can be configured for the visible area of ​​the page. This means reserving a certain amount of buffer display area in adjacent areas of the visible area, beyond the range calculated based on the visible area. For example, when the visible area can accommodate 10 initial objects, in addition to rendering the currently visible 10 objects, two invisible objects at the top and two invisible objects at the bottom of the screen are also rendered, resulting in rendering based on 14 objects. By pre-creating and rendering nodes for the buffer, and pre-rendering content that will soon enter the viewport, blank spaces can be avoided during page scrolling, improving the continuity of content during page scrolling and enhancing the user experience.

[0041] In some examples, the size of the buffer display area can be dynamically set according to actual performance requirements, such as 0.5 times or 1 times the height of the page's visible area. In one example, the buffer includes an extended area above the page's visible area (for handling upward scrolling) and an extended area below the page's visible area (for handling downward scrolling) to avoid blank spaces when scrolling and optimize the user experience.

[0042] In some examples, when a user scrolls the page significantly beyond the buffer's coverage area, or when a global search causes a full data refresh, a skeleton screen mechanism (i.e., a page loading placeholder scheme) can be further configured to fill the page's display content to avoid temporary blank spaces. In one example, the skeleton screen mechanism involves using simple preset patterns (such as fixed color blocks or lines) to fill the blank areas of the visible area. Once the actual data is ready and the node updates are complete, the skeleton screen is replaced with the actual content. By applying this mechanism, blank page displays can be avoided, optimizing the user experience.

[0043] In step S202, the step of creating display nodes based on the first objects corresponds to the operation of generating Document Object Model (DOM) nodes for at least one first object. Specifically, the at least one display node is a DOM node. DOM nodes are components of HTML (Hypertext Markup Language) documents and are the basic units for browsers to recognize and render pages. In one example, a corresponding DOM node can be created for each of the at least one first object. Each DOM node is associated with the first object through data binding technology, mapping data such as text and image links from the object to the internal structure of the node to construct the corresponding front-end page visual elements for each first object.

[0044] In one example, Method 200 is applied to a live-streaming backend product management system in the e-commerce field. The initial object to be displayed is the product data entry in the backend database. In this case, each created display node corresponds to an interactive product card on the page. This card not only displays information such as the product's image, name, price, and inventory, but may also contain interactive buttons such as "explain / cancel explanation," "adjust inventory," "list / delist," and "drag and drop sort," allowing administrators to perform real-time operations.

[0045] In some examples, step S203 can be used to mount the created display nodes to the parent node of the page's list container, thereby accurately drawing each display node within the visible area of ​​the page in the list container, so that the user can browse the page content displayed in the visible area of ​​the page.

[0046] In some examples, the page content movement command responded to in step S204 can be a regular page swiping or scrolling command triggered by the user, or an interactive command initiated by the user for a specific display node, such as long-pressing and dragging a product card to change its arrangement order, or clicking the "pin to top" button causing a sudden change in the node's position. Based on these movement commands, the system monitors changes in the visible area boundary in real time. For example, during downward scrolling, the system determines whether the bottom coordinates of the currently rendered node are already less than the top coordinates of the visible area (i.e., the node has completely scrolled off the top of the screen). If so, the node is identified as the "first target node to be moved out of the visible area," essentially treating it as a node to be reused to carry new data that will appear below, thus saving the computing resources required to create or destroy display nodes. This allows for more efficient updates to page content in response to user interactive commands, improving the efficiency of page rendering and display. In this example, at least one first target node is determined from at least one display node created in step S202, and at least one first target node corresponds to the Document Object Model (DOM) node described above. According to the method provided in this disclosure, the objects mapped to a DOM node (the first target node) to be moved out of the visible area can be modified (such as text, image links, etc.), which is equivalent to reusing the node to display new content, thereby improving page rendering efficiency.

[0047] In some examples, step S205 can calculate the range of page content to be displayed next based on the movement command, and then extract the corresponding new data object (i.e., the third object) from the initial object sequence. For example, when the page scrolls down one line, the next initial object after the visible range in the original sequence is determined as the third object.

[0048] According to some embodiments, each display node includes a display position parameter. Step S206, updating the display content of the at least one first target node and the position of the at least one first target node in the visible area of ​​the page based on the at least one third object, includes: updating the display content of the at least one first target node based on the at least one third object; and adjusting the display position parameter of the at least one first target node to adjust its position in the visible area of ​​the page. By applying the above technical means, the display position parameter is configured in the attribute information of each display node, and convenient node reuse and displacement can be achieved by adjusting the display position parameter.

[0049] In some examples, the page update process in response to a move command includes the following sub-processes: First, the DOM structure inside the first target node (i.e., the abandoned node that has just slid off the screen) is updated to the content of the third object (i.e., the data newly entering the screen); second, the node's display position parameters (such as the transform parameter in CSS) are adjusted to achieve the node's displacement without changing the node's layout properties. By decoupling the "content data update" from the "page layout calculation," the reuse of display nodes can be achieved more efficiently, allowing reused nodes to quickly jump to new data sequence positions after content updates, improving the visual continuity of the page list and thus enhancing the user experience.

[0050] As mentioned earlier, when old nodes that have been moved off-screen are destroyed and new nodes that have been recreated to enter the screen, the browser needs to perform reflow and repaint operations. That is, when the geometric properties of DOM elements, such as position and size, change, the browser needs to recalculate the page layout and then redraw the elements. By applying the above-mentioned techniques to reuse display nodes, the insertion and deletion of nodes are avoided, and the browser's reflow operation is not triggered. By using properties such as transform that do not trigger layout changes to adjust the position, the number of browser reflows and repaints can be reduced. Even if the user performs high-density interactive operations (such as frequent drag-and-drop sorting or fast scrolling), the page can maintain a continuous and smooth display as much as possible, thereby optimizing the user experience and saving computing resources.

[0051] According to some embodiments, the display position parameter of each display node indicates the relative position of the display node with respect to the edge of the page or the relative position of the display node with respect to the edge of the visible area of ​​the page. By configuring the display position parameter to indicate the relative position of the display node with respect to the edge of the page or the edge of the visible area of ​​the page, the coordinate calculation logic can be simplified, making it easier to locate and reuse nodes more quickly. For example, the first target node can be located more quickly and its target position after reuse can be determined without complex global coordinate conversion.

[0052] In some examples, the display position parameter, which represents the relative position of the displayed node, can be the `transform` parameter in the CSS property, indicating the amount of displacement of the displayed node relative to the top of the list container (i.e., the edge of the page). In other examples, the display position parameter can also take the form of absolute position coordinates to more precisely indicate the rendering position of the displayed node.

[0053] In scenarios involving data interaction, multiple initial objects typically originate from a backend database. In this context, according to some embodiments, method 200 further includes: in response to receiving a first content update request from a user for a second target node among the at least one display node, updating the display content of the second target node based on the first content update request; generating a data update request for the corresponding initial object of the second target node based on the first content update request; sending the data update request to the database; and in response to the failure of the data update request execution, rolling back the display content of the second target node. Thus, when a user operates on a frontend display node, the display content can be directly updated on the frontend and an update request sent to the backend database, achieving a zero-latency interactive experience based on an optimistic update strategy. Simultaneously, by utilizing a rollback mechanism to update data, consistency between the frontend display and the backend database is achieved, thereby improving the accuracy of data display.

[0054] In some examples, users can directly modify data content by performing interactive operations on the front-end page, such as changing the price of a product card (the second target node). In this case, the front-end page immediately updates the displayed content of the second target node (e.g., changing the product price from 10 yuan to 9 yuan), achieving a zero-latency interactive experience. Simultaneously, a data update request is generated and sent to the database. If the back-end database update fails (e.g., it may refuse to update the product price information due to business logic validation), a rollback mechanism can be triggered on the front-end to ensure consistency between the front-end display and the back-end database.

[0055] In some examples, Method 200 is applied to a live-streaming backend product management system in the e-commerce field. In this scenario, the backend management system needs to display a large number of products and allow multiple operators to perform operations such as dragging and dropping to sort, switching states, and adjusting inventory on the product list. Simultaneously, to synchronize the latest sales data (e.g., real-time inventory consumption), the front-end page also needs to periodically query the backend database for the latest status of each data object via a polling mechanism. Essentially, the front-end page must handle both user-initiated modifications and data updates pushed from the backend. Based on this, in one example, the first content update request is triggered by user interaction, such as when a user clicks the "Start Explanation" button on a product card. The front-end page then needs to modify the displayed content accordingly, such as marking the explanation status on the product card or adding animations indicating the explanation status.

[0056] According to some embodiments, method 200 further includes: in response to receiving the first content update request, marking the second target node as an update state until the display content of the second target node is updated; and in response to receiving the second content update request from the database for the second target node, and the second target node is not in the update state, performing an update for the second target node based on the second content update request. By applying the above technical means, after the user initiates editing (first content update request), the system will mark the node as an update state. When the front end receives the timed polling result (second content update request) from the database and the polling result contains an update for the node, the system will check the update state of the node. If it is in the process of updating, the system will determine that the user's current operation has a higher priority, and thus directly discard the old data update brought by the polling. Only when the node is not in the update state will the content of the node be updated based on the request from the backend database, preventing the phenomenon of "the user is typing, but the content is suddenly overwritten by the background data" and strictly following the interaction principle of user operation priority.

[0057] In practical applications, the following problem may exist: An operator clicks the "Remove from Shelf" button for product A on their operation page. However, before the update request triggered by the operator reaches the server, a polling request happens to return the "Listed" status for product A. In this case, if update status verification is not configured for the data update request, the product information displayed on the front end may instantly jump from "Remove from Shelf" back to "Listed," thus affecting the operator's operation. By applying the above technical means, the polling results of the node in the user's operation state are discarded, and the content displayed on the front end page remains in the "Remove from Shelf" state (i.e., the state set by the operator user) until the actual response of the "Remove from Shelf" operation is returned, and the backend database is successfully modified. In this example, it can be determined that the display content of the second target node has been updated after the data update request response for the corresponding initial object of the second target node issued by the front end page is completed, so as to restore the normal data synchronization mechanism between the backend database and the second target node, so that the display content of the front end page can be consistent with the backend database, improving the accuracy of data display.

[0058] According to some embodiments, method 200 further includes: recording the time of receiving the first content update request; and, in response to receiving a third content update request returned by the database in response to a query request from the second target node, wherein the trigger time of the query request is later than the time of receiving, performing an update for the second target node based on the third content update request. Thus, the out-of-order problem of asynchronous network requests can be solved by setting a timing verification mechanism. When a user initiates a first content update request by performing an interactive operation, the user request time is recorded. If the trigger time of the query result (polling) returned by the database is not later than the user request time, the polling result is discarded. Only when the trigger time of the query result returned by the database is later than the user request time is the content of the node updated based on the request from the backend database, thereby intercepting expired data through precise timing comparison.

[0059] As mentioned earlier, in data interaction scenarios, the front-end page needs to periodically query the back-end database for the latest status of each data object using a polling mechanism. In one example, the front-end page triggers a query request to the back-end database for the second target node at time T0, while the user triggers a first content update request for the second target node at time T1. The back-end database then returns a third content update request in response to the front-end query request at time T2. In this case, the query result carries old data from before the user's operation. By setting the above-mentioned judgment mechanism based on "the trigger time is earlier than the receiving time (the user's operation time)," the system can identify that the query result is outdated data and discard it, thereby intercepting the overwriting of the new state by old data and ensuring data correctness.

[0060] According to some embodiments, the database includes version information, and method 200 further includes: in response to receiving a fourth content update request from the database for the page display content, verifying the fourth content update request based on the version information carried in the fourth content update request and the version information corresponding to the last update of the page display content; and in response to the fourth content update request passing the verification, updating the page display content based on the fourth content update request. Therefore, it is possible to compare the version information carried by the backend with the local version information, and only update the data if the verification passes, thus improving the accuracy and reliability of the data.

[0061] In some examples, the database maintains version information (e.g., an auto-incrementing integer or timestamp version number) for each data update. When the frontend receives a fourth content update request for the page content (e.g., a synchronization or polling operation from another administrator), this request carries the latest version information from the backend. The frontend compares this version information with the version information corresponding to the currently displayed content locally. If the version number of the newly arrived data is less than or equal to the current version number, it is marked as expired and discarded. Only when the version number of the new data is greater than the current version number is it accepted and the frontend page content is updated. This mechanism effectively filters out all out-of-order, expired, and dirty data, ensuring that the frontend page displays the latest and most accurate data, thus improving the reliability and accuracy of the data displayed on the frontend.

[0062] Figure 3 A schematic diagram illustrating a page rendering process according to an exemplary embodiment of the present disclosure is shown. Figure 3 As shown, the process first generates a list container to hold the data in step 31, and determines a fixed-height viewport in step 32. In step 33, the system calculates the data items to be displayed within the visible area based on the current viewport size, and simultaneously calculates the buffer data items within a preset range above and below the viewport. Then, it creates corresponding display nodes only for the data within these visible areas and buffers, i.e., creates the visible DOM and the buffer DOM. In step 34, the system renders using the limited number of DOM nodes already created, i.e., the initial rendering obtains the viewport content. When the user starts browsing the list, in step 35, the system receives the user's scrolling operation. As shown in step 36, the system responds to the scrolling operation by reusing the DOM and updating the content. Specifically, it detects DOM nodes that have moved out of the viewport, executes the DOM reuse mechanism to change the displacement attribute of the reused DOM to move it to the target position that is about to enter the viewport, and updates its internal display content, thereby avoiding the overhead of destroying and rebuilding nodes. As shown in step 37, during scrolling (e.g., when rapid scrolling causes data to not be fully loaded or computation time results in a momentary blank space in the visible area), the system uses skeleton screens to fill the page blanks. For example, lightweight placeholder blocks are rendered in the blank areas to fill the visual gaps. In step 38, by reusing updated DOM nodes or skeleton screen content, the system completes real-time updates of the window content, ensuring that the page remains smooth during scrolling while saving computing resources.

[0063] Figure 4 A schematic diagram illustrating the update process of page display content according to an exemplary embodiment of this disclosure is shown. This update process specifically demonstrates a conflict handling mechanism in a scenario involving concurrent user interaction and background data polling. Figure 4As shown, in step 41, the front-end page sends a query request for product A to the back-end database (e.g., periodic status polling) to obtain the latest data for that product. While the query result is not yet returned, the user interacts with the product A card in step 42 (i.e., performs a front-end interactive operation to modify the card content, such as clicking the "list" or "delist" button or modifying the inventory value). In response to this user action, the front-end page marks the update status of product A in step 43, and can simultaneously update the displayed content of the product A card on the front-end. In step 44, the front-end page generates a data update request containing the user's action intent, and then sends the update request for product A to the back-end database. During this process, the query request issued in step 41 returns the query result in step 45. At this point, the front-end page detects that the target object (product A) is currently in an "updating state." To prevent the old data returned by the query from overwriting the new status just modified by the user, the system discards the query result for product A in step 46. Accordingly, the back-end database completes the data update for product A according to the request in step 44 in step 47, and returns the update result of product A to the front-end in step 48 (operation success confirmation). In step 49, the front-end page receives the update result, confirms that the back-end data has been synchronized with the front-end operation, and then removes the "update status" of product A, restoring its ability to respond to subsequent normal query requests. By applying the above mechanism, the accuracy of data display can be improved while adhering to the user operation priority interaction principle and optimizing the user interaction experience.

[0064] According to one aspect of this disclosure, a page display device is also provided. Figure 5 A structural block diagram of a page display device 500 according to an exemplary embodiment of the present disclosure is shown. Figure 5 As shown, the device 500 includes: The first determining unit 501 is configured to determine at least one first object from the plurality of initial objects based on the display area of ​​the visible area of ​​the page and the display area of ​​the plurality of initial objects to be displayed; Creation unit 502 is configured to create at least one display node based on the at least one first object; The rendering unit 503 is configured to render based on the at least one display node to obtain the page display content displayed in the visible area of ​​the page; The second determining unit 504 is configured to, in response to receiving a movement instruction for the page display content, determine from the at least one display node at least one first target node corresponding to at least one second object to be moved out of the visible area of ​​the page. The third determining unit 505 is configured to determine, based on the movement command, at least one third object to be displayed in the visible area of ​​the page from the initial sequence; and The update unit 506 is configured to update the display content of the at least one first target node and the position of the at least one first target node in the visible area of ​​the page based on the at least one third object, so as to obtain the moved page display content.

[0065] According to some embodiments, each display node includes display position parameters, and the update unit 506 includes: an update subunit configured to update the display content of the at least one first target node based on the at least one third object; and an adjustment subunit configured to adjust the display position parameters of the at least one first target node to adjust the position of the at least one first target node in the visible area of ​​the page.

[0066] According to some embodiments, the display position parameter of each display node indicates the relative position of the display node with respect to the edge of the page display area.

[0067] According to some embodiments, the first determining unit 501 includes: a first determining subunit configured to determine a target rendering area based on the display area of ​​the visible area of ​​the page and the buffer display area; and a second determining subunit configured to determine the at least one first object from the plurality of initial objects based on the target rendering area and the display area of ​​the plurality of initial objects.

[0068] According to some embodiments, multiple initial objects are determined from a database, and the apparatus 500 further includes: a second update unit configured to update the display content of the second target node based on the first content update request in response to receiving a first content update request from a user for a second target node among the at least one display node; a generation unit configured to generate a data update request for the corresponding initial object of the second target node based on the first content update request; a sending unit configured to send the data update request to the database; and a rollback unit configured to roll back the display content of the second target node in response to the failure of the data update request execution.

[0069] According to some embodiments, the apparatus 500 further includes: a marking unit configured to mark the second target node as an update state in response to receiving the first content update request until the display content of the second target node is updated; and a first update unit configured to perform an update for the second target node based on the second content update request in response to receiving a second content update request for the second target node from the database and the second target node is not in the update state.

[0070] According to some embodiments, the apparatus 500 further includes: a recording unit configured to record the time of receiving the first content update request; and a second update unit configured to perform an update for the second target node based on the second content update request in response to receiving a third content update request returned by the database in response to a query request of the second target node, wherein the query request is triggered later than the time of receiving.

[0071] According to some embodiments, the database includes version information, and the device 500 further includes: a verification unit configured to, in response to receiving a fourth content update request from the database for the page display content, verify the fourth content update request based on the version information carried in the fourth content update request and the version information corresponding to the last update of the page display content; and a third update unit configured to, in response to the fourth content update request passing verification, update the page display content based on the fourth content update request.

[0072] The collection, storage, use, processing, transmission, provision, and disclosure of any type of information, such as user personal information, in this technical solution comply with relevant laws and regulations and do not violate public order and good morals.

[0073] According to another aspect of this disclosure, an electronic device is also provided, comprising: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, the instructions being executed by the at least one processor to enable the at least one processor to perform the page display method described above.

[0074] According to another aspect of this disclosure, a non-transitory computer-readable storage medium storing computer instructions is also provided, wherein the computer instructions are used to cause the computer to perform the page display method described above.

[0075] According to another aspect of this disclosure, a computer program product is also provided, comprising a computer program, wherein the computer program, when executed by a processor, implements the page display method described above.

[0076] refer to Figure 6The present invention describes a structural block diagram of an electronic device 600 that can serve as a server or client of the present disclosure, which is an example of a hardware device that can be applied to various aspects of the present disclosure. The electronic device is intended to represent various forms of digital electronic computer devices, such as laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device can also represent various forms of mobile devices, such as personal digital processors, cellular phones, smartphones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely illustrative and are not intended to limit the implementation of the present disclosure described and / or claimed herein.

[0077] like Figure 6 As shown, device 600 includes a computing unit 601, which can perform various appropriate actions and processes based on a computer program stored in read-only memory (ROM) 602 or a computer program loaded into random access memory (RAM) 603 from storage unit 608. RAM 603 may also store various programs and data required for the operation of device 600. The computing unit 601, ROM 602, and RAM 603 are interconnected via bus 604. Input / output (I / O) interface 605 is also connected to bus 604.

[0078] Multiple components in device 600 are connected to I / O interface 605, including: input unit 606, output unit 607, storage unit 608, and communication unit 609. Input unit 606 can be any type of device capable of inputting information to device 600. Input unit 606 can receive input numerical or character information and generate key signal inputs related to user settings and / or function control of the electronic device, and may include, but is not limited to, a mouse, keyboard, touchscreen, trackpad, trackball, joystick, microphone, and / or remote control. Output unit 607 can be any type of device capable of presenting information, and may include, but is not limited to, a monitor, speaker, video / audio output terminal, vibrator, and / or printer. Storage unit 608 may include, but is not limited to, a hard disk and an optical disk. Communication unit 609 allows device 600 to exchange information / data with other devices through computer networks such as the Internet and / or various telecommunications networks, and may include, but is not limited to, modems, network cards, infrared communication devices, wireless communication transceivers, and / or chipsets, such as Bluetooth™ devices, 802.11 devices, WiFi devices, WiMax devices, cellular communication devices, and / or the like.

[0079] The computing unit 601 can be a variety of general-purpose and / or special-purpose processing components with processing and computing capabilities. Some examples of the computing unit 601 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various special-purpose artificial intelligence (AI) computing chips, various computing units running machine learning model algorithms, a digital signal processor (DSP), and any suitable processor, controller, microcontroller, etc. The computing unit 601 performs the various methods and processes described above, such as the page display method. For example, in some embodiments, the page display method may be implemented as a computer software program tangibly contained in a machine-readable medium, such as storage unit 608. In some embodiments, part or all of the computer program may be loaded and / or installed on device 600 via ROM 602 and / or communication unit 609. When the computer program is loaded into RAM 603 and executed by the computing unit 601, one or more steps of the page display method described above may be performed. Alternatively, in other embodiments, the computing unit 601 may be configured to perform the page display method by any other suitable means (e.g., by means of firmware).

[0080] Various embodiments of the systems and techniques described above herein can be implemented in digital electronic circuit systems, integrated circuit systems, field-programmable gate arrays (FPGAs), application-specific integrated circuits (ASICs), application-specific standard products (ASSPs), systems-on-a-chip (SoCs), complex programmable logic devices (CPLDs), computer hardware, firmware, software, and / or combinations thereof. These various embodiments may include implementations in one or more computer programs that can be executed and / or interpreted on a programmable system including at least one programmable processor, which may be a dedicated or general-purpose programmable processor, capable of receiving data and instructions from a storage system, at least one input device, and at least one output device, and transmitting data and instructions to the storage system, the at least one input device, and the at least one output device.

[0081] The program code used to implement the methods of this disclosure may be written in any combination of one or more programming languages. This program code may be provided to a processor or controller of a general-purpose computer, special-purpose computer, or other programmable data processing apparatus, such that when executed by the processor or controller, the program code causes the functions / operations specified in the flowcharts and / or block diagrams to be implemented. The program code may be executed entirely on a machine, partially on a machine, as a standalone software package partially on a machine and partially on a remote machine, or entirely on a remote machine or server.

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

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

[0084] The systems and technologies described herein can be implemented in computing systems that include backend components (e.g., as data servers), or middleware components (e.g., application servers), or frontend components (e.g., user computers with graphical user interfaces or web browsers through which users can interact with implementations of the systems and technologies described herein), or any combination of such backend, middleware, or frontend components. The components of the system can be interconnected via digital data communication of any form or medium (e.g., communication networks). Examples of communication networks include local area networks (LANs), wide area networks (WANs), the Internet, and blockchain networks.

[0085] Computer systems can include clients and servers. Clients and servers are generally located far apart and typically interact via communication networks. Client-server relationships are created by computer programs running on the respective computers and having a client-server relationship with each other. Servers can be cloud servers, servers in distributed systems, or servers incorporating blockchain technology.

[0086] It should be understood that the various forms of processes shown above can be used to rearrange, add, or delete steps. For example, the steps described in this disclosure can be performed in parallel, sequentially, or in a different order, as long as the desired result of the technical solution disclosed in this disclosure can be achieved, and this is not limited herein.

[0087] While embodiments or examples of this disclosure have been described with reference to the accompanying drawings, it should be understood that the methods, systems, and devices described above are merely exemplary embodiments or examples, and the scope of the invention is not limited by these embodiments or examples, but only by the granted claims and their equivalents. Various elements in the embodiments or examples may be omitted or replaced by their equivalents. Furthermore, the steps may be performed in a different order than that described in this disclosure. Further, various elements in the embodiments or examples may be combined in various ways. Importantly, as the technology evolves, many elements described herein can be replaced by equivalents that appear after this disclosure.

Claims

1. A page display method, comprising: Based on the display area of ​​the visible area of ​​the page and the display area of ​​multiple initial objects to be displayed, at least one first object is determined from the multiple initial objects; Based on the at least one first object, create at least one display node; Rendering is performed based on the at least one display node to obtain the page display content displayed in the visible area of ​​the page; In response to receiving a move instruction for the content displayed on the page, at least one first target node corresponding to at least one second object to be moved out of the visible area of ​​the page is determined from the at least one display node; Based on the movement command, at least one third object to be displayed in the visible area of ​​the page is determined from the initial sequence; as well as The display content of the at least one first target node and the position of the at least one first target node in the visible area of ​​the page are updated based on the at least one third object to obtain the moved page display content.

2. The method of claim 1, wherein, Each display node includes a display position parameter, and updating the display content of the at least one first target node and the position of the at least one first target node in the visible area of ​​the page based on the at least one third object includes: Update the display content of the at least one first target node based on the at least one third object; and Adjust the display position parameters of the at least one first target node to adjust the position of the at least one first target node in the visible area of ​​the page.

3. The method as described in claim 2, wherein, The display position parameter of each display node indicates the relative position of the display node with respect to the edge of the page or the relative position of the display node with respect to the edge of the visible area of ​​the page.

4. The method according to any one of claims 1-3, wherein, The step of determining at least one first object from the plurality of initial objects based on the display area of ​​the page's visible region and the display area of ​​multiple initial objects includes: Based on the display area and buffer display area of ​​the page's visible region, the target rendering area is determined; and Based on the target rendering area and the display area of ​​the plurality of initial objects, at least one first object is determined from the plurality of initial objects.

5. The method according to any one of claims 1-4, wherein, The plurality of initial objects are determined from a database, and the method further includes: In response to receiving a first content update request from a user for a second target node among the at least one display nodes, the display content of the second target node is updated based on the first content update request; Based on the first content update request, a data update request is generated for the corresponding initial object of the second target node; Send the data update request to the database; and In response to the failure of the data update request, the displayed content of the second target node is rolled back.

6. The method of claim 5, wherein, The method further includes: In response to receiving the first content update request, the second target node is marked as being in an update state until the displayed content of the second target node is updated; and In response to receiving a second content update request from the database for the second target node, and the second target node is not in the update state, an update is performed for the second target node based on the second content update request.

7. The method of claim 5 or 6, wherein, The method further includes: Record the time when the first content update request is received; and In response to receiving a third content update request returned by the database in response to a query request from the second target node, and the query request was triggered later than the receiving time, an update is performed on the second target node based on the third content update request.

8. The method according to any one of claims 5-7, wherein, The database includes version information, and the method further includes: In response to receiving a fourth content update request from the database for the page display content, the fourth content update request is verified based on the version information carried in the fourth content update request and the version information corresponding to the last update of the page display content; and In response to the successful verification of the fourth content update request, the page display content is updated based on the fourth content update request.

9. A page display device, comprising: The first determining unit is configured to determine at least one first object from the plurality of initial objects based on the display area of ​​the visible area of ​​the page and the display area of ​​the plurality of initial objects to be displayed; The creation unit is configured to create at least one display node based on the at least one first object; The rendering unit is configured to render based on the at least one display node to obtain the page display content displayed in the visible area of ​​the page; The second determining unit is configured to, in response to receiving a movement instruction for the page display content, determine from the at least one display node at least one first target node corresponding to at least one second object to be moved out of the visible area of ​​the page; The third determining unit is configured to determine, based on the movement instruction, at least one third object to be displayed in the visible area of ​​the page from the initial sequence; as well as The update unit is configured to update the display content of the at least one first target node and the position of the at least one first target node in the visible area of ​​the page based on the at least one third object, so as to obtain the moved page display content.

10. An electronic device, comprising: At least one processor; as well as A memory that is communicatively connected to the at least one processor; in The memory stores instructions that can be executed by the at least one processor to enable the at least one processor to perform the method of any one of claims 1-8.

11. A non-transitory computer-readable storage medium storing computer instructions, wherein, The computer instructions are used to cause the computer to perform the method according to any one of claims 1-8.

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

Images