Method and device for obtaining user perception duration of webpage and related equipment

Abstract

The invention discloses a method and a device for acquiring user perception duration of a webpage and related equipment. The method comprises the following steps: acquiring a start timestamp when a route of the webpage is changed; newly added elements in the webpage are determined, and according to the first timestamps for completing loading of all the newly added elements, second timestamps for completing loading of parent elements of all the newly added elements are obtained; and calculating the occupied area of each parent element in the webpage, and taking a difference value obtained by subtracting the starting timestamp from the second timestamp of the parent element with the largest area of the occupied area as the user perception duration. According to the method, the user perception duration is self-defined, the user experience can be reflected more clearly, the webpage performance reference index is more reasonable, the user perception duration can be automatically obtained when the website is accessed, universality is achieved, and the code development workload and maintenance cost are reduced.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a method, device and related equipment for obtaining user perceived duration of a web page. Background Art

[0002] In the prior art, when it is necessary to understand the performance of a web page, the browser's built-in performance indicators are usually used for statistics, such as the First Paint (FP) time, the First Content Paint (FCP) time, etc. The statistical time presented by these indicators is often not the time that users are concerned about. Traditional indicators are more focused on reflecting the loading time of a certain piece of text, pictures, etc. on the web page, but cannot reflect the loading time of the content area that users are concerned about. Moreover, if the above performance indicators need to obtain the loading time of the content that users are concerned about, currently they are generally buried for statistics and encoded in the specific logic of a specific project web page, but this method will be invasive to the current project code and is not universal, which increases the complexity of code development and maintenance costs. Summary of the invention

[0003] The present invention provides a method, device and related equipment for obtaining the user perceived time of a web page, so as to solve the problems that the web page performance indicators in the traditional solution cannot reflect the loading time of the content area concerned by the user, and the invasiveness and lack of universality caused by the buried point statistics of the loading time of the content area concerned by the user.

[0004] In order to solve the above technical problems, in a first aspect, the present invention provides a method for obtaining the user perceived duration of a web page, the method comprising:

[0005] Get the start timestamp of the web page route change;

[0006] Determine the newly added elements in the webpage, and obtain the second timestamp of the completion of loading of the parent element of each of the newly added elements according to the first timestamp of the completion of loading of each of the newly added elements;

[0007] The area occupied by each of the parent elements in the webpage is calculated, and the difference between the second timestamp of the parent element with the largest occupied area and the start timestamp is taken as the user perceived duration.

[0008] Optionally, the acquiring, according to the first timestamp of the completion of loading of each of the newly added elements, the second timestamp of the completion of loading of the parent element of each of the newly added elements comprises:

[0009] Matching the HTML file path of the newly added element with the HTML file paths of all elements in the pre-stored web page to determine the parent element of each of the newly added elements;

[0010] The first timestamp of the completion of loading of the newly added element is used as the second timestamp of the completion of loading of its parent element.

[0011] Optionally, the using the first timestamp of the completion of loading of the newly added element as the second timestamp of the completion of loading of its parent element includes:

[0012] If there are multiple newly added elements that are sibling elements of the same layer, when performing HTML file path matching, the first timestamp of the newly added element that is loaded first among the multiple newly added elements is used as the second timestamp of its parent element.

[0013] Optionally, the method further comprises:

[0014] Get the third timestamp when the HTML structure of the web page is loaded;

[0015] A difference value obtained by subtracting the third timestamp from the first timestamp of each newly added element is used as the loading time consumption of each newly added element.

[0016] Optionally, determining the newly added element in the webpage includes:

[0017] Get all the new elements of the web page;

[0018] Eliminate the newly added elements that meet any of the following conditions, including:

[0019] Not displayed on the web page;

[0020] Not a DOM element;

[0021] Not within the maximum area of ​​the web page.

[0022] Optionally, the step of obtaining a start timestamp of a change in the route of the webpage includes:

[0023] If the web page belongs to the Vue development framework or the React development framework, a polling comparison is performed to determine whether the route of the web page has changed at a preset time interval;

[0024] When the route of the current webpage is inconsistent with the route of the previous webpage, the difference obtained by subtracting the preset interval from the start timestamp when the current route changes is used as the start timestamp.

