Webpage loading time determination method, electronic equipment and storage medium

Abstract

The invention discloses a webpage loading time determination method, electronic equipment and a storage medium, and relates to the technical field of data processing.The webpage loading time determination method comprises the steps that change batches and change nodes in the webpage loading process are obtained, and the change batches and change nodes of each change are scored; the node change time corresponding to the change batch with the highest score is determined as the loading time of the webpage, the first screen loading time of the webpage can be dynamically and accurately calculated, meanwhile, customized development is not needed, and high universality is achieved. Therefore, the technical problem of how to improve the flexibility and accuracy of webpage first screen loading time calculation can be solved, and the technical effect of dynamically and accurately calculating the webpage first screen loading time is achieved.

Description

Technical Field

[0001] The present application relates to the field of data processing technology, and in particular to a method for determining web page loading time, an electronic device, and a storage medium. Background Art

[0002] With the development of Internet technology, web page first page load time has become one of the most important indicators for measuring web page performance. Existing methods for calculating web page first page load time mainly include: custom tracking points and monitoring the page's Document Object Model (DOM) interaction.

[0003] Since the traditional method of calculating the first screen load time of a web page requires customized development of tracking points for different websites, the calculation of the first screen load time of a web page is less flexible and cannot accurately calculate the first screen load time of a web page. Summary of the Invention

[0004] The present application provides a method for determining web page loading time, an electronic device, and a storage medium to at least solve the problem in the related art of how to improve the flexibility and accuracy of calculating the loading time of the first screen of a web page.

[0005] This application provides a method for determining web page loading time, comprising:

[0006] Acquire multiple change node chains respectively included in multiple node change batches during webpage loading, wherein each change node chain includes multiple change nodes;

[0007] Determine a change node whose change type is an increase type among the multiple change nodes as a node to be calculated, and determine a node level corresponding to each of the multiple nodes to be calculated based on a first parent node corresponding to each of the multiple nodes to be calculated, wherein the first parent node is a starting node in a change node chain where the node to be calculated is located;

[0008] Determine the nodes to be calculated that meet the preset visible node conditions among the multiple nodes to be calculated as visible nodes, and perform node score calculation processing according to the node levels corresponding to the multiple visible nodes to obtain the node scores corresponding to the multiple visible nodes;

[0009] Calculate the batch scores corresponding to the multiple node change batches according to the node scores, and determine the node change batch with the highest batch score among the multiple node change batches as the target batch;

[0010] The node change time corresponding to the target batch is determined as the page loading time.

[0011] The present application also provides a device for determining web page loading time, comprising:

[0012] an acquisition unit, configured to acquire a plurality of changed node chains respectively included in a plurality of node change batches during webpage loading, wherein each changed node chain includes a plurality of changed nodes;

[0013] A first determining unit is configured to determine a changed node of an increase type among the multiple changed nodes as a node to be calculated;

[0014] A second determining unit is configured to determine a node level corresponding to each of the plurality of nodes to be calculated based on first parent nodes corresponding to each of the plurality of nodes to be calculated, wherein the first parent node is a starting node in a change node chain in which the node to be calculated is located;

[0015] A third determining unit is configured to determine a node to be calculated that meets a preset visible node condition among the multiple nodes to be calculated as a visible node;

[0016] a calculation unit, configured to perform node score calculation processing according to the node levels corresponding to the plurality of visible nodes, to obtain the node scores corresponding to the plurality of visible nodes;

[0017] The calculation unit is further configured to calculate batch scores corresponding to each of the plurality of node change batches according to the node scores;

[0018] A fourth determining unit is configured to determine, among the multiple node change batches, a node change batch with the highest batch score as a target batch;

[0019] The fourth determining unit is further configured to determine the node change time corresponding to the target batch as the page loading time.

[0020] The present application also provides an electronic device, comprising: a memory for storing a computer program; and a processor for implementing the steps of any of the above-mentioned methods for determining web page loading time when executing the computer program.

[0021] The present application also provides a computer-readable storage medium, in which a computer program is stored. When the computer program is executed by a processor, the steps of any of the above-mentioned methods for determining the loading time of a web page are implemented.

[0022] The present application also provides a computer program product, including a computer program, which implements the steps of any of the above-mentioned methods for determining web page loading time when the computer program is executed by a processor.

[0023] The webpage loading time determination method, electronic device, and storage medium of the present application obtain the change batches and change nodes during the webpage loading process, score the change batches and change nodes for each change, and determine the node change time corresponding to the change batch with the highest score as the webpage loading time. This allows for dynamic and accurate calculation of the first screen load time of a webpage, without the need for customized development, and has high universality. Therefore, the technical problem of how to improve the flexibility and accuracy of calculating the first screen load time of a webpage can be solved, achieving the technical effect of dynamically and accurately calculating the first screen load time of a webpage. BRIEF DESCRIPTION OF THE DRAWINGS

[0024] In order to more clearly illustrate the embodiments of the present application, the following is a brief introduction to the drawings required for use in the embodiments. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.

[0025] Figure 1 A flowchart of a method for determining web page loading time provided in an embodiment of the present application;

[0026] Figure 2 A flowchart of another method for determining web page loading time provided in an embodiment of the present application;

[0027] Figure 3 A schematic diagram of a process for calculating node scores provided in an embodiment of the present application;

[0028] Figure 4 A schematic diagram of the structure of a device for determining web page loading time provided in an embodiment of the present application;

[0029] Figure 5 A schematic structural diagram of another device for determining web page loading time provided in an embodiment of the present application. DETAILED DESCRIPTION

[0030] The following will be combined with the accompanying drawings in the embodiments of this application to clearly and completely describe the technical solutions in the embodiments of this application. Obviously, the embodiments described are only part of the embodiments of this application, not all of them. Based on the embodiments in this application, all other embodiments obtained by ordinary technicians in this field without making creative efforts are within the scope of protection of this application.

[0031] It should be noted that, in the description of this application, the terms "comprises," "includes," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or device comprising a series of elements includes not only those elements, but also other elements not explicitly listed, or elements inherent to such process, method, article, or device. The terms "first," "second," etc., in this application are used to distinguish similar objects, and are not used to describe a particular order or sequence.

[0032] In order to enable those skilled in the art to better understand the present application, the present application is further described in detail below with reference to the accompanying drawings and specific implementation methods.

[0033] Figure 1 A flow chart of a method for determining web page loading time provided in an embodiment of the present application and an execution flow of the method for determining web page loading time are provided, and the method is described in detail.

[0034] like Figure 1 As shown, the method for determining the web page loading time includes:

[0035] Step 101: Acquire multiple changed node chains respectively included in multiple node change batches during web page loading, wherein each changed node chain includes multiple changed nodes.

[0036] In an embodiment of the present application, it is first necessary to initialize a preset listening function, for example, a MutationObserver object, to monitor all node changes under the body node tag in the Hypertext Markup Language (HTML) document of the page to be loaded (that is, changes in multiple document object model nodes of the page to be loaded), where the body node contains elements of all content on the page to be loaded, and can organize and display all content on the page to be loaded.

[0037] It should be noted that since the script that monitors the web page loading time needs to be loaded as early as possible to ensure that the key moments in the page loading process can be captured, the process of initializing the preset listening function should be performed first, earlier than the browser loads most other resources.

[0038] During the web page loading process, multiple Document Object Model nodes of the loaded page are monitored in real time through preset monitoring functions to capture changes in all DOM nodes. Whenever a node change is detected, the callback function will be triggered. At this time, all node changes occurring within the same callback cycle will be regarded as a node change batch. In each node change batch, the changed DOM nodes are organized into a change node chain according to their hierarchical relationship. Each change node in the chain represents a specific element in the document structure. For example: if a new node with nested child elements is added The corresponding change node chain, for example: body > div.container > div.content > span.text, fully reflects the hierarchical path of this change node from root to leaf. By batch recording these chain structures (i.e., multiple change node chains), the dynamic filling process of content during page loading can be fully tracked.

[0039] In step 102, a change node whose change type is an increase type among the multiple change nodes is determined as a node to be calculated, and a node level corresponding to each of the multiple nodes to be calculated is determined based on the first parent node corresponding to each of the multiple nodes to be calculated, wherein the first parent node is the starting node in the change node chain where the node to be calculated is located.

[0040] In the embodiment of the present application, nodes with an addition type of change (e.g., adding a new element, inserting a child node, etc.) are screened from each node change batch. Node changes with a deletion or attribute modification type that do not affect content visibility are excluded. Nodes with an addition type of change are marked as pending nodes and serve as a benchmark for subsequent analysis.

[0041] For each node to be calculated, trace back to the starting node of its change node chain and calculate its node level. Level calculation can be achieved by tracing back from the current node to the first parent node, with the level value increasing with each parent node. For example, the level of the div node at the first parent node is 1, and the level of the span node's child is 2. The level value not only reflects the node's depth in the change node chain but also directly correlates with subsequent score calculations. Nodes with greater depth generally contribute more to interface complexity.

[0042] Step 103 : Determine the nodes to be calculated that meet the preset visible node conditions among the multiple nodes to be calculated as visible nodes, and perform node score calculation according to the node levels corresponding to the multiple visible nodes to obtain the node scores corresponding to the multiple visible nodes.

[0043] In an embodiment of the present application, nodes to be calculated are screened based on preset visible node conditions to exclude invalid nodes due to scrolling hiding, Cascading Style Sheets (CSS) invisible attributes, or exceeding the visible window range. That is, the preset visible node conditions are user-defined node conditions. For example, a change node visible within the visible window is determined to be a visible node; a change node that becomes visible only after scrolling the scroll bar, a change node set to invisible by a CSS attribute, etc. are considered invisible nodes that do not meet the preset visible node conditions.

[0044] When determining visibility (i.e., whether it exceeds the visible window range), the bounding coordinates of the node to be calculated can be obtained by, but is not limited to, calling the getBoundingClientRect function and comparing them with the visible window size. For visible nodes, the node score is calculated based on their node level. The node score is calculated, for example, as follows: base score + node level × coefficient (e.g., the default coefficient is 0.5). For example, a visible node at level 3 has a score of 1 + 3 × 0.5 = 2.5.

[0045] Therefore, the calculation of node scores can give deeper nodes higher weights, because deeper nodes usually correspond to more specific content modules (such as text and pictures) in the page to be loaded, which directly affects the user's perception of the completeness of the content on the first screen of the page.

[0046] Specifically, the rules for node score calculation and processing may also include but are not limited to the following: the initial node score (basic score) of the node to be calculated in the node hierarchy with a large number of changed nodes is greater than the initial node score of the node to be calculated in the node hierarchy with a small number of changed nodes. For example: the initial node score of the node to be calculated in the node hierarchy including three changed nodes is 3, and the initial node score of the node to be calculated in the node hierarchy including two changed nodes is 2.

[0047] In addition, a reverse child node traversal strategy is adopted: scanning starts from the end of the child node list, and combined with a visibility marking mechanism (when a node is found to be visible, its parent node and predecessor sibling nodes are automatically marked as visible), to avoid repeated calculations and significantly reduce the performance overhead of layout queries.

[0048] Step 104 , calculating batch scores corresponding to each of the multiple node change batches according to the node scores, and determining the node change batch with the highest batch score among the multiple node change batches as the target batch.

[0049] In an embodiment of the present application, for each node change batch, the node scores of all visible nodes contained therein may be accumulated to obtain the batch score of the node change batch.

[0050] The batch score comprehensively reflects the contribution of each node change batch to the presentation of the page's first-screen content. A higher batch score indicates richer and more complex newly visible content added during this node change batch, making it more likely that users will perceive the first-screen content as the main content. Finally, the scores of all batches are compared, and the node change batch with the highest batch score is marked as the target batch. This selection logic is based on the principle of maximum content increment, assuming that the key moment of the user's first-screen experience corresponds to the rendering phase with the densest and most complete interface structure.

[0051] Step 105: Determine the node change time corresponding to the target batch as the page loading time.

[0052] In the embodiment of the present application, the node change time corresponding to the target batch (i.e., the timestamp when the DOM change event of the target batch is triggered) is determined as the page load time. This means that after the loading process of the page load time, the first screen content of the webpage has been basically rendered and the peak amount of visual information has been reached, which can accurately reflect the actual loading completion moment perceived by the user.

