Web page operation method and device, and computer-readable storage medium
By monitoring the web page loading scene and callback function to obtain parameter information, the rendering time of the first frame image is determined, which solves the problem of inaccurate hiding timing of waiting objects during web page loading and improves user experience.
Patent Information
- Application Number
- CN202111055944.5
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2021-09-09
- Publication Date
- 2025-10-10
- Estimated Expiration
- 2041-09-09
AI Technical Summary
In the prior art, the hiding timing of the waiting object during web page loading is not accurately judged, resulting in a degraded user experience and possible problems such as a blank web page screen or continuous waiting.
By monitoring the first target callback function to obtain parameter information, the rendering completion time of the first frame image of the webpage is determined, and the loading waiting object is hidden at the time.
Accurately hide loading waiting objects to avoid white screen of web pages, improve the timeliness of user operations, and enhance user experience.
Smart Images

Figure CN115795191B_ABST
Abstract
Description
Technical Field
[0001] The present application relates to the field of information processing technology, and in particular to a web page operation method and device thereof, and a computer-readable storage medium. Background Art
[0002] After the terminal detects that a user has accessed a web page through a browser, it will first obtain the corresponding web page information from the server, and then perform web page processing such as loading and rendering the web page based on the obtained web page information. While the terminal is processing the web page, the user will be in a waiting state. In order to provide users with a better user experience, a loading waiting object is often designed to cover the top of the web page. When the web page content is not visible, the loading waiting object is displayed to prompt the user that the web page is in a loading state. When the web page content is visible, the loading waiting object is hidden and the web page content is displayed to the user.
[0003] However, in related technologies, the timing of hiding the loading wait object is not accurately determined, which affects the user experience. For example, if the loading wait object is hidden too early, the user will see a white screen, which may lead the user to mistakenly believe that the webpage has failed to load. For example, if the loading wait object is hidden too late, the user will be in a continuous waiting state, which will affect the user's webpage operation. Summary of the Invention
[0004] The following is a summary of the subject matter described in detail herein. This summary is not intended to limit the scope of the claims.
[0005] The embodiments of the present application provide a web page operation method and apparatus thereof, and a computer-readable storage medium, which can hide loading waiting objects at a more accurate time, allowing users to perform web page operations in a timely manner.
[0006] In one aspect, an embodiment of the present application provides a method for running a webpage, comprising the following steps:
[0007] In response to an operation that triggers web page loading, displaying a loading waiting object;
[0008] Determine a webpage loading scenario, and monitor a first target callback function according to the webpage loading scenario;
[0009] When monitoring that the first target callback function is called, obtaining parameter information corresponding to the first target callback function;
[0010] When the parameter information is target parameter information, determining the end rendering time of the first frame image of the webpage according to the parameter information, wherein the target parameter information indicates that the first frame image of the webpage has been rendered and the second frame image of the webpage has not been rendered;
[0011] The loading waiting object is hidden according to the end rendering time.
[0012] On the other hand, an embodiment of the present application further provides a web page running device, comprising:
[0013] A display unit, configured to display a loading waiting object in response to an operation triggering web page loading;
[0014] a scenario determination unit, configured to determine a webpage loading scenario and monitor a first target callback function according to the webpage loading scenario;
[0015] an information acquisition unit, configured to acquire parameter information corresponding to the first target callback function when monitoring that the first target callback function is called;
[0016] a time determination unit, configured to determine, when the parameter information is target parameter information, a rendering end time of the first frame image of the webpage according to the parameter information, wherein the target parameter information indicates that the first frame image of the webpage has been rendered and the second frame image of the webpage has not been rendered;
[0017] The first hiding unit is configured to hide the loading waiting object according to the end rendering time.
[0018] Optionally, the scene determination unit includes:
[0019] a first monitoring unit, configured to monitor a second target callback function and obtain a calling result of the second target callback function, wherein the second target callback function is a function called before rendering a first frame image of the webpage;
[0020] a loading status determining unit, configured to determine a webpage loading status according to the calling result;
[0021] The loading scenario determining unit is configured to determine a webpage loading scenario according to the webpage loading state.
[0022] Optionally, the webpage loading scenario is a scenario where a previous webpage has been loaded when the current webpage is loaded, and the first target callback function is a document state change function; the information acquisition unit includes:
[0023] A parameter determination unit, configured to determine parameter information for triggering the calling of the document state change function;
[0024] The first acquiring unit is configured to acquire the parameter information.
[0025] Optionally, the webpage loading scenario is a scenario where a previous webpage has not yet been loaded when the current webpage is loaded, the first target callback function is a request animation frame function, and a callback detection function is provided in the request animation frame function; the information acquisition unit includes:
[0026] A second monitoring unit is used to monitor the callback detection function in the animation frame request function;
[0027] The second acquiring unit is configured to acquire parameter information outputted when the callback detection function is called for the second time upon monitoring that the callback detection function is called for the second time.
[0028] Optionally, the information acquisition unit further includes:
[0029] a third acquiring unit, configured to, upon monitoring that the callback detection function is called for the first time, acquire result information output when the callback detection function is called for the first time;
[0030] A function calling unit is used to call the callback detection function for a second time according to the result information.
[0031] Optionally, the information acquisition unit further includes:
[0032] A third monitoring unit is used to monitor the first loading end function;
[0033] The function injection unit is used to inject the requested animation frame function into the web page when monitoring that the first loading end function is called.
[0034] Optionally, the webpage running device further includes:
[0035] A first timing unit, configured to perform timing via a first timer;
[0036] The second hiding unit is configured to hide the loading waiting object when the accumulated time of the first timer reaches a first preset time threshold and the rendering end time is not obtained.
[0037] Optionally, the webpage running device further includes:
[0038] The first removing unit is configured to remove the first timer when the loading waiting object is hidden.
[0039] Optionally, the webpage running device further includes:
[0040] A second timing unit, configured to perform timing via a second timer;
[0041] The third hiding unit is configured to hide the loading waiting object when the accumulated time of the second timer reaches a second preset time threshold and the rendering end time is not obtained.
[0042] Optionally, the webpage running device further includes:
[0043] The second removing unit is configured to remove the second timer when the loading waiting object is hidden.
[0044] Optionally, the time determination unit includes:
[0045] a first time determination subunit, configured to, when the parameter information is target parameter information, determine a determination time when the parameter information is determined to be the target parameter information;
[0046] The second time determination subunit is used to determine the end rendering time of the first frame image of the webpage according to the judgment time.
[0047] Optionally, the first hidden unit includes:
[0048] A fourth monitoring unit, configured to monitor the second loading end function;
[0049] The hiding subunit is used to hide the loading waiting object according to the end rendering time when the second loading end function is not monitored to be called.
[0050] On the other hand, an embodiment of the present application further provides a web page running device, comprising:
[0051] at least one processor;
[0052] at least one memory for storing at least one program;
[0053] When at least one of the programs is executed by at least one of the processors, the web page running method described above is implemented.
[0054] On the other hand, an embodiment of the present application further provides a computer-readable storage medium, which stores a program executable by a processor. When the program executable by the processor is executed by the processor, it is used to implement the web page operation method as described above.
[0055] In another aspect, embodiments of the present application further provide a computer program product or computer program, comprising computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the webpage operation method described above.
[0056] When an operation is detected that triggers web page loading, a loading wait object may be displayed to prompt the user that the web page is loading in order to avoid displaying a white screen while the user is waiting. During the display of the loading wait object, a web page loading scenario is first determined, and then a first target callback function is monitored based on the web page loading scenario. When the first target callback function is monitored to be called, parameter information corresponding to the first target callback function is obtained. At this time, if the parameter information is target parameter information indicating that the first frame of the web page has been rendered and the second frame of the web page has not been rendered, the end rendering time of the first frame of the web page can be determined based on the parameter information. Since the end rendering time is determined when the parameter information is target parameter information, and the target parameter information indicates that the first frame of the web page has been rendered and the second frame of the web page has not been rendered, the end rendering time can be considered to be the time when the first frame of the web page has just finished rendering. After the first frame of the web page has finished rendering, the web page is ready to display content to the user. Therefore, hiding the loading wait object based on the end rendering time can achieve the purpose of hiding the loading wait object at a more accurate time, allowing users to perform web page operations in a timely manner, thereby improving the user experience.
[0057] Other features and advantages of the present application will be described in the following description, and in part will become apparent from the description, or will be understood by practicing the present application. The purposes and other advantages of the present application can be achieved and obtained through the structures particularly pointed out in the description, claims and drawings. BRIEF DESCRIPTION OF THE DRAWINGS
[0058] The accompanying drawings are used to provide a further understanding of the technical solution of the present application and constitute a part of the specification. Together with the embodiments of the present application, they are used to explain the technical solution of the present application and do not constitute a limitation on the technical solution of the present application.
[0059] Figure 1 This is a schematic diagram of an implementation environment provided by an embodiment of the present application;
[0060] Figure 2 This is a flow chart of a web page operation method provided by one embodiment of the present application;
[0061] Figure 3 This is a schematic diagram of a web page loading with a loading waiting object provided by an embodiment of the present application;
[0062] Figure 4 This is a schematic diagram of web page loading that displays the first frame image of a web page provided by an embodiment of the present application;
[0063] Figure 5 This is a schematic diagram of a web page provided by an embodiment of the present application when the web page loading is complete;
[0064] Figure 6 yes Figure 2 A flow chart of a specific method of step 120;
[0065] Figure 7 yes Figure 2 A flow chart of a specific method of step 130;
[0066] Figure 8 yes Figure 2 Another specific method flow chart of step 130;
[0067] Figure 9 yes Figure 2 Another specific method flow chart of step 130;
[0068] Figure 10 yes Figure 2 Another specific method flow chart of step 130;
[0069] Figure 11 This is a flowchart of a web page operation method provided by another embodiment of the present application;
[0070] Figure 12 This is a flowchart of a web page operation method provided by another embodiment of the present application;
[0071] Figure 13 yes Figure 2 Another specific method flow chart of step 140;
[0072] Figure 14 This is a flowchart of a web page operation method provided by a specific example of this application;
[0073] Figure 15 is a flowchart of a web page operation method provided by another specific example of this application;
[0074] Figure 16 This is a schematic diagram of a web page running device provided by one embodiment of the present application;
[0075] Figure 17 This is a schematic diagram of a web page running device provided in another embodiment of the present application. DETAILED DESCRIPTION
[0076] The present application is further described below in conjunction with the accompanying drawings and specific embodiments. The described embodiments should not be considered as limiting the present application. All other embodiments obtained by ordinary technicians in this field without making creative efforts are within the scope of protection of this application.
[0077] In the following description, reference is made to "some embodiments", which describe a subset of all possible embodiments, but which can be understood as a same or different subset of all possible embodiments, and which can be combined with each other without conflict.
[0078] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application belongs. The terminology used in the description herein is for describing particular embodiments only and is not intended to be limiting of the application.
[0079] Before the present embodiments of the application are further described, the nomenclature and terminology used herein are explained so that the description herein applies equally to the nomenclature and terminology as follows.
[0080] 1) Loading waiting object, refers to an object used to prompt the user to wait. In the process of loading the content of the web page, in order to avoid the user from seeing the white screen and affecting the user's experience, a loading waiting object is overlaid and displayed on the web page when the web page content fails to be visualized, prompting the user that the web page is in the process of loading, and when the web page content has been visualized, the loading waiting object is hidden, and the web page content is displayed to the user. The loading waiting object can be implemented by using a loading progress bar or a repeatedly displayed animation.
[0081] 2) Callback function, refers to a function called by a function pointer. If the pointer (or address) of function A is passed as a parameter to function B, when the pointer is used to call the function A pointed to by the pointer, the function A is called as a callback function. The callback function is not directly called by its implementation party, but is called by another party when a specific event or condition occurs, for responding to the event or condition.
[0082] 3) First frame image, refers to the first frame image loaded by the web page. When the first frame image of the web page is drawn, the web page begins to display the web page elements visible to the user. First screen image, refers to the web page image in which the visible range of the screen displays the web page elements. According to the loading efficiency of the web page, the first frame image may not display the web page elements in the visible range of the screen, while the first screen image displays the web page elements in the visible range of the screen.
[0083] 4) Second frame image, refers to the second frame image loaded by the web page. When the first frame image of the web page is drawn, the web page performs drawing of the second frame image.
[0084] 5) document state change function (onreadystatechange function), is a callback function, when the attribute type of document.readystate in the webpage changes each time, the onreadystatechange function will be triggered to call.
[0085] 6) document.readystate, is one of the life cycle of the webpage inside when the webpage view (WebView) loads the webpage, WebView is a control used to display the webpage in the Android system. document.readystate can include five attribute types, which correspond to five states respectively, the five states are uninitialized state, loading state, partial file loading completion state, end rendering but embedded resource is still in loading state (interactive) and file complete loading completion state (complete). When the attribute type of document.readystate is interactive, it means that the webpage has completed the loading of the page style.
[0086] 7) request animation frame function (requestAnimationFrame function), is a callback function, is an interface function used by the browser for timing loop operation, the main use is to redraw the webpage by frame. requestAnimationFrame function needs to use a callback function as a parameter, this callback function as a parameter will be called before the webpage is redrawn.
[0087] 8) loading end function (onPageFinish function), is a callback function, is one of the life cycle callback functions of WebView for webpage loading. When the onPageFinish function is called, it means that the current first screen image of the webpage has been loaded.
[0088] 9) end rendering time, refers to the time when the frame image of the webpage is just rendered, for example, the end rendering time of the first frame image of the webpage refers to the time when the first frame image is just rendered.
[0089] 10) onPageCommitVisible function, is a callback function, is one of the life cycle callback functions of WebView for webpage loading. When the onPageCommitVisible function is called, it means that the last loaded webpage will not be rendered again, and the webpage being loaded will start to draw the first frame image.
[0090] When a user accesses a web page through a browser, the browser generally performs the following tasks: loading, parsing, and rendering. First, the browser performs domain name resolution based on the Uniform Resource Locator (URL) requested by the user, initiates a resource acquisition request to the server, and receives the resource file sent by the server. The browser then parses the received resource file and constructs the corresponding internal data structures, such as the Document Object Model (DOM) tree of Hypertext Markup Language (HTML), the object property table of JavaScript, and the style rules of Cascading Style Sheets (CSS). Next, the browser constructs a rendering tree and calculates the position and style of each element of the web page. Finally, the browser renders the web page according to the rendering tree. Once the browser completes rendering, the user can view the content displayed on the web page. Because the browser takes a certain amount of time to process the web page, during this time, the user can only wait for the web page content to finish loading. In order to provide users with a better user experience, a loading waiting object is often designed to cover the top of the web page. When the web page content cannot be visualized, the loading waiting object is displayed to prompt the user that the web page is in a loading state. When the web page content has been visualized, the loading waiting object is hidden and the web page content is displayed to the user. However, if the timing of hiding the loading waiting object is not accurately judged, it will affect the user's user experience. For example, if the loading waiting object is hidden too early, the user will see a white screen of the web page, which will cause the user to mistakenly believe that the web page has failed to load; for example, if the loading waiting object is hidden too late, the user will continue to be in a waiting state, which will affect the user's web page operations. Since the web page elements visible to the user begin to appear when the first frame image is rendered, accurately judging the rendering time of the first frame image of the web page will be able to achieve the purpose of accurately judging the hiding time of the loading waiting object.
[0091] In the related art, it is generally believed that the first frame image of the web page has been rendered when the onPageCommitVisible function or the onPageFinish function is called. However, the judgment of the rendering time of the first frame image in these related arts is not accurate. In fact, when the onPageCommitVisible function is called, the first frame image of the web page has not really started to render, that is, the judgment time is too early. When the onPageFinish function is called, if the previous web page has not been loaded when the current web page is loaded, then because the rendering channel of the browser is currently occupied by the previous web page, the first frame image of the current web page has not really started to render, that is, the judgment time is too early; if the previous web page has been rendered when the current web page is loaded, then when the onPageFinish function is called, the current web page has more than rendered the first frame image, that is, the judgment time is too late.
[0092] In order to accurately judge the rendering time of the first frame image of a web page and achieve the purpose of accurately judging the hiding timing of the loading waiting object, the embodiment of the present application provides a web page running method, a web page running device and a computer-readable storage medium. When an operation for triggering the loading of a web page is detected, the loading waiting object is first displayed to prompt the user that the web page is in a loading state, avoiding displaying a white screen of the web page while the user is waiting; in the process of displaying the loading waiting object, the web page loading scenario is first determined, and then the first target callback function is monitored according to the web page loading scenario. When the first target callback function is monitored to be called, the parameter information corresponding to the first target callback function is obtained. At this time, when the parameter information is used to indicate that the first frame image of the web page has been rendered, When the target parameter information is completed and the secondary frame image of the web page has not been rendered, the end rendering time of the first frame image of the web page is determined according to the parameter information. Since the end rendering time is determined when the parameter information is the target parameter information, and the target parameter information indicates that the first frame image of the web page has been rendered and the secondary frame image of the web page has not been rendered, it can be considered that the end rendering time is the time when the first frame image of the web page has just been rendered. After the first frame image of the web page is completed, the web page can display content to the user. Therefore, hiding the loading waiting object according to the end rendering time can achieve the purpose of hiding the loading waiting object at a more accurate time, so that the user can perform web page operations in time, thereby improving the user experience.
[0093] Figure 1 This is a schematic diagram of an implementation environment provided by an embodiment of the present application. Figure 1 , the implementation environment includes a server 101 and a terminal 102.
[0094] Server 101 can be an independent physical server, or a server cluster or distributed system composed of multiple physical servers. It can also be a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, CDN (Content Delivery Network), and big data and artificial intelligence platforms.
[0095] The terminal 201 may be a smartphone, tablet computer, or smartwatch, but is not limited thereto. Optionally, a browser client is installed on the terminal 201, and the user can access the web page through the browser client. The terminal 201 and the server 101 may be connected directly or indirectly via wired or wireless communication, which is not limited in this application.
[0096] The terminal 201 at least has the functions of requesting web page content from the server 101, loading the web page content, and displaying a loading waiting object during the process of loading the web page content to prompt the user that the web page is in a loading state. In addition, the terminal 201 can also have the function of hiding the loading waiting object when the first frame image of the web page is rendered to display the web page content to the user. For example, when the user triggers the web page to load, the terminal 201 can first display the loading waiting object, then determine the web page loading scenario, and monitor the first target callback function according to the web page loading scenario. When the first target callback function is monitored to be called, the parameter information corresponding to the first target callback function is obtained. If the parameter information is target parameter information for indicating that the first frame image of the web page has been rendered and the secondary frame image of the web page has not been rendered, the end rendering time of the first frame image of the web page is determined according to the parameter information, and then the loading waiting object is hidden according to the end rendering time.
[0097] In an optional implementation, the terminal 201 responds to the user triggering the web page loading operation through the browser client, first displays the loading waiting object on the screen, then determines the current web page loading scenario, and monitors whether the first target callback function is called according to the current web page loading scenario; when it is monitored that the first target callback function is called, the terminal 201 obtains the parameter information corresponding to the first target callback function, and when it is determined that the parameter information is the target parameter information used to represent that the first frame image of the web page has been rendered and the secondary frame image of the web page has not been rendered, the terminal 201 uses the time when the parameter information is obtained as the end rendering time of the first frame image of the web page, hides the loading waiting object, and displays the content of the web page to the user, so that the user can perform web page operations.
[0098] Figure 2This is a flow chart of a web page operation method provided by an embodiment of the present application. In this embodiment, the terminal is used as an example for explanation. Figure 2 The web page operation method includes but is not limited to steps 110 to 150.
[0099] Step 110: In response to the operation of triggering the loading of the webpage, a loading waiting object is displayed.
[0100] In this step, when it is detected that the user is operating the browser to trigger the loading of the web page, the terminal can obtain the corresponding web page information from the server in response to the operation and load the web page information in the browser. In addition, while the browser is loading the web page information, the terminal can display a loading waiting object to prompt the user that the web page is in the loading state, so as to avoid the user seeing a white screen while waiting for the web page to load and mistakenly believing that the web page loading has failed.
[0101] It should be noted that the operation of triggering the loading of a web page can be implemented in different ways, which is not specifically limited in this embodiment. For example, the operation of triggering the loading of a web page can be the user entering the URL to be visited in the browser and pressing the Enter key, or the user clicking a web link on the web page displayed in the browser.
[0102] It should be noted that the style of the loading waiting object can be implemented in different ways, and this embodiment does not specifically limit this. For example, the loading waiting object can be a loading progress bar, a repeatedly displayed animation, or a text style such as "Loading".
[0103] Step 120: Determine a webpage loading scenario, and monitor a first target callback function according to the webpage loading scenario.
[0104] It should be noted that when the terminal detects that the user has triggered an operation to load a web page, the terminal will respond to the operation and obtain the corresponding web page information from the server, and will load the web page information in the browser. In the process of the terminal obtaining the corresponding web page information from the server and loading the web page information in the browser, the terminal can first determine the current web page loading scenario and monitor the first target callback function according to the web page loading scenario, so that the subsequent steps can determine the end rendering time of the first frame image of the web page according to the call of the first target callback function, and thus can further hide the loading waiting object according to the end rendering time.
[0105] It should be noted that, depending on the actual application situation, the web page loading scenario may be of different scenario types, for example, it may be a single web page loading scenario or a multi-web page loading scenario. When the web page loading scenario is a multi-web page loading scenario, depending on the actual application situation, it may be a scenario where the previous web page has been loaded when the current web page is loaded, or it may be a scenario where the previous web page has not been loaded when the current web page is loaded. When the web page loading scenario is of different scenario types, the corresponding first target callback function for monitoring will also be different, and this embodiment does not make specific limitations on this. For example, when the web page loading scenario is a scenario where the previous web page has been loaded when the current web page is loaded, the first target callback function may be the onreadystatechange function; when the web page loading scenario is a scenario where the previous web page has not been loaded when the current web page is loaded, the first target callback function may be the requestAnimationFrame function.
[0106] Step 130: When it is monitored that the first target callback function is called, parameter information corresponding to the first target callback function is obtained.
[0107] In this step, since the first target callback function is monitored in step 120, when the first target callback function is monitored to be called, the parameter information corresponding to the first target callback function can be obtained, so that the subsequent steps can determine the end rendering time of the first frame image of the web page according to the parameter information, so that the loading waiting object can be further hidden according to the end rendering time.
[0108] It should be noted that since the first target callback function may vary depending on the web page loading scenario, the parameter information corresponding to different first target callback functions may also vary, and this embodiment does not specifically limit this. For example, when the first target callback function is the onreadystatechange function, the parameter information may be the parameter information that triggers the call of the onreadystatechange function; when the first target callback function is the requestAnimationFrame function, the parameter information may be the parameter information output when the callback function set in the requestAnimationFrame function is called.
[0109] Step 140: When the parameter information is target parameter information, determine the end rendering time of the first frame image of the webpage according to the parameter information.
[0110] In the step, the target parameter information indicates that the first frame image of the webpage has been rendered completely and the second frame image of the webpage has not been rendered. Therefore, when the parameter information is determined as the target parameter information, it indicates that the first frame image of the webpage has been rendered completely and the second frame image of the webpage has not been rendered, so that the end rendering time of the first frame image of the webpage can be determined according to the parameter information, thereby facilitating the hiding of the loading waiting object according to the end rendering time in the subsequent step, achieving the purpose of hiding the loading waiting object at a more accurate time.
[0111] It should be noted that when the first target callback function is the onreadystatechange function, the target parameter information can be document.readystate of the interactive attribute type; when the first target callback function is the requestAnimationFrame function, the target parameter information can be the parameter information output by the callback function set in the requestAnimationFrame function when the callback function is called for the second time.
[0112] It should be noted that the end rendering time of the first frame image of the webpage according to the parameter information can have different implementation manners, and the embodiment does not make specific limitation on this. For example, the time when the parameter information is determined as the target parameter information can be taken as the end rendering time of the first frame image of the webpage; for another example, the time when the parameter information is determined as the target parameter information can be delayed by a preset value as the end rendering time of the first frame image of the webpage. It should be noted that when the time when the parameter information is determined as the target parameter information is delayed by a preset value as the end rendering time of the first frame image of the webpage, the specific value of the preset value needs to be such that the end rendering time is between the time when the first frame image is rendered completely and the time when the second frame image is started to be rendered.
[0113] Step 150: hiding the loading waiting object according to the end rendering time.
[0114] In the step, since the end rendering time of the first frame image of the webpage is determined in step 140, the loading waiting object can be hidden according to the end rendering time, achieving the purpose of being able to hide the loading waiting object at a more accurate time, thereby enabling the user to perform webpage operation in time and improving the user's use experience.
[0115] It should be noted that there are different ways to hide the loading waiting object according to the end rendering time, and this embodiment does not specifically limit this. For example, the loading waiting object can be hidden at the moment of the end rendering time; for another example, the loading waiting object can be hidden after a preset time delay from the moment of the end rendering time. It should be noted that when the loading waiting object is hidden at the moment of the end rendering time, the purpose of hiding the loading waiting object at a more accurate time can be achieved, so that the user can perform web page operations in a timely manner, improving the user experience; and when the loading waiting object is hidden after a preset time delay from the moment of the end rendering time, the loading waiting object can be hidden when the web page has actually completed the rendering process of the first frame image, thereby avoiding the problem of a white screen on the web page. It is worth noting that the preset time can be appropriately set according to the actual application situation, for example, it can be set to 1 millisecond, and this embodiment does not specifically limit this.
[0116] In this embodiment, by adopting the web page operation method including the above steps 110 to 150, when an operation for triggering the loading of a web page is detected, such as Figure 3 As shown, the loading waiting object 103 is first displayed to prompt the user that the web page is in a loading state, so as to avoid displaying a white screen of the web page while the user is waiting; in the process of displaying the loading waiting object 103, the web page loading scenario is first determined, and then the first target callback function is monitored according to the web page loading scenario. When the first target callback function is monitored to be called, the parameter information corresponding to the first target callback function is obtained. At this time, when the parameter information is target parameter information for representing that the first frame image of the web page has been rendered and the secondary frame image of the web page has not been rendered, the end rendering time of the first frame image of the web page is determined according to the parameter information. Since the end rendering time is determined when the parameter information is target parameter information, and the target parameter information indicates that the first frame image of the web page has been rendered and the secondary frame image of the web page has not been rendered, it can be considered that the end rendering time is the time when the first frame image of the web page has just been rendered. When the first frame image of the web page is finished rendering, the web page can already display content to the user. Therefore, as shown in FIG. Figure 4 As shown, the loading waiting object can be hidden according to the end rendering time, so that the web page can display its first frame image to the user. As the second frame image and subsequent frame images of the web page are rendered, as shown in FIG. Figure 5 As shown, the webpage will display the complete content to the user, and the user can now browse the complete content of the webpage and interact with the webpage. Therefore, this embodiment can hide the loading waiting object at a more accurate time, thereby avoiding displaying a blank webpage screen to the user and preventing the user from being in a continuous waiting state, allowing the user to perform webpage operations in a timely manner, thereby improving the user's user experience.
[0117] Reference Figure 6 As shown, an embodiment of the present application further illustrates the determination of the web page loading scenario in step 120 . The determination of the web page loading scenario in step 120 may include but is not limited to steps 121 to 123 .
[0118] Step 121: Monitor the second target callback function and obtain the calling result of the second target callback function.
[0119] It should be noted that the second target callback function is a function called before the first frame of the web page is rendered. After executing step 110 to display the loading waiting object, the current web page loading scenario can be determined first, and then subsequent processing steps can be performed according to the current web page loading scenario. In the step of determining the current web page loading scenario, step 121 can be first executed to monitor the second target callback function and obtain the call result of the second target callback function, so that the current web page loading scenario can be determined based on the call result of the second target callback function in subsequent steps.
[0120] It should be noted that the second target callback function can be the onPageCommitVisible function in WebView. If the onPageCommitVisible function is not called, it means that WebView is not yet ready to render the current web page. If the onPageCommitVisible function is called, it means that WebView is about to render the current web page. Therefore, by monitoring the second target callback function and obtaining the call result of the second target callback function, it can be helpful to judge the web page loading scenario in the subsequent steps.
[0121] Step 122: Determine the webpage loading status according to the call result.
[0122] In this step, since the calling result of the second target callback function is obtained in step 121, the web page loading status of the current web page can be determined according to the calling result of the second target callback function, so that the subsequent steps can determine the specific web page loading scenario according to the web page loading status.
[0123] It should be noted that when the second target callback function is the onPageCommitVisible function in WebView, the webpage loading status of the current webpage can be determined based on the call result of the onPageCommitVisible function. For example, if the onPageCommitVisible function is monitored to be called, it can be determined that the webpage loading status is the state of the current webpage being rendered.
[0124] Step 123: Determine the webpage loading scenario according to the webpage loading status.
[0125] In this step, since the webpage loading status is determined in step 122, the specific webpage loading scenario can be further determined based on the webpage loading status, so that the subsequent steps can monitor the corresponding first target callback function based on the specific webpage loading scenario.
[0126] It should be noted that, since the web page loading state determined in step 122 is the loading state of the current web page, in the process of determining the web page loading scene based on the web page loading state, the current specific web page loading scene can be determined in combination with the loading state of the previous web page. For example, assuming that it is detected that the previous web page has completed content loading and content rendering, then in combination with the web page loading state of the current web page, it can be determined that the current web page loading scene is a scene in which the previous web page has been loaded when the current web page is loaded; for another example, assuming that it is detected that the previous web page has not completed content loading and content rendering, then in combination with the web page loading state of the current web page, it can be determined that the current web page loading scene is a scene in which the previous web page has not been loaded when the current web page is loaded.
[0127] Reference Figure 7 As shown, one embodiment of the present application further explains the acquisition of parameter information corresponding to the first target callback function in step 130. In the case where the webpage loading scenario is a scenario where the previous webpage has been loaded when the current webpage is loaded, the first target callback function is the onreadystatechange function. In this case, the acquisition of parameter information corresponding to the first target callback function in step 130 may include but is not limited to the following steps:
[0128] Step 131: Determine the parameter information that triggers the call of the onreadystatechange function;
[0129] Step 132: Obtain parameter information.
[0130] In this embodiment, when the web page loading scenario is that the previous web page has been loaded when the current web page is loaded, it means that the previous web page no longer occupies the rendering channel of WebView, so the current web page can occupy all rendering channels of WebView, so that the current web page can be effectively rendered. In this case, since the first target callback function is the onreadystatechange function, and the onreadystatechange function is called every time the attribute type of document.readystate changes, and when the attribute type of document.readystate changes to interactive, it means that the frame image of the current web page has finished rendering but the embedded resources of the web page are still loading. That is to say, when the attribute type of document.readystate changes to interactive, the first frame image of the current web page may have just been rendered. Therefore, when the onreadystatechange function is monitored to be called, the parameter information that triggers the call of the onreadystatechange function can be determined first (that is, the current attribute type of document.readystate that causes the onreadystatechange function to be called), and then the parameter information is obtained, so that the subsequent steps can determine whether the parameter information is the target parameter information used to characterize that the first frame image of the web page has been rendered and the secondary frame image of the web page has not been rendered.
[0131] Reference Figure 8 As shown, one embodiment of the present application further explains the acquisition of parameter information corresponding to the first target callback function in step 130. In the case where the web page loading scenario is a scenario where the previous web page has not been loaded when the current web page is loaded, the first target callback function is the requestAnimationFrame function, and the requestAnimationFrame function is provided with a callback detection function. At this time, the acquisition of parameter information corresponding to the first target callback function in step 130 may include but is not limited to the following steps:
[0132] Step 133: Monitor the callback detection function in the requestAnimationFrame function;
[0133] Step 134: When it is monitored that the callback detection function is called for the second time, obtain parameter information output when the callback detection function is called for the second time.
[0134] It should be noted that steps 133 to 134 in this embodiment are similar to those in the previous embodiment. Figure 7 Steps 131 to 132 in the illustrated embodiment belong to a parallel technical solution.
[0135] In this embodiment, when the web page loading scenario is a scenario where the previous web page has not been loaded when the current web page is loaded, it means that the previous web page still occupies the rendering channel of WebView, so the current web page cannot use the rendering channel of WebView for effective rendering. In this case, it will be difficult to determine the specific rendering time of WebView for the current web page. However, since the requestAnimationFrame function can trigger the re-rendering of the web page, therefore, in the case where the web page loading scenario is a scenario where the previous web page has not been loaded when the current web page is loaded, if the requestAnimationFrame function is called to trigger the re-rendering of the current web page, then when the callback detection function in the requestAnimationFrame function is monitored to be called, the current time point will be the time point before the first frame image of the current web page is rendered. At this time, if the requestAnimationFrame function is called again, then when the callback detection function in the requestAnimationFrame function is monitored to be called again, the current time point will be the time point when the first frame image of the current web page has just been rendered. Therefore, by monitoring the callback detection function in the requestAnimationFrame function, and when monitoring the callback detection function being called for the second time, obtaining the parameter information output when the callback detection function is called for the second time, it can be helpful for subsequent steps to determine the end rendering time of the first frame image of the current web page based on the parameter information.
[0136] It should be noted that the callback detection function set in the requestAnimationFrame function can be a function with any function. This embodiment does not specifically limit the function of the callback detection function. When the requestAnimationFrame function is called, the callback detection function can be called and can output the corresponding parameter information.
[0137] Reference Figure 9 As shown, an embodiment of the present application further illustrates the step 130 of obtaining parameter information corresponding to the first target callback function. Before executing step 134, the step 130 of obtaining parameter information corresponding to the first target callback function may further include but is not limited to the following steps:
[0138] Step 135: When monitoring that the callback detection function is called for the first time, obtain the result information output when the callback detection function is called for the first time;
[0139] Step 136: Call the callback detection function a second time according to the result information.
[0140] In this embodiment, before executing step 134, the callback detection function in the requestAnimationFrame function is first monitored to see if it is called for the first time. When it is monitored that the callback detection function is called for the first time (the requestAnimationFrame function is also called for the first time at this time), it indicates that the current time is the time before the first frame image of the current web page is rendered. At this time, the result information output when the callback detection function is called for the first time can be obtained first, and then the result information can be used as the trigger condition for calling the requestAnimationFrame function for the second time, so that the requestAnimationFrame function is called for the second time, thereby further triggering the second call to the callback detection function, so that the subsequent steps can determine the end rendering time of the first frame image of the current web page according to the parameter information output when the callback detection function is called for the second time.
[0141] Reference Figure 10 As shown, an embodiment of the present application further illustrates the step 130 of obtaining the parameter information corresponding to the first target callback function. Before executing step 133, the step 130 of obtaining the parameter information corresponding to the first target callback function may further include but is not limited to the following steps:
[0142] Step 137: Monitor the first loading end function;
[0143] Step 138: When it is monitored that the first loading end function is called, the requestAnimationFrame function is injected into the web page.
[0144] In this step, before executing step 133 to monitor the callback detection function in the requestAnimationFrame function, you can first monitor the first load end function. When you monitor that the first load end function is called, it means that WebView has completed the loading process of the first screen image of the web page, that is, WebView has completed the life cycle of loading the current web page. However, since the web page loading scenario is a scenario where the previous web page has not been loaded when the current web page is loaded, when you monitor that the first load end function is called, the current web page has not been effectively rendered, so you can trigger a call to the requestAnimationFrame function so that the current web page can be re-rendered. However, the script program in the web page does not necessarily have a requestAnimationFrame function. In order to be able to effectively call the requestAnimationFrame function, when you monitor that the first load end function is called, you can inject the requestAnimationFrame function into the web page so that you can call the requestAnimationFrame function to re-render the current web page.
[0145] It should be noted that when injecting the requestAnimationFrame function into a web page, the JavaScript program text including the requestAnimationFrame function can be injected into the web page through the evaluateJavascript function. Among them, the evaluateJavascript function can obtain the return string of the JavaScript program text through the ValueCallback callback interface. The evaluateJavascript function is usually used by the WebView to actively obtain information from the JavaScript program text.
[0146] Reference Figure 11 As shown, an embodiment of the present application further illustrates the webpage operation method. After executing step 137, the webpage operation method may further include but is not limited to the following steps:
[0147] Step 160: Counting time by a first timer;
[0148] Step 170: When the accumulated time of the first timer reaches the first preset time threshold and the rendering end time is not obtained, the loading waiting object is hidden.
[0149] It should be noted that, since the onPageFinish function in WebView is unstable in calling, that is, the onPageFinish function may not be called successfully, in order to avoid the problem of not being able to effectively obtain the end rendering time due to the unsuccessful onPageFinish function call, thereby affecting the timeliness of hiding the loading waiting object, after executing step 137, the first timer can be used for timing. When the accumulated time of the first timer reaches the first preset time threshold, it is determined whether the end rendering time of the first frame image of the web page has been obtained. If the judgment result is that the end rendering time has not been obtained, then the loading waiting object can be directly hidden to avoid the user being in a waiting state continuously and affecting the user's access to the web page.
[0150] It should be noted that the first preset time threshold can be appropriately selected based on actual application conditions and is not specifically limited in this embodiment. For example, the first preset time threshold can be set to 2 seconds or 3 seconds, etc. In addition, the first preset time threshold can also be determined based on big data analysis results of web page loading time.
[0151] In addition, an embodiment of the present application further illustrates the webpage operation method, which may also include but is not limited to the following steps:
[0152] When the loading wait object is hidden, remove the first timer.
[0153] In this step, after the loading waiting object is hidden, the first timer needs to be removed to avoid repeated execution of the operation of hiding the loading waiting object due to the continuous timing of the first timer, making the program logic of the web page more reasonable, thereby reducing the risk of logical errors in the program logic of the web page.
[0154] It should be noted that after the loading waiting object is hidden, you can first determine whether the accumulated time of the first timer has reached the first preset time threshold. If the judgment result is that the accumulated time of the first timer has not reached the first preset time threshold, then remove the first timer; if the judgment result is that the accumulated time of the first timer has reached the first preset time threshold, then you can remove the first timer or you can not remove the first timer.
[0155] It should be noted that the operation of hiding the loading waiting object that causes the first timer to be removed can be an operation of hiding the loading waiting object according to the end rendering time, or it can be an operation of hiding the loading waiting object when the accumulated time of the first timer reaches the first preset time threshold and the end rendering time is not obtained. This embodiment does not make specific limitations on this.
[0156] Reference Figure 12As shown, one embodiment of the present application further illustrates the webpage running method. After step 110 is performed, the webpage running method can further include, but is not limited to, the following steps:
[0157] Step 180: timing by a second timer;
[0158] Step 190: when the cumulative time of the second timer reaches the second preset time threshold and the end rendering time is not acquired, hiding the loading waiting object.
[0159] It should be noted that, since the callback functions (such as the onPageCommitVisible function, the onPageFinish function, etc.) in the WebView have unstable calling, that is, the callback function calling can fail, in order to avoid the problem that the end rendering time cannot be effectively acquired due to the unsuccessful callback function calling, thereby affecting the timeliness of hiding the loading waiting object, the second timer can be used to time after step 110 is performed. When the cumulative time of the second timer reaches the second preset time threshold, it is determined whether the end rendering time of the first frame image of the webpage is acquired. If the result of the determination is that the end rendering time is not acquired, the loading waiting object can be directly hidden, thereby avoiding the problem that the user is continuously in the waiting state and affecting the webpage access of the user.
[0160] It should be noted that the second preset time threshold can be appropriately selected according to actual application conditions, and the present embodiment does not make a specific limitation thereon. For example, the second preset time threshold can be set to 10 seconds or 15 seconds, etc. In addition, the second preset time threshold can also be determined according to the big data analysis result of the webpage loading time.
[0161] In addition, one embodiment of the present application further illustrates the webpage running method. The webpage running method can further include, but is not limited to, the following steps:
[0162] When the loading waiting object is hidden, the second timer is removed.
[0163] In this step, after the loading waiting object is hidden, the second timer needs to be removed, so as to avoid the problem that the operation of hiding the loading waiting object is repeatedly performed due to the continuous timing of the second timer, so that the program logic of the webpage is more reasonable, thereby reducing the risk of logical errors in the program logic of the webpage.
[0164] It should be noted that after the loading waiting object is hidden, it can be determined whether the accumulated time of the second timer reaches the second preset time threshold first. If the determination result is that the accumulated time of the second timer has not reached the second preset time threshold, the second timer is removed. If the determination result is that the accumulated time of the second timer has reached the second preset time threshold, the second timer can be removed or can not be removed.
[0165] It should be noted that the operation of hiding the loading waiting object so that the second timer is removed can be the operation of hiding the loading waiting object according to the end rendering time, or the operation of hiding the loading waiting object caused by the accumulated time of the second timer reaching the second preset time threshold and the end rendering time not being obtained. The embodiment is not limited in this regard.
[0166] Referring to Figure 13 An embodiment of the present application further illustrates step 140, which can include but is not limited to the following steps:
[0167] Step 141: determining the judgment time when the parameter information is determined to be the target parameter information.
[0168] Step 142: determining the end rendering time of the first frame image of the web page according to the judgment time.
[0169] In the embodiment, after the parameter information corresponding to the first target callback function is obtained in step 130, the parameter information can be judged first. When the parameter information is judged to be the target parameter information for indicating that the first frame image of the web page has been rendered and the next frame image of the web page has not been rendered, the judgment time when the parameter information is determined to be the target parameter information can be determined. Then, the end rendering time of the first frame image of the web page is determined according to the judgment time, so that the loading waiting object can be hidden according to the end rendering time in the subsequent step, and the purpose of hiding the loading waiting object at a more accurate time is achieved.
[0170] It should be noted that the end rendering time of the first frame image of the web page can be determined according to the judgment time, and there can be different implementation manners, which are not limited in the embodiment. For example, the judgment time can be determined as the end rendering time of the first frame image of the web page. For another example, the judgment time can be delayed by a preset time to obtain a target time, and then the target time can be determined as the end rendering time of the first frame image of the web page. It should be noted that the target time obtained by delaying the judgment time by a preset time needs to be between the time when the first frame image is rendered and the time when the next frame image is started to be rendered.
[0171] In addition, an embodiment of the present application further illustrates step 150, which may include but is not limited to the following steps:
[0172] Monitor the second loading end function;
[0173] When the second loading end function is not detected to be called, the loading waiting object is hidden according to the end rendering time.
[0174] In this embodiment, after executing step 140 to determine the end rendering time of the first frame image of the web page, the second loading end function can be monitored first. If the second loading end function is not monitored being called, it means that WebView has not completed the loading process of the first screen image of the web page. That is to say, WebView may have just completed the rendering process of the first frame image of the web page, and is about to render the second frame image of the web page. At this time, the loading waiting object can be hidden according to the end rendering time, so as to achieve the purpose of hiding the loading waiting object at a more accurate time.
[0175] In order to more clearly illustrate the processing flow of the web page operation method provided in the embodiment of the present application, a specific example is given below.
[0176] Example 1:
[0177] like Figure 14 As shown, Figure 14 This is a flowchart of a web page operation method provided by a specific example of this application. Figure 14 In the web page operation method, the web page operation method includes steps 201 to 210.
[0178] Step 201: The terminal starts loading the webpage content;
[0179] Step 202: During the webpage loading process, a loading progress bar is displayed;
[0180] Step 203: Start the first timer. When the accumulated time of the first timer reaches 10 seconds, jump to step 208.
[0181] Step 204: Monitor the onPageCommitVisible function. When the onPageCommitVisible function is detected to be called, execute step 205.
[0182] Step 205: Determine whether the previous web page has been loaded. If so, proceed to step 206;
[0183] Step 206: Monitor whether the attribute type of document.readystate that triggers the call of the onreadystatechange function is interactive. If so, execute step 207;
[0184] Step 207: Determine whether the onPageFinish function is called. If not, execute step 208.
[0185] Step 208: Hide the loading progress bar;
[0186] Step 209: Remove all timers that are still in effect;
[0187] Step 210: The process ends.
[0188] It should be noted that after executing step 201, the terminal can use the addJavascriptInterface function to build a communication bridge with the web page in advance, so that the web page can call the callback function set in the terminal, thereby transmitting the web page's own status information to the terminal. It should be noted that the addJavascriptInterface function is a public function of WebView, which is mainly used to expose a Java object to JavaScript so that JavaScript can directly call some functions. For example, when loading WebView, some functions can be injected into WebView through the addJavascriptInterface function so that JavaScript can call these functions.
[0189] It should be noted that before executing step 204, the terminal can set WebViewClient for WebView and rewrite the function of onPageCommitVisible function so that the onPageCommitVisible function waits for callback. Among them, WebViewClient is a class in WebView, and various callback functions are set in WebViewClient.
[0190] It should be noted that when executing step 206, the web page can register itself to listen to the onreadystatechange function through the addEventListener function, and after listening to the onreadystatechange function being called, it determines whether the attribute type of document.readystate that triggers the call of the onreadystatechange function is interactive. If so, the result of "the attribute type of document.readystate that triggers the call of the onreadystatechange function is interactive" can be notified to the terminal through the communication bridge built in advance.
[0191] Example 2:
[0192] like Figure 15 As shown, Figure 15 This is a flowchart of a web page operation method provided by another specific example of this application. Figure 15 In the web page operation method, the web page operation method includes steps 301 to 311.
[0193] Step 301: The terminal starts loading the webpage content;
[0194] Step 302: Display a loading progress bar during web page loading;
[0195] Step 303: Monitor the onPageCommitVisible function. When the onPageCommitVisible function is detected to be called, execute step 304.
[0196] Step 304: Determine whether the previous webpage has been loaded. If not, proceed to step 305.
[0197] Step 305: Start the second timer. When the accumulated time of the second timer reaches 2 seconds, jump to step 309.
[0198] Step 306: Monitor whether the onPageFinish function is called. If so, execute step 307;
[0199] Step 307: Monitor whether the callback detection function in the requestAnimationFrame function is called. If so, execute step 308;
[0200] Step 308: Monitor the callback detection function in the requestAnimationFrame function to see if it is called again. If so, execute step 309.
[0201] Step 309: Hide the loading progress bar;
[0202] Step 310: remove all timers still in the active state;
[0203] Step 311: end the flow.
[0204] It should be noted that after step 301 is executed, the terminal can build a communication bridge with the webpage in advance through the addJavascriptInterface function, so that the webpage can call the callback function set in the terminal, thereby transmitting the state information of the webpage to the terminal.
[0205] It should be noted that before step 306 is executed, the terminal can set the WebViewClient for the WebView, and rewrite the function of the onPageFinish function, so that the onPageFinish function is waiting to be called back.
[0206] It should be noted that after step 306 is executed and the onPageFinish function is called, the terminal can inject the requestAnimationFrame function into the webpage through the evaluateJavascript function, so that steps 307 to 311 can be effectively executed. In addition, when the webpage detects that the callback detection function in the requestAnimationFrame function is called again, the webpage can notify the terminal of the result of "the callback detection function in the requestAnimationFrame function being called again" through the communication bridge built in advance.
[0207] Referring to Figure 16 , the embodiment of the application further discloses a webpage running device, which can be used as the terminal 102 in the embodiment shown in Figure 1 , so as to realize the webpage running method as described in the foregoing embodiment. The webpage running device 400 comprises:
[0208] The display unit 401 is configured to display a loading waiting object in response to an operation of triggering webpage loading.
[0209] The scene determination unit 402 is configured to determine a webpage loading scene, and listen to a first target callback function according to the webpage loading scene.
[0210] The information acquisition unit 403 is configured to acquire parameter information corresponding to the first target callback function when the first target callback function is detected to be called.
[0211] a time determination unit 404 configured to determine, when the parameter information is target parameter information, a rendering end time of the first frame image of the webpage according to the parameter information, wherein the target parameter information indicates that the first frame image of the webpage has been rendered and the next frame image of the webpage has not been rendered;
[0212] The first hiding unit 405 is configured to hide the loading waiting object according to the end rendering time.
[0213] In one embodiment, the scene determination unit 402 includes:
[0214] a first monitoring unit, configured to monitor a second target callback function and obtain a call result of the second target callback function, wherein the second target callback function is a function called before rendering a first frame image of a webpage;
[0215] A loading status determining unit, configured to determine a webpage loading status according to a call result;
[0216] The loading scenario determining unit is used to determine the webpage loading scenario according to the webpage loading state.
[0217] In one embodiment, when the webpage loading scenario is a scenario where a previous webpage has been loaded when the current webpage is loaded, and the first target callback function is a document state change function, the information acquisition unit 403 includes:
[0218] A parameter determination unit, configured to determine parameter information for triggering a call to a document state change function;
[0219] The first acquiring unit is configured to acquire parameter information.
[0220] In one embodiment, when the webpage loading scenario is a scenario where the previous webpage has not yet been loaded when the current webpage is loaded, and the first target callback function is a request animation frame function, and the request animation frame function is provided with a callback detection function, the information acquisition unit 403 includes:
[0221] The second monitoring unit is used to monitor the callback detection function in the animation frame request function;
[0222] The second acquiring unit is configured to acquire parameter information outputted when the callback detection function is called for the second time upon monitoring that the callback detection function is called for the second time.
[0223] In one embodiment, the information acquisition unit 403 further includes:
[0224] The third acquiring unit is configured to acquire result information outputted when the callback detection function is called for the first time upon monitoring that the callback detection function is called for the first time;
[0225] The function calling unit is used to call the callback detection function for the second time according to the result information.
[0226] In one embodiment, the information acquisition unit 403 further includes:
[0227] A third monitoring unit is used to monitor the first loading end function;
[0228] The function injection unit is used to inject a request animation frame function into the web page when monitoring that the first loading end function is called.
[0229] In one embodiment, the webpage running device 400 further includes:
[0230] A first timing unit, configured to perform timing via a first timer;
[0231] The second hiding unit is configured to hide the loading waiting object when the accumulated time of the first timer reaches a first preset time threshold and the rendering end time is not obtained.
[0232] In one embodiment, the webpage running device 400 further includes:
[0233] The first removing unit is configured to remove the first timer when the loading waiting object is hidden.
[0234] In one embodiment, the webpage running device 400 further includes:
[0235] A second timing unit, configured to perform timing via a second timer;
[0236] The third hiding unit is configured to hide the loading waiting object when the accumulated time of the second timer reaches a second preset time threshold and the rendering end time is not obtained.
[0237] In one embodiment, the webpage running device 400 further includes:
[0238] The second removing unit is configured to remove the second timer when the loading waiting object is hidden.
[0239] In one embodiment, the time determination unit 404 includes:
[0240] a first time determination subunit, configured to, when the parameter information is target parameter information, determine a determination time when the parameter information is determined to be target parameter information;
[0241] The second time determination subunit is used to determine the end rendering time of the first frame image of the web page according to the judgment time.
[0242] In one embodiment, the first hiding unit 405 includes:
[0243] A fourth monitoring unit, configured to monitor the second loading end function;
[0244] The hidden subunit is used to hide the loading waiting object according to the end rendering time when the second loading end function is not monitored to be called.
[0245] It should be noted that, since the web page running device 400 of this embodiment can implement the web page running method with the terminal as the execution subject as in the previous embodiment, the web page running device 400 of this embodiment and the web page running method with the terminal as the execution subject in the previous embodiment have the same technical principles and the same beneficial effects. In order to avoid repetition of content, they will not be described here.
[0246] The device embodiments described above are merely illustrative. The units described as separate components may or may not be physically separate, i.e., they may be located in one place or distributed across multiple network units. Some or all of the modules may be selected based on actual needs to achieve the objectives of this embodiment.
[0247] Reference Figure 17 The embodiment of the present application further discloses a web page running device, the web page running device 500 comprising:
[0248] at least one processor 501;
[0249] at least one memory 502, for storing at least one program;
[0250] When at least one of the programs is executed by at least one of the processors 501 , the webpage running method as described in any of the above embodiments is implemented.
[0251] An embodiment of the present application further discloses a computer-readable storage medium, which stores a program executable by a processor. When the program executable by the processor is executed by the processor, it is used to implement the web page operation method described in any of the previous embodiments.
[0252] The present application also discloses a computer program product or computer program, which includes computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to execute the webpage operation method described in any of the preceding embodiments.
[0253] The terms "first", "second", "third", "fourth", etc. (if any) in the specification of the present application and the above-mentioned drawings are used to distinguish similar objects and are not necessarily used to describe a specific order or sequential order. It should be understood that the data used in this way can be interchangeable where appropriate, so that the embodiments of the present application described herein can, for example, be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device that includes a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.
[0254] It should be understood that in this application, "at least one (item)" means one or more, and "plurality" means two or more. "And / or" is used to describe the association relationship of associated objects, indicating that three relationships may exist. For example, "A and / or B" can mean: only A exists, only B exists, and A and B exist at the same time, where A and B can be singular or plural. The character " / " generally indicates that the previous and next associated objects are in an "or" relationship. "At least one of the following items" or similar expressions refers to any combination of these items, including any combination of single items or plural items. For example, at least one of a, b or c can mean: a, b, c, "a and b", "a and c", "b and c", or "a and b and c", where a, b, c can be single or multiple.
[0255] In the several embodiments provided in this application, it should be understood that the disclosed systems, devices and methods can be implemented in other ways. For example, the device embodiments described above are merely schematic. For example, the division of the units is merely a logical function division. In actual implementation, there may be other division methods, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be an indirect coupling or communication connection through some interfaces, devices or units, which can be electrical, mechanical or other forms.
[0256] The units described as separate components may or may not be physically separate, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed across multiple network units. Some or all of these units may be selected to achieve the purpose of this embodiment according to actual needs.
[0257] In addition, each function unit in each embodiment of the present application can be integrated in one processing unit, or each unit can be physically present separately, or two or more units can be integrated in one unit. The integrated unit can be realized in the form of hardware or in the form of a software function unit.
[0258] When the integrated unit is realized in the form of a software function unit and sold or used as an independent product, it can be stored in a computer readable storage medium. Based on such understanding, the technical solutions of the present application, essentially or in the form of a contribution to the prior art, or all or part of the technical solutions can be embodied in the form of a software product. The computer software product is stored in a storage medium, and includes several instructions for causing a computer device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the methods described in each embodiment of the present application. The foregoing storage medium includes: a U disk, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk, and various media that can store program codes.
[0259] For the step numbers in the foregoing method embodiments, they are set only for the convenience of description and explanation, and the order between the steps is not limited in any way. The execution order of each step in the embodiments can be adaptively adjusted according to the understanding of those skilled in the art.
Claims
1. A web page operation method, characterized in that: The following steps are involved: In response to an operation that triggers web page loading, displaying a loading waiting object; Determining a webpage loading scenario, wherein the webpage loading scenario includes: a first scenario in which a previous webpage has been loaded when the current webpage is loaded, and a second scenario in which the previous webpage has not been loaded when the current webpage is loaded; monitoring a first target callback function according to the webpage loading scenario, wherein, when the webpage loading scenario is the first scenario, the first target callback function is a document state change function; when the webpage loading scenario is the second scenario, the first target callback function is a request animation frame function; When monitoring that the first target callback function is called, obtaining parameter information corresponding to the first target callback function; When the parameter information is target parameter information, determining the end rendering time of the first frame image of the webpage according to the parameter information, wherein the target parameter information indicates that the first frame image of the webpage has been rendered and the second frame image of the webpage has not been rendered; The loading waiting object is hidden according to the end rendering time.
2. The webpage operation method according to claim 1, characterized in that: Determining the webpage loading scenario includes: Monitoring a second target callback function and obtaining a call result of the second target callback function, wherein the second target callback function is a function called before rendering the first frame image of the webpage; Determine the webpage loading status according to the call result; A webpage loading scenario is determined according to the webpage loading status.
3. The webpage operation method according to claim 1 or 2, characterized in that: The acquiring parameter information corresponding to the first target callback function includes: Determining parameter information for triggering the calling of the document state change function; Obtain the parameter information.
4. The webpage operation method according to claim 1 or 2, characterized in that: The animation frame request function is provided with a callback detection function; The acquiring parameter information corresponding to the first target callback function includes: Monitor the callback detection function in the animation frame request function; When it is monitored that the callback detection function is called for the second time, parameter information output when the callback detection function is called for the second time is obtained.
5. The webpage operation method according to claim 4, characterized in that: Before monitoring that the callback detection function is called for the second time and obtaining the parameter information output when the callback detection function is called for the second time, obtaining the parameter information corresponding to the first target callback function further includes: When monitoring that the callback detection function is called for the first time, obtaining result information output when the callback detection function is called for the first time; The callback detection function is called a second time according to the result information.
6. The webpage operation method according to claim 4, characterized in that: Before monitoring the callback detection function in the request animation frame function, obtaining parameter information corresponding to the first target callback function further includes: Monitor the first loading end function; When it is monitored that the first loading end function is called, the request animation frame function is injected into the web page.
7. The webpage operation method according to claim 6, characterized in that: After monitoring the first loading end function, the webpage running method further includes: Timing is performed by a first timer; When the accumulated time of the first timer reaches a first preset time threshold and the rendering end time is not obtained, the loading waiting object is hidden.
8. The webpage operation method according to claim 7, characterized in that: The webpage operation method further includes: When the loading waiting object is hidden, the first timer is removed.
9. The webpage operation method according to claim 1, characterized in that: After the display loading waiting object, the webpage running method further includes: Timing is performed by a second timer; When the accumulated time of the second timer reaches a second preset time threshold and the rendering end time is not obtained, the loading waiting object is hidden.
10. The webpage operation method according to claim 9, characterized in that: The webpage operation method further includes: When the loading waiting object is hidden, the second timer is removed.
11. The webpage operation method according to claim 1, characterized in that: When the parameter information is target parameter information, determining the end rendering time of the first frame image of the webpage according to the parameter information includes: When the parameter information is target parameter information, determining a judgment time when the parameter information is judged to be the target parameter information; The end rendering time of the first frame image of the webpage is determined according to the judgment time.
12. The webpage operation method according to claim 1, characterized in that: Hiding the loading waiting object according to the end rendering time includes: Monitor the second loading end function; When the second loading end function is not monitored to be called, the loading waiting object is hidden according to the end rendering time.
13. A web page running device, characterized in that: include: A display unit, configured to display a loading waiting object in response to an operation triggering web page loading; a scenario determination unit, configured to determine a web page loading scenario, wherein the web page loading scenario includes: a first scenario in which a previous web page has been loaded when the current web page is loaded, and a second scenario in which the previous web page has not been loaded when the current web page is loaded, and monitor a first target callback function according to the web page loading scenario, wherein when the web page loading scenario is the first scenario, the first target callback function is a document state change function; and when the web page loading scenario is the second scenario, the first target callback function is a request animation frame function; an information acquisition unit, configured to acquire parameter information corresponding to the first target callback function when monitoring that the first target callback function is called; a time determination unit, configured to determine, when the parameter information is target parameter information, a rendering end time of the first frame image of the webpage according to the parameter information, wherein the target parameter information indicates that the first frame image of the webpage has been rendered and the second frame image of the webpage has not been rendered; A hiding unit is used to hide the loading waiting object according to the end rendering time.
14. A web page running device, characterized in that: include: at least one processor; at least one memory for storing at least one program; When at least one of the programs is executed by at least one of the processors, the web page operation method according to any one of claims 1 to 12 is implemented.
15. A computer-readable storage medium, characterized in that: A processor-executable program is stored therein, and when the processor-executable program is executed by the processor, it is used to implement the web page operation method according to any one of claims 1 to 12.
Citation Information
Patent Citations
Display control method and device for loading progress, browser and electronic equipment
CN104239503A
Webpage loading duration acquisition method and device, equipment and storage medium
CN112463254A
Page loading method and device, electronic equipment and storage medium
CN113343154A