[0025] Optionally, matching the HTML file path of the newly added element with the HTML file paths of all elements in the pre-stored web page to determine the parent element of each of the newly added elements includes:

[0026] Traversing all elements in the webpage, constructing a key-value pair set including HTML file path information of each element; in the key-value pair, the key is the HTML file path of each element, and the value is 0;

[0027] The HTML file path of the newly added element is matched with the key-value pair set, the parent element of the newly added element is determined, and 1 is added to the value of the matched key-value pair.

[0028] In a second aspect, the present invention provides a device for obtaining a web page user's perceived duration, comprising a monitoring module, a determination module, and a calculation module;

[0029] The monitoring module is used to obtain the start timestamp of the route change of the web page;

[0030] The determination module is used to determine the newly added elements in the webpage, and obtain the second timestamp of the completion of loading of the parent element of each newly added element according to the first timestamp of the completion of loading of each newly added element;

[0031] The calculation module is used to calculate the area occupied by each parent element in the webpage, and take the difference obtained by subtracting the start timestamp from the second timestamp of the parent element with the largest occupied area as the user perceived duration.

[0032] In a third aspect, the present invention provides a device for obtaining a user-perceived duration of a webpage, comprising a memory and a processor, wherein:

[0033] The memory is used to store computer programs;

[0034] The processor is used to read the program in the memory and execute the steps of a method for obtaining the user perceived duration of a web page as provided in the first aspect above.

[0035] In a fourth aspect, the present invention provides a computer-readable storage medium having a readable computer program stored thereon, which, when executed by a processor, implements the steps of a method for obtaining a user-perceived duration of a web page as provided in the first aspect above.

[0036] Compared with the prior art, the method, device and related equipment for obtaining the user perceived duration of a web page provided by the present invention have the following beneficial effects:

[0037] When it is necessary to obtain the user perceived duration, first obtain the start timestamp when the route of the web page changes; then determine the newly added elements in the web page, and obtain the second timestamp of the parent element corresponding to each newly added element according to the first timestamp when each newly added element completes loading; finally, subtract the start timestamp from the second timestamp of the parent element with the largest area, and obtain the difference as the user perceived duration. The present invention takes the time when the user enters the web page as the start time, and the time when the element with the largest area in the web page is rendered as the end time, and the time between them is defined as the user perceived duration to reflect the loading duration of the content area that the user is concerned about; the custom user perceived duration focuses more on the user level, can more clearly reflect the user experience, and make the web page performance reference index more reasonable, and the user perceived duration can be automatically obtained and calculated when the website is visited, without the need for buried point statistics, non-invasive to the current project code, and has universality, reducing the code development workload and maintenance costs. BRIEF DESCRIPTION OF THE DRAWINGS

[0038] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only part of the embodiments of the present invention, rather than all of the embodiments. For ordinary technicians in this field, without paying creative work, other drawings obtained based on these drawings all fall within the scope of protection of this application.

[0039] Figure 1 It is a flow chart of a method for obtaining the user perceived duration of a web page provided by an embodiment of the present invention;

[0040] Figure 2 It is a schematic diagram of the structure of a device for obtaining the perceived duration of a web page user provided by an embodiment of the present invention;

[0041] Figure 3 The present invention also provides a schematic diagram of the structure of a device for obtaining the perceived time of a web page user;

[0042] Figure 4 It is a schematic diagram of the structure of a computer-readable storage medium provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0043] In order to make the purpose, technical solution and advantages of the present invention more clearly understood, the present invention is further described in detail below in conjunction with the accompanying drawings and specific embodiments. It should be understood that the specific embodiments described herein are only used to explain the present invention and are not used to limit the present invention.

[0044] In order to make the description of the disclosed content more detailed and complete, the following is an illustrative description of the implementation mode and specific examples of the present invention; however, this is not the only form of implementing or applying the specific embodiments of the present invention. The implementation mode covers the features of multiple specific embodiments and the method steps and their sequence for constructing and operating these specific embodiments. However, other specific embodiments can also be used to achieve the same or equal functions and step sequences. Based on the embodiments in this application, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of this application.