[0053] The method for determining web page loading time in this application obtains the change batches and change nodes during the web page loading process, scores the change batches and change nodes for each change, and determines the node change time corresponding to the change batch with the highest score as the web page loading time. This method can dynamically and accurately calculate the first screen load time of a web page, and at the same time, it does not require customized development and has high universality. Therefore, it can solve the technical problem of how to improve the flexibility and accuracy of calculating the first screen load time of a web page, achieving the technical effect of dynamically and accurately calculating the first screen load time of a web page.

[0054] In one possible implementation of the present application, when obtaining multiple change node chains included in multiple node change batches during web page loading, the following implementation method may be used, but is not limited to: monitoring multiple document object model nodes of the page to be loaded during web page loading through a preset monitoring function to obtain node monitoring information, wherein the node monitoring information at least includes the change type corresponding to each of the multiple change nodes and the node change time corresponding to each of the multiple node change batches; extracting and processing the document object model nodes with changes based on the node monitoring information to obtain multiple change nodes. Perform parent node search processing on the multiple change nodes respectively until the first parent node corresponding to each of the multiple change nodes is found; and determining the multiple node chains with the multiple first parent nodes as the starting nodes as the multiple change node chains.

[0055] In an embodiment of the present application, the preset listener function is a custom listener function, such as the MutationObserver interface provided by the browser. The preset listener function is initialized and bound to the body node at the beginning of the web page loading process, enabling real-time monitoring of all child nodes and subtree structure changes during the page loading process. The childList (monitoring the addition and deletion of child nodes) and subtree (recursively monitoring all descendant nodes) properties are enabled in the preset listener function to ensure that changes to DOM nodes at any level are captured.

[0056] Whenever a DOM node changes, a callback function is triggered, and the change information is delivered in batches. Each batch corresponds to consecutive node changes within the same event loop, and includes multiple specific changed nodes. Node monitoring information is also provided, along with the node change type (e.g., addition, deletion, property modification) and the time the change occurred (a high-precision timestamp obtained using the performance.now() function).

[0057] The extraction process means filtering the change types in the node monitoring information and only retaining the change nodes of the added type (such as adding elements, inserting child nodes), because the change nodes of the added type directly contribute to the visibility improvement of the page content. For each filtered change node, that is, the node to be calculated, the parent node search process is performed: from the current node, its parent nodes are traversed upward step by step until the body node, that is, the first parent node, is located. For example: if a new one is added, As a child node of the body node, since the first parent node is the body node, The node level of is 1; if Dynamically insert a ,but The first parent node is also the body node. The node level is 2. This process ensures that each change node can be traced back to the starting point of the change chain to which it belongs, thereby accurately reflecting its structural position in the document tree.

[0058] The generation of the change node chain is based on the hierarchical relationship between the first parent node and the subsequent child nodes. Starting from the first parent node, it extends downward to the current change node to form a complete node path. For example: if a div.container node is added under the body node, and a p.text child node is inserted into it, the change node chain generated by these two additions is: body→div.container→p.text. If a p.text child node is inserted into another div.container node under the body node, child node, the change node chain generated by this new operation is: body→div.container→ Each change node chain represents the structural path from the parent node that triggers the change to the child node that actually changes, providing a basis for subsequent analysis of node hierarchy depth and visibility. By batch processing all changes within the same node change batch, multiple structured change node chain sets are ultimately aggregated, each set corresponding to a DOM node change snapshot within a specific time window.

[0059] Specifically, in order to facilitate understanding of the implementation process of this embodiment, the present application provides an example for illustration: find the body node and bind it to the preset listening function, initialize the preset listening function, monitor the body node, set the monitoring properties childList and subtree of the preset listening function (MutationObserver object) to true, that is, turn on the childList and subtree properties of the MutationObserver object to ensure that any element changes under the body node will be monitored. As the page to be loaded is loaded, the DOM node changes, which will trigger the callback function (such as: MutationObserver). At this time, all the changed DOM nodes, that is, multiple changed nodes, can be obtained in the callback function. At the same time, the change time of each node change batch is obtained through the browser's built-in function (such as: performace.now), and the time taken from the start of the website access to the current script execution can be returned.

[0060] The multiple change nodes passed in the callback function can be a node array. Start traversing the change nodes and determine the level of each change node in the node array. Start from the change node and search upwards layer by layer until the top body node is found. Each time you search upwards, the node level of the change node increases by 1. For example:

[0061]

[0062] <div class＝”page-div”>

[0063] <span class＝”page-span”>

[0064] <h1 class＝”page-h1”> Hello< / h1> <h1>

[0065]

[0066] < / h1>

[0067]

[0068] Among them, the node level of div is 1, the node level of span is 2, and the node level of h1 is 3.

[0069] When determining the change node chain of each change node in the node array, the following examples may be used but are not limited to demonstrate:

[0070] Div is a changing node, then body.page-body>div.page-div;

[0071] Span is a changing node, then body.page-body>div.page-div>span.page-span;

[0072] If h1 is a changing node, then body.page-body>div.page-div>span.page-span>h1.page-h1.

[0073] By leveraging the asynchronous callback feature of the preset listening function, high-frequency and fragmented node changes are consolidated into discrete node change batches, avoiding the performance loss caused by frequent event-by-event processing. By locating the first parent node, irrelevant deeply nested changes are removed to ensure that each change node chain truly reflects the structured generation process of user-visible content. The construction of the change node chain converts the implicit DOM node tree relationship into an explicit path description, providing direct input for subsequent hierarchical score calculations.

[0074] In one possible implementation method of the embodiment of the present application, when determining the node level corresponding to each of the multiple nodes to be calculated, the following method can also be used but is not limited to: the level of the multiple first parent nodes is determined as the zeroth level, and in the change node chain where each of the multiple first parent nodes is located, the level is incremented according to the child node level of the first parent node until the node level corresponding to each of the multiple nodes to be calculated is obtained.

[0075] In the embodiment of the present application, when determining the node level corresponding to the node to be calculated, a hierarchical progressive rule is adopted. Starting from the first parent node, the depth of the child node is calculated step by step along the change node chain to which it belongs, thereby accurately quantifying the position weight of each change node in the document structure. The core lies in converting the abstract DOM node tree relationship into a computable numerical hierarchy, providing a structured basis for the subsequent hierarchical score allocation. The specific implementation logic includes but is not limited to the following methods:

[0076] The first parent node is the direct target of DOM node change events, and its level is defined as level zero. For example, if a node change event adds a div.header element under the body node, then body, as the first parent node of div.header, has a level of zero; and div.header itself, as the direct child node of the change, has its level determined as level one through level incrementing. If a child node span.title is further inserted into div.header, the level of the child node span.title increases from the first level to the second level, and so on. Ensure that the level value of each node in the change node chain reflects its depth relative to the first parent node.

[0077] The specific implementation of hierarchical incremental processing depends on the layer-by-layer traversal of the change node chain. Starting from the first parent node (zeroth level), visit its directly added child nodes in turn (level + 1), and then recursively visit the child nodes of the child nodes (level + 1 again), until all newly added nodes in the change node chain are covered. For example: for the following change node chain, body (zeroth level) → div.main (first level) → section.content (second level) → p.text (third level), the level value of each node strictly follows the incremental relationship from parent to child. This process is not only applicable to the chain structure of a single path, but can also handle complex subtrees of multiple branches in the same change batch to ensure the comprehensiveness and consistency of the level calculation.

[0078] Using the first parent node as the unified starting point (level zero), the impact of node position differences in different change events on level calculation is eliminated, ensuring the consistency of the scoring benchmark. The incremental rule automatically adapts to document structure changes of any depth, accurately calculating node levels for both shallow layout adjustments and deep content injection. Through chain traversal rather than global DOM node tree scanning, the focus is only on the node paths that have actually changed, significantly reducing redundant calculations and improving processing efficiency. This makes node level a key indicator for measuring content complexity and visual significance, providing an objective and quantifiable input parameter for subsequent visibility screening and score calculation.

[0079] In one implementable manner of an embodiment of the present application, when determining a node to be calculated that meets a preset visible node condition among multiple nodes to be calculated as a visible node, it can also be implemented in but not limited to the following manner: determine whether the target node to be calculated has a child node, wherein the target node to be calculated is any node to be calculated among the multiple nodes to be calculated; when it is determined that the target node to be calculated does not have a child node, determine whether the target node to be calculated meets the preset visible node condition, and when the target node to be calculated meets the preset visible node condition, determine the target node to be calculated as a visible node; when it is determined that the target node to be calculated has a child node, determine whether the child node of the target node to be calculated has a child node, until the last child node of the target node to be calculated is obtained, wherein the last child node is a node among the child nodes of the target node to be calculated that has no child node; when the last child node meets the preset visible node condition, determine the last child node as a visible node, and determine all sibling nodes and all parent nodes of the last child node as visible nodes.

[0080] In the embodiment of the present application, a hybrid strategy combining top-down traversal and bottom-up marking can be adopted in the process of screening visible nodes, aiming to efficiently identify DOM nodes that make a substantial contribution to the user's first screen perception. By recursively exploring the node subtree structure and reversely deducing the visual state of the parent container based on the visibility of the end node, redundant calculations are significantly reduced, ensuring that the judgment logic is highly consistent with the browser rendering behavior.

[0081] The target node to be calculated refers to any node to be calculated that is currently being processed. First, check whether the target node to be calculated contains child nodes. If there are no child nodes, it indicates that it is a leaf node (such as terminal content carriers such as text and images). At this time, the preset visible node conditions are directly performed on it. Visibility conditions include but are not limited to: the node bounding box is within the browser window, display:none or visibility:hidden style is not set, and transparency is not completely transparent. If the leaf node meets all conditions, it is marked as a visible node and its level and score are recorded.

[0082] If the target node to be calculated has child nodes (e.g., layout containers like div or section), the search will be recursively performed down the target node's subtree until the last child node—the deepest leaf node—is found. A depth-first search strategy is used to prioritize the evaluation of the last content element. For example, for a structure like div → ul → li → span, visibility checks will be performed down to the span node.

[0083] If the last child node meets the pre-set visible node criteria, a reverse marking mechanism is triggered: not only is the last child node itself marked as visible, but all of its sibling nodes (other child elements under the same parent node) and parent nodes (up to the original target node to be calculated) are also marked as visible. This principle is based on the nested nature of web page layouts: if the deepest child node within a container is visible, its parent container must have already rendered within the viewport. Sibling elements at the same level typically share similar visual states (such as list items and card decks), eliminating the need for individual verification.

[0084] Using the visibility of leaf nodes as the starting point for judgment, ensure that content elements (rather than empty containers) dominate visual state decisions, and avoid misjudging layout changes with no substantive content as key points for first-screen rendering; reversely deduce parent visibility through child node visibility to reduce explicit calculations of container elements, especially suitable for rapid evaluation of complex nested structures; based on the assumption that elements of the same level usually have similar layout properties, batch mark sibling nodes as visible, significantly reducing the number of traversals and improving processing efficiency.

[0085] In one possible implementation method of the embodiment of the present application, when determining whether the target node to be calculated meets the preset visible node condition, it can also be implemented by but not limited to the following method: obtaining a first distance between the target node to be calculated and the left border of the preset visible window, and a second distance between the target node to be calculated and the upper border of the preset visible window; when the first distance is less than the window width of the preset visible window and the second distance is less than the window height of the preset visible window, determining that the target node to be calculated meets the preset visible node condition; when the first distance is not less than the window width of the preset visible window, and / or the second distance is not less than the window height of the preset visible window, determining that the target node to be calculated does not meet the preset visible node condition.

[0086] In an embodiment of the present application, when determining whether a target node to be calculated meets the preset visible node condition, an efficient visibility determination can be achieved by quantifying the spatial positional relationship between the target node to be calculated and the browser's visible window (preset visible window), combined with lightweight geometric calculations. The preset visible window refers to the area of ​​the webpage currently visible to the user, and its range is dynamically defined by the size (width and height) of the browser viewport, eliminating hidden content that requires scrolling to view.

[0087] First, obtain the offset values ​​of the upper left corner coordinates of the bounding box of the target node to be calculated relative to the upper left corner origin of the preset visible window, namely the first distance (horizontal offset) and the second distance (vertical offset). For example: if the left attribute of a target node to be calculated is 200px and the top attribute is 150px, it means that its upper left corner is located 200px and 150px below and right of the preset visible window. At this time, the window width (window.innerWidth) and window height (window.innerHeight) of the preset visible window respectively represent the display range of the preset visible window on the current device.

[0088] The visibility determination follows the following rules: if the first distance is less than the window width and the second distance is less than the window height, the target node to be calculated is determined to have entered the preset visible window and meets the preset visible node condition; conversely, if the distance in any direction exceeds the corresponding preset visible window size, the target node to be calculated is completely outside the preset visible window and is marked as invisible.

[0089] This method converts abstract visibility into specific geometric coordinates for comparison, avoiding reliance on complex layout rendering tree parsing and improving judgment efficiency. It only needs to read the left and top attributes and viewport size of the target node to be calculated, eliminating the need to calculate the intersection of the node's complete boundary and the viewport, significantly reducing performance loss. Given that the content of the page to be loaded is typically rendered from top to bottom and from left to right, the anchor point principle is used to capture the initial moment when the node enters the viewport, aligning with the user's visual focus migration path. This allows for rapid screening of nodes that materially impact the user's visual experience during the highly dynamic web page loading process, providing precise input for subsequent score aggregation and first-screen time decisions.

[0090] In one possible implementation of the embodiment of the present application, when performing node score calculation based on the node levels corresponding to each of the multiple visible nodes, it can also be implemented in but not limited to the following manner: multiplying the node levels corresponding to each of the multiple visible nodes by a preset coefficient to obtain a first score corresponding to each of the multiple visible nodes; determining an initial node score corresponding to each of the multiple visible nodes based on the number of changed nodes included in the node level, wherein the initial node score is proportional to the number of changed nodes included in the node level; and adding the initial node score to the first score to obtain a node score corresponding to each of the multiple visible nodes.

[0091] In the embodiments of the present application, a composite weighting strategy can be used to calculate the node scores of visible nodes, comprehensively considering the depth of the visible nodes in the document structure and the density of the content they represent, dynamically quantifying their contribution to the user's perception of the first screen of the page. By weighting the hierarchical coefficient and the number of nodes in a dual dimension, the score reflects both the complexity of the interface rendering and the density of the content filling, thereby accurately locating the critical moment when the first screen load is completed.

[0092] The node level represents the nesting depth of visible nodes in the document tree, and its value increases step by step starting from the zeroth level of the first parent node. Each visible node is assigned a first score that is positively correlated with its level, and the calculation formula is level × preset coefficient (the default coefficient is 0.5). For example: the first score of a node at the third level is 3×0.5=1.5. Deep nodes are given higher weights, which usually correspond to specific text, images or interactive elements, and directly affect the user's judgment of the completeness of the content. Shallow nodes (such as container divs) carry layout functions but have lower visual significance.

[0093] The initial node score is calculated based on the number of changed nodes in the node hierarchy. A changed node is defined as all visible nodes in the same hierarchy that were added during the node change batch. The count is based on the chain of changed nodes. If a hierarchy contains multiple new nodes in the chain (e.g., multiple children are inserted under the same parent node), the initial score increases linearly with the number of nodes. For example, if the second hierarchy has 3 new visible nodes, its initial score might be 3 (assuming a base value of 1 and a multiplication factor of 1).

[0094] The node score is the sum of the first score and the initial node score. For example, if two new nodes are added to a visible node at the third level, the node score is (3 × 0.5) + 2 = 1.5 + 2 = 3.5. This superposition calculation incorporates both depth and density: deeper nodes amplify their structural value through coefficients, while the accumulation of nodes strengthens the immediate impact of content filling.

[0095] The hierarchical coefficient is used to capture the contribution of node depth to interface complexity, and quantitative statistics are used to quantify the density of content filling. The two work together to avoid the one-sidedness of single-dimensional evaluation. The preset coefficient can be flexibly adjusted according to the type of web page (such as text-dominant, multimedia-intensive), and by adjusting the adaptability of the hierarchical weight optimization algorithm to different scenarios, it can distinguish between key content loading and minor layout adjustments, and accurately identify the time nodes available for page loading.

[0096] In one implementable method of the embodiment of the present application, when calculating the batch scores corresponding to multiple node change batches based on the node scores, it can also be implemented by but not limited to the following methods: determining the node change batches in which multiple visible nodes are located, and obtaining multiple node scores corresponding to the multiple node change batches; adding up the multiple node scores corresponding to the multiple node change batches respectively, and obtaining the batch scores corresponding to the multiple node change batches.

[0097] In an embodiment of the present application, when calculating the batch scores corresponding to multiple node change batches, the contribution values ​​of all visible nodes within the same time period can be aggregated to construct a batch score reflecting the corresponding node change batch. By integrating the discrete node scores into a comprehensive score in the time window dimension, the critical rendering phases with the most intensive content loading and the most significant user perception can be identified.

[0098] First, each visible node is classified into its own node change batch based on the node change time. Each node change batch represents a collection of independent DOM change events captured by MutationObserver, with a time span typically very short (milliseconds), ensuring that node changes within the same batch are triggered by the same rendering cycle. For example, if multiple product cards are dynamically inserted after an asynchronous request returns, the DOM changes of these cards may be classified into the same batch, and their corresponding visible node scores will be jointly used in the score calculation for that batch.

[0099] The batch score is calculated by summing the node scores of all visible nodes in the batch. The node score is a composite of the layer depth and the number of nodes at the same layer. A higher node score indicates a greater contribution to the interface complexity and content density. For example, if a batch contains three visible nodes with node scores of 2.3, 1.8, and 3.1, the batch score is 2.3 + 1.8 + 3.1 = 7.2.

[0100] By elevating the node-level micro-score to a batch-level macro-assessment, the rendering intensity is integrated through the time dimension to avoid misjudgments caused by high scores on a single node. The accumulation mechanism naturally amplifies the batch scores during the content-intensive rendering phase, making them stand out as peaks in the time series and forming a strong correlation with the user's visual focus. Sporadic low-score changes (such as icon loading, border adjustment) will not interfere with the identification of key batches due to the low total score after accumulation, thereby improving the robustness of the algorithm. By comparing the accumulated scores of each batch, the outbreak point of content filling can be accurately located, and this timestamp can be marked as the moment when the first screen loading is completed. The decision logic based on intensity accumulation not only retains the fine-grained advantage of node-level calculations, but also eliminates the impact of individual node score fluctuations through aggregation, ensuring the stability and credibility of the final result.

[0101] In one possible implementation of the embodiment of the present application, when determining the loading time of a web page, since the monitoring of the DOM node cannot continue indefinitely, it is necessary to set a threshold or rule for stopping monitoring. Specifically, the following method can also be used but is not limited to: when the listening time of the preset listening function reaches the preset time threshold, stop the operation of the preset listening function; or, when a stop listening instruction is received, stop the operation of the preset listening function.

[0102] In an embodiment of the present application, the preset time threshold is a user-defined maximum monitoring time (e.g., 10 seconds by default), and the timer starts when the monitoring is started. If the monitoring continues until the preset time threshold and no other termination conditions are triggered, the operation of the monitoring function is forcibly stopped.

[0103] The stop listening command is triggered by user interaction with the page, such as mouse clicks, touch operations, or keyboard input. Such interactions are captured by binding global event listeners (such as click and keydown). Once a valid operation is detected, the listening is terminated immediately.

[0104] Specifically, regarding the implementation method of the embodiment of the present application, for example: 1. When the monitoring starts listening, a timer is set. The time of the timer can be customized. The default setting is 10s. After 10s, the timer actively stops listening; 2. When the monitoring starts listening, a global click event is bound. If the user has started an operation, clicked on the page to jump to the page, etc., the monitoring also needs to be stopped immediately.

[0105] Time thresholds are used to ensure resource release in extreme situations, while user interaction responses prioritize reflecting the real user experience. The two complement each other to cover different loading characteristics. Timely termination of monitoring avoids continuous occupation of browser main thread resources and reduces the impact on page interaction performance. This is especially suitable for low-end devices and complex single-page applications.

[0106] Prevent subsequent non-first-screen changes (such as ad injection and log reporting) from interfering with score calculations, and ensure that the first-screen loading time mark of the webpage strictly corresponds to the core content rendering stage.

[0107] Furthermore, in order to facilitate understanding of the specific implementation process of this application, this application provides a flow chart of another method for determining web page loading time, such as Figure 2 For further information on traversing visible nodes and calculating node scores, please refer to Figure 3 , Figure 3 A flowchart of a node score calculation process provided by this application is as follows: Figure 3 As shown, including:

[0108] a. Traverse all addNodes (nodes to be calculated);

[0109] b. Calculate the node scores of the child nodes of the node to be calculated. The child nodes of the node to be calculated are represented by cNode.

[0110] c. Determine whether the cNode node has children nodes (child nodes);

[0111] d. If the cNode node has no children nodes, directly calculate the node score of the cNode node;

[0112] e. Before calculating the score node, it is necessary to determine whether the cNode node is not visible in the visual area due to a scroll bar (i.e., determine whether the cNode node is a visible node). You can obtain the left (first distance) and top (second distance) positions of the cNode node by calling the getBoundingClientRect function of the cNode node, and compare them with the browser visual window (preset visual window). If the left is less than the window width and the top is less than the visual window height, it means that the cNode node is visible in the visual area, i.e., the cNode node is a visible node;

[0113] f. If the cNode node is an invisible node, the batch score of the node change batch where the cNode node is located remains unchanged;

[0114] g. If the cNode is a visible node, the node score of the cNode is the initial node score + the node level of the cNode * the preset coefficient. The batch score of the node change batch in which the cNode is located plus the node score of the cNode;

[0115] h. Continue with step c. If the cNode node has children, first calculate the node score of the children node and traverse the children nodes. However, it is important to note that this traversal no longer starts at index 0 of the array, but instead starts at the last child node. This is mainly because calculating whether all nodes are visible in the visible window is detrimental to performance, and this logical judgment should be performed as little as possible.

[0116] i. Calculate the node score for the tNode node. The tNode node represents the children node of the cNode node. If tNode has children nodes, repeat step h. If not, continue with step j.

[0117] j. Determine whether the tNode node is visible in the visual area. If there is a visible mark (see step k), no further determination is required; if there is no visible mark, repeat steps e and f.

[0118] k. If the tNode node is a visible node, considering the basic layout relationship of the browser's parent-child node relationship and sibling node relationship, if a node is visible, then the parent node of this node must be visible, and the sibling nodes before this node must also be visible, so there is no need to perform visibility judgment again. In this case, the parent node of the tNode node is directly marked, and the visibility judgment is no longer performed when calculating the parent node of the tNode node;

[0119] 1. Calculate the node score of tNode and repeat step g.

[0120] m. Continue with step h and traverse all children nodes;

[0121] n. Continue with step a and traverse all addNodes nodes.

[0122] In summary, this application can achieve the following technical effects:

[0123] 1. By acquiring the batches and nodes of changes during web page loading, scoring each batch and node of change, and determining the node change time corresponding to the batch with the highest score as the web page load time, this method can dynamically and accurately calculate the first screen load time of a web page. This method also eliminates the need for customized development and has high universality. Therefore, it can solve the technical problem of how to improve the flexibility and accuracy of calculating the first screen load time of a web page, achieving the technical effect of dynamically and accurately calculating the first screen load time of a web page.

[0124] 2. By accurately monitoring changes in the webpage's DOM nodes in real time, this solution can dynamically and accurately calculate the page's first page load time. This solution eliminates the need for custom development and is highly universal, applicable to a wide range of websites, significantly reducing monitoring costs and implementation difficulties. Furthermore, experimental and practical applications have proven that the first page load time calculated using this solution is more accurate than other existing solutions, providing more reliable data support for webpage performance optimization.

[0125] Through the description of the above implementation methods, those skilled in the art can clearly understand that the method according to the above embodiment can be implemented by means of software plus the necessary general hardware platform, and of course it can also be implemented by hardware, but in many cases the former is a better implementation method.

[0126] The embodiment of the present application also provides a device for determining web page loading time. Figure 4 This is a schematic diagram of a device for determining web page loading time provided by this application, such as Figure 4 As shown, including:

[0127] An acquisition unit 41 is configured to acquire a plurality of changed node chains respectively included in a plurality of node change batches during webpage loading, wherein each changed node chain includes a plurality of changed nodes;

[0128] A first determining unit 42 is configured to determine a changed node of an increase type among the multiple changed nodes as a node to be calculated;

[0129] A second determining unit 43 is configured to determine a node level corresponding to each of the plurality of nodes to be calculated based on first parent nodes corresponding to each of the plurality of nodes to be calculated, wherein the first parent node is a starting node in a change node chain in which the node to be calculated is located;

[0130] The third determining unit 44 is configured to determine a node to be calculated that meets a preset visible node condition among the multiple nodes to be calculated as a visible node;

[0131] A calculation unit 45 is configured to perform node score calculation processing according to the node levels corresponding to the multiple visible nodes to obtain the node scores corresponding to the multiple visible nodes;

[0132] The calculation unit 45 is further configured to calculate batch scores corresponding to each of the plurality of node change batches based on the node scores;

[0133] A fourth determining unit 46 is configured to determine, among the multiple node change batches, a node change batch with the highest batch score as a target batch;

[0134] The fourth determining unit 46 is further configured to determine the node change time corresponding to the target batch as the page loading time.

[0135] In one embodiment of the present application, the acquiring unit 41 is further configured to:

[0136] During the webpage loading process, a preset monitoring function is used to monitor multiple document object model nodes of the page to be loaded, and obtain node monitoring information, wherein the node monitoring information at least includes a change type corresponding to each of the multiple changed nodes and a node change time corresponding to each of the multiple node change batches;

[0137] The document object model nodes with changes are extracted and processed according to the node monitoring information to obtain a plurality of changed nodes.

[0138] Perform parent node search processing on multiple changed nodes respectively until the first parent node corresponding to each of the multiple changed nodes is found;

[0139] A plurality of node chains starting with a plurality of first parent nodes are determined as a plurality of changed node chains.

[0140] In one embodiment of the present application, the second determining unit 43 is further configured to:

[0141] The levels of the multiple first parent nodes are determined as the zeroth level. In the change node chains where the multiple first parent nodes are located, the levels are incremented according to the child node levels of the first parent nodes until the node levels corresponding to the multiple nodes to be calculated are obtained.

[0142] In one embodiment of the present application, the third determining unit 44 is further configured to:

[0143] Determine whether a target node to be calculated has a child node, wherein the target node to be calculated is any node to be calculated among the multiple nodes to be calculated;

[0144] If it is determined that the target node to be calculated has no child nodes, determining whether the target node to be calculated meets a preset visible node condition, and if the target node to be calculated meets the preset visible node condition, determining the target node to be calculated as a visible node;

[0145] If it is determined that the target node to be calculated has child nodes, determining whether the child nodes of the target node to be calculated have child nodes until the last child node of the target node to be calculated is obtained, wherein the last child node is a node that has no child nodes among the child nodes of the target node to be calculated;

[0146] When the last child node meets the preset visible node condition, the last child node is determined as a visible node, and all sibling nodes and all parent nodes of the last child node are determined as visible nodes.

[0147] In one embodiment of the present application, the third determining unit 44 is further configured to:

[0148] Obtaining a first distance between the target node to be calculated and the left edge of the preset visible window, and a second distance between the target node to be calculated and the upper edge of the preset visible window;

[0149] When the first distance is less than the window width of the preset visible window and the second distance is less than the window height of the preset visible window, determining that the target node to be calculated meets the preset visible node condition;

[0150] When the first distance is not less than the window width of the preset visible window and / or the second distance is not less than the window height of the preset visible window, it is determined that the target node to be calculated does not meet the preset visible node condition.

[0151] In one embodiment of the present application, the calculation unit 45 is further configured to:

[0152] Obtaining first scores corresponding to the multiple visible nodes by multiplying the node levels corresponding to the multiple visible nodes by a preset coefficient;

[0153] determining an initial node score corresponding to each of the plurality of visible nodes according to the number of changed nodes included in the node hierarchy, wherein the initial node score is proportional to the number of changed nodes included in the node hierarchy;

[0154] The initial node score and the first score are added together to obtain node scores corresponding to the multiple visible nodes.

[0155] In one embodiment of the present application, the calculation unit 45 is further configured to:

[0156] Determine the node change batches in which the multiple visible nodes are located, and obtain multiple node scores corresponding to the multiple node change batches;

[0157] The multiple node scores corresponding to the multiple node change batches are respectively added together to obtain the batch scores corresponding to the multiple node change batches.

[0158] In one embodiment of the present application, Figure 5 As shown, the device for determining the webpage loading time further includes:

[0159] The stopping unit 47 is configured to stop the operation of the preset monitoring function when the monitoring time of the preset monitoring function reaches a preset time threshold;

[0160] Or, when a stop monitoring instruction is received, the operation of the preset monitoring function is stopped.

[0161] For the description of the features in the embodiment corresponding to the device for determining web page loading time, please refer to the relevant description of the embodiment corresponding to the method for determining web page loading time, and no further details will be given here.

[0162] An embodiment of the present application further provides an electronic device, comprising a memory and a processor, wherein the memory stores a computer program, and the processor is configured to run the computer program to execute the steps in any of the above-mentioned embodiments of the method for determining web page loading time.

[0163] An embodiment of the present application further provides a computer-readable storage medium storing a computer program, wherein the computer program is configured to execute the steps of any of the above-mentioned embodiments of the method for determining web page loading time when running.

[0164] In an exemplary embodiment, the computer-readable storage medium may include, but is not limited to, various media that can store computer programs, such as a USB flash drive, a read-only memory (ROM), a random access memory (RAM), a mobile hard disk, a magnetic disk, or an optical disk.

[0165] An embodiment of the present application further provides a computer program product, which includes a computer program. When the computer program is executed by a processor, it implements the steps of any of the above-mentioned methods for determining web page loading time.

