A method and apparatus for page processing

Abstract

The application discloses a page processing method and device, and relates to the technical field of computers. A specific embodiment of the method comprises the following steps: constructing a reference page for a page refresh request of a visual page, displaying current page elements by using the reference page, and updating the current page elements in the visual page by using each to-be-refreshed element to refresh the page data of the visual page; and removing the reference page to display the refreshed visual page when it is judged that the updating of the visual page is completed. The embodiment of the application overcomes the problem of page flashing or shaking caused by element updating in the page refreshing process, and greatly improves the user experience.

Description

Technical Field

[0001] This invention relates to the field of application development technology, and in particular to a method and apparatus for page processing. Background Technology

[0002] Internet applications typically contain a large number of pages, and the performance of displaying and refreshing pages directly affects the user experience during application use.

[0003] Existing methods for handling page refreshes typically involve developing code for each page that needs refreshing. This code handles refresh operations, such as fetching updated data, upon receiving a page refresh command, to display the refreshed page. However, due to the large number of page elements that need to be updated, these methods can cause the page to flicker or jitter during element updates, significantly impacting the user experience. Summary of the Invention

[0004] In view of this, embodiments of the present invention provide a method and apparatus for page processing, which can construct a reference page in response to a page refresh request of a visible page, display the current page elements using the reference page, and simultaneously update the current page elements in the visible page using each of the elements to be refreshed to refresh the page data of the visible page; when it is determined that the visible page has been updated, the reference page is removed and the refreshed visible page is displayed. Embodiments of the present invention overcome the problem of page flickering or jittering caused by element updates during page refresh, and greatly improve the user experience.

[0005] To achieve the above objectives, according to one aspect of the present invention, a page processing method is provided, characterized in that it includes: in response to a page refresh request, constructing a reference page for a visual page targeted by the page refresh request; copying the current page elements contained in the visual page to the reference page, and displaying the current page elements through the reference page; determining a plurality of elements to be refreshed in the visual page, and updating the current page elements in the visual page using each of the elements to be refreshed; and removing the reference page and displaying the refreshed visual page after all the elements to be refreshed have been updated.

[0006] Optionally, the page processing method further includes: setting and displaying a refresh media component on top of the reference page; and using the refresh media component to disable page operations on the reference page.

[0007] Optionally, the page processing method, after updating the current page elements in the visible page using each of the elements to be refreshed and before removing the reference page, further includes: if it is determined that the elements to be refreshed include image elements, filtering out image elements from each of the elements to be refreshed, and calculating a first number of each image element; using a custom loading code segment to monitor the loading status of each image element, and counting a second number of image elements that have been loaded; if the first number and the second number are equal, determining that each image element in the elements to be refreshed has been loaded.

[0008] Optionally, the page processing method, after updating the current page elements in the visible page using each of the elements to be refreshed and before removing the reference page, further includes: if it is determined that the elements to be refreshed include elements of a data processing type, using a custom data processing interface to monitor the data request sending status and data result return status corresponding to each of the data processing elements; if each data sending request has a corresponding data result return, determining that the data processing element in the elements to be refreshed has received updated data, thereby determining that the element of the data processing type has completed the update.

[0009] Optionally, the page processing method, after updating the current page elements in the visible page using each of the elements to be refreshed and before removing the reference page, further includes: monitoring the changes of each current page element in the visible page; if it is determined that any of the current page elements has changed, recording the change timestamp; if the interval between the change timestamp and the current timestamp exceeds the set time, determining that none of the elements to be refreshed contained in the current page element have changed within the set time, so as to determine that each element to be refreshed has been updated.

[0010] Optionally, the page processing method further includes: constructing a custom refresh component; obtaining the root node identifier of the page to which the visible page indicated by the page refresh request belongs, and using the root node identifier as an input parameter of the custom refresh component; the custom refresh component locates the visible page based on its input parameter, and performs the step of constructing a reference page for the visible page.

[0011] Optionally, the page processing method, after the custom refresh component locates the visible page based on its input parameters, further includes: obtaining the page identifier of the visible page; using the custom refresh component to read a preset page whitelist, and determining whether the page identifier of the visible page belongs to the page whitelist; if it is determined that the page identifier of the visible page does not belong to the page whitelist, ignoring the page refresh request.

[0012] To achieve the above objectives, according to a second aspect of the present invention, a page processing apparatus is provided, characterized in that it includes: a page construction module, a page refresh module, and a page display module; wherein,

[0013] The page building module is used to respond to a page refresh request by building a reference page for the visual page targeted by the page refresh request; copying the current page elements contained in the visual page to the reference page; and displaying the current page elements through the reference page.

[0014] The refresh execution module is used to determine multiple elements to be refreshed on the visual page, and to update the current page elements in the visual page using each of the elements to be refreshed.

[0015] The display page module is used to remove the reference page and display the refreshed visual page after all elements to be refreshed have been updated.

[0016] Optionally, the page processing apparatus is further configured to set and display a refresh media component on top of the reference page; and to use the set refresh media component to disable page operations on the reference page.

[0017] Optionally, the page processing apparatus is configured to, after updating the current page elements in the visible page using each of the elements to be refreshed and before removing the reference page, further include: if it is determined that the elements to be refreshed include image elements, filtering out image elements from each of the elements to be refreshed and calculating a first number of each image element; using a custom loading code segment to monitor the loading status of each image element and counting a second number of image elements that have been loaded; and if the first number and the second number are equal, determining that each image element in the elements to be refreshed has been loaded.

[0018] Optionally, the page processing apparatus is configured to, after updating the current page elements in the visible page using each of the elements to be refreshed and before removing the reference page, further include: if it is determined that the elements to be refreshed include elements of a data processing type, using a custom data processing interface to monitor the data request sending status and data result return status corresponding to each of the data processing elements; if each data sending request has a corresponding data result return, determining that the data processing element in the elements to be refreshed has received updated data, thereby determining that the element of the data processing type has completed the update.

[0019] Optionally, the page processing apparatus is configured to, after updating the current page elements in the visual page using each of the elements to be refreshed and before removing the reference page, further include: monitoring changes to each current page element of the visual page; if any of the current page elements is determined to have changed, recording a change timestamp; and if the interval between the change timestamp and the current timestamp exceeds a set time period, determining that none of the elements to be refreshed contained in the current page element have changed within the set time period, thereby determining that each element to be refreshed has been updated.

[0020] Optionally, the page processing apparatus is further configured to construct a custom refresh component; obtain the root node identifier of the page to which the visual page indicated by the page refresh request belongs, and use the root node identifier as an input parameter of the custom refresh component; the custom refresh component uses its input parameter to locate the visual page, and performs the step of constructing a reference page for the visual page.

[0021] Optionally, after the custom refresh component locates the visible page based on its input parameters, the page processing device is further configured to obtain the page identifier of the visible page; use the custom refresh component to read a preset page whitelist and determine whether the page identifier of the visible page belongs to the page whitelist; if it is determined that the page identifier of the visible page does not belong to the page whitelist, the page refresh request is ignored.

[0022] To achieve the above objectives, according to a third aspect of the present invention, an electronic device for page processing is provided, characterized in that it includes: one or more processors; and a storage device for storing one or more programs, wherein when the one or more programs are executed by the one or more processors, the one or more processors perform any of the methods described above for page processing.

[0023] To achieve the above objectives, according to a fourth aspect of the present invention, a computer-readable medium is provided having a computer program stored thereon, characterized in that, when the program is executed by a processor, it implements any of the methods described above for page processing.

