Page rendering method and device, storage medium and electronic device

Abstract

The application discloses a page rendering method and device, a storage medium and an electronic device, and relates to the field of smart homes. The method comprises the following steps: in the case that a target object receives an operation event of a first scroll list on a display page, an operation attribute corresponding to the operation event is acquired; target to-be-rendered data of the display page is acquired from a storage area according to the operation attribute, wherein the storage area is used for indicating the to-be-rendered data of the display page which is cached; a second scroll list used for responding to the operation event is generated according to the target to-be-rendered data, and the second scroll list is displayed on the display page.

Description

Technical Field

[0001] This invention relates to the field of communications, and more specifically, to a method and apparatus for rendering a webpage, a storage medium, and an electronic device. Background Technology

[0002] With the advancement of science and technology and the development of artificial intelligence, intelligent algorithms are increasingly being applied to daily life. Their intelligent development is of paramount importance, and the most critical issue in intelligentization lies in intelligently addressing users' urgent needs.

[0003] With the development of big data and artificial intelligence, personalized recommendations are becoming increasingly common in various apps, and people are accustomed to scrolling down to receive more recommendations. Now, when browsing a scrolling list-like structure, users often unconsciously perform numerous swipes to load more content, resulting in too much data and DOM structure on the displayed page. This consumes a significant amount of the app's performance when rendering this data, leading to stuttering or lag.

[0004] Regarding the relevant technologies, when users perform the "swipe up to load more" operation on the app, the app's performance is greatly affected by the large amount of data displayed on the page at the same time, resulting in stuttering and other issues. No effective solution has yet been proposed. Summary of the Invention

[0005] This invention provides a page rendering method and apparatus, storage medium and electronic device to at least solve the problem in related technologies where, when a user performs a swipe-up operation to load more data in an app, the app's performance is greatly affected by rendering resources due to the large amount of data displayed on the page, resulting in stuttering and other issues.

[0006] According to one embodiment of the present invention, a page rendering method is provided, comprising: when a display page receives an operation event of a target object on a first scroll list, obtaining an operation attribute corresponding to the operation event; obtaining target data to be rendered of the display page from a storage area according to the operation attribute, wherein the storage area is used to indicate cached data to be rendered of the display page; generating a second scroll list for responding to the operation event according to the target data to be rendered, and displaying the second scroll list on the display page.

[0007] In one exemplary embodiment, retrieving target data to be rendered from a storage area based on the operation attributes includes: determining the data to be rendered in a first storage area when the sliding direction indicates that the target object performs a pull-down operation on a first scrolling list, wherein the display height corresponding to the data to be rendered is consistent with the sliding height; and determining the data to be rendered in a second storage area when the sliding direction indicates that the target object performs an up-slide operation on the first scrolling list, wherein the display height corresponding to the data to be rendered is consistent with the sliding height. The storage area includes a first storage area and a second storage area, the first storage area being used to cache the data to be rendered at the top of the display page, and the second storage area being used to cache the data to be rendered at the bottom of the display page. The operation attributes include at least the sliding height and the sliding direction.

[0008] In an exemplary embodiment, retrieving the target data to be rendered for the display page from a storage area based on the operation attributes includes: determining a first height of the display data of the first scrolling list in a data display list before the target object performs the operation event on the first scrolling list, wherein the data display list includes: the display data of the first scrolling list and the data in the storage area; determining the sliding height and sliding direction corresponding to the operation event during the process of the target object performing the operation event on the first scrolling list, wherein the operation attributes include at least: sliding height and sliding direction; determining whether to reorganize the data display list based on the first height and the sliding height; and retrieving the target data to be rendered for the display page from the storage area based on the sliding height and sliding direction if it is determined that the data display list should not be reorganized.

[0009] In an exemplary embodiment, after determining whether to reorganize the data display list based on the first height and the sliding height, the method further includes: if it is determined that the data display list should be reorganized, sending a first data request to the data source corresponding to the scrolling list; and if first update data is received from the data source based on the first data request, reorganizing the data display list based on the first update data.