[0166] An embodiment of the present application further provides another computer program product, including a non-volatile computer-readable storage medium, wherein the non-volatile computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the steps of any of the above-mentioned methods for determining the web page loading time are implemented.

[0167] Professionals may further appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of the two. In order to clearly illustrate the interchangeability of hardware and software, the above description has generally described the components and steps of each example according to their functions. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professionals and technicians may use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0168] The above is a detailed introduction to a method for determining a web page loading time, an electronic device, and a storage medium provided by the present application. Specific examples are used herein to illustrate the principles and implementation methods of the present application. The description of the above embodiments is only used to help understand the method of the present application and its core idea. It should be pointed out that for ordinary technicians in this technical field, without departing from the principles of the present application, several improvements and modifications can be made to the present application, and these improvements and modifications also fall within the scope of protection of the claims of the present application.

Claims

1. A method for determining web page loading time, characterized in that: include: Acquire multiple change node chains respectively included in multiple node change batches during webpage loading, wherein each change node chain includes multiple change nodes; Determining a change node whose change type is an increase type among the multiple change nodes as a node to be calculated, and determining a node level corresponding to each of the multiple nodes to be calculated based on a first parent node corresponding to each of the multiple nodes to be calculated, wherein the first parent node is a starting node in a change node chain in which the node to be calculated is located; Determining nodes to be calculated that meet preset visible node conditions among the multiple nodes to be calculated as visible nodes, and performing node score calculation processing according to the node levels corresponding to the multiple visible nodes to obtain node scores corresponding to the multiple visible nodes; Calculating batch scores corresponding to each of the multiple node change batches according to the node scores, and determining the node change batch with the highest batch score among the multiple node change batches as the target batch; The node change time corresponding to the target batch is determined as the page loading time.

2. The method for determining web page loading time according to claim 1, wherein: The multiple change node chains respectively included in the multiple node change batches during the webpage loading process include: Monitoring multiple document object model nodes of the page to be loaded during the webpage loading process through a preset monitoring function to obtain node monitoring information, wherein the node monitoring information at least includes a change type corresponding to each of the multiple changed nodes and a node change time corresponding to each of the multiple node change batches; Extracting and processing the document object model nodes that have changed according to the node monitoring information to obtain the multiple changed nodes; Performing parent node search processing on the multiple changed nodes respectively until the first parent node corresponding to each of the multiple changed nodes is found; A plurality of node chains starting with the plurality of first parent nodes are determined as the plurality of changed node chains.

3. The method for determining web page loading time according to claim 1, wherein: The determining, based on the first parent nodes corresponding to the plurality of nodes to be calculated, the node levels corresponding to the plurality of nodes to be calculated includes: The levels of the multiple first parent nodes are determined as the zeroth level. In the change node chain where the multiple first parent nodes are located, the levels are incremented according to the child node levels of the first parent nodes until the node levels corresponding to the multiple nodes to be calculated are obtained.

4. The method for determining web page loading time according to claim 1, wherein: The step of determining a node to be calculated that meets a preset visible node condition among the plurality of nodes to be calculated as a visible node comprises: Determining whether the target node to be calculated has a child node, wherein the target node to be calculated is any node to be calculated among the multiple nodes to be calculated; If it is determined that the target node to be calculated has no child nodes, determining whether the target node to be calculated meets the preset visible node condition, and if the target node to be calculated meets the preset visible node condition, determining the target node to be calculated as the visible node; If it is determined that the target node to be calculated has child nodes, determining whether the child nodes of the target node to be calculated have child nodes until the last child node of the target node to be calculated is obtained, wherein the last child node is a node that has no child nodes among the child nodes of the target node to be calculated; In a case where the last child node meets the preset visible node condition, the last child node is determined as the visible node, and all sibling nodes and all parent nodes of the last child node are determined as the visible nodes.

5. The method for determining web page loading time according to claim 4, wherein: Determining whether the target node to be calculated meets the preset visible node condition includes: Acquire a first distance between the target node to be calculated and the left edge of a preset visible window, and a second distance between the target node to be calculated and the upper edge of the preset visible window; When the first distance is less than the window width of the preset visible window and the second distance is less than the window height of the preset visible window, determining that the target node to be calculated meets the preset visible node condition; When the first distance is not less than the window width of the preset visible window and / or the second distance is not less than the window height of the preset visible window, it is determined that the target node to be calculated does not meet the preset visible node condition.

6. The method for determining web page loading time according to claim 1, wherein: The performing node score calculation according to the node levels corresponding to the plurality of visible nodes to obtain the node scores corresponding to the plurality of visible nodes includes: Obtaining first scores corresponding to the plurality of visible nodes by multiplying the node levels corresponding to the plurality of visible nodes by a preset coefficient; determining an initial node score corresponding to each of the plurality of visible nodes according to the number of changed nodes included in the node hierarchy, wherein the initial node score is proportional to the number of changed nodes included in the node hierarchy; The initial node score and the first score are added together to obtain the node scores corresponding to each of the plurality of visible nodes.

7. The method for determining web page loading time according to claim 1, wherein: Calculating the batch scores corresponding to the plurality of node change batches according to the node scores includes: Determining a node change batch in which each of the plurality of visible nodes is located, and obtaining a plurality of node scores corresponding to each of the plurality of node change batches; The node scores corresponding to the multiple node change batches are respectively added together to obtain the batch scores corresponding to the multiple node change batches.

8. The method for determining web page loading time according to claim 2, wherein: During the webpage loading process, the preset monitoring function is used to monitor multiple document object model nodes of the page to be loaded, and after obtaining node monitoring information, the method further includes: When the monitoring time of the preset monitoring function reaches a preset time threshold, stopping the operation of the preset monitoring function; Or, when a stop monitoring instruction is received, the execution of the preset monitoring function is stopped.

9. An electronic device, characterized in that: include: memory for storing computer programs; A processor, configured to implement the steps of the method for determining web page loading time according to any one of claims 1 to 8 when executing the computer program.

10. A computer-readable storage medium, characterized in that The computer-readable storage medium stores a computer program, wherein when the computer program is executed by a processor, the steps of the method for determining the webpage loading time according to any one of claims 1 to 8 are implemented.

Images