A method, device and electronic device for statistically calculating the interactive time of a single-page application

Abstract

An embodiment of the present invention discloses a method, device, and electronic device for counting the interactive time of a single-page application, which relates to the field of data processing. The method includes: when the electronic device receives a request input by the user, it can request and obtain file information through the system network; then it can establish a node tree according to the file information; and it can determine the rendering time and weight of different batches of nodes in the node tree; and it can determine the information of the system network request; after that, the electronic device can determine the interactive time according to the rendering time, weight, and the information of the system network request of each batch of nodes. The embodiment of the present invention can improve the calculation accuracy of the interactive time of a single-page application.

Description

Technical Field

[0001] The present invention relates to the field of data processing, and in particular, to a method, an apparatus, and an electronic device for statistically calculating the interactive time of a single-page application. Background Art

[0002] With the development of the World Wide Web (WWW) technology, related Web applications have become increasingly widespread. For example, in a single-page Web application, the browser initially loads necessary hypertext markup language (HTML) texts, cascading style sheets (CSS) files, JavaScript (JS) files, etc. Subsequently, page elements (nodes) can be dynamically generated through a JS script and the user interface can be rendered.

[0003] The performance of a Web application (such as the interface loading speed, etc.) is related to the click-through rate and retention rate of users. Therefore, during the testing and online stages of a Web application, its performance can be evaluated through some evaluation metrics, so as to monitor the performance of the Web application, and then corresponding measures can be taken to optimize it and improve the user experience. Among them, an important evaluation metric for a Web application is the time to interactive (TTI).

[0004] Currently, for traditional Web applications, the main content of their user interfaces is pre-written in HTML texts, that is, page elements (such as text (txet) tag nodes, paragraph (p) tag nodes, etc.) are all pre-written in the HTML texts. When the HTML text is rendered, the user can perform normal interactions. Therefore, it can be monitored through the event interfaces (application programming interfaces, APIs) provided by the browser, such as the document load event (DOMContentLoaded). When the HTML document is completely loaded and parsed, the DOMContentLoaded event is triggered. Therefore, when this event is triggered, the TTI can be determined. However, for single-page applications, since most of the content of the user interface of a single-page Web application is dynamically generated and rendered through a JS script, etc., the HTML text only contains a small part of the content of the user interface. Therefore, the TTI determined through the event interface of the browser is inaccurate. Summary of the Invention

[0005] An embodiment of the present invention discloses a method, apparatus, and electronic device for statistically calculating the interactive time of a single-page application, which is used to improve the calculation accuracy of the interactive time of the single-page application.

[0006] In a first aspect, a method for statistically calculating the interactive time of a single-page application is disclosed. This method for statistically calculating the interactive time of a single-page application can be applied to an electronic device or a module (such as a chip) in the electronic device. Hereinafter, an example of applying it to an electronic device will be described. The method may include: when receiving a request input by a user, obtaining file information by requesting through a system network according to the request input by the user; establishing a node tree according to the file information; determining the rendering time and weight of different batches of nodes in the node tree; determining the information of the system network request; and determining the TTI according to the rendering time, the weight, and the information of the system network request.

[0007] In an embodiment of the present invention, when an electronic device receives an input request from a user, it can obtain necessary file information by requesting through a system network, and then construct a node tree through the file information. Moreover, the electronic device can monitor the node changes of the node tree. When monitoring node changes, it can statistically calculate the rendering time and weight of this batch of nodes. The electronic device can also monitor its own network request to obtain the information of the system network request. Then, it can determine the interactive time according to the rendering time of each batch of nodes, the weight of each batch of nodes, and the information of the system network request. It can be seen that by monitoring node changes and network requests, obtaining the rendering time of each batch of nodes, the weight of each batch of nodes, and the information of the system network request, and then calculating the interactive time, the calculation accuracy of the interactive time of the single-page application can be improved.

[0008] As a possible implementation manner, the node tree includes N batches of nodes, where N is a positive integer; the determining the rendering time and weight of different batches of nodes in the node tree includes: obtaining the rendering time and identifier of each node in the node tree, and nodes with the same rendering time belong to the same batch of nodes; determining the weight of the nodes belonging to the same batch according to the identifier of the node.

[0009] In an embodiment of the present invention, the electronic device can obtain the rendering time and identifier of each node in the node tree. Among them, nodes with the same rendering time belong to the same batch of nodes. Then, it can determine the weight of each batch of nodes through the identifier of the node to calculate the interactive time.

[0010] As a possible implementation manner, the determining the weight of the nodes belonging to the same batch according to the identifier of the node includes: determining the depth of the node in the node tree according to the identifier of the node; determining the weight of the node according to the depth of the node; and summing the weights of the nodes belonging to the same batch as the determined weight of the same batch of nodes.

[0011] In the embodiments of the present invention, since the greater the depth of a node, the more important it may be for page rendering (i.e., the more important it is for presenting page content and user interaction), the weight of a node is related to the depth of the node (for example, the weight of a node can be the depth of the node). The electronic device can determine the depth of the node according to the identifier of the node, and then can determine the weight of the node according to the depth of the node, and can sum the weights of the nodes in the same batch to determine the weight of this batch of nodes, so as to calculate the interactive time.

[0012] As a possible implementation manner, determining the weights of the nodes belonging to the same batch according to the identifier of the node includes: determining the weight of the node corresponding to the identifier according to the correspondence between the identifier and the weight of the node; summing the weights of the nodes belonging to the same batch to determine the weight of the same batch of nodes.

[0013] In the embodiments of the present invention, since nodes of different categories have different degrees of importance for page rendering (i.e., for presenting page content and user interaction), the weights corresponding to nodes of different categories are different. The more important the node, the greater the corresponding weight. There is a correspondence between the identifier of the node and the weight of the node. Therefore, the electronic device can determine the weight of the node according to the identifier of the node, and can sum the weights of all the nodes in the same batch to determine the weight of this batch of nodes, so as to calculate the interactive time.

[0014] As a possible implementation manner, the information of the system network request includes the start time and end time of the system network request. Determining the TTI according to the rendering time, the weight, and the information of the system network request includes: determining the TTI according to the rendering time, the weight, the start time, and the end time.

[0015] As a possible implementation manner, determining the information of the system network request includes: obtaining the information of the network request, where the information of the network request includes the start time and end time of M network requests, the M network requests include the system network request, and M is a positive integer; determining the start time of the earliest network request among the M network requests as the start time of the system network request; determining the idle time greater than or equal to the threshold according to the start time and end time of the M network requests, and determining the start time of the idle time as the end time of the system network request.

[0016] In an embodiment of the present invention, the electronic device can obtain the start time and end time of all network requests, and then determine the start time of the system network request as the start time of the earliest network request among all network requests. At the same time, since the network requests can include system network requests and user network requests, and there is a long idle time between the user network requests and the system network requests, an accurate end time of the system network request can be obtained by setting a threshold and determining the end time of the last network request before the idle time (i.e., the start time of the idle time) as the end time of the system network request when the idle time is greater than or equal to the threshold.