[0010] In an exemplary embodiment, determining whether to reorganize the data display list based on the first height and the sliding height includes at least one of the following: if the sliding direction indicates that the target object performs a pull-down operation on the first scroll list, determining that the difference between the first height and the sliding height determines a first size relationship with the data in the first storage area at a second height of the data display list; if the first size relationship indicates that the difference is less than the second height, determining to reorganize the data display list; if the sliding direction indicates that the target object performs an upward sliding operation on the first scroll list, determining that the sum of the first height and the sliding height determines a second size relationship with the data in the second storage area at a third height of the data display list; if the second size relationship indicates that the sum is greater than the third height, determining to reorganize the data display list, wherein the storage area includes: a first storage area and a second storage area, the first storage area being used to cache data to be rendered at the top of the display page, and the second storage area being used to cache data to be rendered at the bottom of the display page.

[0011] In one exemplary embodiment, after the second scrolling list is displayed on the display page, the method further includes: sending a second data request to the data source corresponding to the scrolling list; and, upon receiving second update data sent by the data source according to the second data request, updating the data in the first storage area and the second storage area according to the second update data and the display data.

[0012] In one exemplary embodiment, updating the data in the first storage area and the second storage area according to the second update data and the display data includes: updating the data in the first storage area according to the second update data and updating the data in the second storage area according to the display data when the sliding direction indicates that the target object performs a pull-down operation on the first scroll list; and updating the data in the second storage area according to the second update data and updating the data in the first storage area according to the display data when the sliding direction indicates that the target object performs an swiping operation on the first scroll list.

[0013] According to another embodiment of the present invention, a page rendering apparatus is also provided, comprising: a first acquisition module, configured to acquire an operation attribute corresponding to the operation event when a display page receives an operation event of a target object on a first scroll list; a second acquisition module, configured to acquire target data to be rendered of the display page from a storage area according to the operation attribute, wherein the storage area is used to indicate cached data to be rendered of the display page; and a generation module, configured to generate a second scroll list for responding to the operation event according to the target data to be rendered, and display the second scroll list on the display page.

[0014] According to another aspect of the present invention, a computer-readable storage medium is also provided, wherein a computer program is stored therein, wherein the computer program is configured to execute the rendering method of the above-described page at runtime.

[0015] According to another aspect of the present invention, an electronic device is also provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the page rendering method described above through the computer program.

[0016] In this embodiment of the invention, when the display page receives an operation event from a target object on the first scroll list, the operation attribute corresponding to the operation event is obtained; the target data to be rendered on the display page is obtained from the storage area according to the operation attribute, wherein the storage area is used to indicate the cached data to be rendered on the display page; a second scroll list for responding to the operation event is generated according to the target data to be rendered, and the second scroll list is displayed on the display page; in this embodiment of the invention, by setting a storage area, when the user performs an operation event on the scroll list, the second scroll list is determined according to the storage area, reducing the DOM structure of the page without affecting the user experience, thereby achieving the purpose of performance optimization. By adopting the above technical solution, the problem of lag and other issues arise when the user performs the swipe-up-to-load-more operation on the APP, because there is too much data on the display page at the same time, and the APP's performance is consumed a lot of performance when rendering resources. Attached Figure Description

[0017] The accompanying drawings, which are incorporated in and form part of this specification, illustrate embodiments consistent with this application and, together with the description, serve to explain the principles of this application.

[0018] To more clearly illustrate the technical solutions in the embodiments of this application or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, for those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0019] Figure 1 This is a schematic diagram of the hardware environment for a page rendering method according to an embodiment of this application;

[0020] Figure 2 This is a flowchart of a page rendering method according to an embodiment of the present invention;

[0021] Figure 3 This is a system framework diagram of a page rendering method according to an optional embodiment of the present invention;

[0022] Figure 4 This is a flowchart of a page rendering method according to an optional embodiment of the present invention;

[0023] Figure 5 This is a structural block diagram of a page rendering apparatus according to an embodiment of the present invention. Detailed Implementation

[0024] To enable those skilled in the art to better understand the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present application, and not all embodiments. Based on the embodiments in the present application, all other embodiments obtained by those of ordinary skill in the art without creative effort should fall within the scope of protection of the present application.

[0025] It should be noted that the terms "first," "second," etc., in the specification, claims, and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of this application described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion; for example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus.

