CN113641924B - Webpage interactive time point detection method and device, electronic equipment and storage medium - Google Patents

Webpage interactive time point detection method and device, electronic equipment and storage medium Download PDF

Info

Publication number
CN113641924B
CN113641924B CN202111190332.7A CN202111190332A CN113641924B CN 113641924 B CN113641924 B CN 113641924B CN 202111190332 A CN202111190332 A CN 202111190332A CN 113641924 B CN113641924 B CN 113641924B
Authority
CN
China
Prior art keywords
node
weight
webpage
time point
target node
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN202111190332.7A
Other languages
Chinese (zh)
Other versions
CN113641924A (en
Inventor
阙光伟
斯炘
周宇
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Hundsun Technologies Inc
Original Assignee
Hundsun Technologies Inc
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Hundsun Technologies Inc filed Critical Hundsun Technologies Inc
Priority to CN202111190332.7A priority Critical patent/CN113641924B/en
Publication of CN113641924A publication Critical patent/CN113641924A/en
Application granted granted Critical
Publication of CN113641924B publication Critical patent/CN113641924B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/955Retrieval from the web using information identifiers, e.g. uniform resource locators [URL]
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/958Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04LTRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L43/00Arrangements for monitoring or testing data switching networks
    • H04L43/08Monitoring or testing based on specific metrics, e.g. QoS, energy consumption or environmental parameters
    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04LTRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00Network arrangements or protocols for supporting network services or applications
    • H04L67/01Protocols
    • H04L67/02Protocols based on web technology, e.g. hypertext transfer protocol [HTTP]

Abstract

The application provides a webpage interactive time point detection method and device, electronic equipment and a storage medium, and relates to the field of computers. The method comprises the following steps: determining the weight of each node in each area of the webpage according to the weight of the label of each node on the document object model tree of the webpage, wherein the label of each node at least comprises the following components: defining a table, creating a form and defining an unordered list, wherein the weight of the defining table is greater than the weight of the creating form and the weight of the defining unordered list; respectively determining the total weight of each area according to the weight of each node in each area of the webpage; determining a target node to be monitored according to the total weight of each area; monitoring the target node, and when the target node is not changed in the preset time period, taking the initial time point of the preset time period as the web page interactive time point, thereby improving the monitoring efficiency and the accuracy of the detected interactive time point and ensuring the access experience of the user on the premise of not influencing the web page performance.

Description

Webpage interactive time point detection method and device, electronic equipment and storage medium
Technical Field
The application relates to the technical field of computers, in particular to a method and a device for detecting interactive time points of a webpage, electronic equipment and a storage medium.
Background
Most internet users often need to access various web pages, and when the web pages are accessed, if the web pages are loaded for too long time, the users usually give up the access. There is data showing that every 1 second increase in the loading time of a web page, there is 7% user churn. The loading time of the webpage refers to the time period from the beginning of loading the webpage to the interactive time point, performance optimization is carried out on the webpage, namely the loading time of the webpage is optimized, and the premise that the loading time of the webpage is optimized is that the interactive time point of the webpage can be accurately detected.
In the prior art, the time point of constructing a document object model node in a webpage is generally used as the interactive time point of the current webpage.
However, due to the problem of adaptability, in a modern front-end architecture such as Single-spa micro front-end application, the interaction time point detected by the Performance Web API interface has a large deviation from the actual experience of the user, and the efficiency of monitoring the change of all document object models in the whole webpage is low, which may cause the reduction of the Performance of the webpage and affect the access experience of the user.
Disclosure of Invention
In view of this, an object of the present application is to provide a method and an apparatus for detecting a web page interactive time point, an electronic device, and a computer-readable storage medium, so as to improve monitoring efficiency and accuracy of a detected interactive time point and ensure access experience of a user on the premise of not affecting web page performance.
In a first aspect, the present application provides a method for detecting an interactive time point of a web page, including:
determining the weight of each node in each area of the webpage according to the weight of the label of each node on the document object model tree of the webpage, wherein the label of each node at least comprises the following components: defining a table, creating a form and defining an unordered list, wherein the weight of the defining table is greater than the weight of the creating form and the weight of the defining unordered list;
respectively determining the total weight of each area according to the weight of each node in each area of the webpage;
determining a target node to be monitored according to the total weight of each area;
monitoring the target node, and taking the starting time point of the preset time period as the interactive time point of the webpage when the target node is not changed in the preset time period.
In an optional embodiment, monitoring the target node, and when the target node is not changed within a preset time period, taking a starting time point of the preset time period as an interactive time point of a webpage, includes:
creating a change observer, injecting the change observer into a webpage, wherein the change observer is used for monitoring a target node;
and when the change observer does not feed back information in the preset time period, taking the starting time point of the preset time period as the interactive time point of the webpage.
In an optional embodiment, before determining the weight of each node in each region of the web page according to the label of each node on the document object model tree of the web page, the method includes:
and configuring the weight of the label of each node in the document object model tree of the webpage in an extension program in the browser.
In an optional embodiment, determining the weight of each node in each region of the web page according to the label of each node on the document object model tree of the web page includes:
and reading the weight of the label of each node on the document object model tree of the webpage by using an extension program in the browser, and determining the weight of each node in each area of the webpage according to the weight of the label of each node.
In an optional embodiment, before determining the target node to be monitored according to the total weight of each area, the method further includes:
acquiring a root node identifier of each area;
the root node identification and the total weight for each region are stored to a common data set.
In an optional embodiment, determining a target node to be monitored according to the total weight of each region includes:
and if a plurality of regions with the maximum total weight and the same total weight exist in the public data set, taking the node with the maximum weight in the regions which are finally stored in the public data set in the plurality of regions as a target node.
In an optional embodiment, the listening to the target node includes:
determining a root node identifier corresponding to the maximum total weight in the public data set;
and taking the node with the maximum weight in the area corresponding to the root node identification as a target node, and monitoring the target node.
In an optional embodiment, the listening to the target node includes:
establishing a timer with a preset interval, and acquiring a target node at the preset interval through the timer;
and monitoring the target node.
In an optional embodiment, determining the total weight of each region according to the weight of each node in each region of the web page respectively includes:
and calculating the sum of the weights of all nodes in all areas of the webpage to serve as the total weight of all the areas.
In a second aspect, the present application provides a web page interactive time point detection apparatus, including:
a node weight determining module, configured to determine a weight of each node in each region of the web page according to a weight of a label of each node on a document object model tree of the web page, where the label of each node at least includes: defining a table, creating a form and defining an unordered list, wherein the weight of the defining table is greater than the weight of the creating form and the weight of the defining unordered list;
the region weight determining module is used for respectively determining the total weight of each region according to the weight of each node in each region of the webpage;
the target node determining module is used for determining a target node to be monitored according to the total weight of each area;
and the target node monitoring module is used for monitoring the target node, and when the target node is not changed in the preset time period, the starting time point of the preset time period is used as the web page interactive time point.
In a third aspect, the present application provides an electronic device, comprising: the electronic device comprises a processor, a storage medium and a bus, wherein the storage medium stores machine-readable instructions executable by the processor, when the electronic device runs, the processor and the storage medium are communicated through the bus, and the processor executes the machine-readable instructions to execute the steps of the method according to any one of the preceding implementation modes.
In a fourth aspect, the present application provides a computer-readable storage medium having a computer program stored thereon, the computer program, when executed by a processor, performing the steps of the method according to any of the preceding embodiments.
According to the webpage interactive time point detection method, the webpage interactive time point detection device, the electronic equipment and the computer readable storage medium, firstly, the weight of each node in each area of a webpage is determined according to the weight of the label of each node on a document object model tree of the webpage, then, the target node to be monitored is determined according to the total weight of each area, so that the target node is monitored instead of all nodes in the whole webpage, and the webpage interactive time point is determined, so that the monitoring efficiency and the accuracy of the detected interactive time point are improved on the premise of not influencing the webpage performance, and the access experience of a user is guaranteed.
In order to make the aforementioned objects, features and advantages of the present application more comprehensible, preferred embodiments accompanied with figures are described in detail below.
Drawings
In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings that are required to be used in the embodiments will be briefly described below, it should be understood that the following drawings only illustrate some embodiments of the present application and therefore should not be considered as limiting the scope, and for those skilled in the art, other related drawings can be obtained from the drawings without inventive effort.
FIG. 1 is a flowchart illustrating a web page loading process provided by an embodiment of the present application;
FIG. 2 is a schematic diagram of an HTML DOM tree provided by an embodiment of the present application;
FIG. 3 is a schematic diagram illustrating a webpage region division provided in an embodiment of the present application;
FIG. 4 is a diagram illustrating a webpage area provided by an embodiment of the present application;
FIG. 5 is a flowchart illustrating a method for detecting an interactive time point of a web page according to an embodiment of the present application;
FIG. 6 is a diagram illustrating weights of regions of a web page according to an embodiment of the present application;
FIG. 7 is a flowchart illustrating a method for detecting an interactive time point of a web page according to an embodiment of the present application;
FIG. 8 is a flowchart illustrating a method for detecting an interactive time point of a web page according to an embodiment of the present application;
fig. 9 is a schematic structural diagram illustrating a web page interactive time point detection apparatus according to an embodiment of the present application;
fig. 10 shows a schematic structural diagram of an electronic device provided in an embodiment of the present application.
Detailed Description
In order to make the objects, technical solutions and advantages of the embodiments of the present application clearer, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is obvious that the described embodiments are only a part of the embodiments of the present application, and not all the embodiments. The components of the embodiments of the present application, generally described and illustrated in the figures herein, can be arranged and designed in a wide variety of different configurations. Thus, the following detailed description of the embodiments of the present application, presented in the accompanying drawings, is not intended to limit the scope of the claimed application, but is merely representative of selected embodiments of the application. All other embodiments, which can be derived by a person skilled in the art from the embodiments of the present application without making any creative effort, shall fall within the protection scope of the present application.
Before the embodiments of the present application are specifically described, an application scenario of the present application is described.
Most internet users often need to access various web pages, and when the web pages are accessed, if the web pages are loaded for too long time, the users usually give up the access. There is data showing that every 1 second increase in the loading time of a web page, there is 7% user churn. The loading time of the webpage refers to the time period from the beginning of loading the webpage to the interactive time point, performance optimization is carried out on the webpage, namely the loading time of the webpage is optimized, and the premise that the loading time of the webpage is optimized is that the interactive time point of the webpage can be accurately detected.
In the prior art, a webpage can be divided into a static webpage and a single-page webpage according to different webpage loading processes, wherein the static webpage loading process is to directly load all contents in the webpage and is not changed after the loading is finished; the loading process of the single-page webpage is to load a webpage frame firstly and then load specific contents in the webpage.
Under a modern front-end architecture, aiming at a Single-page webpage, such as a webpage in a Single-spa micro front-end application, the inventor discovers through analysis that the webpage is not in an interactive state when a frame of the webpage is loaded, so that a user cannot interact with the webpage when looking at the frame of the webpage, and interaction delay is caused.
Specifically, referring to fig. 1, an implementation manner of loading a single-page web page is provided, referring to fig. 1, and the implementation manner includes:
1. and unloading the existing page.
When a URL (Uniform Resource Locator) is input into a page, i.e., an address of a standard Resource on the internet, the original page is first unloaded, which is to release a memory occupied by the page, otherwise, the URL occupies a memory every time the URL is requested, which may cause the browser to occupy a larger memory.
2. And (6) redirecting.
Redirection is to search the requested content from the local cache, and if the requested content exists in the local cache, the requested content is directly used, and if the requested content does not exist in the local cache, the requested content is requested to the server.
3. The application is cached.
Caching applications refer to caching web applications to enable users to access usage without intervening on the network.
4. And resolving the domain name system.
In the network, each computer corresponds to an IP address, if a user wants to access a specified resource, the corresponding server must be found first, and the domain name needs to be converted into the corresponding IP address first when the server is found, namely, the DNS is used for realizing the process.
5. The server is connected through a TCP (Transmission Control Protocol).
The TCP is a lower layer Protocol of HTTP (hypertext Transfer Protocol), a TCP connection must be established between the browser and the server before the browser sends an HTTP request to the server, that is, the HTTP is dependent on the TCP, and the TCP is used to establish a connection between the browser and the server based on the IP address of the server obtained in the step 4.
6. Sending HTTP requests and receiving HTTP responses.
Sending an HTTP request refers to the browser sending the HTTP request to the server establishing the TCP connection in the step 5; receiving the HTTP response refers to the browser receiving the resource sent by the server in response to the HTTP request.
7. Parse the Document and load DOM (Document Object Model) nodes.
And 6, the resource sent by the server responding to the HTTP request is a text, the document is analyzed, the DOM node is loaded, namely the text is converted into the DOM tree, and then the DOM node in the DOM tree is loaded.
8. The script code is executed.
In the process of loading the DOM nodes and executing the script codes, the loaded DOM nodes are continuously updated with the newly loaded DOM nodes and the executed script codes.
Wherein, the time point of the above-mentioned "loading the frame of the webpage first" corresponds to the end time point of the steps of parsing the document and loading the DOM shown in fig. 1; "loading the specific content in the web page" corresponds to the ending time point of the DOM node updating step shown in fig. 1, and can be understood as follows: the actual interactable time point is a time point at which the DOM node update is completed, i.e., the completion time point of the DOM node update shown in fig. 1. Through the implementation mode, the time point when the DOM node is updated is used as the interactive time point of the webpage, so that the actual access experience of the user is better met. For a browsed webpage, the rendering efficiency is usually affected by the content displayed on the interface in the webpage. Therefore, whether to determine the time point when the update of the DOM node is completed by monitoring the change of the content in the web page, and then determining the interactive time point of the web page becomes a feasible idea.
The monitoring of the change of the content in the web page may specifically be monitoring of a change condition of a DOM region in the web page.
Wherein the DOM mentioned in step 7 above is a platform and Language neutral interface that defines the standards for accessing HTML (Hyper Text Markup Language) and XML (EXtensible Markup Language) documents, and allows programs and scripts to dynamically access and update the content, structure, and style of the documents. Taking HTML DOM as an example, HTML DOM views an HTML document, i.e., a web page, as a tree structure, which is called DOM tree and may also be called node tree.
Referring to fig. 2, fig. 2 is a schematic diagram of an HTML DOM tree according to an embodiment of the present application, where the DOM tree is composed of nodes, and the DOM tree shown in fig. 2 may include: document nodes, root element nodes, attribute nodes and text nodes;
in the HTML document, that is, all contents in the web page may be nodes, for example, the entire web page may be document nodes, each HTML element may be an element node, an outermost element node in the entire HTML document is a root element node, a text in the HTML document may be a text node, an attribute of each node may be an attribute node, and a comment may be a comment node. Of course, this is merely an example and does not represent a limitation of the present application.
With reference to the DOM tree structure of fig. 2, a specific web interface is described as an example, and specifically, referring to fig. 3, the web interface may include a plurality of different interface regions, for example: icon areas, navigation areas, banner areas, content areas, footer areas, etc., each of which may contain a plurality of nodes, such as element nodes, attribute nodes, etc., as shown in fig. 2. In summary, these interface regions can be understood as DOM regions corresponding to the DOM tree, and therefore, by monitoring changes of different DOM regions in the web page, the time point at which the update of the DOM node is completed can be determined, and further, the interactive time point of the web page can be determined.
However, in the process of monitoring different DOM regions, the inventor finds that if all DOM regions under one webpage are monitored, the efficiency is reduced, and meanwhile, the risk of webpage performance reduction exists, so that on the basis of monitoring the change condition of the DOM regions in the webpage, the inventor introduces a monitoring mode aiming at the DOM regions with the highest weight, and on the basis of reducing the monitoring range, the interaction time point of the webpage is accurately identified, so that the efficiency is ensured, and the influence on the webpage performance is reduced.
For example, referring to fig. 4, by refreshing the page, it can be roughly found that the table in the content area is displayed in the page in the last rendering, and this block is also the largest area displayed by the page.
In summary, in order to solve the problem, the present application provides a method and an apparatus for detecting a web page interactive time point, an electronic device, and a computer-readable storage medium, which can improve monitoring efficiency and accuracy of a detected interactive time point without affecting web page performance, and ensure access experience of a user.
It should be particularly noted that the web page interactive time point detection method provided by the present application may be applied to a browser, for example, an extension program of the browser, and in a process of opening a web page by the browser, each step in the web page interactive time point detection method provided by the present application is executed by the extension program of the browser. Therefore, the method can avoid the overlarge redundancy of the main program of the webpage, reduce the development and maintenance cost of the webpage and improve the loading speed of the webpage. Of course, this is only an exemplary illustration, and only a part of steps in the method for detecting a web page interactive time point provided by the present application may be applied to an extension program of a browser, which is not specifically limited in the present application.
Referring to fig. 5, the present application provides a method for detecting an interactive time point of a web page, including:
s501: and determining the weight of each node in each area of the webpage according to the weight of the label of each node on the document object model tree of the webpage.
Optionally, in order to characterize information in the nodes, in the embodiment of the present application, each node includes at least one tag.
The label of the node comprises at least: defining a table, creating a form, and defining an unordered list, wherein a weight of the defining the table is greater than a weight of the creating the form and a weight of the defining the unordered list.
The information in the node may include a web content type, a web content format, and the like corresponding to the node. For example, the < table > tag defines an HTML table, i.e., the corresponding node includes a table, < then > defines a header, < tbody > defines a body, etc., and referring to fig. 4 as an example, the content area in fig. 4 includes a table, which corresponds to the corresponding node, i.e., the < table > tag, < then > tag, < tbody > tag, etc., described above.
During the webpage loading process, the rendering time required by the form component is usually the longest, the next time is the form component and the tree component, and the rendering time required by other components is usually smaller.
It should be noted that, in this example, since the table, the form, and the unordered list belong to element nodes that have a heavy influence on the page loading rate, in this example, weights of the above several element nodes need to be determined, but the present application embodiment does not limit the nodes that need to determine the weights, and the nodes may be flexibly set based on a specific scenario, for example, the weights are determined for one or more text nodes, attribute nodes, and comment nodes that have a heavy influence on the loading rate.
Specifically, a table tag, i.e. a < table > tag in HTML, is defined, a form tag, i.e. a < form > tag in HTML, is created, and an unordered list, i.e. an < ul > tag with a root identifier in HTML, is defined, which is not described in detail later.
Alternatively, the sum of the weights of the labels of a node may be taken as the weight of the node. For example, let w (x) denote the weight of tag x, and s (x) denote the number of tags x in a node, the weight of the node, w (node), can be expressed as:
Figure M_211012160624981_981157001
specifically, x may be < table >, < then >, < tbody >, < th >, < td >, < form >, < label >, < input >, < ul >, < li > with root id, < ul > with child id of children, etc., where w (< table >) may be 10, w (< then >) may be 5, w (< tbody >) may be 5, w (< th >) may be 2, w (< td >) may be 2, w (< form >) may be 5, w (< label >) may be 1, w (< input >) may be 2, w (ul) with root id may be 5, w (< li >) may be 1, w (< ul) may be 2 with child id of children) may be 2. In this way, the weight size of the node can basically represent the rendering time required by the node, thereby facilitating the determination of the subsequent target node. Of course, this is merely an example and does not represent a limitation of the present application.
S502: and respectively determining the total weight of each area according to the weight of each node in each area of the webpage.
In an optional embodiment, determining the total weight of each region according to the weight of each node in each region of the web page respectively includes: and calculating the sum of the weights of all nodes in all areas of the webpage to serve as the total weight of all the areas.
For example, referring to fig. 6, there are 4 regions in the web page, which are region a, region B, region C, and region D, and according to the sum of the weights of the nodes in each region, the total weight of region a is a, the total weight of region B is B, the total weight of region C is C, and the total weight of region D is D.
In an alternative embodiment, the total weight of the corresponding region may be recorded by the root node of the region. For example, when the root node of the area a is identified as a, the root node of the area B is identified as B, the root node of the area C is identified as C, and the root node of the area D is identified as D, the total weight of each area may be recorded in the manner shown in fig. 6. Of course, this is merely an example and does not represent a limitation of the present application.
S503: and determining a target node to be monitored according to the total weight of each area.
In an alternative embodiment, the target area with the maximum total weight may be determined according to the total weight of each area, and then the target node with the maximum weight may be determined according to the weight of each node in the target area.
In yet another optional implementation manner, a target area with the maximum total weight may be determined according to the total weight of each area, and then at least one target node with a weight greater than a preset threshold may be determined according to the weight of each node in the target area. Namely, the number of the target nodes can be multiple, so that the error of the obtained webpage interactive time point can be reduced.
It should be noted that, in the foregoing embodiment, the target node is a node whose weight is the largest in the area with the largest total weight or whose weight is greater than the preset threshold, in other words, the target node is a node whose rendering time is the longest in the area with the longest rendering time in the webpage loading process, so that if it is detected that rendering of the target node is completed, that is, it is detected that updating of the target node is completed, it indicates that loading of the current webpage is completed, and the time point at which rendering of the target node is completed is the webpage interaction time point. Therefore, the obtained webpage interactive time point is more in line with the actual perception of the user, and the accuracy is higher.
S504: monitoring the target node, and taking the starting time point of the preset time period as the interactive time point of the webpage when the target node is not changed in the preset time period.
And when all the nodes in the webpage are rendered, namely all the nodes in the webpage are updated, and the webpage is represented to be loaded or rendered completely. In the rendering process of the nodes, the contents in the nodes are constantly changed, and the contents in the nodes are not changed after the rendering of the nodes is finished. In the embodiment of the application, when it is monitored that the target node is not changed any more, that is, when the target node is not changed within the preset time period, the target node is considered to be rendered completely, that is, the webpage is loaded or rendered completely, and the starting time point of the preset time period, that is, the time point at which the rendering of the target node is completed, is used as the webpage interactive time point. Therefore, the obtained webpage interactive time point is more in line with the actual perception of the user, and the accuracy is higher. And the target node is monitored instead of all nodes in the whole webpage, so that the monitoring efficiency and the accuracy of the detected interactive time point can be improved on the premise of not influencing the webpage performance, and the access experience of a user is ensured.
According to the method for detecting the webpage interactive time point, firstly, the weight of each node in each area of the webpage is determined according to the weight of the label of each node on the document object model tree of the webpage, then, the target node to be monitored is determined according to the total weight of each area, so that all nodes in the target node but not the whole webpage are monitored, the webpage interactive time point is determined, on the premise that the performance of the webpage is not influenced, the monitoring efficiency and the accuracy of the detected interactive time point are improved, the access experience of a user is guaranteed, meanwhile, the target node determined according to the total weight of each area is monitored, the detected interactive time point is in line with the actual perception of the user, and the accuracy is high.
On the basis of fig. 5, please refer to fig. 7, fig. 7 shows an implementation manner of step S504 in fig. 5, that is, step S504 monitors the target node, and when the target node is not changed in the preset time period, taking the starting time point of the preset time period as the web page interactive time point may specifically include:
s514: and creating a change observer, and injecting the change observer into the webpage, wherein the change observer is used for monitoring the target node.
S524: and when the change observer does not feed back information in the preset time period, taking the starting time point of the preset time period as the interactive time point of the webpage.
The change viewer, i.e. the Mutation Observer, is the interface that monitors the DOM changes. The DOM changes, and the Mutation Observer can be informed, and the Mutation Observer is asynchronously triggered, and after the DOM changes, the Mutation Observer cannot be triggered immediately, but only when all DOM operations are finished, so that the risk of jamming of the browser can be reduced, and the adverse effect on the main thread can be avoided.
In the webpage loading or rendering process, the change observer feeds back information for many times, when the change observer does not feed back information in a preset time period, the node does not change any more, and the initial time point of the preset time period is used as the webpage interaction time point. Therefore, the obtained webpage interactive time point is more in line with the actual perception of the user, and the accuracy is higher.
In an optional embodiment, before determining the weight of each node in each region of the web page according to the label of each node on the document object model tree of the web page, the method further includes: and configuring the weight of the label of each node in the document object model tree of the webpage in an extension program in the browser.
The webpage is usually opened in a browser, and the weight of the label of each node in the document object model tree of the webpage can be configured through an extension program of the browser, so that the weight of each node in each area of the webpage can be directly calculated according to the weight of the label of each node.
In an optional embodiment, determining the weight of each node in each region of the web page according to the label of each node on the document object model tree of the web page includes: and reading the weight of the label of each node on the document object model tree of the webpage by using an extension program in the browser, and determining the weight of each node in each area of the webpage according to the weight of each node.
Specifically, the extension program of the browser may include a mapping relationship between each tag and a weight, and the extension program of the browser determines the weight corresponding to the tag of each node on the document object model tree of the web page according to the mapping relationship, so as to obtain the weight of each node in each region of the web page.
In the embodiment of the present application, a program for determining the weight of each node in each region of a web page is previously used as an extension program of a browser, and the extension program in the browser is used to read the weight of a tag of each node on a document object model tree of the web page and determine the weight of each node in each region of the web page according to the weight of each node. The method can effectively avoid the overlarge redundancy of the main program of the webpage, reduce the development and maintenance cost of the webpage and improve the loading speed of the webpage.
In an optional embodiment, before determining the target node to be monitored according to the total weight of each area, the method further includes: acquiring a root node identifier of each area; the root node identification and the total weight for each region are stored to a common data set.
The root node identifier of each region is used for indicating the region, and the root node identifier and the total weight of each region are stored in a public data set, so that the total weight of each region can be compared conveniently in the follow-up process, and the region corresponding to each total weight can be determined.
In an optional embodiment, determining a target node to be monitored according to the total weight of each region includes: and if a plurality of regions with the maximum total weight and the same total weight exist in the public data set, taking the node with the maximum weight in the regions which are finally stored in the public data set in the plurality of regions as a target node.
Therefore, the problem that the target node cannot be determined by a plurality of areas with the maximum total weight and the same total weight in the public data set can be effectively solved.
Optionally, if multiple regions with the largest total weight and the same total weight exist in the common data set, the total weight value of the region, which is stored in the common data set last, in the multiple regions may be increased by 1, so that the region, which is stored in the common data set last, is the region with the largest total weight, and thus, the problem that the multiple regions with the largest total weight and the same total weight in the common data set cannot determine the target node may also be effectively avoided.
In an optional embodiment, the listening to the target node includes: determining a root node identifier corresponding to the maximum total weight in the public data set; and taking the node with the maximum weight in the area corresponding to the root node identification as a target node, and monitoring the target node.
Specifically, the total weights in the public data set are compared to determine the maximum total weight, then the root node identifier corresponding to the maximum total weight is determined, and the area corresponding to the maximum total weight can be determined according to the root node identifier.
In an optional embodiment, the listening to the target node includes: establishing a timer with a preset interval, and acquiring a target node at the preset interval through the timer; and monitoring the target node.
Optionally, the preset interval is 16 milliseconds, so that the target node can be refreshed in real time on the premise of not obviously increasing the calculation overhead, and the accuracy of the interactive time point of the obtained webpage is improved.
It should be noted that, after the HTML document is downloaded from the web page, before the js script and the css style sheet are downloaded, a timer with a preset interval may be created, and the timer may be destroyed after the change viewer is created, so as to save the performance overhead and improve the loading speed of the web page.
Referring to fig. 8, fig. 8 is a block diagram illustrating another method for detecting a web page interactive time point according to an embodiment of the present disclosure, where the method includes: configuring the weight of a label of each node in a document object model tree of the webpage in an extension program in a browser; reading the weight of the label of each node on the document object model tree of the webpage by using an extension program in a browser, and determining the weight of each node in each area of the webpage according to the weight of the label of each node; calculating the sum of the weights of all nodes in all areas of the webpage to serve as the total weight of all areas; acquiring a root node identifier of each area; storing the root node identification and the total weight of each region to a public data set; determining a root node identifier corresponding to the maximum total weight in the public data set; taking the node with the maximum weight in the area corresponding to the root node identification as a target node; establishing a timer with a preset interval, and acquiring a target node at the preset interval through the timer; creating a change observer, injecting the change observer into a webpage, wherein the change observer is used for monitoring a target node; and when the change observer does not feed back information in the preset time period, taking the starting time point of the preset time period as the interactive time point of the webpage.
For the detailed description or introduction of the above steps, refer to the foregoing embodiments, and are not repeated herein. Referring to fig. 9, the present application provides a web page interactive time point detection apparatus 90, including:
a node weight determining module 901, configured to determine a weight of each node in each region of the web page according to a weight of a label of each node on a document object model tree of the web page, where the label of each node at least includes: defining a table, creating a form, and defining an unordered list, wherein a weight of the defining the table is greater than a weight of the creating the form and a weight of the defining the unordered list.
The region weight determining module 902 is configured to determine a total weight of each region according to the weight of each node in each region of the web page.
And a target node determining module 903, configured to determine a target node to be monitored according to the total weight of each area.
And a target node monitoring module 904, configured to monitor the target node, and when the target node is not changed within a preset time period, use a starting time point of the preset time period as a web page interactive time point.
In an optional embodiment, the target node monitoring module 904 is specifically configured to create a change observer, and inject the change observer into a webpage, where the change observer is configured to monitor a target node; and when the change observer does not feed back information in the preset time period, taking the starting time point of the preset time period as the interactive time point of the webpage.
In an alternative embodiment, the node weight determining module 901 is specifically configured to use an extension program in a browser to read the weight of the tag of each node on the document object model tree of the web page, and determine the weight of each node in each area of the web page according to the weight of the tag of each node.
In an alternative embodiment, the region weight determining module 902 is specifically configured to configure the weight of each tag in the document object model tree in an extension program in the browser.
In an alternative embodiment, the apparatus further comprises: the storage module is used for acquiring the root node identification of each area; the root node identification and the total weight for each region are stored to a common data set.
In an optional embodiment, the target node determining module 903 is specifically configured to, if multiple regions with the largest total weight and the same total weight exist in the common data set, use a node with the largest weight in a region, which is stored in the common data set last in the multiple regions, as the target node.
In an optional embodiment, the target node monitoring module 904 is specifically configured to determine a root node identifier corresponding to a maximum total weight in the public data set; and taking the node with the maximum weight in the area corresponding to the root node identification as a target node, and monitoring the target node.
In an optional implementation manner, the target node listening module 904 is specifically configured to include: establishing a timer with a preset interval, and acquiring a target node at the preset interval through the timer; and monitoring the target node.
In an optional embodiment, the area weight determining module 902 is specifically configured to calculate a sum of weights of nodes in each area of the web page as a total weight of each area.
The webpage provided by the embodiment of the application can interact with the time point detection device, and the time point detection device is specific hardware on equipment or software or firmware installed on the equipment. The device provided by the embodiment of the present application has the same implementation principle and technical effect as the foregoing method embodiments, and for the sake of brief description, reference may be made to the corresponding contents in the foregoing method embodiments where no part of the device embodiments is mentioned. It is clear to those skilled in the art that, for convenience and brevity of description, the specific working processes of the foregoing systems, apparatuses and units may refer to the corresponding processes in the foregoing method embodiments, and are not described herein again.
Referring to fig. 10, an embodiment of the present application provides an electronic device 100, including: the electronic device 100 comprises a processor 1001, a storage medium 1002 and a bus 1003, wherein the storage medium 1002 stores machine readable instructions executable by the processor 1001, when the electronic device 100 runs, the processor 1001 and the storage medium 1002 communicate through the bus 1003, and the processor 1001 executes the machine readable instructions to execute steps of any one of the embodiments.
The present application further provides a computer-readable storage medium having stored thereon a computer program which, when executed by a processor, performs the steps of any of the methods of the preceding embodiments. For specific implementation, reference may be made to the method embodiment, which is not described herein again.
In the embodiments provided in the present application, it should be understood that the disclosed apparatus and method may be implemented in other ways. The above-described embodiments of the apparatus are merely illustrative, and for example, the division of the units is only one logical division, and there may be other divisions when actually implemented, and for example, a plurality of units or components may be combined or integrated into another system, or some features may be omitted, or not executed. In addition, the shown or discussed mutual coupling or direct coupling or communication connection may be an indirect coupling or communication connection of devices or units through some communication interfaces, and may be in an electrical, mechanical or other form.
The units described as separate parts may or may not be physically separate, and parts displayed as units may or may not be physical units, may be located in one place, or may be distributed on a plurality of network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of the embodiment.
In addition, functional units in the embodiments provided in the present application may be integrated into one processing unit, or each unit may exist alone physically, or two or more units are integrated into one unit.
The functions, if implemented in the form of software functional units and sold or used as a stand-alone product, may be stored in a computer readable storage medium. Based on such understanding, the technical solution of the present application or portions thereof that substantially contribute to the prior art may be embodied in the form of a software product stored in a storage medium and including instructions for causing a computer device (which may be a personal computer, a server, or a network device) to execute all or part of the steps of the method according to the embodiments of the present application. And the aforementioned storage medium includes: a U-disk, a removable hard disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), a magnetic disk or an optical disk, and other various media capable of storing program codes.
It should be noted that: like reference numbers and letters refer to like items in the following figures, and thus once an item is defined in one figure, it need not be further defined and explained in subsequent figures, and moreover, the terms "first", "second", "third", etc. are used merely to distinguish one description from another and are not to be construed as indicating or implying relative importance.
Finally, it should be noted that: the above-mentioned embodiments are only specific embodiments of the present application, and are used for illustrating the technical solutions of the present application, but not limiting the same, and the scope of the present application is not limited thereto, and although the present application is described in detail with reference to the foregoing embodiments, those skilled in the art should understand that: any person skilled in the art can modify or easily conceive the technical solutions described in the foregoing embodiments or equivalent substitutes for some technical features within the technical scope disclosed in the present application; such modifications, changes or substitutions do not depart from the spirit and scope of the present disclosure, which should be construed in light of the above teachings. Are intended to be covered by the scope of the present application.

Claims (12)

1. A webpage interactive time point detection method is characterized by comprising the following steps:
determining the weight of each node in each area of the webpage according to the weight of the label of each node on the document object model tree of the webpage, wherein the label of each node at least comprises: defining a table, creating a form and defining an unordered list, wherein the weight of the defining table is greater than the weight of the creating form and the weight of the defining unordered list;
respectively determining the total weight of each region according to the weight of each node in each region of the webpage;
determining a target node to be monitored according to the total weight of each region;
monitoring the target node, and taking the starting time point of the preset time period as the web page interactive time point when the target node is not changed in the preset time period.
2. The method of claim 1, wherein the monitoring the target node, and when the target node is unchanged within a preset time period, taking a starting time point of the preset time period as a web page interactive time point comprises:
creating a change observer, and injecting the change observer into the webpage, wherein the change observer is used for monitoring the target node;
and when the change observer does not feed back information in a preset time period, taking the starting time point of the preset time period as the interactive time point of the webpage.
3. The method of claim 1, wherein before determining the weight of each node in each region of the web page according to the label of each node on the document object model tree of the web page, the method further comprises:
and configuring the weight of the label of each node in the document object model tree of the webpage in an extension program in the browser.
4. The method of claim 3, wherein determining the weight of each node in each region of the web page according to the label of each node on the document object model tree of the web page comprises:
and reading the weight of the label of each node on the document object model tree of the webpage by using an extension program in the browser, and determining the weight of each node in each area of the webpage according to the weight of the label of each node.
5. The method according to any one of claims 1 to 4, wherein before determining the target node to be monitored according to the total weight of each of the regions, the method further comprises:
acquiring a root node identifier of each region;
storing the root node identification and the total weight for each of the regions to a common data set.
6. The method of claim 5, wherein determining the target node to listen to based on the total weight of each of the regions comprises:
and if a plurality of regions with the maximum total weight and the same total weight exist in the public data set, taking the node with the maximum weight in the regions which are finally stored in the public data set in the plurality of regions as the target node.
7. The method of claim 5, wherein the listening to the target node comprises:
determining a root node identifier corresponding to the maximum total weight in the public data set;
and taking the node with the maximum weight in the area corresponding to the root node identification as the target node, and monitoring the target node.
8. The method of claim 1, wherein the listening to the target node comprises:
establishing a timer with a preset interval, and acquiring the target node at the preset interval through the timer;
and monitoring the target node.
9. The method of claim 1, wherein the determining the total weight of each region according to the weight of each node in each region of the web page comprises:
and calculating the sum of the weights of all nodes in all the areas of the webpage to serve as the total weight of all the areas.
10. A web page interactive time point detection device, comprising:
a node weight determining module, configured to determine a weight of each node in each region of a web page according to a weight of a label of each node on a document object model tree of the web page, where a label of each node at least includes: defining a table, creating a form and defining an unordered list, wherein the weight of the defining table is greater than the weight of the creating form and the weight of the defining unordered list;
the region weight determining module is used for respectively determining the total weight of each region according to the weight of each node in each region of the webpage;
a target node determining module, configured to determine a target node to be monitored according to the total weight of each of the regions;
and the target node monitoring module is used for monitoring the target node, and when the target node is not changed in a preset time period, the starting time point of the preset time period is used as the web page interactive time point.
11. An electronic device, characterized in that the electronic device comprises: a processor, a storage medium and a bus, the storage medium storing machine-readable instructions executable by the processor, the processor and the storage medium communicating over the bus when the electronic device is operating, the processor executing the machine-readable instructions to perform the steps of the method of any of claims 1-9.
12. A computer-readable storage medium, characterized in that a computer program is stored on the computer-readable storage medium, which computer program, when being executed by a processor, is adapted to carry out the steps of the method according to any one of the claims 1-9.
CN202111190332.7A 2021-10-13 2021-10-13 Webpage interactive time point detection method and device, electronic equipment and storage medium Active CN113641924B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202111190332.7A CN113641924B (en) 2021-10-13 2021-10-13 Webpage interactive time point detection method and device, electronic equipment and storage medium

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202111190332.7A CN113641924B (en) 2021-10-13 2021-10-13 Webpage interactive time point detection method and device, electronic equipment and storage medium