[0045] It should be noted that the terms "first", "second", etc. in the specification and claims of the present invention and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the numbers used in this way can be interchanged where appropriate, so that the embodiments of the present invention described herein can be implemented in an order other than those illustrated or described herein.

[0046] In the solution of the present invention, the user perceived duration is defined as the time when the user enters the web page as the start time and the time when the element with the largest area in the web page is rendered as the end time, and the time between the two is defined as the user perceived duration. Among them, the area with the largest area in the web page is regarded as the content area that the user pays most attention to.

[0047] Example 1

[0048] like Figure 1 The flowchart of a method for obtaining the user perceived duration of a web page provided by an embodiment of the present invention includes the following steps:

[0049] Step S101, obtaining the start timestamp of the route change of the web page;

[0050] The route change includes a user opening a new page, that is, entering a web page, and a user clicking a page navigation component in the web page or other operations that cause page switching.

[0051] Exemplarily, the window.onpopstate event of the web page is monitored, where the window.onpopstate event refers to an event set in the browser for monitoring whether there is a change in the web page route. If the window.onpopstate event is triggered, it indicates that the web page route has changed. The current timestamp can be extracted and saved as the start timestamp when the route changes through the performance.now() function.

[0052] As an optional implementation manner, the step of obtaining a start timestamp of a change in the route of a web page includes:

[0053] If the web page belongs to the Vue development framework or the React development framework, a polling comparison is performed to determine whether the route of the web page has changed at a preset time interval;

[0054] When the route of the current webpage is inconsistent with the route of the previous webpage, the difference obtained by subtracting the preset interval from the start timestamp when the current route changes is used as the start timestamp.

[0055] Exemplarily, if the web page belongs to the Vue development framework or the React development framework, the route of the web page is polled at a preset time interval, and the performance.now() function is used to record the current timestamp of each polling of the current web page. For each polling, the route of the current web page is compared with the route of the previous web page to see if they are consistent. If the route of the current web page is consistent with the route of the previous web page, it means that the route of the web page has not changed, and polling is continued after waiting for the preset time interval; if the two are inconsistent, it means that the route of the current web page has changed during the last polling process, and the current timestamp is used as the start timestamp of the current route change minus the preset time interval to obtain the start timestamp of the route change of the web page.

[0056] Step S102, determining newly added elements in the webpage, and obtaining a second timestamp of the completion of loading of the parent element of each newly added element according to the first timestamp of the completion of loading of each newly added element;

[0057] The newly added elements refer to the elements that are changed in the web page after the HTML structure of the web page is loaded.

[0058] Exemplarily, after monitoring the change of the route of the web page, it is judged whether there is a change in the elements of the web page, and the newly added elements and their attribute information in the web page are obtained, and the attribute information includes the first timestamp when the newly added elements are loaded. According to the first timestamp, the second timestamp when the parent element of each of the newly added elements is loaded is obtained.

[0059] As an optional implementation manner, obtaining, according to the first timestamp of the completion of loading of each of the newly added elements, the second timestamp of the completion of loading of the parent element of each of the newly added elements includes:

[0060] Matching the HTML file path of the newly added element with the HTML file paths of all elements in the pre-stored web page to determine the parent element of each of the newly added elements;

[0061] The first timestamp of the completion of loading of the newly added element is used as the second timestamp of the completion of loading of its parent element.

[0062] Exemplarily, for each newly added element, the acquired attribute information of the newly added element also includes its HTML file path information. The HTML file path of each newly added element is matched with the HTML file paths of all elements in the pre-stored web page, and the parent element of the matched newly added element is determined according to the HTML path of the matched newly added element, and then the first timestamp of the completion of loading of the newly added element is used as the second timestamp of the completion of loading of its parent element.

[0063] Among them, except for the HTML node elements of the web page, all the newly added elements will have a parent element, and the parent element is a static element when the HTML structure of the web page is loaded.

[0064] In the implementation of the present invention, the first timestamp of the completion of loading of the newly added element is assigned to the parent element. This is because there is a high probability that there are sibling elements of the same layer in the newly added elements, and we only need the elements with the largest area. The parent element contains all the newly added sibling elements of the same layer. Therefore, we only need to compare the parent element of the newly added element with other elements.

[0065] As an optional implementation manner, the using the first timestamp of the completion of loading of the newly added element as the second timestamp of the completion of loading of its parent element includes:

[0066] If there are multiple newly added elements that are sibling elements of the same layer, when performing HTML file path matching, the first timestamp of the newly added element that is loaded first among the multiple newly added elements is used as the second timestamp of its parent element.

[0067] Exemplarily, if all newly added elements do not have a common parent element, and there are no newly added elements that are sibling elements of the same layer, the first timestamp of each newly added element being loaded is used as the second timestamp of its parent element being loaded. However, if at least two newly added elements have a common parent element, that is, the at least two newly added elements are sibling elements of the same layer, the first timestamp of the first newly added element loaded among the at least two newly added elements is used as the second timestamp of their parent element.

[0068] In the embodiment of the present invention, after determining the parent element of each newly added element, it is determined whether there are newly added elements that are sibling elements of the same layer, where sibling elements of the same layer refer to elements with a common parent. If there are multiple newly added sibling elements of the same layer, only the time taken by the first sibling element of the same layer needs to be assigned to the parent element, thereby improving the accuracy of the second timestamp for determining when the parent element has completed loading.

[0069] Step S103, calculating the area occupied by each parent element in the webpage, and taking the difference between the second timestamp of the parent element with the largest occupied area and the start timestamp as the user perceived duration.

[0070] For example, the width and height of each parent element can be obtained through the getBoundingClientRect function to obtain the area of ​​each parent element. After calculating the area of ​​each parent element in the web page, the second timestamp of the parent element with the largest area is subtracted from the start timestamp, and the difference is used as the user perceived duration.

[0071] The embodiment of the present invention provides a method for obtaining the user perceived duration of a web page. When the user perceived duration needs to be obtained, the start timestamp when the route of the web page changes is first obtained; then the newly added elements in the web page are determined, and the second timestamp of the parent element corresponding to each newly added element is obtained according to the first timestamp when each newly added element is loaded; finally, the second timestamp of the parent element with the largest area is subtracted from the start timestamp, and the difference obtained is used as the user perceived duration. In the embodiment of the present invention, the element with the largest area in the web page is the content area that the user pays most attention to, the time when the user enters the web page is taken as the start time, and the time when the element with the largest area in the web page is rendered is taken as the end time, and the time between them is defined as the user perceived duration to reflect the loading duration of the content area that the user pays attention to; the customized user perceived duration focuses more on the user level, can more clearly reflect the user experience, and make the web page performance reference index more reasonable; and the user perceived duration can be automatically obtained and calculated when the website is visited, without the need for buried point statistics, non-invasive to the current project code, and has universality, reducing the workload and maintenance cost of code development.

[0072] As an optional implementation manner, matching the HTML file path of the newly added element with the HTML file paths of all elements in the pre-stored web page to determine the parent element of each of the newly added elements includes:

[0073] Traversing all elements in the webpage, constructing a key-value pair set including HTML file path information of each element; in the key-value pair, the key is the HTML file path of each element, and the value is 0;

[0074] The HTML file path of the newly added element is matched with the key-value pair set, the parent element of the newly added element is determined, and 1 is added to the value of the matched key-value pair.

[0075] For example, a new variable a of a map type (data structure for storing a collection of key-value pairs) is first added. All elements in the web page are traversed, and the HTML file paths of all elements in the web page are used as the keys of variable a, and the value corresponding to each HTML file path is 0. Then, the HTML file path of each newly added element is matched with the HTML file path in variable a respectively. If the match is successful, the value of the successfully matched key-value pair is increased by 1.

[0076] In the embodiment of the present invention, the effect of adding 1 to the value corresponding to the HTML path can be used in data verification scenarios, which is convenient for development and testing. When printing out the variable a, it can be intuitively verified from the data whether its parent path conforms to one of the actual maximum area elements.

[0077] As an optional implementation, the method further includes:

[0078] Get the third timestamp when the HTML structure of the web page is loaded;

[0079] A difference value obtained by subtracting the third timestamp from the first timestamp of each newly added element is used as the loading time consumption of each newly added element.

[0080] Exemplarily, the DOMContentLoaded event is monitored on the web page through document.addEventListener, wherein the DOMContentLoaded event refers to an event triggered when the HTML structure of the web page is loaded. When the DOMContentLoaded event is triggered, the performance.now() function is executed to count the timestamp when the HTML structure of the web page is loaded, that is, the third timestamp when the HTML structure of the web page is loaded. As mentioned above, the newly added element is an element that changes on the web page after the HTML structure of the web page is loaded. According to the first timestamp when the newly added element is loaded, and the third timestamp when the HTML structure of the web page is loaded, the loading time of the newly added element on the web page can be obtained. It can be understood that the window.onpopstate event occurs first, indicating that the route of the web page has changed, and then the DOMContentLoaded event occurs, indicating that the HTML structure of the web page has been loaded.

[0081] In an embodiment of the present invention, the loading time of each new element can be obtained by subtracting the third timestamp when the HTML structure of the web page is loaded from the first timestamp when the loading of each new element is completed. Through the loading time, the time required for each new element to be loaded by the back-end asynchronous request can be known, and there is no need to embed code, which reduces development workload and maintenance costs, and assists developers or product personnel in making optimized interface decisions.

[0082] As an optional implementation manner, the determining of the newly added element in the webpage includes:

[0083] Get all the newly added elements of the web page;

[0084] Eliminate the newly added elements that meet any of the following conditions, including:

[0085] Not displayed on the web page;

[0086] Not a DOM element;

[0087] Not within the maximum area of ​​the web page.

[0088] Exemplarily, a MutationObserver object is instantiated, and the MutationObserver object allows a callback method to be passed in. When there are new changes to the elements on the web page, the MutationObserver object executes the preset callback method, and the custom logic that can be executed is pre-written in the callback method. Under this custom logic, when the callback method determines whether there are new elements, it will filter out some of the new elements. The filtered new elements include those that are not displayed on the interface, are not DOM elements, or are not within the maximum area of ​​the web page. Specifically, the new elements that are filtered out have an element style whose display attribute is "none", an element whose nodeType attribute is Node.ELEMENT_NODE, and an element tag of "STYLE" or "SCRIPT".

[0089] In an embodiment of the present invention, when determining a new element on a web page, first obtain all the new elements loaded in the web page, then eliminate the new elements that do not meet the preset conditions, and finally obtain the new elements in the web page that are rendered after an asynchronous request from a back-end interface. The new elements are used to calculate the user's perceived time, thereby reducing interference information for subsequent perceived time calculations and improving processing efficiency.

[0090] Example 2

[0091] Based on the above method for obtaining the user perceived time of a web page, Figure 2As shown, an embodiment of the present invention provides a schematic diagram of a structure of a device for obtaining a web page user's perceived duration, the device comprising a monitoring module 201, a determining module 202 and a calculating module 203;

[0092] The monitoring module 201 is used to obtain the start timestamp of the route change of the web page;

[0093] The determining module 202 is used to determine the newly added elements in the webpage, and obtain the second timestamp of the completion of loading of the parent element of each newly added element according to the first timestamp of the completion of loading of each newly added element;

[0094] The calculation module 203 is used to calculate the area occupied by each parent element in the webpage, and take the difference between the second timestamp of the parent element with the largest occupied area and the start timestamp as the user perceived duration.

[0095] For other details about how the modules in the above-mentioned device for obtaining the perceived duration of a web page user implement the above-mentioned technical solution, reference may be made to the description of the method for obtaining the perceived duration of a web page user provided in the above-mentioned embodiment of the invention, which will not be repeated here.

[0096] Based on the above method of obtaining the perceived time of web page users, Figure 3 As shown, an embodiment of the present invention further provides a structural schematic diagram of a device for obtaining the perceived duration of a web page by a user, wherein the identification device includes a processor 31 and a memory 32 coupled to the processor 31. The memory 32 stores a computer program, and when the computer program is executed by the processor 31, the processor 31 executes the steps of a method for obtaining the perceived duration of a web page by a user in the above embodiment.

[0097] For other details about the processor 31 in the above-mentioned device for obtaining the perceived duration of a web page user to implement the above-mentioned technical solution, reference may be made to the description of a method for obtaining the perceived duration of a web page user provided in the above-mentioned embodiment of the invention, which will not be repeated here.

[0098] Among them, the processor 31 can also be called a CPU (Central Processing Unit), and the processor 31 may be an integrated circuit chip with signal processing capabilities; the processor 31 can also be a general-purpose processor, DSP (Digital Signal Process), ASIC (Application Specific Integrated Circuit), FPGA (Field Programmable Gate Array) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, among which the general-purpose processor can be a microprocessor or the processor 31 can also be any conventional processor, etc.

[0099] like Figure 4 As shown, the embodiment of the present invention also provides a schematic diagram of the structure of a computer-readable storage medium, on which a readable computer program 41 is stored; wherein the computer program 41 can be stored in the above storage medium in the form of a software product, including a number of instructions for enabling a computer device (which can be a personal computer, a server, or a network device, etc.) or a processor to execute all or part of the steps of the method described in each embodiment of the present invention. The aforementioned storage medium includes: U disk, mobile hard disk, magnetic disk or optical disk, ROM (Read-Only Memory), RAM (Random Access Memory) and other media that can store program codes, or terminal devices such as computers, servers, mobile phones, and tablets.

[0100] In the several embodiments provided in the present application, it should be understood that the disclosed systems, devices and methods can be implemented in other ways. For example, the device embodiments described above are only schematic. For example, the division of the modules is only a logical function division. There may be other division methods in actual implementation, such as multiple modules or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be an indirect coupling or communication connection through some interfaces, devices or modules, which can be electrical, mechanical or other forms.

[0101] The modules described as separate components may or may not be physically separated, and the components shown as modules may or may not be physical modules, that is, they may be located in one place or distributed on multiple network modules. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0102] In addition, each functional module in each embodiment of the present application can be integrated into a processing module, or each module can exist physically separately, or two or more modules can be integrated into one module. The above-mentioned integrated module can be implemented in the form of hardware or in the form of a software functional module. If the integrated module is implemented in the form of a software functional module and sold or used as an independent product, it can be stored in a computer-readable storage medium.

[0103] In the above embodiments, all or part of the embodiments may be implemented by software, hardware, firmware or any combination thereof. When implemented by software, all or part of the embodiments may be implemented in the form of a computer program product.

[0104] The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, the process or function described in the embodiment of the present application is generated in whole or in part. The computer may be a general-purpose computer, a special-purpose computer, a computer network, or other programmable devices. The computer instructions may be stored in a computer-readable storage medium, or transmitted from one computer-readable storage medium to another computer-readable storage medium, for example, the computer instructions may be transmitted from a website site, a computer, a server, or a data center by wired (e.g., coaxial cable, optical fiber, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) mode to another website site, computer, server, or data center. The computer-readable storage medium may be any available medium that a computer can store or a data storage device such as a server or a data center that includes one or more available media integrations. The available medium may be a magnetic medium, (e.g., a floppy disk, a hard disk, a tape), an optical medium (e.g., a DVD), or a semiconductor medium (e.g., a solid-state drive (SSD)), etc.

[0105] The technical solution provided by the present application is introduced in detail above. The principles and implementation methods of the present application are explained by using specific examples in the present application. The description of the above embodiments is only used to help understand the method of the present application and its core idea. At the same time, for those skilled in the art, according to the idea of ​​the present application, there will be changes in the specific implementation methods and application scope. In summary, the content of this specification should not be understood as a limitation on the present application.

[0106] Those skilled in the art will appreciate that the embodiments of the present application may be provided as methods, systems, or computer program products. Therefore, the present application may adopt the form of a complete hardware embodiment, a complete software embodiment, or an embodiment in combination with software and hardware. Moreover, the present application may adopt the form of a computer program product implemented in one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) that include computer-usable program code.

[0107] The present application is described with reference to the flowcharts and / or block diagrams of the methods, devices (systems), and computer program products according to the present application. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of the processes and / or boxes in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0108] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0109] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process. Figure 1 A process or multiple processes and / or boxes Figure 1 A step that specifies a function in one or more boxes.