[0026] According to one aspect of the embodiments of this application, a page rendering method is provided. This page rendering method is widely applicable to whole-house intelligent digital control application scenarios such as smart homes, smart home ecosystems, and intelligencehouse ecosystems. Optionally, in this embodiment, the above-mentioned page rendering method can be applied to, for example... Figure 1 The hardware environment shown consists of terminal device 102 and server 104. For example... Figure 1 As shown, server 104 is connected to terminal device 102 via a network and can be used to provide services (such as application services) to the terminal or clients installed on the terminal. A database can be set up on the server or independently of the server to provide data storage services for server 104. Cloud computing and / or edge computing services can be configured on the server or independently of the server to provide data processing services for server 104.

[0027] The aforementioned networks may include, but are not limited to, at least one of the following: wired network, wireless network. The aforementioned wired network may include, but is not limited to, at least one of the following: wide area network (WAN), metropolitan area network (MAN), local area network (LAN). The aforementioned wireless network may include, but is not limited to, at least one of the following: Wi-Fi (Wireless Fidelity), Bluetooth. Terminal device 102 may not be limited to PC, mobile phone, tablet computer, smart air conditioner, smart range hood, smart refrigerator, smart oven, smart stove, smart washing machine, smart water heater, smart washing equipment, smart dishwasher, smart projector, smart TV, smart clothes rack, smart curtains, smart audio-visual equipment, smart socket, smart speaker, smart speaker box, smart fresh air system, smart kitchen and bathroom equipment, smart bathroom equipment, smart robot vacuum cleaner, smart window cleaning robot, smart mopping robot, smart air purifier, smart steam oven, smart microwave oven, smart water heater, smart air purifier, smart water dispenser, smart door lock, etc.

[0028] This embodiment provides a method for rendering a page. Figure 2 This is a flowchart of a page rendering method according to an embodiment of the present invention, which includes the following steps:

[0029] Step S202: When the display page receives an operation event from the target object on the first scroll list, obtain the operation attribute corresponding to the operation event;

[0030] Step S204: Obtain the target data to be rendered for the display page from the storage area according to the operation attribute, wherein the storage area is used to indicate the cached data to be rendered for the display page;

[0031] Step S206: Generate a second scroll list for responding to the operation event based on the target data to be rendered, and display the second scroll list on the display page.

[0032] Through the above steps, when the display page receives an operation event from the target object on the first scroll list, the operation attribute corresponding to the operation event is obtained; the target data to be rendered on the display page is obtained from the storage area according to the operation attribute, wherein the storage area is used to indicate the cached data to be rendered on the display page; a second scroll list for responding to the operation event is generated according to the target data to be rendered, and the second scroll list is displayed on the display page; in this embodiment of the invention, by setting a storage area, when the user performs an operation event on the scroll list, the second scroll list is determined according to the storage area, reducing the DOM structure of the page without affecting the user experience, thereby achieving the purpose of performance optimization. By adopting the above technical solution, the problem of lag and other issues caused by the APP consuming a lot of performance when rendering resources due to the large amount of data on the display page when the user performs the swipe-up to load more operations is solved.

[0033] It should be noted that the operation attributes corresponding to the operation event are obtained, wherein the operation attributes include: sliding direction and sliding height, including:

[0034] The system obtains the first horizontal and first vertical coordinates of the target part of the target object on the display page when the target object first touches the scroll list; it also obtains the first horizontal and first vertical coordinates of the target part of the target object on the display page when the target object leaves the scroll list; based on the first difference between the first and second horizontal coordinates, and the second difference between the first and second vertical coordinates; it determines the sliding height and sliding direction corresponding to the operation event based on the first difference and the second difference; wherein the first difference is obtained by subtracting the first horizontal coordinate from the second horizontal coordinate; and the second difference is obtained by subtracting the first vertical coordinate from the second vertical coordinate.

[0035] Specifically, determining the sliding height and sliding direction corresponding to the operation event based on the first difference and the second difference includes: when the first difference is negative, determining that the sliding method instructs the target object to perform a leftward operation event on the first scrolling list, with the absolute value of the first difference being the sliding height; when the first difference is positive, determining that the sliding method instructs the target object to perform a rightward operation event on the first scrolling list, with the first difference being the sliding height; when the second difference is negative, determining that the sliding method instructs the target object to perform an upward sliding operation event on the first scrolling list, with the absolute value of the second difference being the sliding height; and when the second difference is positive, determining that the sliding method instructs the target object to perform an upward sliding operation event on the first scrolling list, with the second difference being the sliding height.

[0036] In an exemplary embodiment, retrieving target data to be rendered from a storage area based on the operation attributes includes: determining the data to be rendered in the first storage area when the sliding direction indicates that the target object performs a pull-down operation on the first scrolling list, wherein the display height corresponding to the data to be rendered is consistent with the sliding height; determining the data to be rendered in the second storage area when the sliding direction indicates that the target object performs an up-slide operation on the first scrolling list, wherein the display height corresponding to the data to be rendered is consistent with the sliding height; wherein the storage area includes: a first storage area and a second storage area, the first storage area is used to cache the data to be rendered at the top of the display page, the second storage area is used to cache the data to be rendered at the bottom of the display page, and the operation attributes include at least: the sliding height and the sliding direction.

[0037] In other words, when it is determined that the target object performs a pull-down operation on the first scroll list, the data to be rendered is determined from the data to be rendered at the top of the display page; when it is determined that the target object performs a swipe-up operation on the first scroll list, the data to be rendered is determined from the data to be rendered at the bottom of the display page. The display height corresponding to the data to be rendered is consistent with the swipe height, so that the data to be rendered can be accurately rendered on the display page.

[0038] In an exemplary embodiment, retrieving the target data to be rendered for the display page from a storage area based on the operation attributes includes: determining a first height of the display data of the first scrolling list in a data display list before the target object performs the operation event on the first scrolling list, wherein the data display list includes: the display data of the first scrolling list, data in the first storage area, and data in the second storage area; determining the sliding height and sliding direction corresponding to the operation event during the process of the target object performing the operation event on the first scrolling list; determining whether to reorganize the data display list based on the first height and the sliding height; and retrieving the target data to be rendered for the display page from the storage area based on the sliding height and sliding direction if it is determined that the data display list should not be reorganized.

[0039] Specifically, the data display list is divided into three parts: data in the first storage area, display data of the first scrolling list, and data in the second storage area, typically in a ratio of 2:1:1. Before the target object performs the operation event on the first scrolling list, the first height of the top or bottom display data of the first scrolling list in the data display list is determined. Based on the first height and the scrolling height, it is determined whether to reorganize the data display list. If reorganization of the data display list is not required, the target data to be rendered for the display page is retrieved from different storage areas. If it is determined that the data display list should be reorganized, a first data request is sent to the data source corresponding to the scrolling list. Upon receiving the first update data sent by the data source according to the first data request, the data display list is reorganized based on the first update data.

[0040] In one exemplary embodiment, determining whether to reorganize the data display list based on the first height and the sliding height includes at least one of the following: if the sliding direction indicates that the target object performs a pull-down operation on the first scroll list, determine that the difference between the first height and the sliding height determines a first size relationship with the data in the first storage area at a second height of the data display list; if the first size relationship indicates that the difference is less than the second height, determine to reorganize the data display list; if the sliding direction indicates that the target object performs an upward sliding operation on the first scroll list, determine that the sum of the first height and the sliding height determines a second size relationship with the data in the second storage area at a third height of the data display list; if the second size relationship indicates that the sum is greater than the third height, determine to reorganize the data display list.

[0041] This invention provides a method for determining whether to reorganize the data display list based on the first height and the sliding height. Specifically: when the sliding direction instructs the target object to perform a pull-down operation on the first scroll list, and the topmost displayed data of the first scroll list is at a first height in the data display list, the difference between the first height and the sliding height, and the second height of the topmost data in the first storage area in the data display list are determined; if the difference is less than the second height, it is determined that the data display list should be reorganized; when the sliding direction instructs the target object to perform an up-slide operation on the first scroll list, and the topmost displayed data of the first scroll list is at a first height in the data display list, the sum of the first height and the sliding height, and the third height of the topmost data in the second storage area in the data display list are determined; if the sum is greater than the third height, it is determined that the data display list should be reorganized.

[0042] In one exemplary embodiment, after the second scrolling list is displayed on the display page, the method further includes: sending a second data request to the data source corresponding to the scrolling list; and, upon receiving second update data sent by the data source according to the second data request, updating the data in the first storage area and the second storage area according to the second update data and the display data.

[0043] In other words, after displaying the second scrolling list, the data in the first and second storage areas also needs to be updated. Specifically, a second data request is sent to the data source corresponding to the scrolling list, and the data in the first and second storage areas is updated based on the received data. Specifically, when the sliding direction indicates that the target object performs a pull-down operation on the first scrolling list, the data in the first storage area is updated based on the second update data, and the data in the second storage area is updated based on the display data; when the sliding direction indicates that the target object performs an up swipe operation on the first scrolling list, the data in the second storage area is updated based on the second update data, and the data in the first storage area is updated based on the display data.

[0044] In one exemplary embodiment, generating a second scrolling list for responding to the operation event based on the target data to be rendered includes: inputting the data to be rendered sequentially into a preset model, so that the preset model generates the second scrolling list according to the data to be rendered in the specified order.

[0045] To better understand the rendering process of the above page, the implementation flow of the rendering method of the above page will be described below in conjunction with optional embodiments, but this is not intended to limit the technical solution of the embodiments of the present invention.

[0046] This embodiment provides a method for rendering a page. Figure 3 This is a system framework diagram of a page rendering method according to an optional embodiment of the present invention, such as... Figure 3 As shown, after entering the scrolling list page in this embodiment of the invention, based on the user's scrolling behavior and through local logic judgment, it is determined whether a new display data list is generated from the above layer (equivalent to the first storage area in the above embodiment) or the below layer (equivalent to the second storage area in the above embodiment). At the same time, the data in the above and below layers are updated. Finally, the screen (intermediate data display layer) (equivalent to the display page in the above embodiment) is rendered using the generated new data list (equivalent to the second scrolling list in the above embodiment).

[0047] This embodiment provides a method for rendering a page. Figure 4 This is a flowchart of a page rendering method according to an optional embodiment of the present invention, such as... Figure 4 As shown, it specifically includes:

[0048] Step 1: Divide the scrolling list into three parts: above, below, and screen. The above and below layers are hidden, while the screen layer is the part that the user sees.

[0049] Step 2: When the user scrolls the page, obtain the page's scrolltop (scroll height) and record the previous scrolltop, and calculate whether the scroll list needs to be reorganized based on the difference;

[0050] Step 3: When the scrolling list needs to be reorganized, calculate the data of the list that the new screen layer needs to display, and update the data of the above, below, and screen layers accordingly.

[0051] Step 4: Data changes, page rendering.

[0052] With the continuous development of network information, users are receiving more and more data and recommendations. When users swipe up to access more and more data while immersed in the content, they may find that their phones become increasingly laggy when browsing pages. This invention addresses this issue by providing a significant performance improvement without increasing page DOM rendering, without negatively impacting the user experience. It solves the problem of app performance issues such as stuttering when users perform the swipe-up-to-load-more operation, as the app consumes excessive resources during resource rendering due to the large amount of data displayed on the page.

[0053] Through the above description of the embodiments, those skilled in the art can clearly understand that the methods according to the above embodiments can be implemented by means of software plus necessary general-purpose hardware platforms. Of course, they can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of the present invention, or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk) and includes several instructions to cause a terminal device (which may be a mobile phone, computer, server, or network device, etc.) to execute the methods of the various embodiments of the present invention.

[0054] This embodiment also provides a page rendering apparatus for implementing the above embodiments and preferred embodiments; details already described will not be repeated. As used below, the term "module" can refer to a combination of software and / or hardware that performs a predetermined function. Although the apparatus described in the following embodiments is preferably implemented in software, hardware implementation, or a combination of software and hardware, is also possible and contemplated.

[0055] Figure 5 This is a structural block diagram of a page rendering apparatus according to an embodiment of the present invention; as shown below. Figure 5 As shown, it includes:

[0056] The first acquisition module 52 is used to acquire the operation attribute corresponding to the operation event when the display page receives an operation event of the target object on the first scroll list;

[0057] The second acquisition module 54 is used to acquire the target data to be rendered of the display page from the storage area according to the operation attribute, wherein the storage area is used to indicate the cached data to be rendered of the display page;

[0058] The generation module 56 is used to generate a second scroll list in response to the operation event based on the target data to be rendered, and to display the second scroll list on the display page.

[0059] Through the above-described apparatus, the first acquisition module acquires the operation attribute corresponding to the operation event when the display page receives an operation event of the target object on the first scroll list; the second acquisition module acquires the target data to be rendered on the display page from the storage area according to the operation attribute, wherein the storage area is used to indicate the cached data to be rendered on the display page; the generation module generates a second scroll list to respond to the operation event according to the target data to be rendered, and displays the second scroll list on the display page; in this embodiment of the invention, by setting a storage area, the second scroll list is determined according to the storage area when the user scrolls the scroll list, reducing the DOM structure of the page without affecting the user experience, thereby achieving the purpose of performance optimization. By adopting the above technical solution, the problem of lag and other issues caused by the APP consuming a lot of performance when rendering resources due to the large amount of data on the display page when the user performs the swipe-up to load more operations is solved.

[0060] In an exemplary embodiment, the generation module 56 is configured to, when the sliding direction indicates that the target object performs a pull-down operation on the first scroll list, determine the data to be rendered in the first storage area, wherein the display height corresponding to the data to be rendered is consistent with the sliding height; and when the sliding direction indicates that the target object performs an upward sliding operation on the first scroll list, determine the data to be rendered in the second storage area, wherein the display height corresponding to the data to be rendered is consistent with the sliding height; wherein the storage area includes: a first storage area and a second storage area, the first storage area is used to cache the data to be rendered at the top of the display page, the second storage area is used to cache the data to be rendered at the bottom of the display page, and the operation attribute includes at least: the sliding height and the sliding direction.

[0061] In an exemplary embodiment, the generation module 56 is configured to determine a first height of the display data of the first scrolling list in the data display list before the target object performs the operation event on the first scrolling list, wherein the data display list includes: the display data of the first scrolling list, data in the first storage area, and data in the second storage area; determine the sliding height and sliding direction corresponding to the operation event during the process of the target object performing the operation event on the first scrolling list, wherein the operation attribute includes at least: sliding height and sliding direction; determine whether to reorganize the data display list based on the first height and the sliding height; and if it is determined that the data display list should not be reorganized, obtain the target data to be rendered of the display page from the storage area based on the sliding height and sliding direction.

[0062] In one exemplary embodiment, the apparatus further includes: an update module, configured to send a first data request to a data source corresponding to the scrolling list when it is determined that the data display list should be reorganized; and to reorganize the data display list according to the first update data when the data source sends first update data according to the first data request.

[0063] In one exemplary embodiment, the update module is configured to: determine, in the event that the sliding direction indicates the target object performing a pull-down operation on the first scroll list, determine a first size relationship between the difference between the first height and the sliding height and the data in the first storage area at a second height in the data display list; determine to reorganize the data display list if the first size relationship indicates that the difference is less than the second height; determine a second size relationship between the sum of the first height and the sliding height and the data in the second storage area at a third height in the data display list if the sliding direction indicates the target object performing a swipe-up operation on the first scroll list; and determine to reorganize the data display list if the second size relationship indicates that the sum is greater than the third height, wherein the storage area includes: a first storage area and a second storage area, the first storage area being used to cache data to be rendered at the top of the display page, and the second storage area being used to cache data to be rendered at the bottom of the display page.

[0064] In one exemplary embodiment, the update module is configured to send a second data request to the data source corresponding to the scrolling list; and upon receiving second update data sent by the data source according to the second data request, update the data in the first storage area and the second storage area according to the second update data and the display data.

[0065] In one exemplary embodiment, the update module is configured to, in the event that the sliding direction indicates the target object to perform a pull-down operation on the first scroll list, update the data in the first storage area according to the second update data and update the data in the second storage area according to the display data; and in the event that the sliding direction indicates the target object to perform an swiping operation on the first scroll list, update the data in the second storage area according to the second update data and update the data in the first storage area according to the display data.

[0066] Embodiments of the present invention also provide a storage medium comprising a stored program, wherein the program executes any of the methods described above when it is run.

[0067] Optionally, in this embodiment, the storage medium may be configured to store program code for performing the following steps:

[0068] S1, when the display page receives an operation event of the target object on the first scroll list, obtain the operation attribute corresponding to the operation event;

[0069] S2, retrieve the target data to be rendered for the display page from the storage area according to the operation attribute, wherein the storage area is used to indicate the cached data to be rendered for the display page;

[0070] S3, Generate a second scroll list for responding to the operation event based on the target data to be rendered, and display the second scroll list on the display page.

[0071] Embodiments of the present invention also provide an electronic device including a memory and a processor, the memory storing a computer program and the processor being configured to run the computer program to perform the steps in any of the above method embodiments.

[0072] Optionally, the electronic device may further include a transmission device and an input / output device, wherein the transmission device is connected to the processor and the input / output device is connected to the processor.

[0073] Optionally, in this embodiment, the processor can be configured to perform the following steps via a computer program:

[0074] S1, when the display page receives an operation event of the target object on the first scroll list, obtain the operation attribute corresponding to the operation event;

[0075] S2, retrieve the target data to be rendered for the display page from the storage area according to the operation attribute, wherein the storage area is used to indicate the cached data to be rendered for the display page;

[0076] S3, Generate a second scroll list for responding to the operation event based on the target data to be rendered, and display the second scroll list on the display page.

[0077] Optionally, in this embodiment, the storage medium may include, but is not limited to, various media capable of storing program code, such as USB flash drives, read-only memory (ROM), random access memory (RAM), portable hard drives, magnetic disks, or optical disks.

[0078] Optionally, specific examples in this embodiment can refer to the examples described in the above embodiments and optional implementations, and will not be repeated here.

[0079] It is obvious to those skilled in the art that the modules or steps of the present invention described above can be implemented using general-purpose computing devices. They can be centralized on a single computing device or distributed across a network of multiple computing devices. Optionally, they can be implemented using computer-executable program code, thereby storing them in a storage device for execution by a computing device. In some cases, the steps shown or described can be performed in a different order than those described herein, or they can be fabricated as separate integrated circuit modules, or multiple modules or steps can be fabricated as a single integrated circuit module. Thus, the present invention is not limited to any particular hardware and software combination.

[0080] The above description is only a preferred embodiment of this application. It should be noted that for those skilled in the art, several improvements and modifications can be made without departing from the principle of this application, and these improvements and modifications should also be considered within the scope of protection of this application.

Claims

1. A method of rendering a page, the method comprising: include: When the display page receives an operation event from the target object on the first scroll list, the operation attribute corresponding to the operation event is obtained; The target data to be rendered for the display page is obtained from the storage area according to the operation attribute, wherein the storage area is used to indicate the cached data to be rendered for the display page; A second scroll list is generated based on the target data to be rendered to respond to the operation event, and the second scroll list is displayed on the display page. The step of obtaining the target data to be rendered for the display page from the storage area according to the operation attribute includes: determining the first height of the display data of the first scrolling list in the data display list before the target object performs the operation event on the first scrolling list, wherein the data display list includes: the display data of the first scrolling list and the data in the storage area; determining the sliding height and sliding direction corresponding to the operation event during the process of the target object performing the operation event on the first scrolling list, wherein the operation attribute includes at least: sliding height and sliding direction; Determining whether to reorganize the data display list based on the first height and the sliding height includes at least one of the following: If the sliding direction indicates that the target object performs a pull-down operation on the first scroll list, determine a first size relationship between the difference between the first height and the sliding height and the data in the first storage area at a second height of the data display list; if the first size relationship indicates that the difference is less than the second height, determine to reorganize the data display list; if the sliding direction indicates that the target object performs an upward sliding operation on the first scroll list, determine a second size relationship between the sum of the first height and the sliding height and the data in the second storage area at a third height of the data display list; if the second size relationship indicates that the sum is greater than the third height, determine to reorganize the data display list, wherein the storage area includes: a first storage area and a second storage area, the first storage area being used to cache data to be rendered at the top of the display page, and the second storage area being used to cache data to be rendered at the bottom of the display page; After determining whether to reorganize the data display list based on the first height and the sliding height, the process includes: If it is determined that the data display list will not be reorganized, the target data to be rendered for the display page is obtained from the storage area based on the sliding height and sliding direction; If it is determined that the data display list should be reorganized, a first data request is sent to the data source corresponding to the scrolling list; if the first update data is received from the data source according to the first data request, the data display list is reorganized according to the first update data.

2. The method of Claim 1, wherein, Retrieving the target data to be rendered for the display page from the storage area according to the operation attributes includes: In the event that the target object performs a pull-down operation on the first scroll list in the direction of the swipe, the data to be rendered is determined in the first storage area, wherein the display height corresponding to the data to be rendered is consistent with the swipe height; When the sliding direction indicates that the target object performs an upward sliding operation on the first scroll list, the data to be rendered is determined in the second storage area, wherein the display height corresponding to the data to be rendered is consistent with the sliding height; The storage area includes a first storage area and a second storage area. The first storage area is used to cache data to be rendered at the top of the display page, and the second storage area is used to cache data to be rendered at the bottom of the display page. The operation attributes include at least the sliding height and the sliding direction.

3. The method of Claim 2, wherein, After the second scrolling list is displayed on the display page, the method further includes: Send a second data request to the data source corresponding to the scrolling list; Upon receiving the second update data sent by the data source according to the second data request, the data in the first storage area and the second storage area are updated according to the second update data and the display data.

4. The method of Claim 3, wherein, Updating the data in the first and second storage areas based on the second updated data and the displayed data includes: In the event that the sliding direction indicates the target object to perform a pull-down operation on the first scroll list, the data in the first storage area is updated according to the second update data, and the data in the second storage area is updated according to the display data; In the event that the sliding direction indicates that the target object performs an upward sliding operation on the first scroll list, the data in the second storage area is updated according to the second update data, and the data in the first storage area is updated according to the display data.

5. An apparatus for rendering a page, the apparatus comprising: include: The first acquisition module is used to acquire the operation attribute corresponding to the operation event when the display page receives an operation event of the target object on the first scroll list; The second acquisition module is used to acquire the target data to be rendered of the display page from the storage area according to the operation attribute, wherein the storage area is used to indicate the cached data to be rendered of the display page; The generation module is configured to generate a second scroll list in response to the operation event based on the target data to be rendered, and to display the second scroll list on the display page; The second acquisition module is further configured to determine the first height of the display data of the first scrolling list in the data display list before the target object performs the operation event on the first scrolling list, wherein the data display list includes: the display data of the first scrolling list and the data in the storage area; and to determine the sliding height and sliding direction corresponding to the operation event during the process of the target object performing the operation event on the first scrolling list, wherein the operation attribute includes at least: sliding height and sliding direction. Determining whether to reorganize the data display list based on the first height and the sliding height includes at least one of the following: If the sliding direction indicates that the target object performs a pull-down operation on the first scroll list, determine a first size relationship between the difference between the first height and the sliding height and the data in the first storage area at a second height of the data display list; if the first size relationship indicates that the difference is less than the second height, determine to reorganize the data display list; if the sliding direction indicates that the target object performs an upward sliding operation on the first scroll list, determine a second size relationship between the sum of the first height and the sliding height and the data in the second storage area at a third height of the data display list; if the second size relationship indicates that the sum is greater than the third height, determine to reorganize the data display list, wherein the storage area includes: a first storage area and a second storage area, the first storage area being used to cache data to be rendered at the top of the display page, and the second storage area being used to cache data to be rendered at the bottom of the display page; The second acquisition module is further configured to acquire the target data to be rendered for the display page from the storage area based on the sliding height and sliding direction, provided that the data display list is determined not to be reorganized. If it is determined that the data display list should be reorganized, a first data request is sent to the data source corresponding to the scrolling list; if the first update data is received from the data source according to the first data request, the data display list is reorganized according to the first update data.

6. A computer readable storage medium, characterized in that, The computer-readable storage medium includes a stored program, wherein the program, when executed, performs the method described in any one of claims 1 to 4. 7.An electronic device comprising a memory and a processor, the electronic device characterized by, The memory stores a computer program, and the processor is configured to execute the method described in any one of claims 1 to 4 through the computer program.

Images