Page rendering method and device, computer device and storage medium
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- TENCENT TECHNOLOGY (SHENZHEN) CO LTD
- Filing Date
- 2024-12-12
- Publication Date
- 2026-06-12
Smart Images

Figure CN122195544A_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of computer technology, and in particular to a page rendering method, apparatus, computer device, and storage medium. Background Technology
[0002] With the continuous development of computer technology, displaying and browsing web pages through browsers has become an indispensable part of modern production and life. Currently, browsers can display application pages, allowing users to browse and use these pages without downloading the application itself. However, displaying application pages through a browser currently requires retrieving page data from the application's backend server. If the data interface malfunctions, the page data cannot be retrieved from the backend server, preventing page rendering and display in the browser. Therefore, improving the effectiveness of application page display in browsers has become a current research hotspot. Summary of the Invention
[0003] This invention provides a page rendering method, apparatus, computer device, and storage medium, which can improve the effectiveness of application page rendering in a browser.
[0004] On one hand, embodiments of the present invention provide a page rendering method, including:
[0005] Obtain the application page of the application to be displayed in the browser; wherein the code of the application page is configured as a site in the browser, and the code configured as the site includes: a code fragment indicating whether the page data of the application page needs to be stored in the browser's cache space;
[0006] Obtain the data interface corresponding to the application page, and retrieve the page data of the application page from the backend server corresponding to the application through the data interface;
[0007] Based on the page data retrieved from the backend server, the application page is rendered in the browser; and,
[0008] Based on the code snippets contained in the code configured for the site, if it is determined that the fetched page data needs to be stored in the browser's cache space, then the data interface is associated with the fetched page data and stored in the cache space; wherein, the page data stored in the cache space associated with the data interface is used to render the application page in the browser when the data interface encounters an error.
[0009] In another aspect, embodiments of the present invention provide a page rendering apparatus, comprising:
[0010] The acquisition unit is used to acquire the application page of an application to be displayed in a browser; wherein the code of the application page is configured as a site in the browser, and the code configured as the site includes: a code fragment indicating whether the page data of the application page needs to be stored in the browser's cache space;
[0011] The acquisition unit is also used to acquire the data interface corresponding to the application page, and to retrieve the page data of the application page from the backend server corresponding to the application through the data interface;
[0012] The processing unit is configured to render the application page in the browser based on page data retrieved from the backend server; and,
[0013] The processing unit is further configured to, based on the code snippets contained in the code configured for the site, if it is determined that the retrieved page data needs to be stored in the browser's cache space, associate the data interface with the retrieved page data and store it in the cache space; wherein, the page data stored in the cache space in association with the data interface is used to render the application page in the browser when the data interface malfunctions.
[0014] In another aspect, embodiments of the present invention provide a computer device, including a processor, an input device, an output device, and a memory, wherein the processor, input device, output device, and memory are interconnected, wherein the memory is used to store a computer program supporting the computer device in executing the above-described method, the computer program including program instructions, and the processor is configured to invoke the program instructions to execute the following steps:
[0015] Obtain the application page of the application to be displayed in the browser; wherein the code of the application page is configured as a site in the browser, and the code configured as the site includes: a code fragment indicating whether the page data of the application page needs to be stored in the browser's cache space;
[0016] Obtain the data interface corresponding to the application page, and retrieve the page data of the application page from the backend server corresponding to the application through the data interface;
[0017] Based on the page data retrieved from the backend server, the application page is rendered in the browser; and,
[0018] Based on the code snippets contained in the code configured for the site, if it is determined that the fetched page data needs to be stored in the browser's cache space, then the data interface is associated with the fetched page data and stored in the cache space; wherein, the page data stored in the cache space associated with the data interface is used to render the application page in the browser when the data interface encounters an error.
[0019] In another aspect, embodiments of the present invention provide a computer-readable storage medium storing a computer program, the computer program including program instructions that, when executed by a processor, cause the processor to perform the method described in the first aspect.
[0020] In another aspect, embodiments of the present invention provide a computer program product, the computer program product including a computer program, the computer program including program instructions, and when the program instructions are invoked by a processor, causing the processor to execute the method described in the first aspect.
[0021] In this embodiment, when a computer device uses a browser to render and display an application page, after determining the application page to be displayed in the browser, it can obtain the page data corresponding to the application page from the application's backend server through the data interface corresponding to the application page. Upon successful acquisition of the page data, the application page is rendered in the browser based on the acquired page data. Simultaneously, based on the site corresponding to the application page in the browser, if it is necessary to cache the page data, the page data of the application page is cached in the browser's local cache space. This allows the rendering and display of the application page in the browser to be modified by altering the application page's site in the browser, enabling the browser to not only render the application page but also cache its page data locally. Since the modification of the site is used to store page data in the browser's local cache space, this caching method eliminates the need for other deployment configurations of the cache space in the browser, reducing the deployment overhead of caching page data. Furthermore, caching page data through site modification helps reduce caching costs and also lowers modification costs. By caching page data locally, subsequent computer devices can render and display pages based on the local cache when interface call errors occur. This reduces the user's perception of interface errors, thereby improving the smoothness of page rendering in the browser, increasing user engagement, effectively enhancing the effectiveness of application pages in the browser display process, and improving the user experience. Attached Figure Description
[0022] To more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings used in the following description of the embodiments will be briefly introduced. Obviously, the drawings described below are some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.
[0023] Figure 1 This is a schematic diagram of a page rendering system provided in an embodiment of the present invention;
[0024] Figure 2 This is a schematic flowchart of a page rendering method provided in an embodiment of the present invention;
[0025] Figure 3a This is a schematic diagram illustrating how data from different pages can be obtained through a unified interface, as provided in an embodiment of the present invention.
[0026] Figure 3b This is a schematic diagram illustrating the acquisition of data from different pages through different data interfaces, provided by an embodiment of the present invention.
[0027] Figure 3c This is a schematic diagram illustrating an interface request encapsulation method provided in an embodiment of the present invention;
[0028] Figure 4a This is a schematic diagram illustrating the output of an error message according to an embodiment of the present invention;
[0029] Figure 4b This is a schematic diagram of another method for outputting error message information provided in an embodiment of the present invention;
[0030] Figure 4c This is a schematic diagram illustrating page rendering according to an embodiment of the present invention;
[0031] Figure 5 This is a schematic block diagram of a page rendering device provided in an embodiment of the present invention;
[0032] Figure 6 This is a schematic block diagram of a computer device provided in an embodiment of the present invention. Detailed Implementation
[0033] The technical solutions of this application will now be clearly and completely described with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.
[0034] This application proposes a page rendering method. This method is applied during the display of an application's page using a browser. When a computer device needs to display the application's page using a browser, it first configures the application page's code as a site within the browser. Since the code configured as a site contains code snippets indicating whether the application page's data should be stored in the browser's cache, after the computer device retrieves page data from the application's backend server through the application page's data interface, it not only performs page rendering based on the retrieved page data but also, according to the instructions in the code snippets within the site, associates the data interface and the retrieved page data and stores them in the browser's cache. This allows the computer device to perform page rendering based on the page data associated with the data interface stored in the browser's cache when subsequent calls to the data interface encounter errors. In other words, the code configured in the browser's site can be used to control how page data of an application page is stored in the browser's cache. So, when it is necessary to cache the page data of the corresponding application page in the browser's cache, the code snippet used to indicate the storage of the page data of the application page can be modified in the browser's site. The modified code snippet will contain relevant information about how the page data of the application page needs to be stored in the browser's cache. Then, after the browser retrieves the page data of the application page from the server, it will not only perform page rendering based on the retrieved page data, but also perform data interface and related page data caching.
[0035] By modifying the code of the site configured as a browser, page data from the application's backend server is cached in the browser's cache space. Since the caching specified in the site's code is the browser's local cache, no further configuration of the cache space within the site is required. This eliminates the need for configuring page-related CSS files (static webpage editing files) and JS files (web development scripting languages), effectively reducing the cost of modifying the site. Furthermore, by using this site to associate page data with data interfaces, page rendering can be performed based on cached page data when the data interface encounters an error. This ensures a high success rate when the computer renders the application page. In other words, even when the data interface malfunctions, the users of the application page remain unaware of the error, thereby improving user satisfaction with the application page.
[0036] To facilitate understanding of the embodiments of this application, the relevant content of displaying the application page of the application in the browser involved in the embodiments of this application will be described below.
[0037] (a) Applications and application pages.
[0038] The application in this application embodiment refers to an application built using web platform technology, namely a Progressive Web App (PWA). PWAs combine the advantages of web applications and native applications, can run on various devices, and provide a fast and reliable application experience. However, compared to traditional applications, PWAs also offer the convenience of not requiring download and installation. In other words, the application involved in this application embodiment refers to an application whose pages can be presented via a browser without requiring download, and whose application experience, derived from browser-based page presentation, is indistinguishable from that of using a traditional application directly, thus achieving an application experience similar to that of an application on a specific platform.
[0039] Here, "application page" refers to any application page included in the application, such as the application's homepage, etc. In one embodiment, the application can be a PWA for an instant messaging application, a PWA for a lifestyle service application, or a PWA for a live streaming application.
[0040] (ii) Sites in the browser.
[0041] A website in a browser can also be called a browser site. Since the application in this embodiment refers to a Progressive Web Application (PWA), the display of the application page involved in this embodiment is performed by the browser. During the page display process, the browser requires the corresponding development code for that page, such as the HTML (Hypertext Markup Language) file code, CSS file code, and JS file code. Since the JS file code is related to data storage and processing, after the JS file code is configured in the browser, that JS file code can also be referred to as the browser's site.
[0042] Below, in conjunction with Figure 1 , Figure 1 This is a schematic diagram of the network architecture corresponding to a page rendering method provided in an embodiment of this application. For example... Figure 1 As shown, this network architecture may include a server 200 and a terminal device cluster. The terminal device cluster may include one or more terminal devices; the number of terminal devices is not limited here. Figure 1 As shown, multiple terminal devices can specifically include terminal device 1, terminal device 2, terminal device 3, ..., terminal device n, where n is a positive integer. For example... Figure 1 As shown, terminal device 1, terminal device 2, terminal device 3, ..., terminal device n can all connect to server 200 via the network, so that each terminal device can interact with server 200 through the network connection.
[0043] like Figure 1 The server 200 shown can be a standalone physical server, a server cluster or distributed system composed of multiple physical servers, or a cloud server providing basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, CDN (Content Delivery Network), and big data and artificial intelligence platforms. The terminal device can be a smartphone, tablet, laptop, desktop computer, smart TV, in-vehicle terminal, smart home device, or other smart terminal. The following description uses the communication between terminal device 1 and server 200 as an example to illustrate the specific implementation of this application.
[0044] In this embodiment, terminal device 1 can be a user terminal, which may include a browser. This browser can call the data interface corresponding to the application page of the application to be displayed, retrieve the page data of the corresponding application page from the application's backend server, and render and display it. In this application embodiment, the specific type of the browser is not limited. Server 200 can be the backend server to which the business client belongs.
[0045] The following section will use the interaction between terminal device 1 and server 200 as an example to provide an overall description of the page rendering method involved in the embodiments of this application.
[0046] (1) When the browser running in terminal device 1 detects a rendering requirement for the application page of a certain application, such as a rendering requirement for the home page of the application, it can send a data acquisition request for the page data of the application page to server 200 through the data interface of the application page to be rendered.
[0047] (2) Server 200 sends feedback data to terminal device 1 based on the data acquisition request;
[0048] (3) Terminal device 1 parses the feedback data sent by server 200. If the page data is successfully retrieved, the page data is used to render the application page and step (4) is executed; otherwise, step (5) is executed.
[0049] (4) Based on the site of the application page contained in the browser, the terminal device 1 determines that when the page data needs to be cached, it associates the page data and the data interface and stores them in the local cache space.
[0050] (5) Terminal device 1 searches in the browser's cache space to see if it contains page data associated with the data interface. If it does, the application page is rendered in the browser based on the page data in the cache space.
[0051] It should be specifically noted that the data involved in the page rendering process of this application (such as application pages, or object data required for display of certain application pages, etc.) requires the permission or consent of the target user when applied to specific products or technologies according to the above embodiments of this application. Furthermore, the collection, use, and processing of this data must comply with the relevant laws, regulations, and standards of the region, and conform to the principles of legality, legitimacy, and necessity, without involving the acquisition of data types prohibited or restricted by laws and regulations. In some optional embodiments, the relevant data involved in the embodiments of this application is obtained after separate authorization from the target user. Additionally, when obtaining separate authorization from the target user, the purpose of the relevant data is explained to the target user.
[0052] Please see Figure 2 This is a schematic flowchart illustrating a page rendering method proposed in an embodiment of this application. This page rendering method can be executed by a computer device, which can be, for example, […]. Figure 1 Any terminal device in, such as Figure 2 As shown, the method may include:
[0053] S201, Obtain the application page of the application to be displayed in the browser; wherein the code of the application page is configured as a site in the browser, and the code configured as a site includes: a code snippet indicating whether the page data of the application page needs to be stored in the browser's cache space.
[0054] In the process of accessing an application (i.e., a PWA application) through a browser, a computer device may use the currently displayed page as the application page of the application to be displayed to the browser. The application may contain one or more application pages, and the application page currently accessed through the browser may be any one of the one or more application pages contained in the application.
[0055] In one embodiment, in order to enable the display of at least one application page of an application through a browser, the computer device may first perform association processing between the browser and the application, wherein the association processing between the browser and the application includes the following ① and ②.
[0056] ① Browsers can retrieve page data from application pages contained within an application.
[0057] To enable a browser to retrieve page data from application pages contained within an application, you can first configure the application as a data interface exposed by the browser. Then, the browser can retrieve page data of the corresponding application pages from the background service of the application through the data interface exposed by the application.
[0058] In one embodiment, when the application opens a corresponding data interface to the browser, it can set corresponding usage permissions for that data interface to restrict the browser's data retrieval permissions when obtaining page data from the application's server. These usage permissions can specify which application pages the browser can retrieve page data from. For example, the usage permissions can specify that the browser can retrieve all or part of the application pages included in the application. Based on these usage permission provisions, when displaying the application's application pages, the browser can only retrieve page data within the scope specified by the usage permissions from the application's backend server.
[0059] In addition, this usage permission can also be used to specify which page data the browser can fetch for a specific application page. This could be part or all of the page data for that specific application page. Under this usage permission constraint, when a computer device displays the application page through the browser, it can only fetch page data within the constraints of this usage permission. For example, the usage permission can specify that the browser can only fetch important page data, such as form data or list data, while not fetching unimportant page data. The importance of page data is determined by whether the page data affects the display integrity of the corresponding application page. For example, advertising data in an application page does not affect the display integrity of the application page and can be determined as unimportant page data.
[0060] By setting access permissions for browsers to access the application's backend server via the application's data interface, the data security of the corresponding backend server can be guaranteed. The two access permission settings for the data interface mentioned above are merely examples and not exhaustive. When associating a browser with an application, computer devices can set access permissions according to actual business needs, or choose not to set access permissions for the data interface.
[0061] In another implementation, since the application contains one or more application pages, the application can expose one or more data interfaces for page data retrieval to the browser. Alternatively, if only one data interface is exposed, the browser can access the application's backend server to retrieve page data from different application pages. In this case, the application can expose multiple data interfaces, meaning that if one application page corresponds to one data retrieval interface, the application must expose the data interface for each application page that the browser can display. This means the application needs to expose one or more data interfaces corresponding to each application page to the browser.
[0062] ②The browser can render the fetched page data.
[0063] In one embodiment, in order to display the application page of an application through a browser, the computer device can first configure the code of the application page in the browser. That is, the computer device can first store the application page-related code (including the code related to the rendering of the application page) in the browser, and the application page code becomes the browser's site after it is stored in the browser.
[0064] In one embodiment, before the application page code is configured as a browser site, the application page code contains a first code snippet, wherein the first code snippet indicates that the application page's page data does not need to be stored in the browser's cache space. Therefore, in order to achieve local caching of the application page's page data retrieved by the browser, the computer device can modify the first code snippet to a second code snippet when it detects that the application page code has been configured as a browser site; wherein the second code snippet indicates that the application page's page data needs to be stored in the browser's cache space.
[0065] In other words, the application page's code originally contains the first code snippet. After storing the application page code containing this first code snippet in the browser, the browser, upon retrieving the page data from the site containing the first code snippet, will not cache the page data locally; it will only render the page based on the retrieved data. However, by modifying the first code snippet so that the browser caches the page data locally after retrieving it, the modified first code snippet that can be locally cached in the browser's cache space is called the second code snippet. In one embodiment, "caching" refers to the browser's internal data storage module, including but not limited to: memory, cookies (one type of local cache location in the browser), localStorage (another type of local cache location in the browser), and IndexDB (yet another type of local cache location in the browser).
[0066] In one embodiment, modifying the code of an application page configured as a browser can be done by a technician modifying the first code snippet in the application page's code to a second code snippet before configuring it as a site in the browser. In another implementation, the code of the application page configured in the browser can be directly modified based on the browser's rendering and display requirements. In this case, to ensure the browser can always request page data during subsequent rendering of the application page, the browser can modify the original first code snippet in the application page's code to a second code snippet. This second code snippet allows the browser to cache the retrieved business data in its local cache space after fetching the application page's data from the application's backend server.
[0067] Based on this configuration, when the computer device determines that the fetched page data needs to be stored in the browser's cache space based on the code snippets contained in the code configured as a site, it can associate the data interface with the fetched page data and store it in the cache space. If the code configured as a site contains a second code snippet, it can determine that the fetched page data does not need to be stored in the browser's cache space.
[0068] For page data that does not need to be stored in the browser's cache, the browser will only render the application page based on the fetched page data, and after rendering is complete, it will invalidate or discard the page data.
[0069] In one embodiment, the browser renders the fetched page data by modifying the code to the aforementioned second code snippet when configuring the application page's page data code as the site in the browser. Regarding the browser's fetching of the application's page, the data interface exposed by the application to the browser can also be configured in the site's code. That is, the browser can determine whether it can fetch page data from the corresponding data interface based on the application page's site, and after fetching the page data, it will also determine whether to cache the fetched page data locally based on the site.
[0070] When the browser determines that it can retrieve the page data of the application page based on the application's site, it can retrieve the corresponding backend server from the application's backend server based on the data corresponding to the application page, and then proceed to step S202.
[0071] S202, obtain the data interface corresponding to the application page, and retrieve the page data of the application page from the backend server corresponding to the application through the data interface.
[0072] After determining the application page of the application to be displayed in the browser, the computer device can further obtain the data interface corresponding to the application page, and then obtain the page data of the application page from the backend server corresponding to the application through the data interface. In one embodiment, the application contains one or more application pages, and the data interfaces corresponding to each application page of the application may be the same or different. Where the data interface corresponding to each application page of the application is the same, the data interfaces corresponding to each different application page are also the program interfaces between the application and the backend server. That is, if the application is application A, and application A contains application page 1, application page 2, and application page 3, and each application page in application A obtains its page data from the backend server of application A through program interface x, the specific process can be as follows: Figure 3a As shown. Therefore, if the application page to be displayed in the browser is application page 1 within application A, the computer device can call the program interface x to retrieve the corresponding page data for application page 1 from the backend server. Using the application's program interface to retrieve page data for different application pages effectively simplifies the process of obtaining page data for different application pages.
[0073] In another implementation, if different application pages within an application have different data interfaces, then after determining the application page to be displayed in the browser, the computer device retrieves the corresponding page data from the application's backend server through the data interface corresponding to that application page. In this case, if the application is application B, and application B contains application pages 4, 5, and 6, and each application page in application B retrieves its page data from its backend server through a different data interface, such as application page 4 retrieving page data from the backend server through data interface y1, application page 5 retrieving page data through data interface y2, and application page 6 retrieving page data through data interface y3, the specific process can be described as follows: Figure 3b As shown, if the application page to be displayed in the browser is application page 4 in application B, the computer device can call program interface y1 to retrieve the corresponding page data of application page 4 from the backend server. By using different data interfaces to retrieve page data from different application pages within the application, the process of retrieving page data for different application pages can be effectively distinguished, thereby effectively ensuring the data security of the application's backend server.
[0074] In one embodiment, the correspondence between the aforementioned two different application pages and data interfaces is determined based on the association between the application and the corresponding backend server, and is not limited in this embodiment. For ease of subsequent explanation, the detailed description will primarily focus on the scenario where different application pages correspond to different data interfaces.
[0075] Furthermore, the process by which the computer device obtains the data interface of the application page to be displayed in the browser is the same process by which the browser determines the data interface corresponding to the application page to be displayed. In one embodiment, when each application page of an application needs to be displayed using a browser, the application can expose the data interface of each application page to the browser for invocation. This allows the browser to successfully obtain the data interface corresponding to a specific application page when it needs to render that application page, and to retrieve page data based on that data interface.
[0076] This application allows users to modify the code of their application pages to expose the corresponding data interfaces to browsers. In other words, if the application page code contains the interface permission information for the data interface corresponding to that page, then when the application page needs to be displayed in a browser, the application page code must be configured as a browser site. By configuring the application page code as a browser site, the interface permission information contained in the code can be exposed to the browser, allowing the browser to call the data interface corresponding to the application page.
[0077] In other words, after determining the application page to be displayed, the browser can also determine whether it can call the data interface of the application page on the browser's site. If it determines that it can call the data interface, it will retrieve the page data from the application's backend server through the data interface.
[0078] When a computer device retrieves page data of an application page from the application's backend server through a data interface, it can first send a data retrieval request for the application page to the application's backend server through the data interface, and then obtain feedback data of the data retrieval request from the backend server. In this way, it can parse the feedback data and obtain the page data of the application page.
[0079] In one embodiment, when a computer device sends a data retrieval request for an application page to the application's backend server via a data interface, it can first generate a corresponding interface request based on the data interface and encapsulate the interface request into a data retrieval request for the application page. The encapsulated data retrieval request includes a target field added to the interface request, which carries the page data retrieved from the backend server. Specifically, when the code configured as a site includes a second code snippet indicating that the application page's data should be stored in the browser's cache, the target field added to the interface request also includes instructions on storing the page data carried in the target field. However, when the code configured as a site includes a first code snippet indicating that the application page's data does not need to be stored in the browser's cache, the target field added to the interface request does not contain any instructions.
[0080] In one embodiment, since the application page's code, when configured as a browser's site, corresponds to the first code snippet, the data retrieval request sent by the browser to the application's backend server via the Application Programming Interface (API) is a data retrieval request encapsulated with a target field added to the API request. Specifically, the sent data retrieval request may be as follows: Figure 3cAs shown. Adding a target field to the interface request enables the computer device to encapsulate the interface request and gives the data interface a caching function.
[0081] In one embodiment, encapsulating an interface request into a data retrieval request containing the target field is also achieved by modifying the code of the application page configured as a browser site. In a specific implementation, when one (or more) application pages in the application need to be rendered and displayed through a browser, the code of the corresponding application page needs to be modified when the site is configured as a browser site. This allows the data interface corresponding to the application page to be encapsulated based on the modified site when called by the browser, thus enabling the encapsulated interface request to have a caching function.
[0082] When modifying the code of a corresponding application page for its corresponding site in the browser, a code segment can be added to instruct that the interface requests corresponding to the data interface of the application page be encapsulated as caching-enabled interface requests. In one embodiment, the modification of an application page's site in the browser is performed when the application page is rendered in the browser and the page data corresponding to the application page needs to be cached locally in the browser. That is, the code of the application page is only modified when the browser renders the corresponding application page and the page data of the application page needs to be cached in the browser's local cache space, and the modified code is used as the site in the browser. If the page data of an application page does not need to be stored in the browser's local cache space, then the code of the application page does not need to be modified and can be directly configured as the browser's site.
[0083] After the computer device retrieves the page data of the application page from the backend server of the application through the data interface corresponding to the application page, it can then perform rendering and display based on the retrieved page data and subsequent local caching processing.
[0084] S203, based on the page data retrieved from the backend server, renders the application page in the browser.
[0085] S204, based on the code snippets contained in the site's configuration, if it is determined that the fetched page data needs to be stored in the browser's cache space, then the data interface and the fetched page data are associated and stored in the cache space; wherein, the page data stored in the cache space associated with the data interface is used to render the application page in the browser when the data interface encounters an exception.
[0086] In steps S203 and S204, the number of data interfaces corresponding to the application page to be displayed in the browser is N, where N is a positive integer greater than or equal to 1. When N is 1, it means that the data of each page area of the application page is obtained from the backend server by a corresponding data interface. Thus, the computer device can render the application page in the browser based on the page data obtained from the backend server by this data interface, and after rendering, determine whether to cache the fetched page data based on the site configuration of the application page in the browser.
[0087] In one embodiment, when N is greater than or equal to 2, a data interface corresponding to the application page corresponds to a page area in the application page and is used to fetch page data for the corresponding page area. That is, when the browser needs to render and display the application page, it needs to render based on the page data obtained from N (N is greater than or equal to 2) data interfaces. When the browser renders the application page based on the page data obtained from N data interfaces, it will render the corresponding page area of the application page according to the page data obtained from each data interface, thereby realizing the rendering process of the entire application page.
[0088] After the browser renders the application page based on the page data fetched from the backend server, if the code snippet included in the browser's site indicates that the page data needs to be cached, the page data fetched from the backend server can be further stored in the browser's cache space. In one embodiment, the browser's cache space refers to the browser's local cache space, such as LocalStorage (one cache space of the browser) and IndexedDB (another cache space of the browser). By caching the page data, disaster recovery for the application page can be performed based on the page data in the cache space; that is, if the page data of the application page cannot be fetched from the backend server, the page can be rendered based on the page data in the cache space.
[0089] When a computer device determines whether to store page data for an application page based on the code snippet contained in the code of the browser's site configured for the application page, the computer device can determine whether the code snippet contained in the application page in the browser's site is a second code snippet. If it is determined to be a second code snippet, it determines that the page data for the application page needs to be stored. If the code snippet is a first code snippet, it determines that the page data for the application page does not need to be stored.
[0090] In one embodiment, since the data retrieval request for page data is encapsulated when requesting it from the backend server, the computer device can also determine whether the page data needs to be cached based on the return format of the page data returned by the data retrieval request. Specifically, if the page data is returned in the form of a target field from the encapsulated data retrieval request, it indicates that the returned page data needs to be cached locally.
[0091] When caching page data, the computer device stores the page data and the corresponding data interface in association. In one embodiment, the page data and the corresponding data interface can be stored in the browser's local cache space in the form of key-value pairs. Alternatively, different cache areas can be allocated for different data interfaces in the local cache space, so that the page data obtained by the corresponding data interface can be stored in the corresponding cache area, thereby realizing the association storage of data interface and page data.
[0092] After associating the application page's data with this data interface and storing it in the browser's local cache, the computer device can also set an expiration time for the page data in the local cache to avoid prolonged occupation of the browser's cache space. Furthermore, after the computer device stores the application page's data in the browser's local cache at the current moment, upon revisiting the application page (such as refreshing or redisplaying it), the computer device will still retrieve the application page's data from the backend server through this data interface. Upon retrieving the application page's data, the computer device will replace the page data in the local cache with the newly retrieved page data and store the re-retrieved page data in the browser's local cache, thus ensuring the validity of the page data stored in the browser's local cache.
[0093] When a computer device associates the data interface with the retrieved page data and stores it in the cache space, it can also obtain the data update frequency of the page data. Therefore, if the data update frequency is less than or equal to a preset frequency threshold, the page data will be associated with the target data interface and stored in the cache space; otherwise, the page data and target data interface will not be associated and stored in the cache space. In other words, the browser's local cache space can cache all page data of the application page, or it can cache only a portion of the page data of the application page, i.e., the page data whose data update frequency is less than or equal to the preset frequency threshold. The page data in the application page with a data update frequency less than or equal to the preset frequency threshold is the non-real-time updated data in the application page, such as form data and list data. Therefore, by storing only the page data with an update frequency less than or equal to the frequency threshold in the browser's local cache space, not only can the storage pressure on the browser's local cache space be reduced, but the update frequency of the local cache space can also be effectively reduced.
[0094] Based on the caching of page data for application pages rendered in the browser, page rendering can be performed using page data stored in the browser's local cache when the data interface encounters an anomaly. In one embodiment, the anomaly of the data interface includes one or more of the following: the backend server malfunction prevents the data interface from fetching business data; network instability between the data interface and the backend server causes the data interface to disconnect; and the data interface is not updated in a timely manner in a private deployment environment. In the development of private projects, frequent installation and uninstallation of backend interface components often leads to frequent interface environment crashes. Newly added data interfaces are also likely to be reset and overwritten, causing interface requests to fail and resulting in data interface anomalies. In customer production environments, failures to update the backend server or modifications to the backend server's component configurations can also cause environmental anomalies, leading to data interface request failures and data interface anomalies.
[0095] When a data interface malfunctions, to ensure the browser can render the application page correctly, the computer device can retrieve cached data (i.e., page data) associated with the data interface from the browser's local cache space and render the page based on the retrieved cached data. In one embodiment, when there is only one data interface corresponding to the application page, the cached data associated with that single data interface can be retrieved from the browser's local cache space, and rendering can be performed based on the cached data.
[0096] In another implementation, when the number of data interfaces corresponding to the application page is N, N is greater than or equal to 2, and i of the N data interfaces are abnormal, while the other (Ni) are normal data interfaces, 1≤i≤N, and are positive integers, the process of page data rendering in the browser by the computer device is as follows:
[0097] (1) When the application page needs to be displayed in the browser, retrieve the page data stored in the cache space that is associated with each of the i data interfaces that have encountered an error.
[0098] (2) Retrieve page data for the corresponding page area from the backend server through (Ni) data interfaces that do not show any abnormalities.
[0099] (3) Based on the page data obtained from the cache space and the page data pulled from the backend server, the application page is rendered in the browser. That is, based on the page data in the cache space and the page data pulled from the backend server, the corresponding page area in the application page is rendered to obtain the entire application page.
[0100] (4) After rendering is complete, use the page data fetched by the current (Ni) data interfaces that have not encountered any errors to replace the page data stored in the cache space that is associated with the (Ni) data interfaces that have not encountered any errors.
[0101] The computer device, after rendering the application page in the browser using page data stored in the cache space associated with the data interface, can also display the rendered application page in the browser, and display an error message on the rendered application page; the error message indicates that there is an error in the data interface. The error message displayed on the rendered application page can be displayed in the form of a floating window, specifically as follows: Figure 4a As shown; or, it can be displayed at the top or bottom of the application page, as shown in the example. Figure 4b As shown.
[0102] The computer device uses data stored in the browser's local cache to render the application page data in the browser and displays the rendered page. Since the rendered page is based on cached data, the computer device can also retrieve the application page update data from the server through the data interface when it detects abnormal recovery information for the data interface. Thus, it can use the page update data to update the application page rendered and displayed in the browser and display the updated application page in the browser.
[0103] In one embodiment, after the browser uses the cached data from the data interface to render the application page, the browser can access the abnormal data interface at certain time intervals to detect the abnormal recovery information of the data interface. Thus, when the data interface returns to normal, the browser can call the normal data interface to retrieve the corresponding page update data from the backend server and use this page update data to update the application page. Furthermore, considering the aforementioned abnormal message displayed on the rendered application page after rendering the application page using the cached data stored in the browser, the cancellation of this abnormal message display can be achieved only after the abnormal recovery information indicates that the data interface is normal and the application page has been updated.
[0104] In the event of a data interface anomaly, because the corresponding page data is cached in the browser's local cache, the computer device can still retrieve the relevant page data from the browser's cache even when it cannot fetch page data from the backend server via the data interface. This ensures that the web application can still render normally in the browser. This allows front-end developers to continue developing subsequent pages without waiting for the backend server to fix it. In the customer's production environment, this prevents the application pages displayed to the customer from easily crashing, ensuring normal rendering of the application pages even in the event of a data interface anomaly. This improves the satisfaction of application page rendering and display in the browser. Furthermore, it reduces the waiting time caused by backend server anomalies that prevents front-end development from continuing, thus improving application page development efficiency.
[0105] In one embodiment, if an anomaly occurs at the data interface and the browser's cache does not contain the page data associated with the data interface, the computer device can also use virtual data of the application page to render the page data while the application page to be rendered is in the page development process. That is, the computer device can simulate a large amount of virtual data locally and use this virtual data to render the application page after failing to fetch page data. This virtual data is simulated data and differs somewhat from the actual data in the project. Therefore, rendering the application page based on virtual data is only used during the development process of the application page, and is not used for rendering the application page during the actual user request display stage.
[0106] In other words, when an anomaly occurs in the data interface, if the application page is in the page development process, virtual data for the application page can be obtained. This virtual data includes the application page's virtual data interface. The computer device can then process the application page based on the virtual data interface to obtain development data. This development data is associated with the virtual data interface. Furthermore, the associated development data and the interface identifier of the virtual data interface can be sent to the backend server, so that the backend server replaces the interface identifier of the virtual data interface associated with the development data with the interface identifier of the data interface associated with the actual application page. In this way, even if an interface anomaly occurs during the page development process of the application page displayed in the browser, the normal rendering of the application page in the browser can be guaranteed, thus ensuring the continuity of the page data development process.
[0107] In other words, when a computer device renders and displays an application's page through a browser, after determining the application page to be displayed in the browser, it can retrieve the page data from the application's backend server by calling the application page's data interface. After successfully retrieving the page data from the backend server, it can either use this data to render the page in the browser or cache the retrieved page data locally. Then, when subsequently requesting rendering of the page again, if retrieving page data from the backend server fails, the locally cached page data can be used for rendering.
[0108] In one embodiment, if a computer device fails to retrieve page data from a backend server and no cached data associated with the corresponding data interface is found in the browser's local cache, the computer device can directly output an error message in the browser to remind the page viewer to retry displaying the application page later. Below, in conjunction with... Figure 4c This section provides an overall description of the process by which computer devices use a browser to display application pages.
[0109] like Figure 4cAs shown, when a computer device needs to request interface data (i.e., page data of the application page) through a client (i.e., a browser), under normal circumstances, it can retrieve and return the required data from the corresponding application's backend server. Then, the data interface and the retrieved page data can be saved to the browser's local cache. Subsequently, if the interface encounters an error and cannot retrieve and return data from the backend server, the browser's cache space can be queried. If cached data for the corresponding data interface exists in the cache space, the cached data is used directly for page rendering, and a pop-up window is displayed to the user indicating that the data interface failed. When the local cache does not contain cached data for the corresponding data interface, empty data is returned, and a pop-up window is displayed to the user indicating that the interface failed.
[0110] In this embodiment, when a computer device uses a browser to render and display an application page, after determining the application page to be displayed in the browser, it can obtain the page data corresponding to the application page from the application's backend server through the data interface corresponding to the application page. Upon successful acquisition of the page data, the application page is rendered in the browser based on the acquired page data. Simultaneously, based on the site corresponding to the application page in the browser, if it is necessary to cache the page data, the page data of the application page is cached in the browser's local cache space. This allows the rendering and display of the application page in the browser to be modified by altering the application page's site in the browser, enabling the browser to not only render the application page but also cache its page data locally. Since the modification of the site is used to store page data in the browser's local cache space, this caching method eliminates the need for other deployment configurations of the cache space in the browser, reducing the deployment overhead of caching page data. Furthermore, caching page data through site modification helps reduce caching costs and also lowers modification costs. By caching page data locally, subsequent computer devices can render and display pages based on the local cache when interface call errors occur. This reduces the user's perception of interface errors, thereby improving the smoothness of page rendering in the browser, increasing user engagement, effectively improving the usability of application pages during browser display, and enhancing the user experience.
[0111] Please see Figure 5 , Figure 5 This is a schematic diagram of the structure of a page rendering device provided in an embodiment of this application. Figure 5 As shown, the page rendering apparatus may include an acquisition unit 501 and a processing unit 502.
[0112] The acquisition unit 501 is used to acquire the application page of the application to be displayed in the browser; wherein the code of the application page is configured as a site in the browser, and the code configured as the site includes: a code fragment indicating whether the page data of the application page needs to be stored in the cache space of the browser.
[0113] The acquisition unit 501 is also used to acquire the data interface corresponding to the application page, and to retrieve the page data of the application page from the backend server corresponding to the application through the data interface.
[0114] Processing unit 502 is configured to render the application page in the browser based on page data retrieved from the backend server; and,
[0115] The processing unit 502 is further configured to, based on the code snippets contained in the code configured for the site, if it is determined that the retrieved page data needs to be stored in the browser's cache space, associate the data interface with the retrieved page data and store it in the cache space; wherein, the page data stored in the cache space in association with the data interface is used to render the application page in the browser when the data interface malfunctions.
[0116] In one embodiment, before the application page code is configured as a site of the browser, the application page code contains a first code fragment, wherein the first code fragment is used to indicate that the page data of the application page does not need to be stored in the browser's cache space; the processing unit 502 is further configured to modify the first code fragment contained in the code to a second code fragment when it detects that the application page code is configured as a site of the browser.
[0117] The second code snippet indicates that the page data of the application page needs to be stored in the browser's cache space.
[0118] In one embodiment, the processing unit 502 is specifically used for:
[0119] When the code configured for the site includes the second code snippet, it is determined that the fetched page data needs to be stored in the browser's cache space, and the data interface is associated with the fetched page data and stored in the cache space;
[0120] When the first code snippet is included in the code configured for the site, it is determined that the retrieved page data does not need to be stored in the browser's cache.
[0121] In one embodiment, the processing unit 502 is specifically used for:
[0122] Through the data interface, a data retrieval request for the application page is sent to the application's backend server, and feedback data for the data retrieval request is obtained from the backend server;
[0123] The feedback data is parsed to obtain the page data of the application page.
[0124] In one embodiment, the processing unit 502 is specifically used for:
[0125] Generate a corresponding interface request based on the data interface, and encapsulate the interface request into a data retrieval request for the application page;
[0126] The encapsulated data retrieval request includes a target field added to the interface request, which carries page data retrieved from the backend server.
[0127] In one embodiment, when the code configured for the site includes a second code snippet indicating that the page data of the application page needs to be stored in the browser's cache space, the target field added in the interface request also includes: indication information for storing the page data carried by the target field;
[0128] When the code configured for the site contains a first code snippet indicating that the page data of the application page does not need to be stored in the browser's cache, the target field to be added in the interface request does not contain the indication information.
[0129] In one embodiment, the number of data interfaces corresponding to the application page is N, where N is a positive integer greater than or equal to 1; when the value of N is greater than or equal to 2, one data interface corresponding to the application page corresponds to one page area of the application page and is used to retrieve page data of the corresponding page area; when i of the N data interfaces are abnormal, 1≤i≤N and is a positive integer; the processing unit 502 is further configured to, when the application page needs to be displayed in the browser, obtain page data stored in the cache space that is associated with each of the i abnormal data interfaces, and retrieve page data of the corresponding page area from the backend server through (Ni) non-abnormal data interfaces;
[0130] The processing unit 502 is further configured to render the application page in the browser based on the page data obtained from the cache space and the page data pulled from the backend server; and to replace the page data stored in the cache space associated with the (Ni) data interfaces that have not experienced any abnormalities with the page data pulled from the (Ni) data interfaces that have not experienced any abnormalities.
[0131] In one embodiment, after rendering the application page in the browser using page data stored in the cache space associated with the data interface, the processing unit 502 is further configured to display the rendered application page in the browser and display an error message on the rendered application page; wherein the error message is used to indicate that the data interface has an error.
[0132] In one embodiment, the processing unit 502 is further configured to detect abnormal recovery information for the data interface and retrieve page update data of the application page from the server through the data interface;
[0133] The processing unit 502 is further configured to update the application page rendered and displayed in the browser using the page update data, and display the updated application page in the browser.
[0134] In one embodiment, if the data interface malfunctions, the cache space does not contain page data associated with the data interface; the processing unit 502 is further configured to obtain virtual data of the application page if the application page is in a page development process; the virtual data includes the virtual data interface of the application page.
[0135] The processing unit 502 is further configured to perform development processing on the application page based on the virtual data interface to obtain development data of the application page; the development data is associated with the virtual data interface.
[0136] The processing unit 502 is further configured to send the associated development data and the interface identifier of the virtual data interface to the backend server, so that the backend server replaces the interface identifier of the virtual data interface associated with the development data with the interface identifier of the data interface associated with the real application page.
[0137] In one embodiment, the processing unit 502 is specifically used for:
[0138] The data update frequency of the page data is obtained;
[0139] When the data update frequency is less than or equal to a preset frequency threshold, the page data is associated with the target data interface and stored in the cache space; otherwise, the page data and the target data interface are not associated and stored in the cache space.
[0140] In this embodiment, when a browser renders and displays the application page of an application, after determining the application page to be displayed in the browser, the page data corresponding to the application page is obtained from the application's backend server through the data interface corresponding to the application page. Upon successful acquisition of the page data, the application page is rendered in the browser based on the page data obtained by the acquisition unit 501. Simultaneously, the processing unit 502, based on the site corresponding to the application page in the browser, determines whether the page data of the application page needs to be cached, and caches the page data of the application page in the browser's local cache space. This allows the rendering and display of the application page in the browser to be modified by altering the site of the application page, enabling the browser to not only render the application page but also cache the page data locally. Since the modification of the site is used to store the page data in the browser's local cache space, this caching method does not require any other deployment configuration of the cache space in the browser, reducing the deployment overhead of caching page data. Furthermore, caching page data through site modification helps reduce caching costs and modification costs. By caching page data locally, subsequent computer devices can render and display pages based on the local cache when interface call errors occur. This reduces the user's perception of interface errors, thereby improving the smoothness of page rendering in the browser, increasing user engagement, effectively enhancing the effectiveness of application pages in the browser display process, and improving the user experience.
[0141] According to one embodiment of this application, Figure 5 The various modules in the page rendering apparatus shown can be individually or entirely combined into one or more units, or some of these units can be further divided into multiple functionally smaller sub-units to achieve the same operation without affecting the technical effects of the embodiments of this application. The above modules are based on logical functional division; in practical applications, the function of one module can be implemented by multiple units, or the functions of multiple modules can be implemented by one unit. In other embodiments of this application, the page rendering apparatus may also include other units; in practical applications, these functions can also be implemented with the assistance of other units, and can be implemented collaboratively by multiple units.
[0142] In this application embodiment, the terms "module" or "unit" refer to a computer program or part of a computer program that has a predetermined function and works with other related parts to achieve a predetermined goal, and can be implemented wholly or partially using software, hardware (such as processing circuitry or memory), or a combination thereof. Similarly, a processor (or multiple processors or memory) can be used to implement one or more modules or units. Furthermore, each module or unit can be part of an overall module or unit that includes the functionality of that module or unit.
[0143] According to one embodiment of this application, a computer program capable of executing the steps involved in the corresponding methods shown in the various embodiments of this application can be run on a general-purpose computer device (which may include processing elements and storage elements such as a central processing unit (CPU), random access memory (RAM), and read-only memory (ROM)) to construct a system as described in the embodiments of this application. Figure 5 The page rendering apparatus shown. The computer program described above can be recorded on a computer-readable recording medium, and can be loaded into the computer device described above through the computer-readable recording medium and run therein.
[0144] Please see Figure 6 , Figure 6 This is a schematic diagram of the structure of a computer device provided in an embodiment of this application. Figure 6 As shown, the computer device 1000 may include a processor 1001, a network interface 1004, and a memory 1005. In some embodiments, the computer device 1000 may also include a user interface 1003 and at least one communication bus 1002. The communication bus 1002 is used to enable communication between these components. The user interface 1003 may include a display screen and a keyboard; optionally, the user interface 1003 may also include a standard wired interface or a wireless interface. The network interface 1004 may optionally include a standard wired interface or a wireless interface (such as a Wi-Fi interface). The memory 1005 may be high-speed RAM or non-volatile memory, such as at least one disk storage device. Optionally, the memory 1005 may also be at least one storage device located remotely from the aforementioned processor 1001. Figure 6 As shown, the memory 1005, which serves as a computer storage medium, may include an operating system, a network communication module, a user interface module, and a device control application program.
[0145] exist Figure 6In the computer device 1000 shown, the network interface 1004 provides network communication functionality; the user interface 1003 is mainly used to provide an input interface for the user; and the processor 1001 can be used to call the device control application stored in the memory 1005 to achieve:
[0146] Obtain the application page of the application to be displayed in the browser; wherein the code of the application page is configured as a site in the browser, and the code configured as the site includes: a code fragment indicating whether the page data of the application page needs to be stored in the browser's cache space;
[0147] Obtain the data interface corresponding to the application page, and retrieve the page data of the application page from the backend server corresponding to the application through the data interface;
[0148] Based on the page data retrieved from the backend server, the application page is rendered in the browser; and,
[0149] Based on the code snippets contained in the code configured for the site, if it is determined that the fetched page data needs to be stored in the browser's cache space, then the data interface is associated with the fetched page data and stored in the cache space; wherein, the page data stored in the cache space associated with the data interface is used to render the application page in the browser when the data interface encounters an error.
[0150] In one embodiment, before the application page code is configured as a site of the browser, the application page code includes a first code snippet, wherein the first code snippet is used to indicate that the page data of the application page does not need to be stored in the browser's cache space; the processor 1001 can also be used to call the device control application stored in the memory 1005 to achieve:
[0151] When it is detected that the application page's code is configured as the browser's site, the first code snippet contained in the code is modified to a second code snippet;
[0152] The second code snippet indicates that the page data of the application page needs to be stored in the browser's cache space.
[0153] In one embodiment, the processor 1001 can also be used to invoke a device control application stored in the memory 1005 to achieve:
[0154] When the code configured for the site includes the second code snippet, it is determined that the fetched page data needs to be stored in the browser's cache space, and the data interface is associated with the fetched page data and stored in the cache space;
[0155] When the first code snippet is included in the code configured for the site, it is determined that the retrieved page data does not need to be stored in the browser's cache.
[0156] In one embodiment, the processor 1001 can also be used to invoke a device control application stored in the memory 1005 to achieve:
[0157] The application sends a data retrieval request for the application page to the application's backend server through the data interface, and retrieves feedback data for the data retrieval request from the backend server.
[0158] The feedback data is parsed to obtain the page data of the application page.
[0159] In one embodiment, the processor 1001 can also be used to invoke a device control application stored in the memory 1005 to achieve:
[0160] Generate a corresponding interface request based on the data interface, and encapsulate the interface request into a data retrieval request for the application page;
[0161] The encapsulated data retrieval request includes a target field added to the interface request, which carries page data retrieved from the backend server.
[0162] In one embodiment, when the code configured for the site includes a second code snippet indicating that the page data of the application page needs to be stored in the browser's cache space, the target field added in the interface request also includes: indication information for storing the page data carried by the target field;
[0163] When the code configured for the site contains a first code snippet indicating that the page data of the application page does not need to be stored in the browser's cache, the target field to be added in the interface request does not contain the indication information.
[0164] In one embodiment, the number of data interfaces corresponding to the application page is N, where N is a positive integer greater than or equal to 1; when the value of N is greater than or equal to 2, one data interface corresponding to the application page corresponds to one page area of the application page and is used to retrieve page data of the corresponding page area; when i of the N data interfaces malfunction, 1≤i≤N, and is a positive integer; the processor 1001 can also be used to call the device control application stored in the memory 1005 to achieve:
[0165] When the application page needs to be displayed in the browser, the page data associated with each of the i abnormal data interfaces is obtained from the cache space, and the page data of the corresponding page area is retrieved from the backend server through the (Ni) non-abnormal data interfaces.
[0166] Based on the page data obtained from the cache space and the page data pulled from the backend server, the application page is rendered in the browser; and the page data pulled from the (Ni) data interfaces that have not experienced any anomalies is used to replace the page data stored in the cache space that is associated with the (Ni) data interfaces that have not experienced any anomalies.
[0167] In one embodiment, after rendering the application page in the browser using page data stored in the cache space associated with the data interface, the processor 1001 can also be used to call the device control application stored in the memory 1005 to achieve:
[0168] The rendered application page is displayed in the browser, and an error message is displayed on the rendered application page; wherein the error message is used to indicate that there is an error in the data interface.
[0169] In one embodiment, the processor 1001 can also be used to invoke a device control application stored in the memory 1005 to achieve:
[0170] Upon detecting abnormal recovery information for the data interface, page update data for the application page is retrieved from the server via the data interface.
[0171] The application page rendered and displayed in the browser is updated using the page update data, and the updated application page is displayed in the browser.
[0172] In one embodiment, if the data interface malfunctions, the cache space does not contain page data associated with the data interface; the processor 1001 can also be used to call the device control application stored in the memory 1005 to achieve:
[0173] If the application page is in the page development process, then obtain the virtual data of the application page; the virtual data includes the virtual data interface of the application page;
[0174] The application page is developed based on the virtual data interface to obtain development data for the application page; the development data is associated with the virtual data interface.
[0175] The associated development data and the interface identifier of the virtual data interface are sent to the backend server, so that the backend server replaces the interface identifier of the virtual data interface associated with the development data with the interface identifier of the data interface associated with the real application page.
[0176] In one embodiment, the processor 1001 can also be used to invoke a device control application stored in the memory 1005 to achieve:
[0177] The data update frequency of the page data is obtained;
[0178] When the data update frequency is less than or equal to a preset frequency threshold, the page data is associated with the target data interface and stored in the cache space; otherwise, the page data and the target data interface are not associated and stored in the cache space.
[0179] It should be understood that the computer device 1000 described in the embodiments of this application can execute the page rendering method described in the embodiments of this application, and can also execute the methods described above. Figure 5 The description of the page rendering apparatus in the corresponding embodiments will not be repeated here. Furthermore, the beneficial effects of using the same method will also not be repeated.
[0180] Furthermore, it should be noted that this application also provides a computer-readable storage medium storing a computer program. When a processor executes the computer program, it can perform the page rendering methods described in the various embodiments of this application; therefore, these will not be repeated here. Additionally, the beneficial effects of using the same method will also not be repeated. For technical details not disclosed in the embodiments of the computer storage medium involved in this application, please refer to the description of the method embodiments of this application.
[0181] As an example, the aforementioned computer program can be deployed and executed on a single computer device, or deployed and executed on multiple computer devices located in one location, or executed on multiple computer devices distributed across multiple locations and interconnected via a communication network. These multiple computer devices distributed across multiple locations and interconnected via a communication network can form a blockchain network.
[0182] The aforementioned computer-readable storage medium can be an internal storage unit of the computer device, such as a hard drive or memory. It can also be an external storage device, such as a plug-in hard drive, smart media card (SMC), secure digital card (SD) card, or flash card. Furthermore, the computer-readable storage medium can include both internal and external storage units of the computer device. This computer-readable storage medium is used to store the computer program and other programs and data required by the computer device. It can also be used to temporarily store data that has been output or will be output.
[0183] This application provides a computer program product comprising a computer program stored in a computer-readable storage medium. A processor of a computer device reads the computer program from the computer-readable storage medium and executes the computer program, causing the computer device to perform the page rendering methods described in the embodiments of this application; therefore, these descriptions will not be repeated here. Furthermore, the beneficial effects of using the same method will also not be repeated. For technical details not disclosed in the embodiments of the computer-readable storage medium involved in this application, please refer to the description of the method embodiments of this application.
[0184] The terms "first," "second," etc., in the specification, claims, and drawings of this application are used to distinguish different objects, not to describe a specific order. Furthermore, the term "comprising," and any variations thereof, are intended to cover non-exclusive inclusion. For example, a process, method, apparatus, product, or device that includes a series of steps or units is not limited to the listed steps or modules, but may optionally include steps or modules not listed, or may optionally include other step units inherent to these processes, methods, apparatuses, products, or devices.
[0185] Those skilled in the art will recognize that the units and algorithm steps of the various examples described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of both. To clearly illustrate the interchangeability of hardware and software, the components and steps of the various examples have been generally described in terms of functionality in the foregoing description. Whether these functions are implemented in hardware or software depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementations should not be considered beyond the scope of this application.
[0186] The above-disclosed embodiments are merely preferred embodiments of this application and should not be construed as limiting the scope of this application. Therefore, any equivalent variations made in accordance with the claims of this application shall still fall within the scope of this application.
Claims
1. A page rendering method, characterized in that, include: Obtain the application page of the application to be displayed in the browser; wherein the code of the application page is configured as a site in the browser, and the code configured as the site includes: a code fragment indicating whether the page data of the application page needs to be stored in the browser's cache space; Obtain the data interface corresponding to the application page, and retrieve the page data of the application page from the backend server corresponding to the application through the data interface; Based on the page data retrieved from the backend server, the application page is rendered in the browser; and, Based on the code snippets contained in the code configured for the site, if it is determined that the fetched page data needs to be stored in the browser's cache space, then the data interface is associated with the fetched page data and stored in the cache space; wherein, the page data stored in the cache space associated with the data interface is used to render the application page in the browser when the data interface encounters an error.
2. The method as described in claim 1, characterized in that, Before the application page is configured as a site by the browser, the code snippet contained in the application page is a first code snippet, wherein the first code snippet is used to indicate that the page data of the application page does not need to be stored in the browser's cache space; the method further includes: When it is detected that the application page's code is configured as the browser's site, the first code snippet contained in the code is modified to a second code snippet; The second code snippet indicates that the page data of the application page needs to be stored in the browser's cache space.
3. The method as described in claim 2, characterized in that, If, based on the code snippets contained in the code configured for the site, it is determined that the retrieved page data needs to be stored in the browser's cache space, then the data interface is associated with the retrieved page data and stored in the cache space, including: When the code configured for the site includes the second code snippet, it is determined that the fetched page data needs to be stored in the browser's cache space, and the data interface is associated with the fetched page data and stored in the cache space; When the first code snippet is included in the code configured for the site, it is determined that the retrieved page data does not need to be stored in the browser's cache.
4. The method as described in claim 1 or 2, characterized in that, The step of retrieving page data of the application page from the backend server corresponding to the application through the data interface includes: The application sends a data retrieval request for the application page to the application's backend server through the data interface, and retrieves feedback data for the data retrieval request from the backend server. The feedback data is parsed to obtain the page data of the application page.
5. The method as described in claim 4, characterized in that, Sending a data retrieval request for the application page to the application's backend server via the data interface includes: Generate a corresponding interface request based on the data interface, and encapsulate the interface request into a data retrieval request for the application page; The encapsulated data retrieval request includes a target field added to the interface request, which carries page data retrieved from the backend server.
6. The method as described in claim 5, characterized in that, When the code configured for the site contains a second code snippet indicating that the page data of the application page needs to be stored in the browser's cache space, the target field added in the interface request also contains: indication information for storing the page data carried by the target field; When the code configured for the site contains a first code snippet indicating that the page data of the application page does not need to be stored in the browser's cache, the target field to be added in the interface request does not contain the indication information.
7. The method as described in claim 1, characterized in that, The number of data interfaces corresponding to the application page is N, where N is a positive integer greater than or equal to 1; when N is greater than or equal to 2, one data interface corresponding to the application page corresponds to one page area of the application page and is used to retrieve page data of the corresponding page area; when i of the N data interfaces malfunction, 1 ≤ i ≤ N, and is a positive integer; the method further includes: When the application page needs to be displayed in the browser, the page data associated with each of the i abnormal data interfaces is obtained from the cache space, and the page data of the corresponding page area is retrieved from the backend server through the (Ni) non-abnormal data interfaces. Based on the page data obtained from the cache space and the page data pulled from the backend server, the application page is rendered in the browser; and the page data pulled from the (Ni) data interfaces that have not experienced any anomalies is used to replace the page data stored in the cache space that is associated with the (Ni) data interfaces that have not experienced any anomalies.
8. The method as described in claim 1, characterized in that, After rendering the application page in the browser using page data stored in the cache space associated with the data interface, the method further includes: The rendered application page is displayed in the browser, and an error message is displayed on the rendered application page; wherein the error message is used to indicate that there is an error in the data interface.
9. The method according to any one of claims 1 to 8, characterized in that, The method further includes: Upon detecting abnormal recovery information for the data interface, page update data for the application page is retrieved from the server via the data interface. The application page rendered and displayed in the browser is updated using the page update data, and the updated application page is displayed in the browser.
10. The method as described in claim 1, characterized in that, If the data interface malfunctions, the cache space will not contain page data associated with the data interface; the method further includes: If the application page is in the page development process, then obtain the virtual data of the application page; the virtual data includes the virtual data interface of the application page; The application page is developed based on the virtual data interface to obtain development data for the application page; the development data is associated with the virtual data interface. The associated development data and the interface identifier of the virtual data interface are sent to the backend server, so that the backend server replaces the interface identifier of the virtual data interface associated with the development data with the interface identifier of the data interface associated with the real application page.
11. The method as described in claim 1, characterized in that, The step of associating the data interface with the retrieved page data and storing it in the cache space includes: The data update frequency of the page data is obtained; When the data update frequency is less than or equal to a preset frequency threshold, the page data is associated with the target data interface and stored in the cache space; otherwise, the page data and the target data interface are not associated and stored in the cache space.
12. A page rendering device, characterized in that, include: The acquisition unit is used to acquire the application page of an application to be displayed in a browser; wherein the code of the application page is configured as a site in the browser, and the code configured as the site includes: a code fragment indicating whether the page data of the application page needs to be stored in the browser's cache space; The acquisition unit is also used to acquire the data interface corresponding to the application page, and to retrieve the page data of the application page from the backend server corresponding to the application through the data interface; The processing unit is configured to render the application page in the browser based on page data retrieved from the backend server; and, The processing unit is further configured to, based on the code snippets contained in the code configured for the site, if it is determined that the retrieved page data needs to be stored in the browser's cache space, associate the data interface with the retrieved page data and store it in the cache space; wherein, the page data stored in the cache space in association with the data interface is used to render the application page in the browser when the data interface malfunctions.
13. A computer device, characterized in that, The system includes a processor, an input device, an output device, and a memory, wherein the processor, the input device, the output device, and the memory are interconnected, wherein the memory is used to store a computer program, the computer program including program instructions, and the processor is configured to invoke the program instructions to execute the method as described in any one of claims 1 to 11.
14. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program, the computer program including program instructions that, when executed by a processor, cause the processor to perform the method as described in any one of claims 1 to 11.
15. A computer program product, characterized in that, The computer program product includes a computer program, which includes program instructions that, when invoked by a processor, cause the processor to perform the method as described in any one of claims 1 to 11.