[0110] Obviously, those skilled in the art can make various changes and modifications to the present application without departing from the spirit and scope of the present application. Thus, if these modifications and variations of the present application fall within the scope of the claims of the present application and their equivalents, the present application is also intended to include these modifications and variations.

Claims

1. A method for obtaining the user perceived duration of a web page, characterized in that: include: Get the start timestamp of the web page route change; Determine the newly added elements in the webpage, and obtain the second timestamp of the completion of loading of the parent element of each of the newly added elements according to the first timestamp of the completion of loading of each of the newly added elements; The area occupied by each of the parent elements in the webpage is calculated, and the difference between the second timestamp of the parent element with the largest occupied area and the start timestamp is taken as the user perceived duration.

2. The method for obtaining the user perceived duration of a web page according to claim 1, characterized in that: The step of obtaining, according to the first timestamp of each newly added element completing loading, the second timestamp of each parent element completing loading of each newly added element comprises: Matching the HTML file path of the newly added element with the HTML file paths of all elements in the pre-stored web page to determine the parent element of each of the newly added elements; The first timestamp of the completion of loading of the newly added element is used as the second timestamp of the completion of loading of its parent element.

3. The method for obtaining the user perceived duration of a web page according to claim 2, characterized in that: The method of using the first timestamp of the newly added element after loading as the second timestamp of the parent element after loading includes: If there are multiple newly added elements that are sibling elements of the same layer, when performing HTML file path matching, the first timestamp of the newly added element that is loaded first among the multiple newly added elements is used as the second timestamp of its parent element.

4. The method for obtaining the user perceived duration of a web page according to claim 1, characterized in that: The method further comprises: Get the third timestamp when the HTML structure of the web page is loaded; A difference value obtained by subtracting the third timestamp from the first timestamp of each newly added element is used as the loading time consumption of each newly added element.

5. The method for obtaining the user perceived duration of a web page according to claim 1, characterized in that: The step of determining the newly added elements in the webpage includes: Get all the newly added elements of the web page; Eliminate the newly added elements that meet any of the following conditions, including: Not displayed on the web page; Not a DOM element; Not within the maximum area of ​​the web page.

6. The method for obtaining the user perceived duration of a web page according to claim 1, characterized in that: The method of obtaining the start timestamp of the change in the route of the web page includes: If the web page belongs to the Vue development framework or the React development framework, a polling comparison is performed to determine whether the route of the web page has changed at a preset time interval; When the route of the current webpage is inconsistent with the route of the previous webpage, the difference obtained by subtracting the preset interval from the start timestamp when the current route changes is used as the start timestamp.

7. The method for obtaining the user perceived duration of a web page according to claim 2, characterized in that: The step of matching the HTML file path of the newly added element with the HTML file paths of all elements in the pre-stored web page to determine the parent element of each of the newly added elements includes: Traversing all elements in the webpage, constructing a key-value pair set including HTML file path information of each element; in the key-value pair, the key is the HTML file path of each element, and the value is 0; The HTML file path of the newly added element is matched with the key-value pair set, the parent element of the newly added element is determined, and 1 is added to the value of the matched key-value pair.

8. A device for obtaining the perceived duration of a web page by a user, characterized in that: It includes a monitoring module, a determination module and a calculation module; The monitoring module is used to obtain the start timestamp of the route change of the web page; The determination module is used to determine the newly added elements in the webpage, and obtain the second timestamp of the completion of loading of the parent element of each newly added element according to the first timestamp of the completion of loading of each newly added element; The calculation module is used to calculate the area occupied by each parent element in the webpage, and take the difference obtained by subtracting the start timestamp from the second timestamp of the parent element with the largest occupied area as the user perceived duration.

9. A device for obtaining the perceived duration of a web page user, characterized in that: comprising a memory and a processor, wherein: The memory is used to store computer programs; The processor is used to read the computer program in the memory and execute the steps of the method for obtaining the user perceived duration of a web page according to any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that: A readable computer program is stored thereon, and when the program is executed by a processor, the steps of the method for obtaining the user perceived duration of a web page as claimed in any one of claims 1 to 7 are implemented.

Images