Statistical method and device for page loading duration and electronic equipment

Abstract

The invention discloses a statistical method and device for page loading duration and electronic equipment, and the method comprises the steps: monitoring a page initialization event of a client and a page interaction event of a Web front end through an AOP tool based on a received operation instruction for loading a page; when the page initialization event is monitored, determining first starting time of the page initialization event according to an initial judgment strategy; when the page interactive event is monitored, obtaining a first end time when the Web front end executes to a corresponding target node; the page interactive event is that the page is switched to a user interactive state; and determining page loading duration based on the first starting time and the first ending time. According to the method, the starting time and the ending time of page loading are determined by monitoring the page initialization event of the client and the page interactive event of the Web front end, and then the page loading duration is determined, so that the page loading time consumption calculated by adopting a mode of combining the client index and the Web front end index is accurate.

Description

Technical Field

[0001] The present application relates to the technical field of computers and the Internet, and in particular to a method for counting page loading time, a device thereof, and an electronic device. Background Art

[0002] With the development of Internet technology and smart terminals, the way people work in the recruitment field has changed dramatically. People can use smart terminals to publish recruitment information, submit resumes, or check news, watch videos, listen to music, etc. anytime and anywhere. Whether you use a browser to check news, watch videos, or use a dedicated application to publish recruitment information, submit resumes, etc., the page loading time is an extremely important indicator of user experience. Therefore, counting the page loading time has become an important task for developers to improve the performance indicators of applications.

[0003] For mobile applications, if you want to display a web page in the App, you usually use WebView to load the H5 page. WebView is a component provided by the mobile system, and H5 is developed and implemented by the Web end. Each H5 page has a unique URL corresponding to it. For the client, you only need to execute WebView.loadUrl(URL) (Android end) or similar methods in the page containing WebView to load and display the web page in the App like a browser. The web page loading time is a technical indicator that clients and various commercial APM tools pay more attention to. It is closely related to the client user experience. If the web page loading time is too long, the user may exit the page before the page is fully loaded, which will affect the user experience and cause user loss. The current method of counting the page loading time is inaccurate, and usually only a rough web page loading time can be obtained. Summary of the invention

[0004] The purpose of this application is to provide a method and device for counting page loading time, and an electronic device.

[0005] The present application provides a method for counting page loading time, including:

[0006] Based on the received operation instructions for loading the page, the client's page initialization events and the web front-end page interactive events are monitored through the AOP tool;

[0007] When a page initialization event is monitored, determining a first starting time of the page initialization event according to an initial judgment strategy;

[0008] When a page interactive event is monitored, the first end time of the Web front-end execution to the corresponding target node is obtained; wherein the page interactive event is the state where the page switches to a user-interactive state;

[0009] A page loading duration is determined based on the first start time and the first end time.

[0010] Furthermore, when a page initialization event is monitored, determining a first start time of the page initialization event according to an initial judgment strategy includes:

[0011] Determine whether the target web page is the first page loaded by the WebView component;

[0012] If the target web page is not the first page loaded by the WebView component, the time recorded by the shouldOverrideUrlLoading method is used as the first start time;

[0013] If the target web page is the first page loaded by the WebView component, the start time node of the page host is used as the first start time; wherein,

[0014] The page host includes: Fragment fragment, Dialog dialog box, PopupWindow floating window or Activity activity.

[0015] Furthermore, if the target web page is the first page loaded by the WebView component, the start time node of the page host is used as the first start time, including:

[0016] Determine whether the WebView component is attached to the Fragment fragment;

[0017] If the WebView component is attached to a Fragment fragment, and the target webpage is created for the first time and is visible to the user, the execution time of the first lifecycle method Fragment.onAttach() is used as the first start time; or,

[0018] If the WebView component is attached to a Fragment, and the target webpage is not created for the first time or the target webpage is not visible to the user, the execution time of the Fragment.onResume() method is used as the first start time.

[0019] Furthermore, if the target webpage is the first page loaded by the WebView component, the start time node of the page host is used as the first start time, and further includes:

[0020] Determine whether the WebView component is attached to the Dialog dialog box; if the WebView component is attached to the Dialog dialog box, the calling time of the Dialog.show() method is used as the first starting time;

[0021] Determine whether the WebView component is attached to the PopupWindow floating window; if the WebView component is attached to the PopupWindow floating window, the creation time of the PopupWindow floating window class instance is used as the first start time;

[0022] Determine whether the WebView component is attached to the Activity; if the WebView component is attached to the Activity, the execution time of the Activity.attachBaseContext method is used as the first start time.

[0023] Furthermore, when a page interactive event is monitored, obtaining the first end time of the Web front-end execution to the corresponding target node includes:

[0024] When the Web front end executes to the domInteractive node, the execution timestamp data of the domInteractive node is recorded, and the execution timestamp data of the domInteractive node is used as the first end time.

[0025] Furthermore, the method further comprises:

[0026] Determine the second end time of page loading completion and determine the end time of each stage of page loading; wherein,

[0027] Use AOP tools to instrument all codes that call the android.webkit.WebViewClient.onPageFinished method to insert time-consuming statistics code;

[0028] When the WebView component executes to the onPageFinished node, it detects whether the page loading progress returned by the getProgress() method reaches 100%; if it is detected that the page loading progress returned by the getProgress() method reaches 100%, the execution timestamp data corresponding to the onPageFinished node is used as the second end time of the page loading completion; and / or,

[0029] If it is detected that the page loading progress returned by the getProgress() method reaches 100%, the code is injected into the H5 page by executing the evaluateJavascript method of the WebView component, and the execution timestamp data of each stage of page loading of the Web front end is obtained in the evaluateJavascript method callback; among them, the execution timestamp data of each stage of page loading is returned in JSON format.

[0030] Furthermore, the determining whether the WebView component is attached to the Fragment fragment includes:

[0031] Get the FragmentViewLifecycleOwner class that the WebView component depends on through the View.findViewTreeLifecycleOwner() method;

[0032] Get the mFragment variable of the FragmentViewLifecycleOwner class through reflection; among them,

[0033] If the mFragment variable can be obtained through reflection, it is determined that the WebView component is attached to the Fragment fragment.

[0034] Furthermore, the determination of whether the WebView component is attached to a Dialog dialog box, a PopupWindow floating window or an Activity activity includes:

[0035] When creating a Dialog, record the mapping relationship between the WebView component and the Dialog, PopupWindow, or Activity.

[0036] Traverse the mapping relationship to determine whether the WebView component is attached to a Dialog dialog box, a PopupWindow floating window, or an Activity activity; or,

[0037] Get the FragmentViewLifecycleOwner class instance that the WebView component depends on through the View.findViewTreeLifecycleOwner() method; if

[0038] If the FragmentViewLifecycleOwner class instance is of Activity type, it is determined that the WebView component is attached to the Activity.

[0039] The present application provides a device for counting page loading time, including:

[0040] A monitoring module is used to monitor the page initialization events of the client and the page interactive events of the Web front end through the AOP tool based on the received operation instructions of loading the page;

[0041] An initial module, which is used to determine a first starting time of the page initialization event according to an initial judgment strategy when a page initialization event is monitored;

[0042] An interactive module, which is used to obtain the first end time of the Web front-end execution to the corresponding target node when a page interactive event is monitored; wherein the page interactive event is the page switching to a user-interactive state;

[0043] A determination module is used to determine a page loading duration based on the first start time and the first end time.

[0044] An embodiment of the present application provides an electronic device, which includes a processor and a memory storing computer program instructions; when the processor executes the computer program instructions, the steps of the method described above are implemented.

[0045] An embodiment of the present application provides a computer-readable storage medium, on which computer program instructions are stored. When the computer program instructions are executed by a processor, the steps of the method described above are implemented.

[0046] An embodiment of the present application provides a computer program product, wherein the computer program product includes computer program instructions, and when the computer program instructions are executed by a processor, the steps of the method described above are implemented.

[0047] The above technical solution of the present application has the following beneficial technical effects:

[0048] In the embodiment of the present application, the page initialization events of the client and the page interactive events of the Web front-end are monitored to determine the first start time and the first end time of the page loading, and the page loading duration is determined based on the difference between the first start time and the first end time. In this way, the page loading time calculated by combining the client indicators and the Web front-end indicators is accurate; and, based on the judgment that the WebView component is attached to a specific page host, the initialization time of the specific page host can be determined as the first start time of the page initialization event, which takes into account the preparation time for page creation in the process of page loading; in addition, the time when the page is switched to a user-interactive state is used as the end time point of the page loading actually perceived by the user, so that the page loading time calculated is more accurate. BRIEF DESCRIPTION OF THE DRAWINGS

[0049] In order to more clearly illustrate the technical solution of the embodiments of the present application, the following briefly introduces the drawings in the embodiments of the present application.

[0050] Figure 1 It is a schematic diagram of the system architecture of an embodiment of the present application.

[0051] Figure 2 It is a flowchart of a method for counting page loading time according to an embodiment of the present application.

[0052] Figure 3 It is a schematic diagram of the time-consuming stage of web page loading in an embodiment of the present application.

[0053] Figure 4 It is a schematic diagram of the starting node and the ending node of each stage of the Web front end of the embodiment of the present application.

[0054] Figure 5 It is a structural block diagram of a device for counting page loading time according to an embodiment of the present application.

[0055] Figure 6 It is a schematic diagram of an electronic device used to implement a method for counting page loading time in an embodiment of the present application. DETAILED DESCRIPTION

[0056] The principles and spirit of the present application will be described below with reference to several exemplary embodiments. It should be understood that the purpose of providing these embodiments is to make the principles and spirit of the present application clearer and more thorough, so that those skilled in the art can better understand and implement the principles and spirit of the present application. The exemplary embodiments provided herein are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments herein, all other embodiments obtained by ordinary technicians of the art without creative work are within the scope of protection of this application.

[0057] Embodiments of the present application relate to terminal devices and / or servers. Those skilled in the art will appreciate that the embodiments of the present application may be implemented as a system, apparatus, device, method, computer-readable storage medium, or computer program product. Therefore, the present disclosure may be specifically implemented as at least one of the following forms: complete hardware, complete software, or a combination of hardware and software. According to the embodiments of the present application, the present application requests protection for a method, apparatus, electronic device, computer-readable storage medium, and computer program product for counting page loading time. Figure 1 A schematic diagram of a system architecture of an embodiment of the present application is shown. Figure 1As shown, the system includes a terminal device 102 and a server 104. Among them, the terminal device 102 may include at least one of the following: a smart phone, a tablet computer, a laptop computer, a desktop computer, a smart TV, various wearable devices, an augmented reality AR device, a virtual reality VR device, etc. A client can be installed on the terminal device 102. For example, the client can be a client that specifically performs a specific function (such as an application app), or a client with multiple application applets (different functions) embedded in it, or a client logged in through a browser. The user can operate on the terminal device 102. For example, the user can open the client installed on the terminal device 102 and input instructions through the client operation, or the user can open the browser installed on the terminal device 102 and input instructions through the browser operation. After the terminal device 102 receives the instruction input by the user, the request information containing the instruction is sent to the server 104. After receiving the request information, the server 104 performs corresponding processing and then returns the processing result information to the terminal device 102. The user instruction is completed through a series of data processing and information interaction.

[0058] In this document, terms such as first, second, third, etc. are only used to distinguish one entity (or operation) from another entity (or operation), but not to require or imply any order or relationship between these entities (or operations).

[0059] The following is a brief description of the concepts and technical terms that may be involved in the embodiments of the present application.

[0060] AOP is the abbreviation of Aspect Oriented Programming, which means: aspect-oriented programming, a technology that achieves unified maintenance of program functions through pre-compilation and dynamic proxy during runtime.

[0061] APM: Application Performance Monitoring application performance monitoring.

[0062] The Performance Timing interface is a legacy interface retained for backward compatibility and provides performance timing information for various events that occur during the loading and use of an H5 page.

[0063] Page loading time: the time from when a user clicks to open a new page to when the page content becomes visible. In this application, the "webpage" and "page" appearing in this application are the same entity.

[0064] WebView is a component used to display web content in an application. It can be embedded in the user interface of an application App to display web pages, HTML content, web forms, etc.

[0065] For mobile applications, if you want to display web pages in the App, you usually use WebView to load H5 pages. WebView is a component provided by the mobile system, and H5 is developed and implemented by the Web front end. Each H5 page has a unique URL corresponding to it. For the client, you only need to execute WebView.loadUrl(URL) (Android side) or similar methods in the page containing WebView to load and display the web page in the App like a browser. Therefore, web page loading includes the work of both the client and the Web front end, and the web page loading time is a technical indicator that the client and various commercial APM tools pay more attention to. It is closely related to the client user experience. If the web page loading time is too long, the user may exit the page before the page is loaded, which will affect the user experience and cause user loss. Therefore, how to accurately count the time consumed in each stage of H5 page loading becomes a prerequisite for optimizing the client web page loading performance.

[0066] In the related technology, the statistical scheme of page loading time is as follows: Taking Android as an example, the WebView component provides the setWebViewClient(WebViewClient client) method to facilitate developers to perceive the start and end points of web page loading. Among them, the method parameter WebViewClient is a system callback, which provides onPageStarted(WebViewview,String url,Bitmap favicon) and onPageFinished(WebView view,String url) methods. The former notifies the application that the web page starts loading, and the latter notifies the application that the main frame of the web page has finished loading. Generally, a custom subclass is implemented by inheriting WebViewClient, and then the WebView component is called.

[0067] By calling the setWebViewClient() method, you can monitor the progress of web page loading. Record a timestamp in the onPageStarted and onPageFinished methods respectively, and subtract the timestamp corresponding to the page completion onPageFinished from the timestamp corresponding to the page start onPageStarted to get a rough estimate of the web page loading time. The problems with this technical solution are as follows:

[0068] 1. The time consumption statistics are inaccurate. First of all, the WebView component is attached to a specific Activity page. In addition to the time consumption of web page loading, it also includes the time consumption of page creation preparation. Secondly, as mentioned earlier, onPageFinished only means that the main frame of the web page has been loaded, which does not mean that the web page has been loaded, nor does it represent the page loading time actually perceived by the user.

[0069] 2. The time consumption statistics are not detailed enough. As mentioned in the previous introduction, client web page loading actually includes the work of the client and the H5 page. The purpose of time consumption statistics is to locate the actual time consumption point, so as to optimize it in a targeted manner.

[0070] 3. Zero business intrusion cannot be achieved. As mentioned in the previous introduction, you must set a custom callback by calling the WebView.setWebViewClient() method to count the page time consumption. This will inevitably cause intrusion into the business code. In addition, since large projects usually adopt modularization, if you want to monitor the time consumption of H5 pages of all modules, you need to add monitoring code to each module, which will bring a huge workload and it is difficult to monitor all H5 pages.

[0071] Based on this, an embodiment of the present application proposes a method for counting page loading time.

[0072] Figure 2 A schematic diagram of a method for calculating the length of page loading time according to an embodiment of the present application is shown, and the method includes the following specific steps:

[0073] S110: Based on the received operation instruction of loading the page, monitor the page initialization event of the client and the page interactive event of the Web front end through the AOP tool.

[0074] Specifically, the client is, for example, the terminal device 102, and the operation instruction of loading the page may be triggered by the user clicking the Uniform Resource Locator (URL) address of the client page; or it may be triggered by the user clicking the button control of the loading page; or it may be triggered by the user issuing a preset voice of loading the page or the user making a preset gesture of loading the page. In the embodiment of the present application, by using a third-party AOP tool, a time-consuming statistical code can be written to monitor the loading of all H5 pages in the client App; the web page loading time is divided into three stages: native page initialization, web page request and screen rendering. Among them, the native page initialization and screen rendering stages belong to the client execution, and the web page request stage belongs to the web front-end execution. Among them, the native page initialization stage includes the initialization of the WebView component, and the initialization of the WebView component can be set as a page initialization event. The start and end points of each stage in the web page loading process have corresponding function executions. Therefore, the most accurate time for the initialization of the WebView component comes from the client, and the most accurate time for the completion of page loading comes from the web front-end. Therefore, the problem of inaccurate time-consuming statistics is solved by combining client indicators and Web front-end indicators, that is, monitoring the client's page initialization events and the Web front-end's page interactivity events.

[0075] S120: When a page initialization event is monitored, a first start time of the page initialization event is determined according to an initial judgment strategy.

[0076] Specifically, when monitoring page initialization events, it can be implemented to monitor whether the function required for page initialization is called. When it is monitored that the function required for page initialization is called, it is considered that the page initialization event is monitored. Since the WebView component cannot exist alone, it must be attached to a specific page host. The page host can include: Fragment, Dialog, PopupWindow, Activity. For the H5 page that is loaded for the first time by the WebView component, the initial judgment strategy can be used to obtain which of the page hosts the WebView component is attached to, so that the initialization time of a specific page host can be determined as the first start time of the page initialization event. In this way, the first start time of the page initialization event includes the preparation time for page creation.

[0077] S130: When a page interactive event is monitored, the first end time of the Web front-end execution to the corresponding target node is obtained; wherein the page interactive event is the page switching to a user-interactive state.

[0078] Specifically, the page interactive event is when the page switches to a user-interactive state, which can represent the end time of page loading perceived by the user. At this time, the request and processing of all resources necessary for page display have been completed, and the acquired Web front end can be executed to the corresponding target node as the end point of page loading, and the corresponding execution time of the target node can be used as the end time of page loading. Among them, the corresponding target node is, for example, the domInteractive node in the Web page request stage.

[0079] S140: Determine a page loading duration based on the first start time and the first end time.

[0080] In the embodiment of the present application, the page initialization events of the client and the page interactive events of the Web front-end are monitored to determine the first start time and the first end time of the page loading, and the page loading duration is determined based on the difference between the first start time and the first end time. In this way, the page loading time calculated by combining the client indicators and the Web front-end indicators is accurate; and, based on the judgment that the WebView component is attached to a specific page host, the initialization time of the specific page host is determined as the first start time of the page initialization event, which takes into account the preparation time for page creation in the process of page loading; in addition, the time when the page is switched to a user-interactive state is used as the end time point of the page loading actually perceived by the user, so that the page loading time calculated is more accurate.

[0081] In the embodiment of the present application, in order to solve the problem that the time-consuming statistics are not detailed enough, the time-consuming situation of each stage of the client can be counted by inserting the code of each stage of the page loading process through the AOP tool. The Web front-end indicator adopts W3CPerformance Timing, which provides more detailed time-consuming information of the loading process. The time-consuming situation of each stage of the Web front-end can be obtained by injecting JS code. Conventional web page time-consuming statistics require preset points at each business point, which will cause business intrusion on the one hand, and it is difficult to cover all pages in the project on the other hand. In the embodiment of the present application, with the help of a third-party AOP tool, a time-consuming statistics code can be written once to monitor the loading of all H5 pages in the client App, while also achieving business non-perception.

[0082] In some embodiments, step S120: when a page initialization event is monitored, determining the first start time of the page initialization event according to an initial judgment strategy may include the following specific steps:

[0083] S121: Determine whether the target web page is the first page loaded by the WebView component;

[0084] S122: If the target web page is not the first page loaded by the WebView component, the time recorded by the shouldOverrideUrlLoading method is used as the first start time;

[0085] S123: If the target web page is the first page loaded by the WebView component, the start time node of the page host is used as the first start time; wherein the page host includes: a Fragment fragment, a Dialog dialog box, a PopupWindow floating window or an Activity activity.

[0086] Specifically, for example, through web browsing records, it can be determined whether the target web page is the first page loaded by the WebView component; when the web page contains sub-pages, such as clicking the H5 page component to jump to a new web page, that is, jumping to the sub-page, it is not the first loaded page. At this time, the setWebViewClient(WebViewClientclient) method of the WebView component can be called to set a custom WebViewClient, and the start time of the new web page can be recorded in its shouldOverrideUrlLoading method. The WebView component cannot exist alone and must be attached to a specific page host. Page hosts include: Fragment, Dialog, PopupWindow, Activity. For the H5 page that is loaded for the first time by the WebView component, the initialization time of one of the above four page hosts can be used as the start time of web page loading.

[0087] In some embodiments, step S123: if the target web page is the first page loaded by the WebView component, taking the start time node of the page host as the first start time, includes the following specific steps:

[0088] S1231: Determine whether the WebView component is attached to the Fragment fragment; wherein,

[0089] If the WebView component is attached to a Fragment fragment, and the target webpage is created for the first time and is visible to the user, the execution time of the first lifecycle method Fragment.onAttach() is used as the first start time; or,

[0090] If the WebView component is attached to a Fragment, and the target webpage is not created for the first time or the target webpage is not visible to the user, the execution time of the Fragment.onResume() method is used as the first start time.

[0091] In some embodiments, step S123: if the target web page is the first page loaded by the WebView component, the start time node of the page host is used as the first start time, and the following specific steps may also be included:

[0092] S1232: Determine whether the WebView component is attached to the Dialog dialog box; if the WebView component is attached to the Dialog dialog box, the calling time of the Dialog.show() method is used as the first starting time;

[0093] S1233: Determine whether the WebView component is attached to the PopupWindow floating window; if the WebView component is attached to the PopupWindow floating window, use the creation time of the PopupWindow floating window class instance as the first start time;

[0094] S1234: Determine whether the WebView component is attached to the Activity; if the WebView component is attached to the Activity, use the execution time of the Activity.attachBaseContext method as the first start time.

[0095] In some embodiments, step S130: when a page interactive event is monitored, obtaining the first end time of the Web front-end executing to the corresponding target node includes the following specific steps:

[0096] When the Web front end executes to the domInteractive node, the execution timestamp data of the domInteractive node is recorded, and the execution timestamp data of the domInteractive node is used as the first end time.

[0097] In some embodiments, the above-mentioned method for counting page loading time also includes the following specific steps:

[0098] S150: Determine the second end time of the page loading completion and determine the end time of each stage of the page loading; wherein the following specific steps may be included:

[0099] S151: Use the AOP tool to insert all codes that call the android.webkit.WebViewClient.onPageFinished method to insert time-consuming statistics code;

[0100] S152: When the WebView component executes to the onPageFinished node, detect whether the page loading progress returned by the getProgress() method reaches 100%; if it is detected that the page loading progress returned by the getProgress() method reaches 100%, use the execution timestamp data corresponding to the onPageFinished node as the second end time of page loading completion; and / or,

[0101] S153: If it is detected that the page loading progress returned by the getProgress() method reaches 100%, the code is injected into the H5 page by executing the evaluateJavascript method of the WebView component, and the execution timestamp data of each stage of page loading of the Web front end is obtained in the evaluateJavascript method callback; wherein, the execution timestamp data of each stage of page loading is returned in JSON format.

[0102] In some embodiments, step S1231: determining whether the WebView component is attached to the Fragment fragment may include the following specific steps:

[0103] Get the FragmentViewLifecycleOwner class that the WebView component depends on through the View.findViewTreeLifecycleOwner() method;

[0104] Get the mFragment variable of the FragmentViewLifecycleOwner class through reflection; among them,

[0105] If the mFragment variable can be obtained through reflection, it is determined that the WebView component is attached to the Fragment fragment.

[0106] In some embodiments, the determination of whether the WebView component is attached to a Dialog, a PopupWindow, or an Activity may include the following specific steps:

[0107] When creating a Dialog, record the mapping relationship between the WebView component and the Dialog, PopupWindow, or Activity.

[0108] Traverse the mapping relationship to determine whether the WebView component is attached to a Dialog dialog box, a PopupWindow floating window, or an Activity activity; or,

[0109] Get the FragmentViewLifecycleOwner class instance that the WebView component depends on through the View.findViewTreeLifecycleOwner() method; if

[0110] If the FragmentViewLifecycleOwner class instance is of Activity type, it is determined that the WebView component is attached to the Activity.

[0111] The above describes the implementation methods and advantages of the embodiments of the present application through multiple embodiments. The following describes the specific processing process of the embodiments of the present application in detail with reference to specific examples.

[0112] The complete time distribution of web page loading time can be found in Figure 3 , the web page loading time is divided into three stages: native page initialization, web page request and screen rendering. Among them, the native page initialization and screen rendering stages belong to the client execution, and the web page request stage belongs to the web front-end execution. Among them, the native page initialization stage includes the initialization of the WebView component, and the start and end points of each stage have corresponding function executions.

[0113] 1. Determine the start time of web page loading

[0114] 1.1 Determine the time node of each page host

[0115] The WebView component cannot exist alone and must be attached to a specific page host. Page hosts include: Fragment, Dialog, PopupWindow, Activity. For the H5 page that the WebView component loads for the first time, the webpage loading start time can be determined as the initialization time of one of the four page hosts. The corresponding relationship between the time nodes of each page host is as follows:

[0116] 1.1.1 When the page host is Fragment:

[0117] 1) When the page is created and visible for the first time, the start time of web page loading is equal to the execution time of the first life cycle method Fragment.onAttach();

[0118] 2) The page has been created, but was not visible before; for example, when browsing page A, page B has been created. When switching to page B, when page B changes from invisible to visible, the loading start time of page B is equal to the execution time of the Fragment.onResume() method.

[0119] Monitoring methods:

[0120] By registering the FragmentLifecycleCallbacks interface callback with FragmentManager, you can monitor the execution of the above two lifecycle methods.

[0121] 1.1.2 When the page host is Dialog: The web page loading start time is equal to the calling time of the Dialog.show() method.

[0122] Monitoring methods:

[0123] The show() method call is monitored through the AOP tool library, and the timestamp is recorded when the show() method is executed.

[0124] 1.1.3 When the page host is PopupWindow: the web page loading start time is equal to the creation time of the PopupWindow class instance.

[0125] Monitoring methods:

[0126] The AOP tool library is used to monitor the PopupWindow class constructor call and record the timestamp when the object instance is created.

[0127] 1.1.4 When the page host is an Activity: The start time of web page loading is equal to the execution time of the Activity.attachBaseContext method. This lifecycle method is the first page lifecycle method in which developers can execute business logic.

[0128] Monitoring methods:

[0129] The Activity.attachBaseContext method call is monitored through the AOP tool library, and the timestamp is recorded when the Activity.attachBaseContext method is executed.

[0130] 1.2 Record the start time of the web page that is not loaded for the first time

[0131] When a web page contains sub-pages, for example, clicking on an H5 page component can jump to a new web page, the monitoring method for the start time of this non-first loading page is as follows:

[0132] Call the setWebViewClient(WebViewClient client) method of the WebView component, set the custom WebViewClient, and record the start time of the new page in its shouldOverrideUrlLoading.

[0133] 1.3 The specific steps to determine the start time of page loading are as follows:

[0134] 1.3.1 Determine whether the target web page is the first page loaded by the WebView component. If the target web page is not the first page loaded by the WebView component, return the time recorded by the shouldOverrideUrlLoading method and use the time as the start time of page loading; otherwise, proceed to the next step.

[0135] 1.3.2 Determine whether the WebView component is attached to the Fragment. If the WebView component is attached to the Fragment, and the target webpage is created for the first time and is visible to the user, then return the execution time of the Fragment.onAttach() method; if the WebView component is attached to the Fragment, and the target webpage is not created for the first time or is not visible to the user, return the execution time of the Fragment.onResume() method, and use this time as the page loading start time. If the WebView component is not attached to the Fragment, proceed to the next step.

[0136] 1.3.3 Determine whether the WebView component is attached to the Dialog. If the WebView component is attached to the Dialog dialog box, return the time when the Dialog executes show() and use this time as the start time of page loading; otherwise, proceed to the next step.

[0137] 1.3.4 Determine whether the WebView component is attached to the PopupWindow. If the WebView component is attached to the PopupWindow floating window, return the creation time of the PopupWindow class instance (that is, the execution time of the constructor class method), and use this time as the page loading start time; otherwise, execute the next step.

[0138] 1.3.5 Returns the execution time of the attachBaseContext method of the Activity to which the WebView component is attached, and uses this time as the start time of page loading.

[0139] Among them, the above steps 1.3.1-1.3.5 can be executed in sequence. After determining that the WebView component is attached to a specific page host, the corresponding time node can be used as the start time of page loading, and the subsequent steps do not need to be executed.

[0140] 1.4 Specific steps to determine which page host the WebView component is attached to

[0141] 1.4.1 The specific process of determining whether the WebView component is attached to the Fragment is as follows:

[0142] Through the API provided by the Android system: View.findViewTreeLifecycleOwner() method to obtain the FragmentViewLifecycleOwner (fragment view lifecycle owner) class that the WebView component depends on, and then obtain the mFragment variable (Fragment type) of the FragmentViewLifecycleOwner class through reflection. If the mFragment variable can be successfully obtained, it can be considered that the WebView component is attached to the Fragment.

[0143] 1.4.2 The specific process of determining whether the WebView component is attached to a Dialog or PopupWindow is as follows:

[0144] When Dialog is created, the mapping relationship between the WebView component and the Dialog or PopupWindow can be recorded. By traversing the mapping relationship, it can be determined that the WebView component is attached to the Dialog or PopupWindow. If no corresponding mapping relationship is found, it means that the WebView component is not attached to the Dialog or PopupWindow.

[0145] 1.4.3 The specific process of determining whether the WebView component is attached to the Activity is as follows:

[0146] 1) Use the API provided by the Android system: View.findViewTreeLifecycleOwner() method to obtain the FragmentViewLifecycleOwner (fragment view lifecycle owner) class instance that the WebView component depends on. If the class instance is of Activity type, it can be considered that the WebView component is attached to the Activity;

[0147] 2) Similarly, similar to step 1.4.2, the mapping relationship between the WebView component and the Activity can be recorded when the Dialog is created. By traversing the mapping relationship, it can be determined that the WebView component is attached to the Activity. If no corresponding mapping relationship is found, it means that the WebView component is not attached to the Activity.

[0148] 2. Determine the end time of page loading

[0149] When the Web front-end executes to the domInteractive node, the request and processing of all resources necessary for page display have been completed. The execution time point corresponding to the domInteractive node can be used as the time point when the user can interact with the page, that is, the time point when the user can perceive the end of web page loading. Therefore, the time taken to load the page = the execution time corresponding to the domInteractive node – the start time of web page loading.

[0150] The time it takes for a web page to be fully loaded depends on the onPageFinished node. When the WebView component executes onPageFinished and the getProgress() method returns 100, the web page is considered to have been loaded.

[0151] Figure 4 The starting and ending nodes of each stage of the Web front end are shown. The time calculation method of each indicator in each stage of other Web front ends is shown in Table 1:

[0152] Table 1 Time calculation method for each stage of the Web front end

[0153]

[0154] The calculation method of each indicator in Table 1 is the execution time difference corresponding to the start node and the end node.

[0155] 3. The steps to determine the time of each stage of web page loading are as follows

[0156] 3.1 With the help of AOP tools, all codes that call the android.webkit.WebViewClient.onPageFinished method are instrumented and time-consuming statistics codes are inserted;

[0157] 3.2 When the WebView component executes the onPageFinished callback, check whether the page loading progress returned by the getProgress() method has reached 100%. If the detected page loading progress has reached 100%, execute the next step; otherwise, end;

[0158] 3.3 Inject JavaScript code into the H5 page by executing the evaluateJavascript method of the WebView component:

[0159] (function(){return window.performance.timing.toJSON();})();

[0160] In the evaluateJavascript method callback, you can get the execution timestamp data of each stage of the Web front end; the timestamp data is returned in JSON format, and the style is as follows:

[0161] {

[0162] "connectEnd":1.725105675612e+12,

[0163] "connectStart":1.725105675481e+12,

[0164] "domComplete":1.725105678203e+12,

[0165] "domContentLoadedEventEnd":1.725105677592e+12,

[0166] "domContentLoadedEventStart":1.725105677591e+12,

[0167] "domInteractive":1.725105676263e+12,

[0168] "domLoading":1.725105675698e+12,

[0169] "domainLookupEnd":1.725105675481e+12,

[0170] "domainLookupStart":1.725105675445e+12,

[0171] "fetchStart":1.725105675444e+12,

[0172] "loadEventEnd":1.725105678205e+12,

[0173] "loadEventStart":1.725105678205e+12,

[0174] "navigationStart":1.725105675336e+12,

[0175] "redirectEnd":0,

[0176] "redirectStart":0,

[0177] "requestStart":1.725105675612e+12,

[0178] "responseEnd":1.725105675815e+12,

[0179] "responseStart":1.72510567569e+12,

[0180] "secureConnectionStart":1.725105675543e+12,

[0181] "unloadEventEnd":0,

[0182] "unloadEventStart":0

[0183] }

[0184] According to the execution timestamp data of each stage of the Web front-end obtained above, for example, "connectEnd": 1.725105675612e+12, which is the execution time when the connection ends,

[0185] "connectStart": 1.725105675481e+12, which is the execution time of the start of the connection. Therefore, the TCP phase time = connectEnd-connectStart = 131 milliseconds.

[0186] 3.4 According to the calculation method of each calculation indicator in Table 1 above, the execution time corresponding to the end node of the calculation indicator is taken as the difference with the execution time corresponding to the start node, and the execution time of each stage of the Web front end can be obtained.

[0187] In the embodiment of the present application, in addition to obtaining the time consumption of each stage of the Web front end through the JS code provided in the above embodiment, the execution time of each node can also be obtained separately, such as obtaining the execution timestamp of the domInteractive node, which can be achieved through the following code:

[0188] "(function(){return performance.timing.domInteractive;})();"

[0189] The execution time of other nodes can be deduced similarly.

[0190] In the embodiment of the present application, in view of the problem that the time-consuming statistics are not detailed enough, the time-consuming situation of each stage of the client can be counted by inserting the code of each stage of the page loading process through the AOP tool. The Web front-end indicator adopts W3CPerformance Timing, which provides more detailed time-consuming information of the loading process. The time-consuming situation of each stage of the Web front-end can be obtained by injecting JS code. By accurately and in detail counting the time-consuming of each stage of H5 page loading, the stage that takes too long can be optimized and improved in a targeted manner, which provides a prerequisite for optimizing the loading performance of the client web page; it can avoid the web page loading time being too long and avoid the user from exiting the page before the page is loaded. After optimizing the web page loading performance, the shortening of the web page loading time can improve the user experience. Conventional web page time-consuming statistics require preset buried points at each business point, which will cause business intrusion on the one hand, and cannot guarantee coverage of all pages in the project on the other hand. In the embodiment of the present application, by using a third-party AOP tool, a time-consuming statistics code can be written once to monitor the loading of all H5 pages in the client App, and at the same time, the business is not perceived. This technical solution can not only count the client's phased time consumption, but also count the phased time consumption of the H5 page from the perspective of the Web front end.

[0191] Corresponding to the method embodiment of the present application, the present application also provides a device for counting the page loading time, such as Figure 5 As shown, specifically, it may include:

[0192] A monitoring module 510 is used to monitor the page initialization events of the client and the page interactive events of the Web front end through the AOP tool based on the received operation instruction of loading the page;

[0193] An initial module 520, which is used to determine a first starting time of the page initialization event according to an initial judgment strategy when a page initialization event is monitored;

[0194] The interactive module 530 is used to obtain the first end time of the Web front-end execution to the corresponding target node when a page interactive event is monitored; wherein the page interactive event is the page switching to a user-interactive state;

[0195] The determination module 540 is used to determine the page loading duration based on the first start time and the first end time.

[0196] The electronic device in the embodiment of the present application may be a user terminal device, a server, other computing devices, or a cloud server. Figure 6A schematic diagram of the hardware structure of an electronic device according to an embodiment of the present application is shown. The electronic device may include a processor 601 and a memory 602 storing computer program instructions. When the processor 601 executes the computer program instructions, the process or function of any of the above-mentioned embodiments of the method is implemented.

[0197] Specifically, the processor 601 may include a central processing unit (CPU), or an application-specific integrated circuit (ASIC), or may be configured to implement one or more integrated circuits of the embodiments of the present application. The memory 602 may include a large-capacity memory for data or instructions. For example, the memory 602 may be at least one of the following: a hard disk drive (HDD), a read-only memory (ROM), a random access memory (RAM), a floppy disk drive, a flash memory, an optical disk, a magneto-optical disk, a tape, a universal serial bus (USB) drive or other physical / tangible memory storage device. For another example, the memory 602 may include a removable or non-removable (or fixed) medium. For another example, the memory 602 may be inside or outside the integrated gateway disaster recovery device. The memory 602 may be a non-volatile solid-state memory. In other words, the memory 602 usually includes a tangible (non-transitory) computer-readable storage medium (such as a memory device) encoded with computer-executable instructions, and when the software is executed (such as executed by one or more processors), the operation described in the method of the embodiment of the present application can be performed. The processor 601 implements the process or function of any method in the above embodiments by reading and executing the computer program instructions stored in the memory 602.

[0198] In one example, Figure 6The electronic device shown may also include a communication interface 603 and a bus 610. Among them, the processor 601, the memory 602, and the communication interface 603 are connected through the bus 610 and complete the communication between each other. The communication interface 603 is mainly used to realize the communication between each module, device, unit and / or device in the embodiment of the present application. The bus 610 includes hardware, software or both, and can couple the components of the online data traffic billing device to each other. For example, the bus may include at least one of the following: an accelerated graphics port (AGP) or other graphics bus, an enhanced industrial standard architecture (EISA) bus, a front-end bus (FSB), a hypertransport (HT) interconnect, an industrial standard architecture (ISA) bus, an infinite bandwidth interconnect, a low pin count (LPC) bus, a memory bus, a micro channel architecture (MCA) bus, a peripheral component interconnect (PCI) bus, a PCI-Express (PCI-X) bus, a serial advanced technology attachment (SATA) bus, a video electronics standard association local (VLB) bus or other suitable buses. The bus 610 may include one or more buses. Although the embodiments of the present application describe or illustrate a specific bus, the embodiments of the present application may consider any suitable bus or interconnection method.

[0199] In combination with the method in the above embodiments, an embodiment of the present application also provides a computer-readable storage medium, on which computer program instructions are stored. When the computer program instructions are executed by a processor, the process or function of any method in the above embodiments is implemented.

[0200] In addition, an embodiment of the present application further provides a computer program product, on which computer program instructions are stored. When the computer program instructions are executed by a processor, the process or function of any one of the methods in the above embodiments is implemented.

[0201] The above exemplarily describes the flowcharts and / or block diagrams of the methods, devices, systems and computer program products of the embodiments of the present application, and describes the relevant various aspects. It should be understood that each box or combination thereof in the flowchart and / or block diagram can be implemented by computer program instructions, or by dedicated hardware that performs a specified function or action, or by a combination of dedicated hardware and computer instructions. For example, these computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer or other programmable data processing device to form a machine that enables these instructions executed by such a processor to enable the implementation of the functions / actions specified in each box or combination thereof in the flowchart and / or block diagram. Such a processor can be a general-purpose processor, a special-purpose processor, a special application processor or a field programmable logic circuit.

[0202] The functional blocks shown in the structured block diagram of the embodiment of the present application can be implemented as hardware, software, firmware or a combination thereof. When implemented in hardware, it can be, for example, an electronic circuit, an application-specific integrated circuit (ASIC), appropriate firmware, a plug-in, a function card, etc.; when implemented in software, it is a program or code segment used to perform the required task. The program or code segment can be stored in a memory, or transmitted on a transmission medium or a communication link via a data signal carried in a carrier. The code segment can be downloaded via a computer network such as the Internet, an intranet, etc.

[0203] It should be noted that the present application is not limited to the specific configurations and processes described above or shown in the figures. The above is only a specific implementation mode of the present application. Those skilled in the art can clearly understand that for the convenience and brevity of description, the specific working process of the described system, device, module or unit can refer to the corresponding process in the method embodiment without further description. It should be understood that the scope of protection of the present application is not limited to this. Any technician familiar with the technical field can think of various equivalent modifications or substitutions within the technical scope disclosed in the present application, and these modifications or substitutions should be included in the scope of protection of the present application.

Claims

1. A method for calculating the length of page loading time, characterized in that: include: Based on the received operation instructions for loading the page, the client's page initialization events and the web front-end page interactive events are monitored through the AOP tool; When a page initialization event is monitored, determining a first starting time of the page initialization event according to an initial judgment strategy; When a page interactive event is monitored, the first end time of the Web front-end execution to the corresponding target node is obtained; wherein the page interactive event is the state where the page switches to a user-interactive state; A page loading duration is determined based on the first start time and the first end time.

2. The method according to claim 1, characterized in that When a page initialization event is monitored, determining a first starting time of the page initialization event according to an initial judgment strategy includes: Determine whether the target web page is the first page loaded by the WebView component; If the target web page is not the first page loaded by the WebView component, the time recorded by the shouldOverrideUrlLoading method is used as the first start time; If the target web page is the first page loaded by the WebView component, the start time node of the page host is used as the first start time; wherein, The page host includes: Fragment fragment, Dialog dialog box, PopupWindow floating window or Activity activity.

3. The method according to claim 2, characterized in that If the target web page is the first page loaded by the WebView component, the start time node of the page host is used as the first start time, including: Determine whether the WebView component is attached to the Fragment fragment; If the WebView component is attached to a Fragment fragment, and the target webpage is created for the first time and is visible to the user, the execution time of the first lifecycle method Fragment.onAttach() is used as the first start time; or, If the WebView component is attached to a Fragment, and the target webpage is not created for the first time or the target webpage is not visible to the user, the execution time of the Fragment.onResume() method is used as the first start time.

4. The method according to claim 2, characterized in that: If the target web page is the first page loaded by the WebView component, the start time node of the page host is used as the first start time, and further includes: Determine whether the WebView component is attached to the Dialog dialog box; if the WebView component is attached to the Dialog dialog box, the calling time of the Dialog.show() method is used as the first starting time; Determine whether the WebView component is attached to the PopupWindow floating window; if the WebView component is attached to the PopupWindow floating window, the creation time of the PopupWindow floating window class instance is used as the first start time; Determine whether the WebView component is attached to the Activity; if the WebView component is attached to the Activity, the execution time of the Activity.attachBaseContext method is used as the first start time.

5. The method according to claim 1, characterized in that When a page interactive event is monitored, obtaining the first end time of the Web front-end execution to the corresponding target node includes: When the Web front end executes to the domInteractive node, the execution timestamp data of the domInteractive node is recorded, and the execution timestamp data of the domInteractive node is used as the first end time.

6. The method according to claim 1, characterized in that Also includes: Determine the second end time of page loading completion and determine the end time of each stage of page loading; wherein, Use AOP tools to instrument all codes that call the android.webkit.WebViewClient.onPageFinished method to insert time-consuming statistics code; When the WebView component executes to the onPageFinished node, it detects whether the page loading progress returned by the getProgress() method reaches 100%; if it is detected that the page loading progress returned by the getProgress() method reaches 100%, the execution timestamp data corresponding to the onPageFinished node is used as the second end time of the page loading completion; and / or, If it is detected that the page loading progress returned by the getProgress() method reaches 100%, the code is injected into the H5 page by executing the evaluateJavascript method of the WebView component, and the execution timestamp data of each stage of page loading of the Web front end is obtained in the evaluateJavascript method callback; among them, the execution timestamp data of each stage of page loading is returned in JSON format.

7. The method according to claim 3, characterized in that The determining whether the WebView component is attached to the Fragment fragment includes: Get the FragmentViewLifecycleOwner class that the WebView component depends on through the View.findViewTreeLifecycleOwner() method; Get the mFragment variable of the FragmentViewLifecycleOwner class through reflection; among them, If the mFragment variable can be obtained through reflection, it is determined that the WebView component is attached to the Fragment fragment.

8. The method according to claim 4, characterized in that The determining whether the WebView component is attached to a Dialog dialog box, a PopupWindow floating window or an Activity activity includes: When creating a Dialog, record the mapping relationship between the WebView component and the Dialog, PopupWindow, or Activity. Traverse the mapping relationship to determine whether the WebView component is attached to a Dialog dialog box, a PopupWindow floating window, or an Activity activity; or, Get the FragmentViewLifecycleOwner class instance that the WebView component depends on through the View.findViewTreeLifecycleOwner() method; if If the FragmentViewLifecycleOwner class instance is of Activity type, it is determined that the WebView component is attached to the Activity.

9. A device for counting page loading time, characterized in that: include: A monitoring module is used to monitor the page initialization events of the client and the page interactive events of the Web front end through the AOP tool based on the received operation instructions of loading the page; An initial module, which is used to determine a first starting time of the page initialization event according to an initial judgment strategy when a page initialization event is monitored; An interactive module, which is used to obtain the first end time of the Web front-end execution to the corresponding target node when a page interactive event is monitored; wherein the page interactive event is the page switching to a user-interactive state; A determination module is used to determine a page loading duration based on the first start time and the first end time.

10. An electronic device, characterized in that: The electronic device comprises: a processor and a memory storing computer program instructions; when the electronic device executes the computer program instructions, the method according to any one of claims 1 to 8 is implemented.

11. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer program instructions, and when the computer program instructions are executed by a processor, the method according to any one of claims 1 to 8 is implemented.

Images