A page rendering method and related device
By detecting asynchronous data acquisition requests and stopping rendering during data waiting, the problems of page jitter and user error judgment are solved, and the effect of reducing the number of renderings and improving user experience is achieved.
Patent Information
- Application Number
- CN202110742299.8
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2021-06-30
- Publication Date
- 2025-02-14
- Estimated Expiration
- 2041-06-30
AI Technical Summary
During the process of obtaining page data, the existing technology will cause page jitter and users to mistakenly believe that page rendering is abnormal, affecting the user experience.
By detecting the asynchronous data acquisition request, an exception status identifier is generated to stop rendering during data waiting, and after waiting for the real page data to return, the status identifier is adjusted and page rendering is performed.
Reduce the number of page renderings, avoid users' incorrect judgment of page rendering exceptions, and improve user experience.
Smart Images
Figure CN113626745B_ABST
Abstract
Description
Technical Field
[0001] The present application relates to the field of computers, and in particular to a page rendering method and related devices. Background Art
[0002] Currently, in data interaction scenarios in web applications, page data is obtained when the component is initialized. Before obtaining the page data, the rendering component will render the page based on an initial value. After obtaining the real page data based on the acquisition request, the page will be rendered again based on the page data.
[0003] At the interactive level, not only will the page jitter due to the two page renderings, but also, because the first page rendered based on the initial value will be very different from the page rendered based on the actual page data, the content of the first page rendering will also cause confusion to users, thinking that the page application has a malfunction or performance problem.
[0004] It can be seen that how to correctly render the page is an urgent problem that needs to be solved. Summary of the invention
[0005] In order to solve the above technical problems, the present application provides a page rendering method and related devices, which will not make invalid additional page rendering before obtaining real page data, thereby reducing the number of page rendering times and avoiding users from mistakenly believing that the page rendering is abnormal, thereby improving the user experience.
[0006] The embodiments of the present application disclose the following technical solutions:
[0007] On the one hand, an embodiment of the present application provides a page rendering method, the method comprising:
[0008] An asynchronous data acquisition request for a target page is detected and sent to the server;
[0009] During the data waiting period, the first page rendering component is instructed to stop rendering through the generated abnormal status identifier, and the data waiting period is the time interval from sending the asynchronous data acquisition request to acquiring the page data returned based on the asynchronous data acquisition request;
[0010] Acquire page data corresponding to the target page returned from the server;
[0011] The abnormal state flag is adjusted to a normal state flag, and the first page rendering component is instructed to render the target page according to the page data.
[0012] Optionally, the method further includes:
[0013] Create a container component;
[0014] The detecting of an asynchronous data acquisition request for a target page sent to a server includes:
[0015] The container component detects an asynchronous data acquisition request for a target page sent to a server by using a capture statement.
[0016] Optionally, the method further includes:
[0017] Generate the asynchronous data acquisition request by encapsulating the asynchronous operation method;
[0018] When the asynchronous data acquisition request is detected, a Promise object is obtained according to the asynchronous data acquisition request, and the Promise object is used to identify whether to obtain the page data requested by the asynchronous data acquisition request;
[0019] Generate a corresponding status identifier according to the data acquisition status identified by the Promise object;
[0020] If the Promise object identifier has not obtained the page data, the abnormal state identifier is generated; if the Promise object identifier has obtained the page data, the operation of adjusting the abnormal state identifier to a normal state identifier is performed.
[0021] Optionally, the method further includes:
[0022] If the target page is the homepage of the page application, when the page application is opened, the asynchronous data acquisition request is sent;
[0023] If the target page is a page in the page application, when the display page is switched to the target page through the page application, the asynchronous data acquisition request is sent.
[0024] Optionally, during the data waiting period, the method further includes:
[0025] Instruct the second page rendering component to pre-render the target page according to preset parameters to show an indication of page loading.
[0026] On the other hand, an embodiment of the present application provides a page rendering device, the device comprising a detection unit, an indication unit, an acquisition unit and an adjustment unit:
[0027] The detection unit is used to detect an asynchronous data acquisition request sent to the server for a target page;
[0028] The instructing unit is used to instruct the first page rendering component to stop rendering by generating an abnormal state identifier during a data waiting period, wherein the data waiting period is a time interval from sending the asynchronous data acquisition request to acquiring the page data returned based on the asynchronous data acquisition request;
[0029] The acquisition unit is used to acquire the page data corresponding to the target page returned from the server;
[0030] The adjustment unit is used to adjust the abnormal state identifier to a normal state identifier, and instruct the first page rendering component to render the target page according to the page data.
[0031] Optionally, the device further comprises a creation unit:
[0032] The creation unit is used to create a container component;
[0033] The detection unit is also used for:
[0034] The container component detects an asynchronous data acquisition request for a target page sent to a server by using a capture statement.
[0035] Optionally, the indicating unit is further used for:
[0036] Generate the asynchronous data acquisition request by encapsulating the asynchronous operation method;
[0037] When the asynchronous data acquisition request is detected, a Promise object is obtained according to the asynchronous data acquisition request, and the Promise object is used to identify whether to obtain the page data requested by the asynchronous data acquisition request;
[0038] Generate a corresponding status identifier according to the data acquisition status identified by the Promise object;
[0039] If the Promise object identifier has not obtained the page data, the abnormal state identifier is generated; if the Promise object identifier has obtained the page data, the abnormal state identifier is adjusted to a normal state identifier.
[0040] Optionally, the device further includes a sending unit, and the sending unit is used to:
[0041] If the target page is the homepage of the page application, when the page application is opened, the asynchronous data acquisition request is sent;
[0042] If the target page is a page in the page application, when the display page is switched to the target page through the page application, the asynchronous data acquisition request is sent.
[0043] Optionally, during the data waiting period, the indicating unit is further used to:
[0044] Instruct the second page rendering component to pre-render the target page according to preset parameters to show an indication of page loading.
[0045] It can be seen from the above technical solution that an asynchronous data acquisition request for a target page sent to a server is detected; during the data waiting period, the first page rendering component is instructed to stop rendering through a generated abnormal status identifier, and the data waiting period is the time interval from sending the asynchronous data acquisition request to obtaining the page data returned based on the asynchronous data acquisition request; the page data corresponding to the target page returned from the server is obtained; the abnormal status identifier is adjusted to a normal status identifier, and the first page rendering component is instructed to render the target page according to the page data. In this way, before the real page data is obtained, no invalid additional page rendering will be made, which reduces the number of page rendering times, and can prevent users from mistakenly believing that the page rendering is abnormal, thereby improving the user experience. BRIEF DESCRIPTION OF THE DRAWINGS
[0046] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.
[0047] Figure 1 A schematic diagram of a page rendering method in the related art;
[0048] Figure 2 A method flow chart of a page rendering method provided in an embodiment of the present application;
[0049] Figure 3 A schematic diagram of a page rendering method provided in an embodiment of the present application;
[0050] Figure 4 A schematic diagram of a page rendering scenario provided in an embodiment of the present application;
[0051] Figure 5 A device structure diagram of a page rendering device provided in an embodiment of the present application. DETAILED DESCRIPTION
[0052] The embodiments of the present application are described below in conjunction with the accompanying drawings.
[0053] In the related art, page rendering of page applications has problems such as jitter, such as Figure 1 A page rendering mode of the related art is shown.
[0054] When obtaining page data, asynchronous request data will take some time. Figure 1 It can be seen that the rendering component will first initialize the rendering data to render the page, and then re-render the page based on the page data after obtaining the real page data. The two page renderings will inevitably produce a jitter effect on the page.
[0055] The embodiment of the present application provides a page rendering method, which will not make invalid additional page rendering before obtaining real page data, thereby reducing the number of page rendering times and avoiding users from mistakenly believing that the page rendering is abnormal, thereby improving the user experience.
[0056] The embodiments of the present application can be executed through a terminal device, and the terminal device can be various devices that can deploy and use page applications, such as mobile phones, tablets, various home computers, smart portable devices, etc.
[0057] Before describing the solution provided by the present application, the terms and features involved in the present application are first introduced.
[0058] Ajax: "Asynchronous JavaScript and XML" refers to a set of technologies that integrate multiple technologies to allow browser-side web pages to obtain background data.
[0059] Fetch: An upgraded version of Ajax, used to make HTTP requests in JavaScript scripts.
[0060] Web component: Web component refers to the encapsulation entity of Web data and methods, so as to facilitate the processing of business logic.
[0061] Promise: An important concept in JS asynchronous programming, an asynchronous abstract processing object, and one of the more popular Javascript asynchronous programming solutions.
[0062] try...catch: JavaScript syntax for catching exceptions.
[0063] Figure 2 A method flow chart of a page rendering method provided in an embodiment of the present application, the method comprising:
[0064] S201: An asynchronous data acquisition request for a target page sent to a server is detected.
[0065] In a possible implementation, asynchronous data acquisition requests can be monitored by creating a container component. The container component can be an Asynchronous container component, in which a JavaScript try catch method is used to catch exceptions. Once an exception is caught, the component stops rendering.
[0066] In a possible implementation, the detecting an asynchronous data acquisition request for a target page sent to a server includes:
[0067] The container component detects an asynchronous data acquisition request for a target page sent to a server by using a capture statement (try catch).
[0068] S202: During the data waiting period, the first page rendering component is instructed to stop rendering through the generated abnormal state identifier.
[0069] The data waiting period is a time interval from sending the asynchronous data acquisition request to acquiring the page data returned based on the asynchronous data acquisition request.
[0070] In a possible implementation, the asynchronous data acquisition request is generated by encapsulating an asynchronous operation method.
[0071] By encapsulating an asynchronous operation method, when trying to read data from the result returned by the method, there are two possibilities: one is that the data is ready, then the result is returned directly; the other possibility is that the asynchronous operation has not ended and the data is not ready. At this time, the method will throw an "exception". This "exception" is not a normal code error. The exception is a Promise object that encapsulates the request data, which contains the actual data request method.
[0072] That is, in a possible implementation, when the asynchronous data acquisition request is detected, a Promise object is obtained according to the asynchronous data acquisition request, and the Promise object is used to identify whether to obtain the page data requested by the asynchronous data acquisition request;
[0073] Generate a corresponding status identifier according to the data acquisition status identified by the Promise object;
[0074] If the Promise object identifier has not obtained the page data, the abnormal state identifier is generated; if the Promise object identifier has obtained the page data, the operation of adjusting the abnormal state identifier to a normal state identifier is performed.
[0075] like Figure 3As shown, when the asynchronous data acquisition request detected in S201 is detected by a container component or the like, an exception (throw error) can be thrown based on the asynchronous operation method encapsulated therein to interrupt the page rendering of the first page rendering component, so that the first page rendering component will not render the target page based on the initialized rendering data.
[0076] S203: Acquire page data corresponding to the target page returned from the server.
[0077] S204: Adjust the abnormal state flag to a normal state flag, and instruct the first page rendering component to render the target page according to the page data.
[0078] That is to say, by capturing the Promise object of the encapsulated request in S202, the next step is of course to execute this Promise, and terminate the rendering of the first page rendering component before the success status is returned; after the success status, obtain the data, and then enable the first page rendering component again. At this time, the normal page data has been read, so normal page rendering can be performed through the first page rendering component.
[0079] The essence of the embodiment of the present application is to block the rendering of the rendering component before requesting asynchronous data, and wait until the asynchronous data request is completed before rendering the page. The method of blocking component rendering is to throw an exception, which is the method of requesting asynchronous data. If the asynchronous code is executed synchronously, it will definitely not render normally, so it is still necessary to request data first, wait until the data is returned, and then use the returned data for rendering. The key point is this word "wait", how to stop the synchronous rendering and wait for the asynchronous data request? The exception can stop the code from executing, and of course it can also stop the rendering, so before the background data is returned, it is necessary to throw an exception to terminate the rendering.
[0080] It should be noted that the embodiments of the present application are mainly applied to the stage of page initialization, and there may be different implementation stages depending on the different states of the target page.
[0081] In one possible implementation, if the target page is the homepage of the page application, the asynchronous data acquisition request is sent when the page application is opened; if the target page is a page in the page application, the asynchronous data acquisition request is sent when the display page is switched to the target page through the page application.
[0082] In order to avoid the target page being in a state of waiting for rendering before the page data is obtained, which makes it difficult for the user to understand the situation of the page rendering stage. In a possible implementation, during the data waiting period, the method further includes:
[0083] Instruct the second page rendering component to pre-render the target page according to preset parameters to display a page loading indication. The indication may be a similar explanatory text such as "page loading", so that the user can understand the current page loading status.
[0084] According to the above embodiment, it is clear that an asynchronous data acquisition request for a target page sent to a server is detected; during the data waiting period, the first page rendering component is instructed to stop rendering through the generated abnormal status identifier, and the data waiting period is the time interval from sending the asynchronous data acquisition request to obtaining the page data returned based on the asynchronous data acquisition request; the page data corresponding to the target page returned from the server is obtained; the abnormal status identifier is adjusted to a normal status identifier, and the first page rendering component is instructed to render the target page according to the page data. In this way, before the real page data is obtained, no invalid additional page rendering will be made, which reduces the number of page rendering times, and can avoid users mistakenly believing that there is an abnormality in the page rendering, thereby improving the user experience.
[0085] Next, we will explain based on specific application scenarios. Figure 4 As shown:
[0086] Step 1) Create a container component named Asynchronous. In this component, use the trycatch method of JavaScript to catch exceptions. Once an exception is caught, the component will stop rendering. The exception is the method of asynchronously requesting data in step 2). If the exception is not caught, it means that the data is not an asynchronous request, and the component will be rendered directly.
[0087] That is to say, create a CreateFetcher method, which has a status field, which defaults to "waiting". This method returns a Promise of the requested data, which is thrown when the page is initialized because the status is "waiting".
[0088] Step 2) Create a method named CreateFetcher, which has a status field, which defaults to "waiting". It encapsulates an asynchronous request operation method. When the page is initialized, the status is "waiting", which returns a Promise object.
[0089] Step 3) In the container component of step 1), use try catch to capture the asynchronous request returned in step 2). The request is a Promise. Execute this Promise and execute step 4) before the Promise returns the result. After the Promise succeeds, get the data and render the component again. At this time, the rendering has read the normal data, so it can be rendered normally.
[0090] Step 4) To avoid the generation of blank pages, render a user-defined component that is loading data, that is, the Loading component, which can be customized by the user.
[0091] like Figure 5 As shown, based on Figure 1-Figure 4 The corresponding method embodiment, Figure 5 A device structure diagram of a page rendering device provided in an embodiment of the present application, wherein the device includes a detection unit 501, an indication unit 502, an acquisition unit 503, and an adjustment unit 504:
[0092] The detection unit 501 is used to detect an asynchronous data acquisition request for a target page sent to a server;
[0093] The instructing unit 502 is used to instruct the first page rendering component to stop rendering by generating an abnormal state identifier during a data waiting period, wherein the data waiting period is a time interval from sending the asynchronous data acquisition request to acquiring the page data returned based on the asynchronous data acquisition request;
[0094] The acquisition unit 503 is used to acquire the page data corresponding to the target page returned from the server;
[0095] The adjusting unit 504 is used to adjust the abnormal state flag to a normal state flag, and instruct the first page rendering component to render the target page according to the page data.
[0096] Optionally, the device further comprises a creation unit:
[0097] The creation unit is used to create a container component;
[0098] The detection unit is also used for:
[0099] The container component detects an asynchronous data acquisition request for a target page sent to a server by using a capture statement.
[0100] Optionally, the indicating unit is further used for:
[0101] Generate the asynchronous data acquisition request by encapsulating the asynchronous operation method;
[0102] When the asynchronous data acquisition request is detected, a Promise object is obtained according to the asynchronous data acquisition request, and the Promise object is used to identify whether to obtain the page data requested by the asynchronous data acquisition request;
[0103] Generate a corresponding status identifier according to the data acquisition status identified by the Promise object;
[0104] If the Promise object identifier has not obtained the page data, the abnormal state identifier is generated; if the Promise object identifier has obtained the page data, the abnormal state identifier is adjusted to a normal state identifier.
[0105] Optionally, the device further includes a sending unit, and the sending unit is used to:
[0106] If the target page is the homepage of the page application, when the page application is opened, the asynchronous data acquisition request is sent;
[0107] If the target page is a page in the page application, when the display page is switched to the target page through the page application, the asynchronous data acquisition request is sent.
[0108] Optionally, during the data waiting period, the indicating unit is further used to:
[0109] Instruct the second page rendering component to pre-render the target page according to preset parameters to show an indication of page loading.
[0110] A person of ordinary skill in the art can understand that all or part of the steps of implementing the above-mentioned method embodiment can be completed by hardware related to program instructions, and the above-mentioned program can be stored in a computer-readable storage medium. When the program is executed, it executes the steps of the above-mentioned method embodiment; and the above-mentioned storage medium can be at least one of the following media: read-only memory (English: read-only memory, abbreviated: ROM), RAM, magnetic disk or optical disk, etc. Various media that can store program codes.
[0111] It should be noted that each embodiment in this specification is described in a progressive manner, and the same and similar parts between the embodiments can refer to each other, and each embodiment focuses on the differences from other embodiments. In particular, for the device and system embodiments, since they are basically similar to the method embodiments, the description is relatively simple, and the relevant parts can refer to the partial description of the method embodiments. The device and system embodiments described above are merely schematic, in which the units described as separate components may or may not be physically separated, and the components displayed as units may or may not be physical units, that is, they may be located in one place, or they may be distributed on multiple network units. Some or all of the modules can be selected according to actual needs to achieve the purpose of the scheme of this embodiment. Ordinary technicians in this field can understand and implement it without paying creative work.
[0112] The above is only a specific implementation of the present application, but the protection scope of the present application is not limited thereto. Any changes or substitutions that can be easily thought of by a person skilled in the art within the technical scope disclosed in the present application should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims.
Claims
1. A page rendering method, characterized in that: The method comprises: Create a container component; Generate the asynchronous data acquisition request by encapsulating the asynchronous operation method; The container component detects an asynchronous data acquisition request for a target page sent to a server using a capture statement; When the asynchronous data acquisition request is detected, a Promise object is obtained according to the asynchronous data acquisition request, and the Promise object is used to identify whether to obtain the page data requested by the asynchronous data acquisition request; Generate a corresponding status identifier according to the data acquisition status identified by the Promise object; Wherein, if the Promise object identifier has not obtained the page data, the abnormal state identifier is generated; if the Promise object identifier has obtained the page data, the operation of adjusting the abnormal state identifier to a normal state identifier is performed; During the data waiting period, the first page rendering component is instructed to stop rendering through the generated abnormal status identifier, and the data waiting period is the time interval from sending the asynchronous data acquisition request to acquiring the page data returned based on the asynchronous data acquisition request; Acquire page data corresponding to the target page returned from the server; The abnormal state flag is adjusted to a normal state flag, and the first page rendering component is instructed to render the target page according to the page data.
2. The method according to claim 1, characterized in that: The method further comprises: If the target page is the homepage of the page application, when the page application is opened, the asynchronous data acquisition request is sent; If the target page is a page in the page application, when the display page is switched to the target page through the page application, the asynchronous data acquisition request is sent.
3. The method according to claim 1 or 2, characterized in that: During the data waiting period, the method further includes: Instruct the second page rendering component to pre-render the target page according to preset parameters to show an indication of page loading.
4. A page rendering device, characterized in that: The device comprises a creation unit, a detection unit, an indication unit, an acquisition unit and an adjustment unit: The creation unit is used to create a container component; The indicating unit is used to generate the asynchronous data acquisition request by encapsulating the asynchronous operation method; The detection unit is used to detect, by the container component, an asynchronous data acquisition request for a target page sent to a server using a capture statement; The indicating unit is used to generate the asynchronous data acquisition request by encapsulating the asynchronous operation method; when the asynchronous data acquisition request is detected, a Promise object is obtained according to the asynchronous data acquisition request, and the Promise object is used to identify whether to obtain the page data requested by the asynchronous data acquisition request; according to the data acquisition situation identified by the Promise object, a corresponding state identifier is generated; wherein, if the Promise object indicates that the page data has not been obtained, the abnormal state identifier is generated, and if the Promise object indicates that the page data has been obtained, the abnormal state identifier is adjusted to a normal state identifier; The instructing unit is further used to instruct the first page rendering component to stop rendering by generating an abnormal state identifier during a data waiting period, wherein the data waiting period is a time interval from sending the asynchronous data acquisition request to acquiring the page data returned based on the asynchronous data acquisition request; The acquisition unit is used to acquire the page data corresponding to the target page returned from the server; The adjustment unit is used to adjust the abnormal state identifier to a normal state identifier, and instruct the first page rendering component to render the target page according to the page data.
5. The device according to claim 4, characterized in that The device further comprises a sending unit, wherein the sending unit is configured to: If the target page is the homepage of the page application, when the page application is opened, the asynchronous data acquisition request is sent; If the target page is a page in the page application, when the display page is switched to the target page through the page application, the asynchronous data acquisition request is sent.
6. The device according to claim 4 or 5, characterized in that During the data waiting period, the indicating unit is further used for: Instruct the second page rendering component to pre-render the target page according to preset parameters to show an indication of page loading.
Citation Information
Patent Citations
Method, device, and system for generating page
CN105843814A
Page resource display method and device of target page, and page recourse loading method and device of target page
CN107229642A