Publications (2)

Publication Number Publication Date
CN113641924A CN113641924A (en) 2021-11-12
CN113641924B true CN113641924B (en) 2022-02-08

Family

ID=78426530

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202111190332.7A Active CN113641924B (en) 2021-10-13 2021-10-13 Webpage interactive time point detection method and device, electronic equipment and storage medium

Country Status (1)

Country Link
CN (1) CN113641924B (en)

Families Citing this family (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114003471B (en) * 2022-01-04 2022-04-08 深圳市明源云科技有限公司 Page loading analysis method and device and readable storage medium
CN117171469A (en) * 2022-09-22 2023-12-05 深圳Tcl新技术有限公司 Webpage index information acquisition method and device, computer equipment and storage medium

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104184792A (en) * 2013-05-21 2014-12-03 陈梓枫 Session timeout method for dhtmlx interface control library
US20150341385A1 (en) * 2014-05-22 2015-11-26 Cabara Software Ltd. Web page and web browser protection against malicious injections
US20190171542A1 (en) * 2017-12-01 2019-06-06 Dynatrace Llc Method And System For Real-User Capable Detecting Of The Visual Completeness Of Browser Rendering Process
CN110717121A (en) * 2019-08-27 2020-01-21 北京奇艺世纪科技有限公司 Method and device for determining first screen time of page
CN112363915A (en) * 2020-10-26 2021-02-12 深圳市明源云科技有限公司 Method and device for page performance test, terminal equipment and storage medium

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104184792A (en) * 2013-05-21 2014-12-03 陈梓枫 Session timeout method for dhtmlx interface control library
US20150341385A1 (en) * 2014-05-22 2015-11-26 Cabara Software Ltd. Web page and web browser protection against malicious injections
US20190171542A1 (en) * 2017-12-01 2019-06-06 Dynatrace Llc Method And System For Real-User Capable Detecting Of The Visual Completeness Of Browser Rendering Process
CN110717121A (en) * 2019-08-27 2020-01-21 北京奇艺世纪科技有限公司 Method and device for determining first screen time of page
CN112363915A (en) * 2020-10-26 2021-02-12 深圳市明源云科技有限公司 Method and device for page performance test, terminal equipment and storage medium

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
Precise XSS detection and mitigation with Client-side Templates;Jose Carlos Pazos等;《https://arxiv.org/abs/2005.07826》;20200515;第1-15页 *
Web性能监控平台的设计与实现;舒倩雯;《中国优秀博硕士学位论文全文数据库(硕士)信息科技辑》;20190115(第12期);第1-72页 *

Also Published As

Publication number Publication date
CN113641924A (en) 2021-11-12

Similar Documents

Publication Publication Date Title
CN108804707B (en) Page processing method and device and related equipment
CA2839006C (en) Methods for making ajax web applications bookmarkable and crawlable and devices thereof
CN106294658B (en) Webpage quick display method and device
US8935798B1 (en) Automatically enabling private browsing of a web page, and applications thereof
CN113641924B (en) Webpage interactive time point detection method and device, electronic equipment and storage medium
CN108880921B (en) Webpage monitoring method and device, storage medium and server
CN104426925B (en) Web page resources acquisition methods and device
CN110209966B (en) Webpage refreshing method, webpage system and electronic equipment
US20150193389A1 (en) Presenting updated hyperlink information on a webpage
US20170199850A1 (en) Method and system to decrease page load time by leveraging network latency
CN103605688A (en) Intercept method and intercept device for homepage advertisements and browser
CN105095280A (en) Caching method and apparatus for browser
CN106897336A (en) Web page files sending method, webpage rendering intent and device, webpage rendering system
EP3136656A1 (en) Information sharing method and device
CN105528369B (en) Webpage code-transferring method, device and server
CN106202368B (en) Preloading method and device
US20140006933A1 (en) Verifying content of resources in markup language documents
CN111431767A (en) Multi-browser resource synchronization method and device, computer equipment and storage medium
US10095791B2 (en) Information search method and apparatus
CN111783005B (en) Method, device and system for displaying web page, computer system and medium
US10599740B1 (en) Program code streaming
CN113934954A (en) Webpage first screen rendering method and device in application program
CN113127788A (en) Page processing method, object processing method, device and equipment
US20140237133A1 (en) Page download control method, system and program for ie core browser
Xiaoshu Optimized development of web front-end development technology

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant