Page updating method and device, equipment, medium and program product

Abstract

The invention discloses a page updating method and device, equipment, a medium and a program product, and the method comprises the steps: responding to an operation of switching a selected element in a first sub-page from a first element to a second element, and updating page state cache data corresponding to the first element according to current page state data of a second sub-page, the first sub-page and the second sub-page belong to the same page; obtaining page state cache data corresponding to the second element; and updating the second sub-page according to the page state cache data corresponding to the second element. According to the technical scheme provided by the embodiment of the invention, the effect of remarkably optimizing memory management and user experience in a frequent page switching scene can be achieved.

Description

Technical Field

[0001] This application belongs to the technical field of computer software, and particularly relates to a page update method, apparatus, device, medium, and program product. Background Art

[0002] In mobile applications, page loading and switching are core parts of user interaction, especially in scenarios involving a large amount of data and frequent switching. For example, in an instant messaging (IM) application, a user may need to frequently switch between different servers or channels to view different chat records or information. However, the page loading and switching technologies in related art often face problems such as excessive memory occupation, slow page loading speed, and poor user experience when dealing with a large amount of data. Summary of the Invention

[0003] Embodiments of this application provide an implementation solution different from related art to solve the technical problems that the page loading and switching technologies in related art face excessive memory occupation, slow page loading speed, and poor user experience when dealing with a large amount of data.

[0004] In a first aspect, this application provides a page update method, including:

[0005] In response to an operation of switching a selected element in a first sub-page from a first element to a second element, updating page state cache data corresponding to the first element according to current page state data of a second sub-page, where the first sub-page and the second sub-page belong to the same page;

[0006] Obtaining page state cache data corresponding to the second element;

[0007] Updating the second sub-page according to the page state cache data corresponding to the second element.

[0008] In a second aspect, this application provides a page update apparatus, including:

[0009] A first update unit, configured to update page state cache data corresponding to the first element according to current page state data of a second sub-page in response to an operation of switching a selected element in a first sub-page from a first element to a second element, where the first sub-page and the second sub-page belong to the same page;

[0010] An obtaining unit, configured to obtain page state cache data corresponding to the second element;

[0011] A second update unit, configured to update the second sub-page according to the page state cache data corresponding to the second element.

[0012] In a third aspect, this application provides an electronic device, including:

[0013] a processor; and

[0014] a memory for storing executable instructions of the processor;

[0015] wherein, the processor is configured to execute the first aspect or any method in each possible implementation manner of the first aspect by executing the executable instructions.

[0016] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium, on which a computer program is stored, and when the computer program is executed by a processor, the first aspect or any method in each possible implementation manner of the first aspect is implemented.

[0017] In a fifth aspect, an embodiment of the present application provides a computer program product, including computer instructions, and when the computer instructions are executed by a processor, the first aspect or any method in each possible implementation manner of the first aspect is implemented.

[0018] The present application provides a solution for updating the page state cache data corresponding to the first element according to the current page state data of the second sub-page in response to an operation of switching the selected element in the first sub-page from the first element to the second element, where the first sub-page and the second sub-page belong to the same page; obtaining the page state cache data corresponding to the second element; and updating the second sub-page according to the page state cache data corresponding to the second element. By caching the page state data, when the selected element in the first sub-page is switched from the first element to the second element, the page state cache data of the first element can be updated according to the current page state data of the second sub-page, so that the old data is cleared and the new data is loaded during the switching, and at the same time, the page state cache data corresponding to the second element is obtained, and the display content and user operation state of the second sub-page are quickly restored accordingly, effectively reducing the memory occupation, realizing the rapid page loading and the instant restoration of the operation state, and thus achieving the technical effect of significantly optimizing the memory management and user experience in the scenario of frequently switching pages. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] In order to more clearly illustrate the technical solutions in the embodiments of the present application or related technologies, the following will briefly introduce the drawings required to be used in the description of the embodiments or related technologies. Obviously, the following drawings are some embodiments of the present application. For those of ordinary skill in the art, without creative efforts, other drawings can also be obtained based on these drawings. In the drawings:

[0020] Figure 1 is a schematic structural diagram of a page update system provided by an embodiment of the present application;

[0021] Figure 2Schematic flowchart of the page update method provided by the embodiments of the present application;

[0022] Figure 3 Schematic diagram of a page including a first sub-page and a second sub-page provided by the embodiments of the present application;

[0023] Figure 4 Schematic diagram of the local mapping structure provided by the embodiments of the present application;

[0024] Figure 5 Interaction diagram of the page update method provided by the embodiments of the present application;

[0025] Figure 6 Schematic diagram of the structure of the page update device provided by the embodiments of the present application;

[0026] Figure 7 Schematic diagram of the structure of an electronic device provided by the embodiments of the present application. Detailed implementation manners

[0027] The embodiments of the present application will be described in detail below. The examples of the embodiments are shown in the accompanying drawings. The embodiments described below by referring to the drawings are exemplary and are intended to explain the present application, and should not be construed as a limitation to the present application.

[0028] Terms such as "first" and "second" in the specification, claims and drawings of the embodiments of the present application are used to distinguish similar objects and do not necessarily need to describe a specific order or sequence. It should be understood that such used data can be interchanged under appropriate circumstances so that the present solution can be implemented in an order other than the order illustrated or described in the present application. In addition, the terms "include" and "have" and any variations thereof are intended to cover non-exclusive inclusion. For example, a process, method, system, product or device including a series of steps or units does not necessarily have to be limited to those steps or units clearly listed, but may include other steps or units not clearly listed or inherent to these processes, methods, products or devices.

[0029] There are usually two main ways in the page loading schemes in the related art: one is to reload the entire page every time the page is switched. This way is simple to implement, but it will cause a flashing phenomenon when the page is refreshed, affecting the user experience; the other is to keep all page state data resident in memory. Although it can quickly restore the user's operation state, as the number of pages increases, the memory occupancy will increase significantly, resulting in device lag or even crash. Especially in the case of a large number of pages and a high update frequency, the memory occupancy problem is particularly prominent, seriously affecting the performance of the application and the user experience.

[0030] To solve this technical problem, the present application provides a page update method, apparatus, device, medium, and program product, which are used to solve the technical problems of high memory occupancy, slow page loading speed, and poor user experience faced by page loading and switching technologies in the related art when dealing with a large amount of data.

[0031] The following uses specific embodiments to elaborate in detail on the technical solutions of the present application and how the technical solutions of the present application solve the above technical problems. These several specific embodiments can be combined with each other, and the same or similar concepts or processes may not be repeated in some embodiments. The embodiments of the present application will be described below in conjunction with the accompanying drawings.

[0032] It can be understood that in the specific implementation manner of the present application, relevant data such as page state data and page state cache data are involved. When the above embodiments of the present application are applied to specific products or technologies, user permission, consent, or authorization is required, and the collection, use, and processing of relevant data need to comply with the relevant laws, regulations, and standards of relevant countries and regions.

[0033] Figure 1 FIG. 10 is a schematic diagram of the architecture of a page update system provided by an exemplary embodiment of the present application. This system can implement the page update method. The page update system may include a terminal 10, a server 20, and a network 30. The terminal 10 and the server 20 can perform data interaction through the network 30. The network 30 can be a wide area network, a local area network, or a combination of the two.

[0034] In some embodiments, when the application program is started, the terminal 10 and the server 20 establish a connection through the network 30. After the connection is established, the terminal 10 sends a data request instruction to the server 20. After receiving the instruction, the server 20 transmits the element list data including all elements in the first sub-page of the application program and the element data corresponding to each element to the terminal 10 through the network 30. After receiving these data, the terminal 10 performs memory caching locally, that is, caches all the data required by the first sub-page and all the original data required by all the second sub-pages.

[0035] When the user performs an operation on the terminal 10 to switch the selected element in the first sub-page from the first element to the second element, this operation can be realized, for example, by listening to interactive actions such as mouse clicks and screen touches. The terminal 10 captures this operation instruction. First, the terminal 10 obtains and caches the current page state data of the second sub-page, and updates the page state cache data corresponding to the first element according to the current page state data of the second sub-page. Further, the terminal 10 obtains the page state cache data corresponding to the second element from the local cache. If there is no latest page state cache data corresponding to the second element in the local cache, the terminal 10 can send a data request to the server 20 through the network 30. The request includes information such as the element identifier of the second element. After receiving the request, the server 20 searches and extracts the page state cache data corresponding to the second element from the large amount of page state data it stores, and then sends the data back to the terminal 10 through the network 30. The terminal 10 updates the second sub-page according to the obtained page state cache data corresponding to the second element, and displays the updated second sub-page on the screen of the terminal 10, restoring the page state (such as page data, list sliding position, channel group expansion / collapse state, etc.) when the user last browsed, providing the user with a coherent browsing experience.

[0036] Figure 2 A flowchart of a page update method provided by an exemplary embodiment of the present application. This method can be applied to a terminal 10 as shown in Figure 1 and includes at least the following steps:

[0037] S11, in response to an operation of switching the selected element in the first sub-page from the first element to the second element, update the page state cache data corresponding to the first element according to the current page state data of the second sub-page, where the first sub-page and the second sub-page belong to the same page.

[0038] The first sub-page and the second sub-page are displayed on the visual page of the terminal. When the user performs an operation on the terminal to switch the selected element in the first sub-page from the first element to the second element, the terminal responds to this operation and updates the page state cache data corresponding to the first element according to the current page state data of the second sub-page.

[0039] The first sub - page and the second sub - page belong to the same page in the same application. The first sub - page is a page part that includes multiple selectable elements. For example, the first sub - page can be used to display an element list page. The second sub - page is a page part for displaying the detailed information of the selected element in the first sub - page. For example, the second sub - page can be used to display the element details page of the element selected in the element list (such as the first sub - page). The first element is the element originally selected by the user in the first sub - page before the switching operation, and the second element is the newly selected element by the user after the switching operation in the first sub - page.

[0040] In some embodiments, the first sub - page is used to display a server list page. The selectable elements of the first sub - page can be server elements. Specifically, the server list page includes at least one server element. For example, a large number of server elements are displayed in a list form, presenting key server - related information such as server name, IP address, number of online users, and server status. To facilitate users' search, the server list page can support functions such as search and sorting. Users can sort by the number of online users from most to least to quickly find popular servers; or through the search function, enter keywords to find specific servers. Also, the server list page supports vertical scrolling, which is convenient for users to browse when there are a large number of server elements. The second sub - page is used to display the server details page of the server element. When the user selects a server element (switching from the first element to the second element) from the server list page (the first sub - page), the server details page (the second sub - page) will display the detailed information of the server accordingly. These information include but are not limited to the server's configuration information, network conditions (bandwidth, latency, etc.), list of services or applications running on the server, historical access records, server rule descriptions, etc. At the same time, the server details page also supports vertical scrolling for users to view the complete information.

[0041] The current page state data is the real - time state information of the second sub - page when the user performs an element switching operation. The current page state data reflects the page information of the corresponding element details page and the user's operation and browsing state on that element details page.

[0042] For example, the first sub - page is used to display a server list page, and the second sub - page is used to display a server details page. The server details page can be a server channel list under the corresponding server. The current page state data of the server details page can include but are not limited to page data (data used to render the server details page), list scroll position (the scrolling position of the user when viewing the server channel list), channel group expand / collapse state (whether the server channel group is expanded for display), etc.

[0043] Taking the application as a social application as an example, the first sub-page is used for the chat server list page in the social application. The chat server list page displays many chat server elements in the form of a list, and can present key information of the chat server such as the server name and server ID. The second sub-page is a chat server details page. When a user selects a chat server element from a chat server list page (i.e., the first sub-page) (i.e., switches from the first element to the second element), the chat server details page (i.e., the second sub-page) will display the chat group list under the chat server and the chat channels under each chat group. The current page status data of the chat server details page may include but is not limited to page data, list sliding position, channel group expansion / collapse status, and selected channel status; wherein, the page data may be used to render the chat server details page, such as page data including a chat group list, and a chat channel list of each chat group under the chat group list, the list sliding position is used to indicate the current stop position in the server details page, such as the scrolling position of a specific chat group list or a chat channel list, the channel group expansion / collapse status is used to indicate whether each chat group in the chat group list in the current server details page is expanded to display the chat channels under it, and the selected channel status is used to indicate the chat channel currently selected by the user in the current server details page.

[0044] The page status cache data is used to implement the function of quickly restoring the last browsing state of the second sub-page, and caches and stores the current page status data displayed on the second sub-page when each element is switched.

[0045] In some embodiments, the page status cache data includes at least one of the following: page data, list scroll position, and group expansion and / or collapse status.

[0046] Among them, the page data is the data used to render the second sub-page. The page data can be stored by serialization. The page data is processed and used to generate the content of the second sub-page. The page data is the core of the display of the second sub-page and determines the content that the user sees when switching the elements of the first sub-page. By caching the page data, the second sub-page can quickly restore the element details page corresponding to the second element when the selected element switches from the first element to the second element, so as to quickly obtain the display content of the second sub-page without re-obtaining the page data corresponding to the second element from the server. For example, in a social application, the page data may include a chat group list, and a chat channel list of each chat group under the chat group list. In a game server management application, the page data may include the number of online users of the server, the server load, the game room list, etc.

[0047] The list scroll position is the scroll position of the list included in the second sub - page. The list scroll position can be stored by recording the position information of the scroll bar, such as the position information when the user previously browsed the list in the details page of the element corresponding to the second element. In an application, when there is a large amount of list data and it cannot be fully displayed on one screen, the user will perform a scroll operation to view different parts of the content. By caching the list scroll position, when the selected element switches from the first element to the second element, after the second sub - page renders the element details page corresponding to the second element based on the page data of the second element, it can automatically locate and slide to the position where the user last browsed, avoiding the user having to manually scroll back to the previous position and enhancing the user experience. For example, in a social application, the list scroll position can record the scroll position of the user in the chat channel list; in a game server management application, the list scroll position may record the scroll position of the user in the game room list.

[0048] The group expand and / or collapse state refers to the expand or collapse state of the groups (such as channel groups, resource groups, etc.) included in the second sub - page. The group expand / collapse state is stored by a boolean value. Generally, a group can be expanded to display its sub - items below or collapsed to hide the sub - items. By caching the group expand and / or collapse state, when the selected element switches from the first element to the second element, after the second sub - page renders the element details page corresponding to the second element based on the page data of the second element, it can restore the group display state of each group in the element details page when the user last browsed, avoiding the user having to manually expand or collapse the groups again and enhancing the user experience. For example, in a social application, the group expand and / or collapse state may record whether the user has expanded a certain chat group to view the chat channels below it. In a game server management application, the group expand and / or collapse state may record whether the user has expanded a certain game room group to view the room list below it.

[0049] In some embodiments, as Figure 3 shown, Figure 3 FIG. is a schematic diagram of a page including a first sub - page and a second sub - page provided by an embodiment of the present application. The first sub - page and the second sub - page can adopt a left - right layout. The first sub - page is on the left side of the page. The first sub - page may include multiple elements (such as element A, element B, element C, element D). For example, if the selected element is element B, then the second sub - page is on the right side of the page. The second sub - page may have multiple groups, and there may be multiple channels under each group. Both the first sub - page and the second sub - page support vertical sliding.

[0050] In some other embodiments, the first sub - page and the second sub - page can also adopt a vertical layout, a nested layout, a paged layout, etc., or other layout methods, and the present application does not limit this. For example, when the first sub - page and the second sub - page adopt a vertical layout, the first sub - page is located above the page and the second sub - page is located below. For example, in a news and information application, the first sub - page above displays a news classification list (such as classification elements like current affairs, entertainment, sports, etc.), and the second sub - page below displays the news list under the currently selected classification.

[0051] In some embodiments, in response to an operation of switching the selected element in the first sub - page from the first element to the second element, after the terminal updates the page - state cache data corresponding to the first element according to the current page - state data of the second sub - page, the terminal can also regularly and actively pull the updated data of the element - details page corresponding to the first element from the server, so as to update the page - state cache data based on the updated data of the element - details page corresponding to the first element, and save the updated page - state cache data as the page - state cache data corresponding to the first element, ensuring that the page - state cache data corresponding to the first element is relatively real - time and accurate.

[0052] Taking the application as a social application as an example, the element - details page corresponding to the first element is the chat - server details page. Among them, the chat - server details page includes, but is not limited to, the chat - group list under the chat server and the chat channels under each chat group; correspondingly, the updated data of the chat - server details page includes, but is not limited to, the change situation indicating the chat groups under the chat server and / or the chat channels under each chat group; specifically, the terminal can regularly and actively pull the updated data of the chat - server details page corresponding to each chat - server element from the server, so as to update the page - state cache data based on the updated data of the chat - server details page corresponding to the chat - server element.

[0053] Further, in one embodiment, after updating the page state cache data corresponding to the first element according to the current page state data of the second sub-page, the terminal may send a page update information request carrying the element identifier of the first element and the real-time page version identifier to the server; the page update information request is used to trigger the server to respond to the page update information request to obtain the cumulative number of version changes and the version change frequency of the element details page corresponding to the first element based on the element identifier, and return the cumulative number of page changes and the page change frequency, and at the same time, the page update information request is used to trigger the server to respond to the page update information request to obtain the current page version identifier of the element details page corresponding to the first element based on the element identifier, and when the current page version identifier is different from the real-time page version identifier, return the page data of the element details page corresponding to the current page version identifier to the terminal; the terminal receives the update data returned by the server, obtains the cumulative number of page changes and the page change frequency in the update information, and obtains the page update frequency according to the number of page changes, the page change frequency, the cumulative value of the number of element displays, and the element display frequency; determines the sending time of the next page update information request based on the page update frequency, so as to send a page update information request to the server again when the sending time arrives; in addition, if the update information includes the page data of the element details page, update the page state cache data corresponding to the first element based on the page data of the element details page.

[0054] Among them, the cumulative number of version changes is used to identify the total number of version updates of the element details page, the version change frequency is used to identify the version update frequency of the element details page within a preset time period, the cumulative value of the number of element displays is used to indicate the total number of times the element details page of the first element is displayed, that is, the number of times the first element is selected, and the element display frequency is used to indicate the frequency of the element details page of the first element being displayed within a preset time period; after obtaining the cumulative number of version changes and the version change frequency from the update data, the page update frequency can be calculated according to the following formula:

[0055]

[0056] Among them, μ represents the version change frequency, N server represents the cumulative number of version changes, represents the cumulative value of the number of element displays, N local represents the element display frequency, and k represents an adjustment coefficient, which can be set according to the actual situation.

[0057] It can be understood that the higher the version change frequency and the larger the cumulative number of version changes, the more frequently the element details page corresponding to the first element is updated. Or, the higher the element display frequency and the larger the cumulative value of the element display times, the more frequently the element details page corresponding to the first element is opened by the users of the currently used application client. At this time, the page update information request is sent more frequently, and the time point for sending the next page update information request is closer to the current time point, so as to ensure the timely update of the page state cache data and make the element details page seen by the user the latest content. By combining the frequency of the users of the currently used application client viewing the element details page of the element and the frequency of the version of the element details page being updated, the sending frequency of the page update information request is controlled. While ensuring that the element details page shown each time is the latest content, the number of accesses to the server is reduced to save network communication resources.

[0058] In some embodiments, as Figure 4 shown, Figure 4 is a schematic structural diagram of the local mapping structure provided by the embodiment of the present application. The local mapping structure is stored in the terminal, and the page state cache data corresponding to each element is stored in the form of key-value pairs. For example, the key-value pair corresponding to element A and page state cache data a, the key-value pair corresponding to element B and page state cache data b, and the key-value pair corresponding to element C and page state cache data c.

[0059] In some embodiments, when the terminal responds to the operation of switching the selected element in the first sub-page from the first element to the second element, updating the page state cache data corresponding to the first element according to the current page state data of the second sub-page includes: determining the target key-value pair with the element identifier corresponding to the first element as the key in the local mapping structure; setting the value corresponding to the target key-value pair to the current page state data of the second sub-page. Wherein, the element identifier of the element is preset and unique throughout the life cycle of the application. For example, if the first sub-page displays a server list and the first element is a specific server, the element identifier of the first element can be the id of the server.

[0060] More specifically, in response to an operation of switching the selected element in the first sub-page from the first element to the second element, the terminal determines the unique element identifier corresponding to the first element and obtains the current page state data of the second sub-page. The terminal creates a proxy event, encapsulates the current page state data of the second sub-page and the unique identifier of the first element in the event, and sends the constructed proxy event to the "framework page". The "framework page" listens for the proxy event. When receiving an event containing the current page state data of the second sub-page and the unique element identifier of the first element, it extracts the data therein. The "framework page" uses the received element identifier to look up the corresponding cached data in the local mapping structure (such as a Map structure). If the data corresponding to the element identifier already exists in the local mapping structure, it overwrites it with the current page state data of the new second sub-page. If not, it creates a new entry in the local mapping structure, stores the element identifier of the first element as the key and the current page state data of the second sub-page as the value.

[0061] S12. Obtain the page state cached data corresponding to the second element.

[0062] In some embodiments, obtaining the page state cached data corresponding to the second element includes:

[0063] Obtain the page state cached data corresponding to the second element from the local mapping structure according to the element identifier of the second element.

[0064] Specifically, in response to an operation of switching the selected element in the first sub-page from the first element to the second element, the terminal determines the element identifier corresponding to the second element and obtains the page state cached data corresponding to the element identifier corresponding to the second element from the local mapping structure.

[0065] S13. Update the second sub-page according to the page state cached data corresponding to the second element.

[0066] After the terminal obtains the page state cached data corresponding to the second element, it updates the second sub-page according to the page state cached data corresponding to the second element.

[0067] In some embodiments, updating the second sub-page according to the page state cached data corresponding to the second element includes: rendering the second sub-page with the page data in the page cached state data corresponding to the second element; scrolling the list of the second sub-page to the list scroll position in the page cached state data corresponding to the second element; setting the display mode of the grouping of the second sub-page according to the expansion and / or folding state of the grouping in the page cached state data corresponding to the second element.

[0068] Taking the game server management application as an example, the first sub-page displays a list of multiple game servers, and the second sub-page is the details page of the corresponding server. Suppose a player switches from the "Telecom Area 1 Server" (the first element) to the "Netcom Area 2 Server" (the second element) on the first sub-page, and the terminal obtains the page state cache data corresponding to the "Netcom Area 2 Server". These data include "page data" such as the number of players online on this server, server load, popular game rooms, etc. during the last visit; the "list scroll position" when the player browses the list of game rooms in the server, such as staying at the 10th game room; the "group expansion / collapse state" of the game room grouping in the server (such as groupings like the novice area, expert area, etc.), for example, the novice area grouping is in the expanded state. The terminal uses the obtained "page data" to render the second sub-page (the details page of the Netcom Area 2 Server). The data such as the number of players online on the server and the server load are displayed at the corresponding positions on the page, such as displaying the number of online players at the top of the page and showing the server load in the performance metrics area. Based on the "list scroll position", the terminal scrolls the list of game rooms in the server to the position where it was last browsed, that is, the 10th game room, so that the player can quickly return to the vicinity of the game room previously viewed. According to the "group expansion / collapse state", the terminal sets the novice area grouping to the expanded state, displays the game rooms in the novice area, and keeps the page display consistent with that during the player's last visit, improving the efficiency of the player to find game rooms.

[0069] Taking a social application as an example, the present application solution will be described. In the social application, the first sub-page displays a chat server list, which includes server elements corresponding to each connected server. The second sub-page displays a chat group list under each chat server and chat channels under each chat group. When the user switches the selected element on the first sub-page from "Chat Server A" (the first element) to "Chat Server B" (the second element), the terminal obtains the page state cache data corresponding to "Chat Server B". These data include "page data" such as the chat group list and chat channel list of this chat server during the last browsing, the "list scroll position" when the user views the chat group list or chat channel list, and the "group expansion / collapse state" of the chat group. For example, when the user last entered Chat Server B, the chat group "Friend Group" in its server details page was in an expanded state, and the server details page stopped at the 5th chat channel. The terminal uses the obtained "page data" to render the server details page corresponding to Chat Server B on the second sub-page, and displays the chat group list and chat channel list on the server details page, facilitating the user to view and manage chat channels. At the same time, according to the "group expansion / collapse state", the terminal sets the "Friend Group" to the expanded state, displays the chat channels under the friend group, and according to the "list scroll position", the terminal scrolls the server details page to the position of the last browsing, enabling the user to quickly return to the vicinity of the chat channel viewed previously, keeping the page display consistent with that during the user's last browsing, and improving the efficiency of the user to find chat channels.

[0070] For another example, in a cloud server management platform, the first sub-page displays a list of different cloud server instances, and the second sub-page displays detailed resource information of each instance. When the user switches from "Cloud Server A" (the first element) to "Cloud Server B" (the second element) on the first sub-page, the terminal obtains the page state cache data corresponding to "Cloud Server B". These data include "page data" such as the CPU usage rate, memory occupancy, and disk space usage of Cloud Server B during the last view; the "list scroll position" when the user views the cloud server resource usage chart, assuming it is the scroll position when viewing the disk I / O read / write volume chart for the past week; the "group expansion / collapse state" of cloud server resource groups (such as computing resource groups, storage resource groups, etc.), for example, the storage resource group was in a collapsed state last time. The terminal updates the second sub-page (the details page of Cloud Server B) with the obtained "page data". In the resource monitoring area of the page, information such as the CPU usage rate, memory occupancy, and disk space usage is displayed to facilitate the user to understand the real-time state of the cloud server. According to the "list scroll position", the terminal scrolls the resource usage chart to the position of the last view, that is, the corresponding position of the disk I / O read / write volume chart for the past week, so that the user can continue to view the previously concerned data without repositioning. Based on the "group expansion / collapse state", the terminal sets the storage resource group to the collapsed state to keep the page layout consistent with the user's last view, avoiding page clutter caused by excessive information and allowing the user to focus on the currently viewed resource information.

[0071] Next, the page update method provided by the embodiments of the present application will be further introduced. Please refer to Figure 5 , Figure 5 which is an interaction schematic diagram of the page update method provided by the embodiments of the present application. The interaction process may include the following steps:

[0072] S1. In response to the user selecting the second element on the first sub-page, the selected element on the first sub-page switches from the first element to the second element;

[0073] S2. The first sub-page notifies the frame page to update the display content of the second sub-page;

[0074] S3. The frame page notifies the second sub-page to close the current page instance corresponding to the first element;

[0075] S4. The second sub-page caches the current page state data of the second sub-page;

[0076] S5. The second sub-page sends the element identifier of the first element and the current page state data of the second sub-page to the frame page;

[0077] S6. The frame page updates the page state cache data corresponding to the first element according to the current page state data of the second sub-page;

[0078] S7, the framework page obtains the page state cache data corresponding to the second element;

[0079] S8, the framework page creates a new page instance according to the page state cache corresponding to the second element and sends it to the second sub-page;

[0080] S9, the second sub-page displays the new page instance.

[0081] For the specific implementation manners corresponding to each step in the above interaction process in the embodiments of the present application, reference may be made to the content of the embodiments corresponding to the above process schematic diagram. For the sake of brevity, they will not be elaborated here.

[0082] The present application provides a solution for responding to an operation of switching a selected element in a first sub-page from a first element to a second element, updating the page state cache data corresponding to the first element according to the current page state data of the second sub-page, where the first sub-page and the second sub-page belong to the same page; obtaining the page state cache data corresponding to the second element; and updating the second sub-page according to the page state cache data corresponding to the second element. By caching the page state data, when the selected element in the first sub-page is switched from the first element to the second element, the page state cache data of the first element can be updated according to the current page state data of the second sub-page, so as to clean up the old data and load the new data during the switch, and at the same time obtain the page state cache data corresponding to the second element, and quickly restore the display content and user operation state of the second sub-page accordingly, effectively reducing the memory occupation, realizing the fast loading of the page and the instant restoration of the operation state, thereby achieving the technical effect of significantly optimizing the memory management and user experience in the scenario of frequently switching pages.

[0083] Figure 6 It is a schematic structural diagram of a page update device provided for an exemplary embodiment of the present application;

[0084] Wherein, the device includes:

[0085] A first update unit 61, configured to respond to an operation of switching a selected element in a first sub-page from a first element to a second element, and update the page state cache data corresponding to the first element according to the current page state data of the second sub-page, where the first sub-page and the second sub-page belong to the same page;

[0086] An obtaining unit 62, configured to obtain the page state cache data corresponding to the second element;

[0087] A second update unit 63, configured to update the second sub-page according to the page state cache data corresponding to the second element.

[0088] In some embodiments, the page state cache data is stored in a local mapping structure. When the device is used to update the page state cache data corresponding to the first element according to the current page state data of the second sub-page, it is specifically used for:

[0089] Determine the target key-value pair in the local mapping structure with the element identifier corresponding to the first element as the key;

[0090] Set the value corresponding to the target key-value pair to the current page state data of the second sub-page.

[0091] In some embodiments, when the device is used to obtain the page state cache data corresponding to the second element, it is specifically used for:

[0092] Obtain the page state cache data corresponding to the second element from the local mapping structure according to the element identifier of the second element.

[0093] In some embodiments, the page state cache data includes at least one of the following: page data, list scroll position, and group expansion and / or collapse state. The page data is the data used to render the second sub-page, the list scroll position is the scroll position of the list included in the second sub-page, and the group expansion and / or collapse state is the expansion or collapse state of the group included in the second sub-page.

[0094] In some embodiments, when the device is used to update the second sub-page according to the page state cache data corresponding to the second element, it is specifically used for:

[0095] Render the second sub-page using the page data in the page cache state data corresponding to the second element;

[0096] Scroll the list of the second sub-page to the list scroll position in the page cache state data corresponding to the second element;

[0097] Set the display mode of the group of the second sub-page according to the expansion and / or collapse state of the group in the page cache state data corresponding to the second element.

[0098] In some embodiments, the first sub-page is a server list page, and the second sub-page is a server details page.

[0099] It should be understood that the device embodiments and the method embodiments can correspond to each other. Similar descriptions can refer to the method embodiments. To avoid repetition, it will not be elaborated here. Specifically, the device can execute the above method embodiments, and the foregoing and other operations and / or functions of each module in the device respectively correspond to the corresponding processes in each method of the above method embodiments. For the sake of brevity, it will not be elaborated here.

[0100] In the above, the apparatus according to the embodiments of the present application has been described from the perspective of functional modules. It should be understood that the functional modules can be implemented in the form of hardware, can also be implemented by instructions in the form of software, or can be implemented by a combination of hardware and software modules. Specifically, the steps of the method embodiments in the present application can be completed by the integrated logic circuit in the hardware of the processor and / or instructions in the form of software. The steps of the method disclosed in combination with the embodiments of the present application can be directly embodied as being executed and completed by the hardware decoding processor, or executed and completed by a combination of the hardware and software modules in the decoding processor. Optionally, the software module can be located in a mature storage medium in the art such as a random access memory, a flash memory, a read-only memory, a programmable read-only memory, an electrically erasable programmable memory, a register, etc. This storage medium is located in the memory, and the processor reads the information in the memory and combines its hardware to complete the steps in the above method embodiments.

[0101] Figure 7 is a schematic block diagram of an electronic device provided by an embodiment of the present application. The electronic device may include:

[0102] a memory 701 and a processor 702. The memory 701 is used to store a computer program and transmit the program code to the processor 702. In other words, the processor 702 can call and run the computer program from the memory 701 to implement the method in the embodiments of the present application.

[0103] For example, the processor 702 can be used to execute the above method embodiments according to the instructions in the computer program.

[0104] In some embodiments of the present application, the processor 702 may include, but is not limited to:

[0105] a general-purpose processor, a digital signal processor (DSP), an application specific integrated circuit (ASIC), a field programmable gate array (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, and so on.

[0106] In some embodiments of the present application, the memory 701 includes, but is not limited to:

[0107] Volatile memory and / or non-volatile memory. Among them, the non-volatile memory can be Read-Only Memory (ROM), Programmable ROM (PROM), Erasable PROM (EPROM), Electrically Erasable PROM (EEPROM), or flash memory. The volatile memory can be Random Access Memory (RAM), which is used as an external cache. By way of example but not limitation, many forms of RAM are available, such as Static RAM (SRAM), Dynamic RAM (DRAM), Synchronous DRAM (SDRAM), Double DataRate SDRAM (DDR SDRAM), Enhanced SDRAM (ESDRAM), synch link DRAM (SLDRAM), and Direct Rambus RAM (DR RAM).

[0108] In some embodiments of the present application, the computer program may be divided into one or more modules, and the one or more modules are stored in the memory 701 and executed by the processor 702 to complete the method provided by the present application. The one or more modules may be a series of computer program instruction segments capable of performing specific functions, and the instruction segments are used to describe the execution process of the computer program in the electronic device.

[0109] As Figure 7 shown, the electronic device may further include:

[0110] A transceiver 703, which may be connected to the processor 702 or the memory 701.

[0111] Among them, the processor 702 may control the transceiver 703 to communicate with other devices. Specifically, it may send information or data to other devices, or receive information or data sent by other devices. The transceiver 703 may include a transmitter and a receiver. The transceiver 703 may further include an antenna, and the number of antennas may be one or more.

[0112] It should be understood that the various components in the electronic device are connected through a bus system. Among them, the bus system includes, in addition to the data bus, a power bus, a control bus, and a status signal bus.

[0113] This application also provides a computer storage medium, on which a computer program is stored. When the computer program is executed by a computer, the computer can execute the methods in the above method embodiments. Or rather, this application embodiment also provides a computer program product containing computer instructions. When the computer instructions are executed by a computer, the computer executes the methods in the above method embodiments.

[0114] When implemented using software, it can be fully or partially implemented in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, the processes or functions according to this application embodiment are fully or partially generated. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable devices. The computer instructions can be stored in a computer-readable storage medium, or transmitted from one computer-readable storage medium to another computer-readable storage medium. For example, the computer instructions can be transmitted from a website, computer, server, or data center to another website, computer, server, or data center in a wired manner (such as coaxial cable, optical fiber, digital subscriber line (DSL)) or wirelessly (such as infrared, wireless, microwave, etc.). The computer-readable storage medium can be any available medium that the computer can access or a data storage device such as a server or data center that includes one or more integrated available media. The available medium can be a magnetic medium (such as a floppy disk, hard disk, magnetic tape), an optical medium (such as a digital video disc (DVD)), or a semiconductor medium (such as a solid state disk (SSD)), etc.

[0115] Those of ordinary skill in the art can realize that the modules and algorithm steps of each example described in combination with the embodiments disclosed in this article can be implemented by electronic hardware, or by a combination of computer software and electronic hardware. Whether these functions are executed in a hardware or software manner depends on the specific application and design constraints of the technical solution. Professional technicians can use different methods to implement the described functions for each specific application, but such implementation should not be considered to exceed the scope of this application.

[0116] In several embodiments provided in the present application, it should be understood that the disclosed systems, devices, and methods can be implemented in other ways. For example, the device embodiments described above are merely illustrative. For example, the division of the modules is only a logical function division. In actual implementation, there may be other division methods. For example, multiple modules or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the displayed or discussed coupling or direct coupling or communication connection between each other can be through some interfaces. The indirect coupling or communication connection of the devices or modules can be in electrical, mechanical, or other forms.

[0117] The modules described as separate components may or may not be physically separated. The components displayed as modules may or may not be physical modules, that is, they can be located in one place or distributed to multiple network units. Some or all of the modules can be selected according to actual needs to achieve the purpose of the solution of this embodiment. For example, in each embodiment of the present application, the functional modules can be integrated in a processing module, or each module can exist physically alone, or two or more modules can be integrated in one module.

[0118] In the embodiments of the present application, the term "module" or "unit" refers to a computer program with a predetermined function or a part of a computer program, which works together with other related parts to achieve a predetermined goal, and can be fully or partially implemented by using software, hardware (such as a processing circuit or a memory), or a combination thereof. Similarly, a processor (or multiple processors or memories) can be used to implement one or more modules or units. In addition, each module or unit can be a part of an overall module or unit that includes the function of that module or unit.

[0119] The above is only the specific implementation manner of the present application, but the protection scope of the present application is not limited thereto. Any person skilled in the art within the technical scope disclosed in the present application can easily think of changes or substitutions, which should all be covered by the protection scope of the present application. Therefore, the protection scope of the present application should be subject to the protection scope of the claims.

Claims

1. A page updating method, characterized in that: include: In response to an operation of switching a selected element in a first subpage from a first element to a second element, updating page state cache data corresponding to the first element according to current page state data of the second subpage, wherein the first subpage and the second subpage belong to the same page; Obtaining page status cache data corresponding to the second element; The second sub-page is updated according to the page status cache data corresponding to the second element.

2. The method according to claim 1, characterized in that The page status cache data is stored in a local mapping structure, and the updating of the page status cache data corresponding to the first element according to the current page status data of the second sub-page includes: Determine a target key-value pair in the local mapping structure with an element identifier corresponding to the first element as a key; The value corresponding to the target key-value pair is set as the current page state data of the second sub-page.

3. The method according to claim 2, characterized in that Obtaining page status cache data corresponding to the second element includes: The page status cache data corresponding to the second element is obtained from the local mapping structure according to the element identifier of the second element.

4. The method according to claim 1, characterized in that: The page status cache data includes at least one of the following: page data, list scroll position, and group expansion and / or collapse status, the page data is data used to render the second sub-page, the list scroll position is the scroll position of the list included in the second sub-page, and the group expansion and / or collapse status is the expansion or collapse status of the group included in the second sub-page.

5. The method according to claim 4, characterized in that Updating the second sub-page according to the page status cache data corresponding to the second element includes: Rendering the second sub-page using the page data in the page cache state data corresponding to the second element; Scrolling the list of the second sub-page to the list scrolling position in the page cache state data corresponding to the second element; The display mode of the group of the second sub-page is set according to the expansion and / or collapse state of the group in the page cache state data corresponding to the second element.

6. The method according to claim 1, characterized in that The first sub-page is a server list page, and the second sub-page is a server details page.

7. A page updating device, characterized in that: include: A first updating unit, configured to update page state cache data corresponding to the first element according to current page state data of the second subpage in response to an operation of switching a selected element in the first subpage from the first element to the second element, wherein the first subpage and the second subpage belong to the same page; An acquiring unit, used for acquiring page status cache data corresponding to the second element; The second updating unit is configured to update the second sub-page according to the page status cache data corresponding to the second element.

8. An electronic device, characterized in that: include: processor; as well as A memory, configured to store executable instructions of the processor; The processor is configured to perform the method of any one of claims 1 to 6 by executing the executable instructions.

9. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the method according to any one of claims 1 to 6 is implemented.

10. A computer program product comprising computer instructions, characterized in that: When the computer instructions are executed by a processor, the method according to any one of claims 1 to 6 is implemented.

Images