[0017] As a possible implementation manner, determining the TTI according to the rendering time, the weight, the start time, and the end time includes: when there are no batch nodes with a non-zero weight before the end time and there are batch nodes with a non-zero weight after the end time, determining the difference between the time corresponding to the rendering peak after the end time and the start time as the TTI; or, when there are batch nodes with a non-zero weight before the end time and there are no batch nodes with a non-zero weight after the end time, determining the difference between the time corresponding to the rendering peak before the end time and the start time as the TTI; or, when there are batch nodes with a non-zero weight before the end time and there are batch nodes with a non-zero weight after the end time, determining the time corresponding to the rendering peak before the end time as the first time and the time corresponding to the rendering peak after the end time as the second time; when the absolute value of the difference between the first time and the end time is less than or equal to the absolute value of the difference between the second time and the end time, determining the difference between the first time and the start time as the TTI; when the absolute value of the difference between the first time and the end time is greater than the absolute value of the difference between the second time and the end time, determining the difference between the second time and the start time as the TTI.

[0018] In an embodiment of the present invention, the electronic device may first determine whether there are batch nodes with non-zero weights before and after the end time. When it is determined that there are batch nodes with non-zero weights before the end time and there are no batch nodes with non-zero weights after the end time, it indicates that the nodes related to the window content (i.e., the content visible on the user page) have been rendered before the end time of the system network request. The difference between the time corresponding to the rendering peak before the end time and the start time can be determined as the interactive time. When it is determined that there are no batch nodes with non-zero weights before the end time and there are batch nodes with non-zero weights after the end time, it indicates that the nodes related to the window content start to be rendered after the end time of the system network request. The difference between the time corresponding to the rendering peak after the end time and the start time can be determined as the interactive time. When it is determined that there are batch nodes with non-zero weights before the end time and there are also batch nodes with non-zero weights after the end time, it indicates that nodes are rendered both before and after the end time. The difference between the time corresponding to the rendering peak closer to the end time and the start time can be determined as the interactive time.

[0019] In a second aspect, a device for statistically calculating the interactive time of a single-page application is disclosed. The device may be an electronic device or a module (e.g., a chip) in an electronic device. The device may include: an acquisition unit, configured to obtain file information through a system network request according to a request input by a user when receiving the request input by the user; a building unit, configured to build a node tree according to the file information; a determination unit, configured to determine the rendering time and weight of different batch nodes in the node tree; the determination unit is further configured to determine the information of the system network request; the determination unit is further configured to determine the TTI according to the rendering time, the weight, and the information of the system network request.

[0020] As a possible implementation manner, the node tree includes N batch nodes, where N is a positive integer; the determination unit determining the rendering time and weight of different batch nodes in the node tree includes: obtaining the rendering time and identifier of each node in the node tree, and nodes with the same rendering time belong to the same batch node; determining the weight of the nodes belonging to the same batch node according to the identifier of the node.

[0021] As a possible implementation manner, the determination unit determining the weight of the nodes belonging to the same batch node according to the identifier of the node includes: determining the depth of the node in the node tree according to the identifier of the node; determining the weight of the node according to the depth of the node; and summing the weights of the nodes belonging to the same batch to determine the weight of the same batch of nodes.

[0022] As a possible implementation, the determining unit determines the weights of nodes belonging to the same batch according to the identifiers of the nodes, including: determining the weights of the nodes corresponding to the identifiers according to the correspondence between the nodes and the weights; and summing up the weights of the nodes belonging to the same batch to determine the weights of the nodes in the same batch.

[0023] As a possible implementation, the information of the system network request includes the start time and the end time of the system network request. The determining unit determines the TTI according to the rendering time, the weights, and the information of the system network request, including: determining the TTI according to the rendering time, the weights, the start time, and the end time.

[0024] As a possible implementation, the obtaining unit is further configured to obtain the information of the network request. The information of the network request includes the start time and the end time of M network requests. The M network requests include the system network request, and M is a positive integer. The determining unit determines the information of the system network request, including: determining the start time of the earliest network request among the M network requests as the start time of the system network request; and determining the idle time greater than or equal to the threshold according to the start time and the end time of the M network requests, and determining the start time of the idle time as the end time of the system network request.

[0025] As a possible implementation, the determining unit determines the TTI according to the rendering time, the weights, the start time, and the end time, including: in the case that there are no batch nodes with non-zero weights before the end time and there are batch nodes with non-zero weights after the end time, determining the difference between the time corresponding to the rendering peak after the end time and the start time as the TTI; or, in the case that there are batch nodes with non-zero weights before the end time and there are no batch nodes with non-zero weights after the end time, determining the difference between the time corresponding to the rendering peak before the end time and the start time as the TTI; or, in the case that there are batch nodes with non-zero weights before the end time and there are batch nodes with non-zero weights after the end time, determining the time corresponding to the rendering peak before the end time as the first time and the time corresponding to the rendering peak after the end time as the second time; in the case that the absolute value of the difference between the first time and the end time is less than or equal to the absolute value of the difference between the second time and the end time, determining the difference between the first time and the start time as the TTI; in the case that the absolute value of the difference between the first time and the end time is greater than the absolute value of the difference between the second time and the end time, determining the difference between the second time and the start time as the TTI.

[0026] A third aspect discloses an electronic device, which may include a memory, a processor, and a communication module. The communication module is used to communicate with other electronic devices and a server; the memory is used to store a computer program, and the computer program includes program instructions; when the processor executes the computer program stored in the memory, the processor is caused to execute the method for statistically calculating the interactive time of a single-page application disclosed in the first aspect or any implementation manner of the first aspect.

[0027] A fourth aspect discloses a computer-readable storage medium, on which a computer program or computer instructions are stored. When the computer program or computer instructions run, the method for statistically calculating the interactive time of a single-page application disclosed in the above aspects is implemented.

[0028] A fifth aspect discloses a chip, including a processor, which is used to execute a program stored in a memory. When the program is executed, the chip is caused to execute the above method.

[0029] As a possible implementation manner, the memory is located outside the chip.

[0030] A sixth aspect discloses a computer program product, which includes computer program code. When the computer program code runs, the method for statistically calculating the interactive time of the single-page application is caused to be executed. BRIEF DESCRIPTION OF THE DRAWINGS

[0031] In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings required for description in the embodiments will be briefly introduced below. Obviously, the drawings in the following description are only some embodiments of the present invention. For those of ordinary skill in the art, other drawings can be obtained based on these drawings without creative efforts.

[0032] Figure 1 is a schematic diagram of a network architecture disclosed in an embodiment of the present invention;

[0033] Figure 2 is a schematic diagram of a node tree disclosed in an embodiment of the present invention;

[0034] Figure 3 is a schematic diagram of a node tree, a CSS rule tree, and a rendering tree disclosed in an embodiment of the present invention;

[0035] Figure 4 is a schematic flowchart of a method for statistically calculating the interactive time of a single-page application disclosed in an embodiment of the present invention;

[0036] Figure 5 is a schematic diagram of a network request disclosed in an embodiment of the present invention;

[0037] Figure 6 It is a schematic diagram of rendering information disclosed in an embodiment of the present invention;

[0038] Figure 7 It is another schematic diagram of rendering information disclosed in an embodiment of the present invention;

[0039] Figure 8 It is a schematic structural diagram of a device for statistically calculating the interactive time of a single-page application disclosed in an embodiment of the present invention;

[0040] Figure 9 It is a schematic structural diagram of an electronic device disclosed in an embodiment of the present invention. Specific embodiments

[0041] The embodiments of the present invention disclose a method, a device, and an electronic device for statistically calculating the interactive time of a single-page application, which are used to improve the calculation accuracy of the interactive time of a single-page application.

[0042] Next, the technical solutions in the embodiments of the present application will be clearly and completely described in conjunction with the accompanying drawings in the embodiments of the present application.

[0043] Obviously, the described embodiments are only a part of the embodiments of the present application, rather than all the embodiments. Mentioning "embodiment" in this article means that the specific features, structures, or characteristics described in conjunction with the embodiment may be included in at least one embodiment of the present application. The phrase appears in various positions in the specification does not necessarily refer to the same embodiment, nor is it an independent or alternative embodiment mutually exclusive with other embodiments. Those skilled in the art can explicitly and implicitly understand that the embodiments described herein can be combined with other embodiments. Based on the embodiments in the present application, all other embodiments obtained by those of ordinary skill in the art without creative efforts belong to the scope of protection of the present application. The terms "first", "second", "third", etc. in the specification and claims of the present application and the accompanying drawings are used to distinguish different objects, rather than to describe a specific order. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusion. For example, a series of steps or units are included, or optionally, steps or units not listed are further included, or optionally, other steps or units inherent to these processes, methods, products, or devices are further included.

[0044] Only the parts relevant to this application are shown in the accompanying drawings, not all of the content. Before discussing the exemplary embodiments in more detail, it should be noted that some exemplary embodiments are described as processes or methods depicted as flowcharts. Although the flowcharts describe the operations (or steps) as sequential processes, many of the operations can be implemented in parallel, concurrently, or simultaneously. In addition, the order of the operations can be rearranged. The process can be terminated when its operations are completed, but it can also have additional steps not included in the drawings. The process can correspond to a method, function, procedure, subroutine, subprogram, etc.

[0045] The terms "component", "module", "system", "unit", etc. used in this specification are used to represent computer-related entities, hardware, firmware, combinations of hardware and software, software, or software in execution. For example, a unit can be, but is not limited to, a process running on a processor, a processor, an object, an executable file, an execution thread, a program, and / or distributed between two or more computers. In addition, these units can be executed from various computer-readable media storing various data structures. A unit can communicate, for example, through local and / or remote processes according to a signal having one or more data packets (such as data from a second unit interacting with a local system, a distributed system, and / or a network. For example, the Internet interacting with other systems through a signal).

[0046] To better understand the embodiments of the present invention, the network architecture used in the embodiments of the present invention will be described below.

[0047] Please refer to Figure 1 , Figure 1 which is a schematic diagram of a network architecture disclosed in the embodiments of the present invention. As Figure 1 shown, the network architecture may include a server and an electronic device. The server may include one or more servers ( Figure 1 one is schematically shown in Figure 1 ). The electronic device may include one or more electronic devices (

[0048] one is schematically shown in Figure 1 ). As

[0049] shown, communication can be carried out between the electronic device and the server so that data can be transmitted between the electronic device and the server. Figure 1 It should be noted that the network architecture shown in

[0050] is not limited to only including the electronic devices and the server shown in the figure. Figure 1 It should be understood that the network architecture shown in

[0051] It can be understood that the electronic device can be a terminal device. Among them, the terminal device can be called a user equipment (UE), a mobile station (MS), a mobile terminal (MT), etc., and is a device that can provide data connectivity to users. The terminal device can be a handheld terminal, a laptop computer, a wearable device (such as a smart watch, a smart bracelet, a pedometer, etc.), a vehicle-mounted device (such as a car, a high-speed train, etc.), a virtual reality (VR) device, an augmented reality (AR) device, a wireless terminal in industrial control, a smart home device (such as a refrigerator, a TV, an air conditioner, an electric meter, etc.), a smart robot, a wireless terminal in self-driving, a wireless terminal in remote medical surgery, a wireless terminal in a smart grid, a wireless terminal in transportation safety, a wireless terminal in a smart city, or a wireless terminal in a smart home, a flight device (such as a smart robot, a drone, etc.) or other devices that can access the network.

[0052] The server can be a computer device, and the computer device includes but is not limited to a terminal device or a cloud server. The method provided by the embodiments of the present invention can be executed by the computer device.

[0053] To better understand the embodiments of the present invention, the related technologies of the embodiments of the present invention will be described below.

[0054] An electronic device can receive an input operation (input request) by the user on the keyboard, such as receiving a website address (i.e., a uniform resource locator (URL)) input by the user. After that, in response to the user's input, the electronic device can send a request for requesting a resource to the server. Correspondingly, the server can receive the request sent by the electronic device. After that, the server can send the corresponding resource to the electronic device according to the request. The resource can include hypertext markup language (HTML) files, extensible hypertext markup language (XHTML) files, extensible markup language (XML) files, cascading style sheets (CSS) files, script (javascript, JS) files, and necessary initialization data, etc. After that, when the electronic device receives the resource sent by the server, it will start to parse the corresponding resource, and then render and display the user interface (i.e., the page presented on the screen of the electronic device).

[0055] The document object model (DOM) is a platform- and language-neutral standard programming interface. The content, structure, and style of a document (such as an HTML document, an XML document) can be dynamically accessed and updated through programs and scripts. For example, in web application development, the HTML document structure is accessed, created, deleted, or modified through a JS script (i.e., a JS code program). A web application can also be understood as various websites that provide services.

[0056] A multi-page web application (MPA), abbreviated as a multi-page application, refers to an application with multiple independent pages. Each page must reload relevant resources such as JS and CSS to complete the rendering and display of the page. For the page jump of a multi-page application, the server background will return a new HTML document, and a full-page resource refresh is required.

[0057] A single-page web application (SPA), also simply referred to as a single-page application, refers to an application that uses a single HTML document to achieve multiple page switches and functions. These different pages have only one HTML document as the entry. At the beginning, only relevant resources such as HTML, JS, and CSS need to be loaded once, and then JS scripts are used to complete the generation and rendering of page elements (nodes). The page jump of a single-page application is to switch relevant components and only refresh local resources, that is, to modify page elements and render and display the page through JS scripts, etc. Therefore, the page switching of a single-page application is relatively fast, and the user experience is better.

[0058] For HTML text, it can also be called an HTML document. An HTML document can include HTML tags (such as text tags, paragraph (p) tags) and text content. HTML tags can also be called HTML elements, and an HTML document can also be called a web page. All content in an HTML document can be regarded as nodes. The entire document is a document node, each HTML element is an element node, the text within an HTML element is a text node, each HTML attribute is an attribute node, and each comment is a comment node. The entire HTML document can be regarded as a node tree, also known as a DOM tree (tree). Please refer to Figure 2 , Figure 2 which is a schematic diagram of a node tree disclosed in an embodiment of the present invention. As Figure 2 shown, the entire HTML document can be a document (document) tag node, also simply referred to as a document node. The document node can be the root node of the node tree. The hypertext markup language (html) tag node can be a child node of the document node. Correspondingly, the document node is the parent node of the html node. Similarly, the html tag node can be the parent node of the document head (head) tag node and the document body (body) tag node. The title (title) tag node can be a child node of the head tag node; the body tag node can be the parent node of the p tag node and the division (div) tag node. Correspondingly, they can be child nodes of the body tag node; the div tag node can be the parent node of the text tag node, and the text tag node can be a child node of the div node. Tag nodes at the same level can be called sibling nodes or sibling nodes (such as the head node and the body node). Tag nodes can also be simply referred to as nodes.

[0059] All nodes in the node tree can be accessed, modified, etc. through JS scripts. Therefore, the structure of the document can be dynamically modified, thereby changing the structure of the node tree.

[0060] It should be understood thatFigure 2 The node tree shown is only for illustrative purposes and is not limiting thereto.

[0061] In the process of a Web application presenting an entire page, it will go through parsing the HTML text to build a node tree, parsing the CSS file to build a CSS tree; and while building the node tree and the CSS tree, page rendering will be performed, that is, while parsing resources (including HTML text, CSS file), the page content will be rendered and displayed. The following details the page presentation process of the electronic device for better understanding of the embodiments of the present invention.

[0062] The first step: The electronic device receives the resources sent by the server. If the resource includes HTML text, the electronic device can parse the HTML text to build a node tree. Among them, the html tags can be parsed into the tag nodes of the node tree. For example, a paragraph ( )The label is parsed into a node of the node tree. If the resource includes a CSS file, the electronic device can parse the CSS file to construct a CSS tree. The CSS tree can also be called a CSS rule tree (CSS rule tree), and can also be called a CSS object model (CSS object model, CSSOM) tree. Among them, the generation of the node tree and the CSS tree can be carried out simultaneously, and the generation processes of the node tree and the CSS tree may be blocked by the loading and execution of the JS script. The JS script may add nodes to the node tree, modify the structure of the node tree, and modify the structure of the CSS tree, etc.

[0063] Step 2: The electronic device can generate a render tree according to the node tree and the CSSOM tree. The render tree includes display attributes such as the color and size of the label node. Moreover, the render tree is used to display the page and present it to the user. Therefore, elements that are not displayed on the Web page may not be included in the render tree, such as the head label node, etc. In addition, since label nodes with the display property of none will not be displayed on the page, these label nodes may also not be included in the render tree, which can be understood as these label nodes do not participate in the construction of the render tree.

[0064] Please refer to Figure 3 , Figure 3 which is a schematic diagram of a node tree, a CSS rule tree, and a render tree disclosed in an embodiment of the present invention. As Figure 3 shown, according to Figure 3 the node tree and the CSS rule tree in Figure 3 a render tree can be constructed. Among them, Figure 3 the construction of the node tree shown in <link> can refer to the relevant description of the node tree above and will not be elaborated here in detail. Figure 3 In addition to the document node, html node, head node, body node, and p node, the node tree shown in <link> may also include link ( ) nodes, image ( )Nodes, a text node ("Hello, Xiaoming") and a text node ("Xiaohong"). The CSS rule tree mainly includes some style rules. For example, the font size (font-size) of the body node can be 16 pixels (pixel, px); the font-size of the p node can be 16px, and the font weight (font-weight) can be bold; the font-size of the span node can be 16px, and the display property (display) can be none; the font-size of the img node can be 16px, and the float property (float) can be right. As Figure 3 shown, a render tree can be constructed based on the above node tree and CSS rule tree. The render tree mainly includes nodes related to the page display content. For example, the body node and the style rule of the body node (font-size: 16px); the style rule of the p node (font-size: 16px, font-weight: bold) and the text content ("Hello, Xiaoming"); the style rule of the img node (font-size: 16px, float: right).

[0065] Step 3: After the electronic device constructs the render tree, it can know which nodes are in the web page, the style rules (CSS properties) of each node, and the relationships between each node according to the render tree. Therefore, the electronic device only needs to know the specific page position (i.e., the position on the display page of the electronic device screen) and size information of each node in the render tree to display the page. Therefore, after obtaining the render tree, the electronic device can perform layout, that is, calculate the position of each node on the screen. Among them, the basic process of the electronic device for page layout can be to use the visible area (display area) of the electronic device as a canvas, with the upper left corner as the base coordinates of (0, 0), and start rendering from the root node of the DOM from left to right and from top to bottom. First, determine the size and position of the display element (node) by calculation. And if the current display element has child elements, the display information of the child elements can be determined first. After the layout is completed, the electronic device can determine the position and size of each element.

[0066] Step 4: After the electronic device determines the position and size of each element (node), it can perform drawing (rendering) to display the page content. That is, the electronic device can traverse the render tree through the rendering engine of the browser, and then can draw each node through the user interface (UI) backend layer. After the drawing is completed, the electronic device page (i.e., the browser page) can display the complete content.

[0067] It should be noted that the above process is completed step by step. However, for a better user experience, the electronic device does not wait until all resource files (such as HTML documents, CSS files, etc.) are parsed before constructing and laying out the rendering tree. Instead, it displays part of the content as soon as part of the files are parsed. At the same time, it may also be downloading other resources through the network so as to present the content to the user interface as early as possible. Specifically, the construction of the node tree and the CSS tree of the electronic device can be carried out synchronously, and the construction of the rendering tree and the layout drawing can also be carried out while constructing the rendering tree and the CSS tree.

[0068] It should be understood that Figure 3 the node tree, CSS rule tree, and rendering tree shown are only exemplary descriptions and do not constitute limitations thereto.

[0069] TTI can also be referred to as the user-interactive time, which refers to the time period from when a user opens a Web application until content is presented on the user interface and the user can perform normal interaction operations (such as clicking, inputting, etc.) (i.e., the application has been visually rendered and can reliably respond to user input). TTI can also be understood as the time required from the start time of the browser processing the current web page (navigation start) until most of the content is displayed on the user interface and the user can perform normal interaction. TTI can also be understood as the time required from when the electronic device sends the first system network request until most of the content is displayed on the user interface and the user can perform normal interaction. As an important performance evaluation indicator, the accuracy of TTI calculation is extremely important. If the TTI calculation is accurate, the performance of the Web application can be monitored, and corresponding measures can be taken to optimize it and improve the user experience.

[0070] Based on the above network architecture, please refer to Figure 4 , Figure 4 which is a schematic flowchart of a method for statistically calculating the interactive time of a single-page application disclosed in an embodiment of the present invention. As Figure 4 shown, the method for statistically calculating the interactive time of a single-page application may include the following steps.

[0071] 401. The electronic device obtains file information through a system network request.

[0072] When the electronic device receives a request input by the user, it can request to obtain file information through the system network. Specifically, the electronic device can receive a request input by the user (such as a URL input by the user). After that, the electronic device can send a system network request to the server according to the request input by the user. The system network request can carry the request input by the user (such as the URL). The system network request can be a Hyper Text Transfer Protocol (HTTP) request. The system network request can be understood as a network request sent by the electronic device to the server to obtain the initial resources (i.e., the resources for rendering the initial page). The HTTP request, also known as the HTTP request message, can include a request line, a request header, a request body, etc. Among them, the request line can include the URL input by the user, that is, the resource path of the request. Correspondingly, the server can receive the HTTP request from the electronic device. After that, the server can determine the resources corresponding to the path according to the received HTTP request and send the corresponding HTTP response to the electronic device. The HTTP response, also known as the HTTP response message, can include a response line, a response header, and a response body. Among them, the response header can include information such as the time of this response, the file length returned by this response, and the file type. The response body can include the file information (i.e., various file resources, such as HTML documents, JS scripts, etc.) returned by the server to the electronic device (client).

[0073] 402. The electronic device establishes a node tree according to the file information.

[0074] After the electronic device obtains the file information, that is, after obtaining various resources, it can parse the resources to establish a node tree. Specifically, the electronic device can parse the file information returned by the server to construct a node tree. For example, the electronic device can parse the content of the HTML document, add the tag nodes of the HTML document to the node tree, and can run the JS script to construct the node tree. At the same time, when the electronic device constructs the node tree, it can also perform node rendering to display the user interface content. The node tree can also be called the DOM tree.

[0075] For example, the file information obtained by the electronic device can be an HTML document, and its document content can be:

[0076] <!DOCTYPE html>

[0077]

[0078]

[0079] <link rel＝"stylesheet"type＝"text css"href＝"mystyle.css">

[0080]

[0081]

[0082] Hello, Xiaoming Xiaohong

[0083] <imgsrc="smiley-2.gif"alt="smiley face">

[0084]

[0085]

[0086] Among them, the first line <!DOCTYPE html> element of the above HTML document can declare that the current HTML document version is HTML5. The element can be the root element of the HTML document page. The element can include all the head tag elements, such as a style sheet file (CSS file) can be inserted, and various meta information. The above <link> The element can link to a style sheet, defining the relationship between the document and external resources. href="mystyle.css" can define the location (URL) of the style file. The element can include the visible page content. The included in the element The element can define a paragraph, which can include content ("Hello, Xiaoming"), and the content can be displayed in a web page (i.e., the user interface) of the browser of the electronic device. The element may also include The element, which can be used to combine the content in the paragraph, will A part of the text in an element is separated out, such as separating out part of the content of a paragraph ("Xiaohong"). The above document may also include an element that can define an image in an HTML page for displaying an image in a web page of a browser of an electronic device. Among them, src = "smiley-2.gif" can specify the URL of the image, that is, the address of the image resource, and alt = "smiley face" can specify the alternative text of the image ("smiley face"), that is, the text that can be displayed on the page when no image is displayed. The HTML element may include a pair of paired tags, such as the and in the above document, and and etc. Among them, the first tag in the tag pair is the start tag, and the second tag is the end tag. The HTML element can also include an unpaired tag, such as the <(line break)br> tag, that is, the element.

[0087] An electronic device can construct a node tree based on the above HTML document. Specifically, the electronic device can parse the content of the HTML document in sequence from top to bottom and from left to right. When parsing the <!DOCTYPE html> element, it can construct the first node of the node tree, that is, the document node. When parsing an element, it can construct a child node under the document node, that is, the hypertext markup language (html) node. After that, when the electronic device parses an element, it can construct a head child node under the html node. After that, the electronic device can parse to <link> an element, and then add a link node under the head node. Then, the electronic device can parse an element, and then add a body node under the html node. After that, it can parse to An element can add a p node under the body node. After that, the text "Hello, Xiaoming" can be parsed. The electronic device can add a text node ("Hello, Xiaoming") under the p node. After that, the electronic device can parse to An element can add a span node under the p node. After that, the electronic device can parse the text "Xiaohong", and can add a text node ("Xiaohong") under the span node. Then, the electronic device can parse to An element can add an img node under the body node. When it is parsed, it indicates that the entire HTML document has been parsed, and a node tree as shown in Figure 3 can be constructed.

[0088] It should be noted that the electronic device can determine the position of the newly added node in the node tree according to the start tag and end tag of the HTML element. For example, Hello, Xiaoming Xiaohong , it can be seen that Elements may be included in Inside the element, thus, a span node can be a child node of a p node. The electronic device can also run a JS script to construct a node tree according to the JS script. For example, a span node and corresponding text content can be newly added under the above p node through a JS script (such as the createElement function).

[0089] 403. The electronic device determines the rendering time and weight of different batches of nodes in the node tree.

[0090] After the electronic device receives the file information returned by the server, the electronic device can monitor the changes of the nodes to determine the rendering time and weight of different batches of nodes in the node tree. Among them, the monitoring of the nodes (nodes in the node tree) by the electronic device can be completed through a MutationObserver. MutationObserver is an interface that can listen to changes in the node tree structure and can listen to the addition and deletion of nodes, the modification of nodes, the change of attributes, the change of text content, etc.

[0091] Since the construction of the node tree and the rendering of the nodes in the node tree can be carried out synchronously, therefore, the generation time of the nodes can be used as the rendering time of the nodes (that is, the display time of the nodes on the page when they are rendered). Among them, when monitoring the addition of nodes through the MutationObserver, the result obtained each time it is triggered can be the result of the addition of a batch of nodes, that is, the result it returns can include multiple newly added nodes in the node tree. Therefore, when monitoring the change of the node tree (the addition change of the nodes) through the MutationObserver, that is, when monitoring the addition of a batch of nodes, the current trigger time can be recorded, the current trigger time can be used as the addition time of this batch of nodes, and the current trigger time can also be used as the rendering time of this batch of nodes, and the sum of the weights of this batch of nodes can be recursively counted. The sum of the weights is also the cumulative weight of each node in this batch. The result returned by each trigger of the MutationObserver can include a batch of nodes. Therefore, the nodes in the same batch can be understood as all the nodes included in the result returned by one trigger of the MutationObserver, and the rendering time of the nodes in the same batch is the same, that is, the nodes with the same rendering time belong to the same batch of nodes.

[0092] Specifically, the node tree may include N batches of nodes, including the first batch of nodes, the second batch of nodes, …, the Nth batch of nodes, where N is a positive integer. Among them, the rendering time relationship of the N batches of nodes may be: the rendering time of the first batch of nodes is earlier than that of the second batch of nodes, the rendering time of the second batch of nodes is earlier than that of the third batch of nodes, and similarly, the rendering time of the (N-1)th batch of nodes is earlier than that of the Nth batch of nodes. When the electronic device monitors the addition of the first batch of nodes, the second batch of nodes, …, the Nth batch of nodes (i.e., adding nodes to the node tree) respectively, it can save the time when the batch of nodes is added (i.e., the time when MutationObserver is triggered) locally and determine this time as the rendering time of the batch of nodes. In addition, it can also obtain the identifier of each node in the batch of nodes from the result returned by the MutationObserver interface. After that, it can determine the weight of the batch of nodes according to the identifier of the nodes. It can be seen that the electronic device can obtain the rendering time and identifier of each node in the node tree, and then determine the weight of the nodes belonging to the same batch according to the identifier of the nodes.

[0093] In one case, the weight of a node is related to the node itself, and different nodes may have different corresponding weights. There may be a corresponding relationship between the node and the weight. Therefore, the electronic device can determine the weight of the node corresponding to the identifier of the node according to the corresponding relationship between the node and the weight, and then determine the sum of the weights of all the nodes belonging to the same batch as the weight of the same batch of nodes. The identifier of the node may be the type of the node, such as a text node, a div node. Among them, the setting rule of the weight may be: for a node that is more important for the presentation of the page content and the interaction of the user (such as a text node, etc., which is mainly responsible for presenting the text content of the page), its weight can be set to a relatively large value; for a node that is not important for the presentation of the page content and the interaction of the user (such as a div node), its weight can be set to a relatively small value. For example, the weight corresponding to a text node may be 5, the weight corresponding to a button node may be 4, and the weight corresponding to a div node may be 2, etc. Therefore, the electronic device can locally store a weight index table, which includes the corresponding relationship between different nodes and weights. Please refer to Table 1, which is a weight index table disclosed in an embodiment of the present invention. As shown in Table 1, each row of the table includes a label type and the weight of the corresponding label, and each node may correspond to a label type. The electronic device can determine the weight of the corresponding node through the identifier of the corresponding node, so as to determine the weight of each batch of nodes. For example, the first batch of nodes includes a div node, two text nodes, and a button node. Through Table 1, it can be determined that the weight of the text node is 5, the weight of the button node is 4, and the weight of the div node is 2. Therefore, the sum of the weights of the first batch of nodes is 2 + 5 + 5 + 4 = 16.

[0094] Label type Weight text 5 img 5 button 4 div 2 … … link 0

[0095] Table 1

[0096] In another case, since the deeper the depth of a node, the more important it may be for page rendering (i.e., more important for presenting page content and user interaction), in this case, the weight of the node is related to the depth of the node. Therefore, the electronic device can determine the depth of the node in the node tree according to the identifier of the node, then determine the weight of the node according to the depth of the node, and then sum up the weights of the nodes belonging to the same batch as the weight of the same batch of nodes. The identifier of the node can be the label of the parent node's parent node of the node (i.e., HTML label) + the label of the node's parent node + the label of the node itself (e.g., Figure 2 As shown in the node tree, the identifier of the text node can be body-div-text), so as to determine the depth of the node. Among them, the corresponding relationship between the depth of the node and the weight of the node can be: the weight of the node can be the depth of the node, the weight of the root node can be 0, the weight of the child node can be the weight of the parent node plus one, or can be the weight of the parent node multiplied by an integer greater than 1, or can be other values (such as the weight of the parent node + the number of sibling nodes), and the weight of the child node can be greater than the weight of the parent node. For example, as Figure 2 shown in the node tree, the weight of the node is equal to the depth of the node. Therefore, the depth of the document node is 0, and its weight can be 0; the depth of the html node is 1, and its weight can be 1; the depth of the head node and the body node is 2, and their weights can be 2. Therefore, for each batch of nodes, the node depth of each node in this batch can be determined first, then the node depth can be used as the weight of the corresponding node, and then, the weights of each node are added up to obtain the weight of this batch of nodes.

[0097] In yet another case, the weight of the node is related to the node itself and the depth of the node. Since determining the weight of the node according to the depth and importance of the node only considers a single aspect as described above, the electronic device can also comprehensively determine the weight of the node according to the depth and the importance of the node itself. For example, the weight of each node can be the sum of the weights determined in the above two cases. Specifically, each different node corresponds to a different weight, and the electronic device can locally store the corresponding relationship between the node and the weight, such as a weight index table. Among them, the weight corresponding to the text node can be 5, and the weight corresponding to the img node can be 4, etc. In addition, the weight of the node can also be determined according to the depth of the node, such as the depth of the node being equal to the weight of the node. Therefore, the weight of a text node with a depth of 4 can be 5 + 4 = 9.

[0098] It should be noted that when calculating the weight sum of a batch of nodes, for each node (page element) in this batch, it can first be determined whether the current node layout is within the window of the electronic device, that is, whether it is within the visible range of the Web page (i.e., within the display range). Since the rendering of content outside the window is not perceptible to the user, therefore, if it is determined that the node is not within the window, then this node can be ignored when calculating the weight sum of this batch of nodes, that is, the weight of this node is not accumulated.

[0099] 404. The electronic device determines the information of the system network request.

[0100] After the electronic device receives a request input by the user, it can send a system network request (such as an HTTP request) to the server to obtain resources (such as HTML text, CSS files, etc.). After obtaining the resource file, the browser will parse the resource file and render the user page. After obtaining all the initial resource files, the electronic device will stop sending network requests. After that, in the case of receiving user input (such as clicking a link on the web page), it can send a user network request to the server again. Among them, the system network request can be understood as the network request for the electronic device to obtain the initial resources (i.e., the resources for rendering the initial page), and the user network request can be understood as the network request sent after most of the page rendering is completed (i.e., when the page is interactive) in response to the input operation of the user on the page. The time intervals between system network requests are short, and multiple system network requests can exist simultaneously. Since the system network request time of the electronic device is short and the time intervals between multiple system network requests are short, and the average fastest reaction time of a person is 0.2 seconds, there is a network request idle time from when the content (such as a url link) that can trigger a network request is displayed on the user interface (Web page) to when the user triggers it (such as clicking the url link), that is, there is an idle time between the system network request and the user network request.

[0101] The electronic device can monitor network requests and obtain the information of network requests. The information of network requests can include the start time and end time of each network request of the electronic device. The electronic device can determine the start time and end time of the system network request according to the information of network requests. Among them, the monitoring of network requests by the electronic device can be completed through the resource timer (PerformanceResourceTiming). PerformanceResourceTiming is an interface that can monitor network requests and can monitor detailed network timing data for loading resources and monitor HTTP requests, etc.

[0102] Specifically, the information of the network requests obtained by the electronic device may include the start time and end time of M network requests. The M network requests may include system network requests or user network requests, where M is a positive integer. The M network requests may include the first network request, the second network request, …, the Mth network request. Among them, the time relationship of the M network requests may be: the start time of the first network request is earlier than the start time of the second network request, the start time of the second network request is earlier than the start time of the third network request, and similarly, the start time of the (M - 1)th network request is earlier than the start time of the Mth network request. The electronic device may determine the start time of the earliest network request among the M network requests as the start time of the system network request, that is, determine the start time of the first network request as the start time of the system network request.

[0103] Since there is an idle time between the system network request and the user network request, the end time of the system network request can be determined by setting a threshold. Since the average fastest reaction time of a person is 0.2 seconds, the threshold needs to be set greater than or equal to 0.2 seconds. The electronic device may determine the idle time greater than or equal to the threshold according to the start time and end time of the M network requests, and may determine the start time of the idle time as the end time of the system network request. Specifically, the electronic device may start from the first network request and determine whether there is an idle time greater than the threshold. If there is an idle time greater than or equal to the threshold (i.e., the time without network requests), the start time of the idle time can be determined as the end time of the system network request. Therefore, the end time of the system network request can be determined through the information of the network requests. Please refer to Figure 5 , Figure 5 which is a schematic diagram of a network request disclosed in an embodiment of the present invention. As Figure 5 shown, t0 is the start time of the system network request, that is, the start time of the first system network request. Starting from t0, there are no network requests between t1 and t2, and there is a period of idle time, and t1 - t2 is greater than or equal to 0.2 seconds. Therefore, the electronic device may determine the start time of the idle time, that is, t1, as the end time of the system network request.

[0104] It should be understood that Figure 5 the schematic diagram of the network request shown is only for illustrative purposes and does not constitute a limitation thereto.

[0105] 405. The electronic device determines the TTI according to the rendering time, weight, and information of the system network request.

[0106] The information of the system network request may include the start time and the end time of the system network request. The electronic device may determine the TTI according to the start time of the system network request, the end time of the system network request, the rendering time of each batch of nodes, and the weight of each batch of nodes.

[0107] Specifically, the electronic device may first determine whether there are batches of nodes with non-zero weights (i.e., batches of nodes, including the first batch of nodes, the second batch of nodes, etc.) before and after the end time of the system network request. When it is determined that there are batches of nodes with non-zero weights before the end time of the system network request and there are no batches of nodes with non-zero weights after the end time of the system network request, it indicates that the nodes related to the window content (i.e., the content visible on the user page) have been rendered before the end time of the system network request. Moreover, since the batch of nodes with the largest weight has been drawn, most of the content of the user page has been displayed, and it can be understood that the user can perform normal interactions (such as input operations, click operations) at this time. Therefore, the interactive time can be determined according to the time corresponding to the batch of nodes with the largest weight. That is, the electronic device may determine the difference between the time corresponding to the rendering peak before the end time of the system network request and the start time of the system network request as the interactive time. Among them, there are two cases where there are no batches of nodes with non-zero weights. One case is that there are no batches of nodes, and the other case is that there are batches of nodes, but the weights of the batches of nodes are 0. The rendering peak is also the largest weight among the weights of all batches of nodes.

[0108] Please refer to Figure 6 , Figure 6 which is a schematic diagram of rendering information disclosed in an embodiment of the present invention. The rendering information is also the rendering time of each batch of nodes and the weight of each batch of nodes. Figure 6 The abscissa is time, and the ordinate is the weight (i.e., the sum of weights). As Figure 6 shown, t1 is the end time of the system network request, t0 is the start time of the system network request. There is no time point with a non-zero weight before the end time t1 of the system network request, indicating that there is no new node rendering before t1. After the end time t1 of the system network request, there are nodes with a non-zero sum of weights. The maximum weight of the nodes is w1, and the corresponding time is t3. That is, the time corresponding to the rendering peak is t3. Therefore, t3 - t0 can be determined as the interactive time.

[0109] When it is determined that there are no batch nodes with a weight not equal to 0 before the end time of the system network request and there are batch nodes with a weight not equal to 0 after the end time of the system network request, it indicates that the nodes related to the window content start to be rendered after the end time of the system network request. The electronic device can determine the difference between the time corresponding to the rendering peak after the end time of the system network request and the start time of the system network request as the interactive time.

[0110] When it is determined that there are batch nodes with a weight not equal to 0 before the end time of the system network request and there are also batch nodes with a weight not equal to 0 after the end time of the system network request, it indicates that nodes are rendered both before and after the end time of the system network request. In this case, since the time corresponding to the rendering peak is closer to the end time of the system network request, it is more likely that the page content within the user window (i.e., the visible Web page for the user) has been rendered at this time, and the rendering of the page content is completed by parsing the initial necessary resources obtained from the system network request (such as HTML documents, JS scripts). If the rendering peak is after the end time of the system network request and the time corresponding to the rendering peak is far from the end time of the system network request, this rendering peak may not be rendered from the initial resources obtained from the system network request, but from the resources obtained from the subsequent user network request, such as the data obtained through asynchronous JavaScript and XML (ajax) requests. Therefore, the difference between the time corresponding to the rendering peak closer to the end time and the start time can be determined as the interactive time.

[0111] Specifically, the electronic device can determine the time corresponding to the rendering peak before the end time of the system network request as the first time and the time corresponding to the rendering peak after the end time of the system network request as the second time; then judge the magnitudes of the absolute values of the differences between the first time and the end time of the system network request and between the second time and the end time of the system network request. When the absolute value of the difference between the first time and the end time of the system network request is less than or equal to the absolute value of the difference between the second time and the end time of the system network request, it indicates that most of the page content has been rendered at the first time and user interaction can be performed, and the difference between the first time and the start time of the system network request can be determined as the TTI; when the absolute value of the difference between the first time and the end time of the system network request is greater than the absolute value of the difference between the second time and the end time of the system network request, it indicates that most of the page content has been rendered at the second time and user interaction can be performed, and the difference between the second time and the start time of the system network request is determined as the TTI.

[0112] Please refer to Figure 7 , Figure 7 is another schematic diagram of rendering information disclosed in an embodiment of the present invention. Figure 7 The abscissa is time and the ordinate is weight (i.e., the sum of weights). As Figure 7 shown, t1 is the end time of the system network request, t0 is the start time of the system network request. There is a rendering peak w2 before the end time t1 of the system network request, corresponding to the time t4. There is also a rendering peak w3 after the end time t1 of the system network request, corresponding to the time t5. Therefore, the absolute values of the differences between t4 and t5 and t1 can be compared. Among them, |t4 - t1| < |t5 - t1|. Therefore, the difference t4 - t0 between t4 and the start time of the system network request can be determined as the TTI.

[0113] It should be understood that Figure 6 , Figure 7 the schematic diagram of the rendering information shown is only an exemplary illustration and does not constitute a limitation thereto.

[0114] It can be seen that the electronic device can monitor the process of parsing resources and monitor network requests (i.e., monitor page elements (nodes of the node tree) and network requests (such as HTTP requests)) to obtain the start time of the system network request, the end time of the system network request, as well as the rendering time and weight of each batch of nodes, so as to more accurately determine the user-interactable time. It can be understood that the electronic device can also send some information (such as the rendering time and weight of each batch of nodes, the start time of the system network request, the end time of the system network request, etc.) to the server, and then the server calculates the TTI. After calculating the TTI, the electronic device can also return the calculated result to the server.

[0115] Among them, the above method can be implemented by a JS script (i.e., a piece of JS code). Since the performance of different browsers may be different, and the network performance of different electronic devices is different, multiple electronic devices can be monitored to obtain the TTI of multiple electronic devices for a single Web application, and the average value of their TTIs is taken as the final TTI, so that the obtained TTI is more accurate, credible, and can reflect the average level. It can be understood that for a single-page application, the above method can effectively collect the interactable time of all pages under the single-page application. After that, the performance of the Web application can be evaluated according to the TTI value for Web application optimization.

[0116] Based on the above network architecture, please refer to Figure 8 , Figure 8 which is a schematic structural diagram of a device for statistically calculating the interactable time of a single-page application disclosed in an embodiment of the present invention. Among them, the device can be an electronic device or a module in the electronic device.

[0117] As Figure 8 shown, the device may include:

[0118] An acquisition unit 801, configured to request and acquire file information through a system network when receiving a request input by a user;

[0119] A building unit 802, configured to build a node tree according to the file information;

[0120] A determination unit 803, configured to determine the rendering time and weight of different batches of nodes in the node tree;

[0121] The determination unit 803 is further configured to determine the information of the system network request;

[0122] The determination unit 803 is further configured to determine the TTI according to the rendering time, the weight, and the information of the system network request.

[0123] In one embodiment, the node tree includes N batches of nodes, where N is a positive integer; the determination unit 803 determines the rendering time and weight of different batches of nodes in the node tree, including:

[0124] Acquire the rendering time and identifier of each node in the node tree, and nodes with the same rendering time belong to the same batch of nodes;

[0125] Determine the weight of nodes belonging to the same batch according to the identifier of the node.

[0126] In one embodiment, the determination unit 803 determines the weight of nodes belonging to the same batch according to the identifier of the node, including:

[0127] Determine the depth of the node in the node tree according to the identifier of the node;

[0128] Determine the weight of the node according to the depth of the node;

[0129] Sum the weights of nodes belonging to the same batch and determine it as the weight of the same batch of nodes.

[0130] In one embodiment, the determination unit 803 determines the weight of nodes belonging to the same batch according to the identifier of the node, including:

[0131] Determine the weight of the node corresponding to the identifier according to the correspondence between the node and the weight;

[0132] Sum the weights of nodes belonging to the same batch and determine it as the weight of the same batch of nodes.

[0133] In one embodiment, the information of the system network request includes the start time and the end time of the system network request. The determining unit 803 determines the TTI according to the rendering time, the weight, and the information of the system network request, including: determining the TTI according to the rendering time, the weight, the start time, and the end time.

[0134] In one embodiment, the obtaining unit 801 is further configured to obtain the information of the network request. The information of the network request includes the start time and the end time of M network requests. The M network requests include the system network request, and M is a positive integer.

[0135] The determining unit 803 determines that the information of the system network request includes:

[0136] Determining the start time of the earliest network request among the M network requests as the start time of the system network request;

[0137] Determining the idle time greater than or equal to the threshold according to the start time and the end time of the M network requests, and determining the start time of the idle time as the end time of the system network request.

[0138] In one embodiment, the determining unit 803 determines the TTI according to the rendering time, the weight, the start time, and the end time, including:

[0139] In the case that there are no batch nodes with a non-zero weight before the end time and there are batch nodes with a non-zero weight after the end time, determining the difference between the time corresponding to the rendering peak after the end time and the start time as the TTI;

[0140] Or, in the case that there are batch nodes with a non-zero weight before the end time and there are no batch nodes with a non-zero weight after the end time, determining the difference between the time corresponding to the rendering peak before the end time and the start time as the TTI;

[0141] Or, in the case that there are batch nodes with a non-zero weight before the end time and there are batch nodes with a non-zero weight after the end time, determining the time corresponding to the rendering peak before the end time as the first time, and determining the time corresponding to the rendering peak after the end time as the second time;

[0142] In the case that the absolute value of the difference between the first time and the end time is less than or equal to the absolute value of the difference between the second time and the end time, determining the difference between the first time and the start time as the TTI; in the case that the absolute value of the difference between the first time and the end time is greater than the absolute value of the difference between the second time and the end time, determining the difference between the second time and the start time as the TTI.

[0143] For a more detailed description of the above-mentioned obtaining unit 801, establishing unit 802, and determining unit 803, reference can be directly made to the relevant description of the electronic device in the method embodiment shown above. Figure 4 The relevant description of the electronic device in the method embodiment shown above can be directly obtained and will not be elaborated here.

[0144] Based on the above network architecture, please refer to Figure 9 , Figure 9 which is a schematic structural diagram of an electronic device disclosed in an embodiment of the present invention. As Figure 9 shown, the electronic device may include a processor 901, a memory 902, and a communication module 903. The electronic device may further include a display screen 904. The memory 902 may exist independently or be connected to the processor 901, the communication module 903, and the display screen 904 through a bus. The memory 902 may also be integrated with the processor 901. Among them, the bus 904 is used to implement the connection between these components. The communication module 903 may be used to communicate with a server. The electronic device may parse the resources returned by the server and output a user page (rendered page) on the display screen 904. The memory 902 may be used to store computer program code, and the computer program code may include program instructions. The processor 901 may be used to call the program instructions.

[0145] In one embodiment, when the computer program instructions stored in the memory 902 are executed, the processor 901 is used to control the obtaining unit 801 to perform the operations executed in the above embodiment. The processor 901 is further used to perform the operations executed by the establishing unit 802 and the determining unit 803 in the above embodiment, and the communication module 903 is used to perform the operations executed by the obtaining unit 801 in the above embodiment.

[0146] An embodiment of the present invention also discloses a computer-readable storage medium, on which instructions are stored, and when the instructions are executed, the method in the above method embodiment is executed.

[0147] An embodiment of the present invention also discloses a computer program product including instructions, and when the instructions are executed, the method in the above method embodiment is executed.

[0148] The specific embodiments described above further elaborate on the purpose, technical solution, and beneficial effects of the present application. It should be understood that the above description is only the specific embodiments of the present application and is not used to limit the protection scope of the present application. Any modifications, equivalent replacements, improvements, etc. made on the basis of the technical solution of the present application should be included in the protection scope of the present application.

Claims

1. A method for statistically calculating the Time to Interactive (TTI) of a single-page application, characterized in that, Including: Upon receiving a request input by a user, obtaining file information by means of a system network request according to the request input by the user, where the system network request carries the request input by the user; Establishing a node tree according to the file information; Determining the rendering time and weight of different batches of nodes in the node tree; Determining the information of the system network request, where the information of the system network request includes the start time and end time of the system network request; Determining the TTI according to the rendering time, the weight, and the information of the system network request, including: in the case where there are batches of nodes with non-zero weights before the end time and there are batches of nodes with non-zero weights after the end time, determining the time corresponding to the rendering peak before the end time as the first time, and determining the time corresponding to the rendering peak after the end time as the second time; in the case where the absolute value of the difference between the first time and the end time is less than or equal to the absolute value of the difference between the second time and the end time, determining the difference between the first time and the start time as the TTI; in the case where the absolute value of the difference between the first time and the end time is greater than the absolute value of the difference between the second time and the end time, determining the difference between the second time and the start time as the TTI.

2. The method according to claim 1, wherein The node tree includes N batches of nodes, where N is a positive integer; The determining the rendering time and weight of different batches of nodes in the node tree includes: Obtaining the rendering time and identifier of each node in the node tree, and nodes with the same rendering time belong to the same batch of nodes; Determining the weight of nodes belonging to the same batch according to the identifier of the nodes.

3. The method according to claim 2, characterized in that, The determining the weight of nodes belonging to the same batch according to the identifier of the nodes includes: Determining the depth of the node in the node tree according to the identifier of the node; Determining the weight of the node according to the depth of the node; Summing up the weights of nodes belonging to the same batch and determining it as the weight of the same batch of nodes.

4. The method according to claim 2, wherein The determining the weight of nodes belonging to the same batch according to the identifier of the nodes includes: Determining the weight of the node corresponding to the identifier according to the correspondence between the node and the weight; Summing up the weights of nodes belonging to the same batch and determining it as the weight of the same batch of nodes.

5. The method according to any one of claims 1-4, characterized in that, The determining the TTI according to the rendering time, the weight, and the information of the system network request includes: Determining the TTI according to the rendering time, the weight, the start time, and the end time.

6. The method according to claim 5, wherein The determining the information of the system network request includes: Obtaining the information of the network request, where the information of the network request includes the start time and end time of M network requests, the M network requests include the system network request, and M is a positive integer; Determining the start time of the earliest network request among the M network requests as the start time of the system network request; Determining the idle time greater than or equal to the threshold according to the start time and end time of the M network requests, and determining the start time of the idle time as the end time of the system network request.

7. The method according to claim 5, wherein Said determining the TTI according to the rendering time, the weight, the start time, and the end time includes: In a case where there is no batch node with a non-zero weight before the end time and there is a batch node with a non-zero weight after the end time, determining the difference between the time corresponding to the rendering peak after the end time and the start time as the TTI.

8. An apparatus for statistically calculating the Time to Interactive (TTI) of a single-page application, the apparatus being configured to execute the method according to any one of claims 1-7, characterized in that, Including: An obtaining unit, configured to, when receiving a request input by a user, request and obtain file information through a system network according to the request input by the user; A building unit, configured to build a node tree according to the file information; A determining unit, configured to determine the rendering time and weight of different batch nodes in the node tree; The determining unit is further configured to determine the information of the system network request; The determining unit is further configured to determine the TTI according to the rendering time, the weight, and the information of the system network request.

9. An electronic device, characterized in that, Including: A memory, a processor, and a communication module; wherein: The communication module is configured to communicate with other electronic devices; The memory is configured to store a computer program, and the computer program includes program instructions; The processor is configured to call the program instructions, so that the electronic device executes the method according to any one of claims 1-7.

10. A computer-readable storage medium, characterized in that, A computer program or computer instructions are stored in the computer-readable storage medium, and when the computer program or computer instructions are run, the method according to any one of claims 1-7 is implemented.

Images