[0024] One embodiment of the above invention has the following advantages or beneficial effects: it can construct a reference page in response to a page refresh request of a visual page, use the reference page to display the current page elements, and simultaneously use each element to be refreshed to update the current page elements in the visual page to refresh the page data of the visual page; when it is determined that the page data of the visual page has been updated, the reference page is removed and the refreshed visual page is displayed. The embodiment of the present invention overcomes the problem of page flickering or shaking caused by element updates during the page refresh process, and greatly improves the user experience.

[0025] The further effects of the aforementioned unconventional alternative methods will be explained below in conjunction with specific implementation methods. Attached Figure Description

[0026] The accompanying drawings are provided to better understand the invention and are not intended to unduly limit the scope of the invention. Wherein:

[0027] Figure 1 This is a flowchart illustrating a page processing method according to an embodiment of the present invention;

[0028] Figure 2 This is a schematic diagram of another page processing flow provided in one embodiment of the present invention;

[0029] Figure 3 This is a schematic diagram of a page refresh process provided in one embodiment of the present invention;

[0030] Figure 4 This is a schematic diagram of the structure of a page processing apparatus provided in one embodiment of the present invention;

[0031] Figure 5 This is an exemplary system architecture diagram in which embodiments of the present invention can be applied;

[0032] Figure 6 This is a schematic diagram of the structure of a computer system suitable for implementing terminal devices or servers of the present invention. Detailed Implementation

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

[0034] It should be noted that the collection, use, storage, sharing and transfer of user personal information involved in the technical solution of the present invention all comply with the provisions of relevant laws and regulations, and require notification to users and obtaining their consent or authorization. When applicable, user personal information is subjected to de-identification and / or anonymization and / or encryption technical processing.

[0035] When displaying page information, we will use methods such as de-identification or anonymization to de-identify your information in order to protect your information security.

[0036] like Figure 1 As shown, this embodiment of the invention provides a page processing method, which may include the following steps:

[0037] Step S101: In response to a page refresh request, construct a reference page for the visual page targeted by the page refresh request; copy the current page elements contained in the visual page to the reference page, and display the current page elements through the reference page.

[0038] Specifically, for a page that needs to be refreshed, users can trigger a page refresh by using set actions (such as swiping down, clicking the refresh button, etc.), thereby sending a page refresh request.

[0039] Furthermore, in response to a page refresh request, a reference page is constructed for the visible page targeted by the page refresh request. It is understood that the page corresponding to the page refresh request triggered by the user is the topmost user-visible page (i.e., the visible page), which is the visible page targeted by the page refresh request, and a reference page is constructed for the visible page. The reference page is a newly constructed page (e.g., called a "mask"), and the current page elements contained in the visible page are copied to the reference page, and the current page elements are displayed through the reference page. The current page elements are multiple page elements visible to the user, and page elements can be one or more elements that make up the page, such as images, animations, and text, or a combination of one or more of these. Furthermore, the current page elements displayed on the visual page are copied to the reference page. The method for copying the current page elements can be accomplished using the cloneNode method. The current page elements are then displayed through the reference page, ensuring that the page content displayed to the user is consistent. This overcomes the page flickering and jittering caused during the refresh process when directly displaying the visual page to be refreshed, thus improving the user experience. In other words, the reference page is used to "cover" the visual page during the data refresh process of the actual visual page. Within the time range of the reference page "covering", the visual page performs refresh operations on its page elements.

[0040] Furthermore, a refresh media component is set and displayed on top of the reference page; this refresh media component is used to disable page operations on the reference page. The refresh media component can be, for example, a refresh animation, a refresh progress bar, or a refresh window. This component provides the user with information that the page is being refreshed. Simultaneously, by disabling page operations on the reference page, it's understood that the reference page is used to display page information corresponding to the current page elements of the visible page. Gesture operations on the reference page are not recommended; therefore, by "overlaying" the reference page with the refresh media component, the technical effect of disabling page operations on the reference page is achieved, thus improving the user experience.

[0041] Step S102: Determine multiple elements to be refreshed on the visual page, and update the current page elements in the visual page using each of the elements to be refreshed.

[0042] Specifically, for a visual page that needs to be refreshed, firstly, identify multiple elements on the visual page that need to be refreshed. It can be understood that a page contains a large number of page elements, some of which are fixed types of page elements (such as fixed text content) and do not need to be refreshed. Therefore, the page elements that need to be refreshed can be selected from all the page elements, such as image elements and page elements related to data processing. That is, identify multiple elements on the visual page that need to be refreshed.

[0043] Furthermore, the current page elements in the visible page are updated using each of the elements to be refreshed. Different updates are performed for different types of page elements. For example, for image elements, a new image can be retrieved and reloaded; for data processing elements, the latest data can be fetched and displayed.

[0044] Step S103: After all elements to be refreshed have been updated, remove the reference page and display the refreshed visual page.

[0045] Specifically, it determines whether all elements to be refreshed within the visible page have been updated. If so, it confirms that the visible page refresh is complete, removes the reference page, and displays the refreshed visible page. The method for refreshing the page after obtaining the updated element data can be triggered by refreshing the root component of the page. The method driving the refresh of the root component can be triggered after confirming that image and data requests have been loaded.<router-view:key=”key”> The value of the key is incremented (key++), which drives the root component of the page to refresh the page.

[0046] The pages described in the embodiments of the present invention may be pages developed using one or more different programming languages, such as pages developed based on HTML5 (Hyper Text Markup Language, abbreviated as HTML).

[0047] like Figure 2 As shown, this embodiment of the invention provides a page processing flow, which may include the following steps:

[0048] Step S201: Build a custom refresh component.

[0049] Step S202: Obtain the root node identifier of the visible page indicated by the page refresh request, and use the root node identifier as the input parameter of the custom refresh component.

[0050] Step S203: Obtain the page identifier of the visible page; use the custom refresh component to read the preset page whitelist.

[0051] Step S204: Determine whether the page identifier of the visible page belongs to the page whitelist. If yes, proceed to step S205; otherwise, proceed to step S206.

[0052] Step S205: Perform the step of constructing a reference page for the visual page.

[0053] Step S206: Ignore the page request.

[0054] Specifically, steps S201 to S206 describe how, in embodiments of the present invention, a custom refresh component is used to complete each step of the method of the present invention.

[0055] The custom refresh component can include multiple input parameters, such as rootId, blacklist, and whitelist. rootId is the identifier of the page root node, indicating the root node to which the visible page to be refreshed belongs. blacklist is a preset blacklist of pages that will not be refreshed in response to a refresh request. whitelist is a preset whitelist of pages that will be refreshed in response to a refresh request.

[0056] Furthermore, by using the rootId, the custom refresh component can locate the visible page to be refreshed by combining the page root node identifier and the window.location object method, thereby further performing steps such as constructing a reference page. That is, constructing a custom refresh component; obtaining the page root node identifier to which the visible page indicated by the page refresh request belongs, and using the page root node identifier as the input parameter of the custom refresh component; the custom refresh component locates the visible page based on its input parameter, and performs the step of constructing a reference page for the visible page (for example, using the custom refresh component to perform this step).

[0057] Understandably, a custom refresh component can be built for an application or a system and can be applied to any page within that application. This overcomes the problem of strong code coupling and poor versatility caused by developing separate code for each page that needs to be refreshed in existing methods. It improves the versatility of page refresh and reduces development complexity.

[0058] Furthermore, preferably, utilizing the preset page blacklist and preset page whitelist included in the input parameters of the custom refresh component further enhances the flexibility of page refresh; by obtaining the page identifier of the current visible page (page identifier such as page route / exchangePrize / priceDetail, etc.), wherein the method for obtaining the page identifier of the visible page can be obtained through methods provided by the window.location object, the page identifier is further matched with the preset page blacklist or preset page whitelist to determine whether the page identifier of the visible page belongs to the page whitelist; that is, after the custom refresh component locates the visible page based on its input parameters, it further includes: obtaining the page identifier of the visible page; using the custom refresh component to read the preset page whitelist and determine whether the page identifier of the visible page belongs to the page whitelist; if it is determined that the page identifier of the visible page does not belong to the page whitelist, the page refresh request is ignored. If the page identifier of the visible page belongs to the page whitelist, then the page refresh step is further performed for the visible page.

[0059] More preferably, the custom refresh component can also provide interfaces that allow other applications or code to call for custom functions. The provided interfaces include, for example, setCb and setScrollRoot; where setCb is used to set the callback function to be called after the page refresh is completed, and setScrollRoot is used to set the root node of the page under a certain route.

[0060] In an embodiment of the present invention, example code for a custom refresh component is as follows: <refreshable-router

[0061] whitelist="[' / exchangePrize / priceDetail',' / exchangePrize / index',

[0062] ' / activity / award']”

[0063] rootid='app' / >

[0064] Here, `refreshable-router` represents the identifier of the custom refresh component, `whitelist` represents the preset page whitelist, for example, ` / exchangePrize / priceDetail` represents a route to a visible page, i.e., the page identifier; and `rootid` represents the page root node identifier. The example code for the above custom refresh component can be based on... <router-view>< / router-view> The result of the expansion.

[0065] like Figure 3 As shown, this embodiment of the invention provides a page refresh process, which may include the following steps;

[0066] Step S301: In response to a page refresh request, construct a reference page for the visual page targeted by the page refresh request.

[0067] Step S302: Copy the current page elements contained in the visual page to the reference page, and display the current page elements through the reference page.

[0068] Step S303: Update the current page elements in the visible page using each of the elements to be refreshed.

[0069] Step S304: If it is determined that the element to be refreshed includes an image element, determine the loading status of each image element in the element to be refreshed.

[0070] Step S305: Determine whether each image element has finished loading. If yes, proceed to step S308; otherwise, return to step S304.

[0071] Step S306: If it is determined that the element to be refreshed includes an element of the data processing type, determine the status of the data processing type element having been updated.

[0072] Step S307: Determine whether the data processing type element has been loaded. If yes, proceed to step S308; otherwise, return to step S306.

[0073] Step S308: Remove the reference page and display the refreshed visual page.

[0074] Specifically, steps S301 to S308 describe several methods for determining whether the page elements of the visible page have been updated (refreshed), which are explained below:

[0075] 1) For the case where the elements to be refreshed include image elements: The method for filtering image elements is, for example, querySelectorAll; after filtering the image elements, the number of image elements to be refreshed can be obtained (i.e., the first number). Further, a custom loading code segment is used to monitor the loading status of each image element. The custom loading code segment can be constructed by overriding the onload method of the image element. For example, firstly, the original onload is obtained and assigned to oldOnLoad, and then the original onload is changed to function(args){…the logic code for monitoring; oldOnLoad? .apply(img,args)}; through this custom loading code segment, the loading status of each image element (i.e., whether loading is complete) can be monitored, thereby counting the second number of image elements that have been loaded; if the first number and the second number are equal, it is determined that each image element in the elements to be refreshed has been loaded. That is, after updating the current page elements in the visible page using each of the elements to be refreshed, and before removing the reference page, the method further includes: if it is determined that the elements to be refreshed include image elements, selecting image elements from the elements to be refreshed and calculating a first number of each image element; using a custom loading code segment to monitor the loading status of each image element and counting a second number of image elements that have been loaded; if the first number and the second number are equal, determining that each image element in the elements to be refreshed has been loaded. This application does not limit the specific style or category of the image elements.

[0076] 2) When it is determined that the element to be refreshed includes elements of the data processing type, a custom data processing interface is used to monitor the sending status of data requests and the return status of data results corresponding to each data processing element. The custom data processing interface can be constructed based on methods such as `window.fetch` and `send / open` of the `XMLHttpRequest` interface. It is used to monitor the sending status of data requests such as `send / open` and the return status of data results, thereby further determining whether each data sending request has a corresponding data result return. That is, after updating the current page element in the visible page using each of the elements to be refreshed, and before removing the reference page, the method further includes: when it is determined that the element to be refreshed includes elements of the data processing type, the custom data processing interface is used to monitor the sending status of data requests and the return status of data results corresponding to each data processing element; if each data sending request has a corresponding data result return, it is determined that the data processing element in the element to be refreshed has received updated data, thus determining that the element of the data processing type has completed the update. The element of the data processing type can be any page element bound to data; this application does not limit the specific style or type of the page element.

[0077] 3) Use the MutationObserver module to listen for changes to the current page elements (which can be any type of page element, such as image elements, data processing elements, etc.). For example, listen for changes to each current page element contained in the page tag body. If each current page element does not change within a set time (e.g., 200ms), then the current page element has been updated, which means that all the elements to be refreshed contained in the current page element have been updated. Specifically, determining whether each current page element has remained unchanged within a set time period can be achieved by recording the change timestamp of any element. The interval between the change timestamp and the current timestamp can be calculated, and this interval is compared with the set time period to determine whether each current page element has changed within that time period. That is, after updating the current page elements in the visible page using the elements to be refreshed, and before removing the reference page, the process further includes: monitoring the changes of each current page element in the visible page; if any current page element is found to have changed, recording the change timestamp; and if the interval between the change timestamp and the current timestamp exceeds the set time period, determining that none of the elements to be refreshed contained in the current page element have changed within the set time period, thus confirming that all elements to be refreshed have been updated.

[0078] It is understandable that, for a single page, the methods for determining whether the page data refresh is complete in steps 1)-3) above can be one or more combinations of methods 1)-3). The numbering of steps S304-S307 is merely an example; there is no sequential relationship between steps S304 and S306, and they can be performed in reverse order or simultaneously.

[0079] like Figure 4 As shown, this embodiment of the invention provides a page processing apparatus 400, including: a page construction module 401, a page refresh module 402, and a page display module 403; wherein,

[0080] The page construction module 401 is used to respond to a page refresh request by constructing a reference page for the visual page targeted by the page refresh request; copying the current page elements contained in the visual page to the reference page; and displaying the current page elements through the reference page.

[0081] The refresh module 402 is used to determine multiple elements to be refreshed on the visual page, and to update the current page elements in the visual page using each of the elements to be refreshed.

[0082] The display page module 403 is used to remove the reference page and display the refreshed visual page after all elements to be refreshed have been updated.

[0083] This invention also provides an electronic device for page processing, comprising: one or more processors; and a storage device for storing one or more programs, wherein when the one or more programs are executed by the one or more processors, the one or more processors implement the method provided in any of the above embodiments.

[0084] This invention also provides a computer-readable medium having a computer program stored thereon, which, when executed by a processor, implements the method provided in any of the above embodiments.

[0085] Figure 5 An exemplary system architecture 500 is shown, in which the page processing method or apparatus of embodiments of the present invention can be applied.

[0086] like Figure 5 As shown, system architecture 500 may include terminal devices 501, 502, and 503, a network 504, and a server 505. Network 504 serves as the medium for providing communication links between terminal devices 501, 502, and 503 and server 505. Network 504 may include various connection types, such as wired or wireless communication links, or fiber optic cables, etc.

[0087] Users can use terminal devices 501, 502, and 503 to interact with server 505 via network 504 to receive or send messages, etc. Various client applications can be installed on terminal devices 501, 502, and 503, such as e-commerce client applications, web browser applications, search applications, instant messaging tools, and email clients.

[0088] Terminal devices 501, 502, and 503 can be various electronic devices with displays and supporting various client applications, including but not limited to smartphones, tablets, laptops, and desktop computers.

[0089] Server 505 can be a server that provides various services, such as a backend management server that supports client applications used by users through terminal devices 501, 502, and 503. The backend management server can process received requests for updated data and return the latest data to the terminal devices.

[0090] It should be noted that the page processing method provided in the embodiments of the present invention is generally executed by terminal devices 501, 502, and 503, and correspondingly, the page processing device is generally disposed in terminal devices 501, 502, and 503.

[0091] It should be understood that Figure 5 The number of terminal devices, networks, and servers shown is merely illustrative. Depending on implementation needs, any number of terminal devices, networks, and servers can be included.

[0092] The following is for reference. Figure 6 It shows a schematic diagram of the structure of a computer system 600 suitable for implementing a terminal device of the present invention. Figure 6 The terminal device shown is merely an example and should not impose any limitations on the functionality and scope of use of the embodiments of the present invention.

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

[0094] The following components are connected to I / O interface 605: an input section 606 including a keyboard, mouse, etc.; an output section 607 including a cathode ray tube (CRT), liquid crystal display (LCD), etc., and speakers, etc.; a storage section 608 including a hard disk, etc.; and a communication section 609 including a network interface card such as a LAN card, modem, etc. The communication section 609 performs communication processing via a network such as the Internet. A drive 610 is also connected to I / O interface 605 as needed. A removable medium 611, such as a disk, optical disk, magneto-optical disk, semiconductor memory, etc., is installed on drive 610 as needed so that computer programs read from it can be installed into storage section 608 as needed.

[0095] In particular, according to the embodiments disclosed in this invention, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments disclosed in this invention include a computer program product comprising a computer program carried on a computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via communication section 609, and / or installed from removable medium 611. When the computer program is executed by central processing unit (CPU) 601, it performs the functions defined above in the system of this invention.

[0096] It should be noted that the computer-readable medium shown in this invention can be a computer-readable signal medium or a computer-readable storage medium, or any combination thereof. A computer-readable storage medium can be, for example,—but not limited to—an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of a computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination thereof. In this invention, a computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, apparatus, or device. In this invention, a computer-readable signal medium can include a data signal propagated in baseband or as part of a carrier wave, carrying computer-readable program code. Such propagated data signals can take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. Computer-readable signal media can also be any computer-readable medium other than computer-readable storage media, which can send, propagate, or transmit a program for use by or in connection with an instruction execution system, apparatus, or device. The program code contained on the computer-readable medium can be transmitted using any suitable medium, including but not limited to: wireless, wire, optical fiber, RF, etc., or any suitable combination thereof.

[0097] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of the present invention. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in a block diagram or flowchart, and combinations of blocks in a block diagram or flowchart, may be implemented using a dedicated hardware-based system that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.

[0098] The modules and / or units described in the embodiments of the present invention can be implemented in software or hardware. The described modules and / or units can also be housed in a processor. For example, a processor can be described as including a page construction module, a refresh execution module, and a page display module. The names of these modules do not necessarily limit the module itself; for example, the page display module can also be described as "a module that, after all elements to be refreshed have been updated, removes the reference page and displays the refreshed visual page."

[0099] In another aspect, the present invention also provides a computer-readable medium, which may be included in the device described in the above embodiments; or it may exist independently and not assembled into the device. The computer-readable medium carries one or more programs that, when executed by the device, cause the device to include: in response to a page refresh request, constructing a reference page for a visual page targeted by the page refresh request; copying current page elements contained in the visual page to the reference page and displaying the current page elements through the reference page; determining a plurality of elements to be refreshed in the visual page and updating the current page elements in the visual page using each of the elements to be refreshed; and, after all the elements to be refreshed have been updated, removing the reference page and displaying the refreshed visual page.

[0100] The embodiments of the present invention can construct a reference page in response to a page refresh request of a visual page, use the reference page to display the current page elements, and simultaneously use each element to be refreshed to update the current page elements in the visual page to refresh the page data of the visual page; when it is determined that the page data of the visual page has been updated, the reference page is removed and the refreshed visual page is displayed. The embodiments of the present invention overcome the problem of page flickering or jittering caused by element updates during the page refresh process, and greatly improve the user experience.

[0101] The specific embodiments described above do not constitute a limitation on the scope of protection of this invention. Those skilled in the art should understand that various modifications, combinations, sub-combinations, and substitutions can occur depending on design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of this invention should be included within the scope of protection of this invention.

Claims

1. A method for page processing, characterized in that, include: In response to a page refresh request, a reference page is constructed for the visual page targeted by the page refresh request; Copy the current page elements contained in the visual page to the reference page, and display the current page elements through the reference page; Identify multiple elements to be refreshed in the visual page, and update the current page elements in the visual page using each of the elements to be refreshed; Once all elements to be refreshed have been updated, the reference page is removed, and the refreshed visual page is displayed.

2. The method according to claim 1, characterized in that, Further includes: Set and display the refresh media component above the reference page; Use the settings to refresh the media component to disable page operations on the reference page.

3. The method according to claim 1, characterized in that, After updating the current page elements in the visible page using each of the elements to be refreshed, and before removing the reference page, the method further includes: If it is determined that the elements to be refreshed include image elements, image elements are selected from each of the elements to be refreshed, and a first number of each image element is calculated. Use a custom loading code snippet to monitor the loading status of each image element and count the second number of image elements that have been loaded. If the first quantity is equal to the second quantity, it is determined that each image element in the elements to be refreshed has been loaded.

4. The method according to claim 1 or 3, characterized in that, After updating the current page elements in the visible page using each of the elements to be refreshed, and before removing the reference page, the method further includes: If it is determined that the element to be refreshed includes an element of data processing type, a custom data processing interface is used to monitor the data request sending status and data result return status corresponding to each data processing element. If each data sending request returns a corresponding data result, it is determined that the data processing element in the element to be refreshed has received the updated data, and the element of the data processing type is determined to have completed the update.

5. The method according to claim 1, characterized in that, After updating the current page elements in the visible page using each of the elements to be refreshed, and before removing the reference page, the method further includes: Monitor changes to each current page element on the visible page, and if any current page element is found to have changed, record the timestamp of the change. If the interval between the changed timestamp and the current timestamp exceeds a set duration, it is determined that none of the elements to be refreshed contained in the current page element have undergone any changes within the set duration, thus confirming that all elements to be refreshed have been updated.

6. The method according to claim 1, characterized in that, Further includes: Build a custom refresh component; Obtain the root node identifier of the visible page to which the page refresh request indicates belongs, and use the root node identifier as the input parameter of the custom refresh component; The custom refresh component locates the visual page based on its input parameters and performs the step of building a reference page for the visual page.

7. The method according to claim 6, characterized in that, After the custom refresh component locates the visible page based on its input parameters, it further includes: Obtain the page identifier of the visible page; The custom refresh component is used to read a preset page whitelist and determine whether the page identifier of the visible page belongs to the page whitelist. If it is determined that the page identifier of the visible page does not belong to the page whitelist, the page refresh request is ignored.

8. A page processing apparatus, characterized in that, include: The module consists of a page building module, a page refresh module, and a page display module; among them, The page building module is used to respond to a page refresh request by building a reference page for the visual page targeted by the page refresh request; copying the current page elements contained in the visual page to the reference page; and displaying the current page elements through the reference page. The refresh execution module is used to determine multiple elements to be refreshed on the visual page, and to update the current page elements in the visual page using each of the elements to be refreshed. The display page module is used to remove the reference page and display the refreshed visual page after all elements to be refreshed have been updated.

9. An electronic device, characterized in that, include: One or more processors; Storage device for storing one or more programs. When the one or more programs are executed by the one or more processors, the one or more processors implement the method as described in any one of claims 1-7.

10. A computer-readable medium having a computer program stored thereon, characterized in that, When the program is executed by the processor, it implements the method as described in any one of claims 1-7.

Images