CN114003471B - Page loading analysis method and device and readable storage medium - Google Patents
Page loading analysis method and device and readable storage medium Download PDFInfo
- Publication number
- CN114003471B CN114003471B CN202210000487.8A CN202210000487A CN114003471B CN 114003471 B CN114003471 B CN 114003471B CN 202210000487 A CN202210000487 A CN 202210000487A CN 114003471 B CN114003471 B CN 114003471B
- Authority
- CN
- China
- Prior art keywords
- page
- listener
- loading
- time
- change
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/30—Monitoring
- G06F11/3003—Monitoring arrangements specially adapted to the computing system or computing system component being monitored
- G06F11/302—Monitoring arrangements specially adapted to the computing system or computing system component being monitored where the computing system component is a software system
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/30—Monitoring
- G06F11/34—Recording or statistical evaluation of computer activity, e.g. of down time, of input/output operation ; Recording or statistical evaluation of user activity, e.g. usability assessment
- G06F11/3409—Recording or statistical evaluation of computer activity, e.g. of down time, of input/output operation ; Recording or statistical evaluation of user activity, e.g. usability assessment for performance assessment
- G06F11/3419—Recording or statistical evaluation of computer activity, e.g. of down time, of input/output operation ; Recording or statistical evaluation of user activity, e.g. usability assessment for performance assessment by assessing time
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/30—Monitoring
- G06F11/34—Recording or statistical evaluation of computer activity, e.g. of down time, of input/output operation ; Recording or statistical evaluation of user activity, e.g. usability assessment
- G06F11/3452—Performance evaluation by statistical analysis
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- Quality & Reliability (AREA)
- General Physics & Mathematics (AREA)
- Computer Hardware Design (AREA)
- Computing Systems (AREA)
- Life Sciences & Earth Sciences (AREA)
- Bioinformatics & Cheminformatics (AREA)
- Bioinformatics & Computational Biology (AREA)
- Evolutionary Biology (AREA)
- Probability & Statistics with Applications (AREA)
- Mathematical Physics (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
The invention discloses a page loading analysis method, a page loading analysis device and a readable storage medium, and belongs to the technical field of webpage application. According to the method, a first monitor and a second monitor are started when a page switching behavior occurs through monitoring a page switching interface, wherein the first monitor is used for monitoring page content change information, and the second monitor is used for monitoring static resource loading information; acquiring the change rate of a document object model caused by the change of page content change information, and determining that page switching is finished when the change rate is smaller than a change threshold; judging whether the static resources monitored by the second listener are loaded completely; if so, finishing page loading, outputting information of finished page loading, and pausing the first monitor and the second monitor; by the method, the first listener and the second listener are controlled to monitor the change condition of the document object model in the page switching process, the page switching state and the static resource loading state information are integrated, and whether the page is loaded or not is accurately judged.
Description
Technical Field
The invention relates to the field of webpage application, in particular to a page loading analysis method, a page loading analysis device and a readable storage medium.
Background
For a single-page application framework, whether loading of a first page is completed is generally judged according to triggering of a windows.
Disclosure of Invention
The invention mainly aims to provide a page loading analysis method, a page loading analysis device and a readable storage medium, and aims to solve the technical problem that the completion of the non-first page loading of a single-page application is difficult to judge.
In order to achieve the above object, the present invention provides a page loading analysis method, which comprises the following steps:
monitoring a page switching interface, and starting a first listener and a second listener when a page switching behavior occurs, wherein the first listener is used for monitoring page content change information, and the second listener is used for monitoring static resource loading information;
acquiring the change rate of a document object model caused by the change of the page content change information, and determining that the page switching is finished when the change rate is smaller than a change threshold value;
after the page switching is finished, judging whether the static resources monitored by the second listener are loaded completely;
if so, the page is loaded completely, the loaded information is output, and the first monitor and the second monitor are paused.
Preferably, the monitoring page switch interface, before the step of starting the first listener and the second listener when a page switch action occurs, includes:
judging whether the first listener and the second listener are in a pause state or not;
and if so, executing the monitoring page switching interface, and starting the first listener and the second listener when a page switching behavior occurs.
Preferably, the rate of change of the document object model includes a first rate of change and a second rate of change,
the step of obtaining the change rate of the document object model caused by the change of the page content change information, and determining the page switching end when the change rate is smaller than a change threshold value, includes:
when the page is switched, controlling the first listener to monitor and record the change rate of the document object model to obtain a first change rate;
controlling the second listener to monitor the change rate of the document object model when the page is loaded with resources, so as to obtain a second change rate;
and when the first change rate and the second change rate are both smaller than a change threshold value, ending the page switching.
Preferably, the step of controlling the second listener to monitor the change rate of the document object model of the page during resource loading to obtain a second change rate includes:
receiving a loading request of the static resource after the page switching;
and responding to the loading request, loading the static resource, and controlling the second listener to monitor the change rate of the document object model to obtain a second change rate.
Preferably, after the step of judging whether the static resource monitored by the second listener is loaded completely after the page switching is finished, the method includes:
if not, adjusting the change threshold value so that the time for completing the loading of the static resources is within the time range of the page switching end.
Preferably, if so, after the steps of completing the page loading, outputting information of completing the loading, and pausing the first listener and the second listener, the method includes:
acquiring a document object model change list recorded by the first listener in the page loading completion process, and acquiring a static resource list recorded by the second listener;
and analyzing and calculating the document object model change list and the static resource list to obtain page loading completion time so as to analyze page performance.
Preferably, the step of analyzing and calculating the document object model change list and the static resource list to obtain page loading completion time to analyze page performance includes:
acquiring the time of starting the page switching to obtain initial time;
determining the change time with the maximum increment of the document object model in the document object model change list to obtain first time;
determining the static resource loading completion time in the static resource list to obtain a second time;
obtaining the maximum time between the first time and the second time, and calculating the time range from the initial time to the maximum time to obtain the page loading completion time;
and analyzing the page performance based on the page loading completion time.
Preferably, the step of analyzing the performance of the page based on the page load completion time comprises:
acquiring preset loading time;
comparing the page loading completion time with the preset loading time;
and if the page loading completion time is greater than the preset loading time, outputting reminding information to improve the page performance.
In addition, in order to achieve the above object, the present invention further provides a page loading analysis device, where the page loading analysis device includes a memory, a processor, and a page loading analysis program stored in the memory and operable on the processor, and when executed by the processor, the page loading analysis program implements the steps of the page loading analysis method described above.
In addition, to achieve the above object, the present application further provides a computer readable storage medium, where a page loading analysis program is stored, and when the page loading analysis program is executed by a processor, the page loading analysis program implements the steps of the page loading analysis method as described above.
The page loading analysis method comprises the following steps: monitoring a page switching interface, and starting a first listener and a second listener when a page switching behavior occurs, wherein the first listener is used for monitoring page content change information, and the second listener is used for monitoring static resource loading information; acquiring the change rate of a document object model caused by the change of the page content change information, and determining that the page switching is finished when the change rate is smaller than a change threshold value; after the page switching is finished, judging whether the static resources monitored by the second listener are loaded completely; if so, the page is loaded completely, the loaded information is output, and the first monitor and the second monitor are paused; by the method, the first listener and the second listener are controlled to monitor the change condition of the document object model in the page switching process, the page switching state and the static resource loading state information are integrated, and whether the page is loaded or not is accurately judged.
Drawings
Fig. 1 is a schematic structural diagram of a page loading analysis device of a hardware operating environment according to an embodiment of the present invention;
FIG. 2 is a flowchart illustrating a first embodiment of a page loading analysis method according to the present invention;
fig. 3 is a schematic diagram of a detailed functional module of the page loading analysis apparatus of the present invention.
The implementation, functional features and advantages of the objects of the present invention will be further explained with reference to the accompanying drawings.
Detailed Description
It should be understood that the specific embodiments described herein are merely illustrative of the invention and are not intended to limit the invention.
Referring to fig. 1, fig. 1 is a schematic structural diagram of a page loading analysis device in a hardware operating environment according to an embodiment of the present invention.
As shown in fig. 1, the page load analyzing apparatus may include: a processor 1001, such as a Central Processing Unit (CPU), a communication bus 1002, a user interface 1003, a network interface 1004, and a memory 1005. Wherein a communication bus 1002 is used to enable connective communication between these components. The user interface 1003 may include a Display screen (Display), an input unit such as a Keyboard (Keyboard), and the optional user interface 1003 may also include a standard wired interface, a wireless interface. The network interface 1004 may optionally include a standard wired interface, a WIreless interface (e.g., a WIreless-FIdelity (WI-FI) interface). The Memory 1005 may be a Random Access Memory (RAM) Memory, or may be a Non-Volatile Memory (NVM), such as a disk Memory. The memory 1005 may alternatively be a storage device separate from the processor 1001.
Those skilled in the art will appreciate that the architecture shown in FIG. 1 does not constitute a limitation of a page load analysis device, and may include more or fewer components than those shown, or some components in combination, or a different arrangement of components.
As shown in fig. 1, a memory 1005, which is a storage medium, may include therein an operating system, a data storage module, a network communication module, a user interface module, and a page load analysis program.
In the page load analysis device shown in fig. 1, the network interface 1004 is mainly used for data communication with other devices; the user interface 1003 is mainly used for data interaction with a user; the processor 1001 and the memory 1005 in the page loading analysis device of the present invention may be disposed in the page loading analysis device, and the page loading analysis device calls the page loading analysis program stored in the memory 1005 through the processor 1001 and executes the page loading analysis method provided in the embodiment of the present invention.
An embodiment of the present invention provides a page loading analysis method, and referring to fig. 2, fig. 2 is a schematic flowchart of a first embodiment of a page loading analysis method according to the present invention.
Embodiments of the present application provide an embodiment of a page loading analysis method, and it should be noted that although a logical order is shown in the flowchart, in some cases, the steps shown or described may be performed in an order different from that here. The execution main body of each embodiment of the page loading analysis method is a page loading analysis system. It should be noted that the page loading analysis method is applied to a page loading analysis device, the page loading analysis device belongs to a page loading analysis system, that is, a system, and the page loading analysis system belongs to a page loading analysis device.
In this embodiment, the page loading analysis method includes:
step S10, monitoring a page switching interface, and starting a first listener and a second listener when a page switching behavior occurs, wherein the first listener is used for monitoring page content change information, and the second listener is used for monitoring static resource loading information;
when the single page application refreshes the page, the single page application requests an HTML (Hyper Text Markup Language) file, and when the page is switched, the browser does not initiate a new request for the HTML file, but the content of the page is changed. Specifically, JS (JavaScript, programming language) senses a change of a URL (uniform resource locator), and after the change of the URL, JS is used to dynamically remove content of a current page and mount content of a next page on the page, a route at this time is not done by a back end but by a front end, which component is displayed on the page at the end is determined, and a previous component is removed and used with a new component, so that an HTML file cannot be requested by each jump, and thus, a time delay of sending an HTTP (hypertext Transfer Protocol) request is saved, and page switching is accelerated.
In this embodiment, when the user opens the browser, inputs the website or clicks the website link, the HTTP connection request of the browser is triggered, the system performs the page switching action in response to the connection request, the system monitors the page switching interface, and when the page switching action occurs, the system controls the first listener and the second listener, wherein the first listener is a MutationObserver, the second listener is a PerformanceObserver, after the page enters for the first time, the system starts a first listener and a second listener, wherein the first listener is mainly used for monitoring the specific change of DOM (Document Object Model), when the page is switched and the content of the page is changed, the DOM is changed, therefore, the first listener can be used for monitoring the page content change information, and judging whether the page is switched to be finished or not according to the DOM change state caused by the page content change information. The second listener is mainly used for listening to the loading of resource (static resource), that is, the static resource loading information, and in the process of loading the static resource, DOM changes can also be caused.
Further, the monitoring the page switch interface, before starting the first listener and the second listener when the page switch action occurs, includes the following steps S11-S12:
step S11, determining whether the first listener and the second listener are in a paused state;
and step S12, if yes, executing the monitoring page switching interface, and starting the first listener and the second listener when a page switching behavior occurs.
In this embodiment, in the page switching process, the first listener and the second listener may start to listen and record data in the switching process, and the start of the listeners may occupy the page performance. When the page switching is fast, the last switching request is not executed, and a user sends a new switching request, the first listener and the second listener are started immediately, and the operation of the first listener and the second listener occupies the page performance, which causes page blocking. And if so, executing the monitoring page switching interface, and starting the first listener and the second listener when a page switching behavior occurs. If not, the first listener and the second listener need to be paused first, and then the first listener and the second listener need to be started.
It should be noted that the purpose of performing sequential pausing before starting is to prevent the last started listener from page switching before finishing, and therefore, the system may also automatically pause the first listener and the second listener after the page loading is completed every time the page is switched.
Step S20, obtaining the change rate of the document object model caused by the change of the page content change information, and determining that the page switching is finished when the change rate is smaller than a change threshold value;
in this embodiment, a page content change and a static resource loading process occur during the page switching process, and both the page content change and the static resource loading cause DOM changes, that is, in the page switching process, the DOM changes dramatically, and fluctuation and floating of the DOM increases suddenly, so that when the DOM changes to be stable or returns to be stable, the completion of page switching is determined.
Further, obtaining a change rate of the document object model caused by the change of the page content change information, and determining that the page switch is ended when the change rate is smaller than a change threshold, including the following steps S21-S23:
step S21, when the page is switched, controlling the first listener to monitor and record the change rate of the document object model to obtain a first change rate;
step S22, controlling the second listener to monitor the change rate of the document object model when the page is loaded with resources, so as to obtain a second change rate;
step S23, when both the first change rate and the second change rate are smaller than a change threshold, the page switch is ended.
In this embodiment, both the page content change and the loading of the static resource may cause a DOM change, that is, a document object model change, and therefore, the change rate of the document object model includes a first change rate and a second change rate, where the first change rate is a DOM change caused by the page content change, and the second change rate is a DOM change caused by the loading of the static resource. Specifically, since each DOM change set is returned in the callback function of the MutationObserver, it needs to be determined whether the DOM changes tend to be stable. Because in a page, even if the page is in a no-operation state, some slight changes (such as changes in the positions or shapes of page elements) may occur in the DOM in the page and be captured by the MutationObserver (first listener), causing a DOM change. When the page is switched, because the change of the DOM caused by the change of the element is usually very huge, the switching of the whole page can be basically judged to be finished only by judging that the change of the DOM tends to be stable and changes little.
Specifically, a DOM change rate, i.e., a change threshold, when a page is inoperative, i.e., stationary, is obtained, the change threshold being an empirical value obtained from historical data conditions. And acquiring the change rate of the DOM when the page is switched, namely a first change rate, and when the first change rate is smaller than a change threshold value, indicating that the switching of the whole page is finished. The performaneobserver (a second listener) monitors the loading of the static resource, and the loading of the static resource brings the change of the DOM, so that the resource which does not influence the page can be judged to start loading only by that the change of the DOM tends to be stable. Specifically, the DOM change rate when the home monitor monitors the static resource loading is obtained to obtain a second change rate, and when the second change rate is smaller than the change threshold, the basic loading of the static resource affecting the page is completed, so that the completion of the page switching is determined.
It should be noted that, the change threshold for determining that the DOM change tends to be steady during the static resource loading may be reset according to empirical data, that is, the change threshold for determining that the DOM change monitored by the first listener tends to be steady and the change threshold for determining that the DOM change monitored by the second listener tends to be steady may or may not be consistent.
Further, the step of controlling the second listener to monitor the change rate of the document object model of the page during resource loading to obtain a second change rate includes the following steps S221 to S222:
step S221, receiving the loading request of the static resource after the page switching;
step S222, responding to the loading request, loading the static resource, and controlling the second listener to monitor the change rate of the document object model to obtain a second change rate.
In this embodiment, during page switching, the performanceoberver may monitor loading of static resources, and the static resources to be monitored are loaded in a page switching stage, and usually only a short moment after page switching starts to load resources (or may not start to load resources), before loading, a system initiates a loading request with an interval not exceeding a certain time, where the certain time is an empirical value and can be calculated according to historical data, and the certain time may be 500ms, that is, the loading request initiation interval of continuous static resources is not exceeding 500ms, it needs to be noted that the static resources are basically initiated due to page switching and become key resources.
The resources during page switching comprise characters, pictures, files and the like, when the files are loaded, the JS script files comprise resource requests, the resources are loaded only in a short period of time after the page switching, the period of time is usually 1-2 seconds, namely, the static resources are loaded at the moment after the page switching. The system receives a static resource loading request after the page is switched, responds to the loading request, loads key resources, and judges that the resource which does not influence the page starts to be loaded only by the fact that the DOM change tends to be stable because the monitoring of the resource loading technology has no good judgment basis and the change of the DOM is certainly brought once the resource is loaded, namely, the data recorded by the second monitor is acquired to obtain a second change rate of the DOM change for subsequently judging whether the page is switched to be finished.
Step S30, after the page switching is finished, determining whether the static resource monitored by the second listener is completely loaded;
in this embodiment, after the page switching is finished, whether the static resource monitored by the second listener is loaded is judged through a built-in program of the browser, where whether the static resource is loaded is mainly considered in consideration of the resource of the JS script, that is, the loading condition of the key resource.
And step S40, if yes, the page is loaded completely, the loaded information is output, and the first listener and the second listener are paused.
In this embodiment, if the static resource loading is completed, it is determined that the page loading is completed, that is, the non-first page switching is completed, including the page switching and the page resource loading, the information of the loaded completion is output, and the first listener and the second listener are suspended, so that it is ensured that the non-first page switching is completed and the listener finishes the monitoring.
If not, adjusting the change threshold value so that the time for completing the loading of the static resources is within the time range of the page switching end. Specifically, if there is a static resource that is not loaded yet, the calculation range of whether the DOM change tends to be stable is slightly extended until the DOM change tends to be stable after all the key resources in the static resource are loaded, that is, the time for completing the loading of the static resource is within the time range of the completion of the page switching, at this time, it is determined that the page loading is completed, and the first listener and the second listener are suspended. The problem of interception stop caused by the fact that DOM changes tend to be stable but resources are not loaded completely is solved.
The page loading analysis method comprises the following steps: monitoring a page switching interface, and starting a first listener and a second listener when a page switching behavior occurs, wherein the first listener is used for monitoring page content change information, and the second listener is used for monitoring static resource loading information; acquiring the change rate of a document object model caused by the change of the page content change information, and determining that the page switching is finished when the change rate is smaller than a change threshold value; after the page switching is finished, judging whether the static resources monitored by the second listener are loaded completely; if so, the page is loaded completely, the loaded information is output, and the first monitor and the second monitor are paused; by the method, the first listener and the second listener are controlled to monitor the change condition of the document object model in the page switching process, the page switching state and the static resource loading state information are integrated, and whether the page is loaded or not is accurately judged.
Further, based on the first embodiment, a second embodiment of the page loading analysis method of the present application is provided. In this embodiment, the page loading analysis method further includes:
step S50, acquiring a document object model change list recorded by the first listener in the page loading completion process, and acquiring a static resource list recorded by the second listener;
step S60, analyzing and calculating the document object model change list and the static resource list to obtain the page loading completion time so as to analyze the page performance.
In this embodiment, in the page switching process, the addition, deletion, and modification of elements by a page may cause a DOM change, and the change of the DOM is recorded by the first listener to obtain a DOM (document object model) change list, when a static resource is loaded, related information such as which resources are loaded and the time when loading starts is recorded by the second listener to obtain a static resource list loaded by resource, the time when the page is loaded is obtained by analyzing and calculating data in the DOM change list and the static resource list, and the performance of the page can be analyzed according to the time when the page is loaded.
Further, the analyzing and calculating the document object model change list and the static resource list to obtain the page loading completion time for analyzing the page performance includes the following steps S61-S65:
step S61, acquiring the time of starting the page switching to obtain initial time;
step S62, determining the change time with the maximum increment of the document object model in the document object model change list to obtain a first time;
step S63, determining the static resource loading completion time in the static resource list to obtain a second time;
step S64, obtaining the maximum time between the first time and the second time, and then calculating the time range from the initial time to the maximum time to obtain the page loading completion time;
and step S65, analyzing the page performance based on the page loading completion time.
In this embodiment, when a page switch occurs, the system records a timestamp for recording an initial time of the page switch, and specifically, obtains a system time of the start of the page switch to obtain the initial time. Analyzing the DOM change list to obtain a primary time point with the maximum DOM variation, specifically, calculating the newly added DOM quantity of each item in the DOM change list based on the DOM change list to obtain at least one increment, wherein the DOM quantity is the content quantity of the page elements loaded in the page, and then, in the at least one increment, obtaining the primary DOM change time point corresponding to the maximum DOM increment value, and recording a timestamp corresponding to the maximum DOM change time point, namely, the first time.
And based on the static resource list, taking the continuous static resource which is closest to the occurrence of page switching, wherein the continuous static resource refers to the static resource with the loading request initiation interval not exceeding 500ms, and the static resource is initiated basically by page switching, so that the latest loading completion time point in the static resource set is obtained, and the second time is obtained. And after the first time and the second time are summarized, the maximum time point is taken as the time point of completing the page loading, and the time between the time points of completing the page loading in the initial time is calculated to obtain the page loading completing time. It can be understood that, when the first time is less than the second time, the second time is taken as a page loading completion time point, that is, the time point when the static resource is completely loaded is taken as the page loading completion time point; and when the first time is greater than the second time, the first time is taken as a page loading completion time point, namely the time point of the DOM with the highest ASHOW is taken as the page loading completion time point.
Further, based on the page loading completion time, analyzing the page performance, including the following steps S651-S653:
step S651, acquiring a preset loading time;
step S652, comparing the page loading completion time with the preset loading time;
step S653, if the page loading completion time is greater than the preset loading time, outputting a reminding message to improve the page performance.
In this embodiment, the preset loading time is obtained, where the preset loading time is the loading time required by the user, and may also be the optimal time required for page loading, and the page performance is analyzed by comparing the page loading completion time with the preset loading time, and the shorter the page loading completion time is, the faster the loading is indicated, and the better the page performance is. Specifically, if the page loading completion time is longer than the preset loading time, the page loading time during the switching is longer than the preset loading time, the performance of the page is preliminarily determined to be poor, the reminding information is output, and a developer or other personnel is required to adjust the content of the page or the resource loading content, so that the performance of the page is improved. It should be noted that the size of the page loading completion time obtained by one page switching is not enough to indicate that the page performance is poor, so that the page loading completion time during multiple page switching is recorded, multiple sets of data are integrated, and the page performance is analyzed.
In this embodiment, data analysis and calculation are performed on a document object model change list recorded by a first listener and a static resource list recorded by a second listener to obtain page loading completion time, page performance is preliminarily analyzed based on preset loading time and page loading completion time, and when information with poor page performance is obtained, a system outputs reminding information to allow a person to adjust response data during page switching to improve page performance.
The present application further provides a page loading analysis apparatus, referring to fig. 3, the page loading analysis apparatus includes:
the monitoring module 10 monitors a page switching interface, and starts a first listener and a second listener when a page switching behavior occurs, wherein the first listener is used for monitoring page content change information, and the second listener is used for monitoring static resource loading information;
the first obtaining module 20 is configured to obtain a change rate of the document object model caused by a change of the page content change information, and determine that the page switching is ended when the change rate is smaller than a change threshold;
the first judging module 30, after the page switching is finished, judges whether the loading of the static resource monitored by the second listener is finished;
and if so, the output module 40 finishes loading the page, outputs the information of finishing loading and suspends the first listener and the second listener.
Optionally, the page loading analysis apparatus includes:
the second judgment module is used for judging whether the first listener and the second listener are in a pause state or not;
and a starting module, if so, executing the monitoring page switching interface, and starting the first monitor and the second monitor when a page switching behavior occurs.
Optionally, the obtaining module 20 includes:
the first control sub-module is used for controlling the first listener to monitor and record the change rate of the document object model when the page is switched to obtain a first change rate;
the second control sub-module is used for controlling the second listener to monitor the change rate of the document object model when the page is loaded with resources, so as to obtain a second change rate;
comparing the sub-module, and when the first change rate and the second change rate are both smaller than a change threshold, ending the page switching.
Optionally, the second control sub-module includes:
the receiving subunit receives the loading request of the static resource after the page switching;
and the response subunit is used for responding to the loading request, loading the static resource, and controlling the second listener to monitor the change rate of the document object model to obtain a second change rate.
Optionally, the page loading analysis apparatus includes:
and if not, the adjusting module adjusts the change threshold value so that the time for completing the loading of the static resources is within the time range of the completion of the page switching.
Optionally, the page loading analysis apparatus includes:
the second acquisition module is used for acquiring a document object model change list recorded by the first monitor in the page loading completion process and acquiring a static resource list recorded by the second monitor;
and the analysis module is used for analyzing and calculating the document object model change list and the static resource list to obtain page loading completion time so as to analyze page performance.
Optionally, the analysis module includes:
acquiring the time of starting the page switching to obtain initial time;
the first determining submodule is used for determining the change time with the maximum increment of the document object model in the document object model change list to obtain first time;
the second determining submodule is used for determining the static resource loading completion time in the static resource list to obtain second time;
the calculating submodule is used for obtaining the maximum time between the first time and the second time, and calculating the time range from the initial time to the maximum time to obtain the page loading completion time;
and the analysis submodule analyzes the page performance based on the page loading completion time.
Optionally, the analysis sub-module includes:
the acquisition subunit acquires preset loading time;
the comparison subunit compares the page loading completion time with the preset loading time;
and the output subunit is used for outputting reminding information to improve the page performance if the page loading completion time is greater than the preset loading time.
In addition, an embodiment of the present application further provides a computer-readable storage medium, where a page loading analysis program is stored on the computer-readable storage medium, and when executed by a processor, the page loading analysis program implements the steps of the page loading analysis method described above.
The specific implementation of the computer-readable storage medium of the present application is substantially the same as the embodiments of the page loading analysis method, and is not described herein again.
It should be noted that, in this document, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or system that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or system. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other like elements in a process, method, article, or system that comprises the element.
The above-mentioned serial numbers of the embodiments of the present invention are merely for description and do not represent the merits of the embodiments.
Through the above description of the embodiments, those skilled in the art will clearly understand that the method of the above embodiments can be implemented by software plus a necessary general hardware platform, and certainly can also be implemented by hardware, but in many cases, the former is a better implementation manner. Based on such understanding, the technical solution of the present invention may be embodied in the form of a software product, which is stored in a storage medium (e.g., ROM/RAM, magnetic disk, optical disk) as described above and includes instructions for enabling a terminal device (e.g., a mobile phone, a computer, a server, or a network device) to execute the method according to the embodiments of the present invention.
The above description is only a preferred embodiment of the present invention, and not intended to limit the scope of the present invention, and all modifications of equivalent structures and equivalent processes, which are made by using the contents of the present specification and the accompanying drawings, or directly or indirectly applied to other related technical fields, are included in the scope of the present invention.
Claims (9)
1. A page loading analysis method is characterized by comprising the following steps:
monitoring a page switching interface, and starting a first listener and a second listener when a page switching behavior occurs, wherein the first listener is used for monitoring page content change information, and the second listener is used for monitoring static resource loading information;
acquiring the change rate of a document object model caused by the change of the page content change information, and determining that the page switching is finished when the change rate is smaller than a change threshold value;
after the page switching is finished, judging whether the static resources monitored by the second listener are loaded completely;
if so, the page is loaded completely, the loaded information is output, and the first monitor and the second monitor are paused;
the step of determining that the page switch is finished when the change rate of the document object model is smaller than a change threshold value includes:
when the page is switched, controlling the first listener to monitor and record the change rate of the document object model to obtain a first change rate;
controlling the second listener to monitor the change rate of the document object model when the page is loaded with resources, so as to obtain a second change rate;
and when the first change rate and the second change rate are both smaller than a change threshold value, ending the page switching.
2. The method for page load analysis according to claim 1, wherein the snooping of the page switch interface, prior to the step of starting the first listener and the second listener when a page switch action occurs, comprises:
judging whether the first listener and the second listener are in a pause state or not;
and if so, executing the monitoring page switching interface, and starting the first listener and the second listener when a page switching behavior occurs.
3. The page load analysis method according to claim 1, wherein the step of controlling the second listener to monitor a change rate of the document object model of the page during resource loading to obtain a second change rate comprises:
receiving a loading request of the static resource after the page switching;
and responding to the loading request, loading the static resource, and controlling the second listener to monitor the change rate of the document object model to obtain a second change rate.
4. The page loading analysis method according to claim 1, wherein after the step of determining whether the static resource monitored by the second listener is loaded after the page switch is completed, the method comprises:
if not, adjusting the change threshold value so that the time for completing the loading of the static resources is within the time range of the page switching end.
5. The page load analysis method according to claim 1, wherein if the page load is complete, the steps of outputting information that the page load is complete and pausing the first listener and the second listener are followed by:
acquiring a document object model change list recorded by the first listener in the page loading completion process, and acquiring a static resource list recorded by the second listener;
and analyzing and calculating the document object model change list and the static resource list to obtain page loading completion time so as to analyze page performance.
6. The page load analyzing method according to claim 5, wherein said step of analyzing and calculating said document object model change list and said static resource list to obtain a page load completion time for analyzing page performance, comprises:
acquiring the time of starting the page switching to obtain initial time;
determining the change time with the maximum increment of the document object model in the document object model change list to obtain first time;
determining the static resource loading completion time in the static resource list to obtain a second time;
obtaining the maximum time between the first time and the second time, and calculating the time range from the initial time to the maximum time to obtain the page loading completion time;
and analyzing the page performance based on the page loading completion time.
7. The page load analysis method of claim 6, wherein said step of analyzing said page performance based on said page load completion time comprises:
acquiring preset loading time;
comparing the page loading completion time with the preset loading time;
and if the page loading completion time is greater than the preset loading time, outputting reminding information to improve the page performance.
8. A page load analysis device, the device comprising: a memory, a processor and a page load analysis program stored on the memory and executable on the processor, the page load analysis program being configured to implement the steps of the page load analysis method according to any of claims 1 to 7.
9. A storage medium having stored thereon a page load analysis program which, when executed by a processor, implements the steps of the page load analysis method according to any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210000487.8A CN114003471B (en) | 2022-01-04 | 2022-01-04 | Page loading analysis method and device and readable storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210000487.8A CN114003471B (en) | 2022-01-04 | 2022-01-04 | Page loading analysis method and device and readable storage medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN114003471A CN114003471A (en) | 2022-02-01 |
| CN114003471B true CN114003471B (en) | 2022-04-08 |
Family
ID=79932592
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210000487.8A Active CN114003471B (en) | 2022-01-04 | 2022-01-04 | Page loading analysis method and device and readable storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114003471B (en) |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107203555A (en) * | 2016-03-17 | 2017-09-26 | 阿里巴巴集团控股有限公司 | Page loading processing method and device |
| CN110717121A (en) * | 2019-08-27 | 2020-01-21 | 北京奇艺世纪科技有限公司 | Method and device for determining first screen time of page |
| CN111694674A (en) * | 2019-03-13 | 2020-09-22 | 北京字节跳动网络技术有限公司 | Message distribution processing method, device, equipment and storage medium |
| CN112416726A (en) * | 2020-11-20 | 2021-02-26 | 深圳开源互联网安全技术有限公司 | Method and device for analyzing static resource loading performance of WEB application |
| CN113641924A (en) * | 2021-10-13 | 2021-11-12 | 恒生电子股份有限公司 | Webpage interactive time point detection method and device, electronic equipment and storage medium |
| CN113761443A (en) * | 2021-08-24 | 2021-12-07 | 百安居信息技术(上海)有限公司 | Website page data acquisition and statistics method, storage medium and equipment |
Family Cites Families (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101520796A (en) * | 2009-02-16 | 2009-09-02 | 深圳市腾讯计算机系统有限公司 | Method and system for extracting uniform resource locators from web page content |
| CN109871499A (en) * | 2019-01-16 | 2019-06-11 | 中国平安财产保险股份有限公司 | Page loading method and client |
| CN112835671A (en) * | 2021-02-23 | 2021-05-25 | 北京字节跳动网络技术有限公司 | Application page scene switching method, device and equipment |
-
2022
- 2022-01-04 CN CN202210000487.8A patent/CN114003471B/en active Active
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107203555A (en) * | 2016-03-17 | 2017-09-26 | 阿里巴巴集团控股有限公司 | Page loading processing method and device |
| CN111694674A (en) * | 2019-03-13 | 2020-09-22 | 北京字节跳动网络技术有限公司 | Message distribution processing method, device, equipment and storage medium |
| CN110717121A (en) * | 2019-08-27 | 2020-01-21 | 北京奇艺世纪科技有限公司 | Method and device for determining first screen time of page |
| CN112416726A (en) * | 2020-11-20 | 2021-02-26 | 深圳开源互联网安全技术有限公司 | Method and device for analyzing static resource loading performance of WEB application |
| CN113761443A (en) * | 2021-08-24 | 2021-12-07 | 百安居信息技术(上海)有限公司 | Website page data acquisition and statistics method, storage medium and equipment |
| CN113641924A (en) * | 2021-10-13 | 2021-11-12 | 恒生电子股份有限公司 | Webpage interactive time point detection method and device, electronic equipment and storage medium |
Non-Patent Citations (2)
| Title |
|---|
| OkidoGreen.首屏时间.《https://blog.csdn.net/z69183787/article/details/105536079?》.2020,第1页至第7页. * |
| 首屏时间;OkidoGreen;《https://blog.csdn.net/z69183787/article/details/105536079?》;20200415;第1页至第7页 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN114003471A (en) | 2022-02-01 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110928767B (en) | Webpage analysis method, device, equipment and storage medium | |
| US9953014B1 (en) | Collection management in document object model virtualization | |
| EP2854372A1 (en) | Method and device for displaying pushed information | |
| CN108415804B (en) | Method for acquiring information, terminal device and computer readable storage medium | |
| US20160170947A1 (en) | Efficient delivery of content by virtualization of dynamic interaction with the document object model | |
| US20150301873A1 (en) | Method and system for expanding webapp application function | |
| US20150161089A1 (en) | Method, Device And Mobile Terminal For Restoring Page | |
| CN110413911B (en) | Network picture loading method and device, terminal equipment and storage medium | |
| CN103810176A (en) | Pre-fetching accessing method and device of webpage information | |
| CN107807934B (en) | Page display method and device and computing equipment | |
| CN109271213B (en) | HTML5 page loading method and device, computer equipment and storage medium | |
| WO2016150324A1 (en) | Page module rendering method, apparatus and display device | |
| CN103793436A (en) | Page browsing method and browser | |
| CN110032493A (en) | Monitoring method, device, terminal and the readable storage medium storing program for executing of the page | |
| CN104881273A (en) | Webpage rendering analysis method and terminal device | |
| US9645984B2 (en) | Efficient delivery of content by virtualization of static interaction with the document object model | |
| CN112182442A (en) | Page processing method and device, electronic equipment and computer readable storage medium | |
| US8667090B2 (en) | Delivering a webpage to a client | |
| CN114003471B (en) | Page loading analysis method and device and readable storage medium | |
| US10432490B2 (en) | Monitoring single content page application transitions | |
| US11115462B2 (en) | Distributed system | |
| CN115017428A (en) | Information display method, device, system and storage medium | |
| CN110275785B (en) | Data processing method and device, client and server | |
| CN110825603A (en) | Page first loading time determining method and device, electronic equipment and storage medium | |
| JP2013531949A (en) | Method and apparatus for enabling keystroke acceleration |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |