Method and equipment for detecting white screen of site

Abstract

The invention discloses a method and equipment for detecting a white screen of a site, and relates to the technical field of site white screen detection, and the method comprises the following steps: in the page loading process of a target site, a plurality of sampling points are preset based on page layout, and the distribution of the sampling points follows the principle of covering a content area so as to ensure that the detection range of the content area of the page is complete. By presetting sampling point distribution and reasonable detection logic, the accuracy and applicability of white screen detection are remarkably improved by the scheme. Dynamic scene correction avoids misjudgment of loading delay, a hierarchical sampling strategy solves the detection problem of nested iframe and micro-front-end architecture, and the method is suitable for various page structures. Meanwhile, by recording detailed sampling point information and comprehensively analyzing the white screen state, accurate positioning and feedback of problems are achieved, the troubleshooting speed is increased, an alarm and report mechanism is combined, real-time monitoring support is provided for operation and maintenance, and the detection efficiency and site quality guarantee are comprehensively improved.

Description

Technical Field

[0001] The present invention relates to the technical field of site white screen detection, and in particular to a method and device for detecting a site white screen. Background Art

[0002] With the rapid development of Internet technology, users' demands for web page loading speed and stability are constantly increasing. However, the "white screen" phenomenon that occurs during the loading process of the front-end page has become a key issue affecting user experience. The so-called "white screen" refers to the failure of page loading or the failure of content to display normally, usually manifested as a blank page, only a skeleton screen or some navigation elements. This phenomenon is mostly caused by problems such as resource loading errors, code execution exceptions or network fluctuations. It not only directly affects users' use and trust in the site, but may also lead to loss of commercial interests. Especially in complex application scenarios, such as single-page applications (SPA) and micro-front-end architectures, due to their characteristics of dynamically loading resources and distributed components, the white screen problem is more common and difficult to locate.

[0003] The prior art has the following deficiencies:

[0004] At present, there are many methods in the industry for detecting white screen problems, such as monitoring the rendering status of DOM nodes, comparing page screenshots with pure white images, or using the built-in exception capture mechanism of the framework to detect loading errors. However, these methods have significant shortcomings in practical applications. The method of monitoring the DOM rendering status is only suitable for specific frameworks and has poor versatility; although the screenshot comparison does not rely on the technology stack, it is easy to misjudge the background color or skeleton screen scene; the framework exception capture mechanism can only identify code runtime errors, and it is difficult to cover the white screen problem caused by resource loading exceptions or network interruptions. In addition, facing pages or micro-frontend architectures with nested i frames, the existing technology lacks pertinence and it is difficult to effectively detect the white screen state of sub-pages. In summary, there is an urgent need for a white screen detection method with high accuracy and wide applicability to better ensure user experience.

[0005] The above information disclosed in this Background section is only for enhancement of understanding of the background of the present disclosure and therefore it may contain information that does not constitute the prior art that is already known to one of ordinary skill in the art. Summary of the invention

[0006] The purpose of the present invention is to provide a method and device for detecting white screens at sites. By presetting the sampling point distribution and reasonable detection logic, the above scheme significantly improves the accuracy and applicability of white screen detection. Dynamic scene correction avoids the misjudgment of loading delays, and the hierarchical sampling strategy solves the detection problem of nested iframes and micro-front-end architectures, and adapts to a variety of page structures. At the same time, by recording detailed sampling point information and comprehensively analyzing the white screen status, accurate positioning and feedback of problems are achieved, the troubleshooting speed is accelerated, and combined with the alarm and reporting mechanism, real-time monitoring support is provided for operation and maintenance, which comprehensively improves the detection efficiency and site quality assurance to solve the problems in the above-mentioned background technology.

[0007] In order to achieve the above object, the present invention provides the following technical solution: a method for detecting a white screen of a site, comprising the following steps:

[0008] During the target site page loading process, multiple sampling points are preset based on the page layout. The sampling point distribution follows the principle of covering the content area to ensure that the detection range of the page content area is complete.

[0009] Use the elementsFromPoint API provided by the browser to obtain the HTML element information of each sampling point and determine whether the HTML element is consistent with the preset page container element;

[0010] According to the HTML element information of the sampling point, the number of elements in the sampling point that are empty and consistent with the page container is counted. When the number exceeds a preset threshold, the page is judged to be in a blank screen state;

[0011] When detecting dynamic loading scenarios, the data of the initial sampling and the post-loading sampling are compared, and the dynamic changes are detected by combining the DOM rendering status and MutationObserver to correct misjudgments caused by dynamic loading and delayed content rendering.

[0012] For nested iframes and micro-frontend pages, a hierarchical sampling strategy is further adopted, and the sampling points of the sub-pages and the main page are independently analyzed using the regional judgment algorithm to comprehensively judge whether the sub-pages and the main page meet the white screen conditions and generate detection results.

[0013] Preferably, during the target site page loading process, multiple sampling points are preset based on the page layout, and the sampling point distribution follows the principle of covering the content area, so as to ensure that the detection range of the page content area is complete. The specific steps are as follows:

[0014] First, according to the page layout structure of the target site, clarify the location and scope of the page content area;

[0015] Based on the scope and layout of the page content area, preset sampling points and select a reasonable sampling point distribution strategy to ensure full coverage of the page content;

[0016] According to the sampling point distribution strategy, combined with the width and height of the page content area, the specific location coordinates of each sampling point are calculated;

[0017] To ensure that the sampling point always covers the content area, the sampling point is logically bound to the page content area.

[0018] Preferably, the specific steps of obtaining the HTML element information of each sampling point by using the elementsFromPoint API provided by the browser and determining whether the HTML element is consistent with the preset page container element are as follows:

[0019] After the page reaches the detection time, traverse each sampling point according to the preset sampling point distribution rule and extract its corresponding coordinate position;

[0020] For each sampling point, use the elementsFromPoint(x,y) API provided by the browser to obtain the HTML element information at the sampling point;

[0021] By using the preset page container element information, the HTML element returned by each sampling point is compared with the container element;

[0022] The judgment result of each sampling point is recorded, and the number of points judged as invalid content is calculated by summarizing the results of all sampling points, and compared with the preset white screen judgment threshold.

[0023] Preferably, according to the HTML element information of the sampling point, the number of elements in the sampling point that are empty and consistent with the page container is counted. When the number exceeds a preset threshold, the specific steps of determining that the page is in a blank screen state are as follows:

[0024] After completing the coordinate calculation and element information extraction of the sampling points, the statistical parameters are initialized to record the number of invalid sampling points;

[0025] For each sampling point, specific judgment logic is executed in combination with the previously extracted HTML element information;

[0026] After completing the traversal and judgment of all sampling points, the total number of invalid sampling points is counted according to the recorded result array;

[0027] The number of invalid sampling points obtained by counting is compared with the preset white screen threshold, and whether the page is in a white screen state is determined according to the comparison result.

[0028] Preferably, when detecting a dynamic loading scenario, by comparing the data of the initial sampling with the data of the post-loading sampling, combining the DOM rendering state and MutationObserver to detect dynamic changes, the specific steps of correcting misjudgments caused by dynamic loading and delayed content rendering are as follows:

[0029] In the initial stage of page loading and the stage of complete loading, the sampling points are sampled twice to obtain the initial sampling data set and the sampling data set after loading, and the change of the initial sampling data and the sampling data after loading is calculated. The calculation expression is as follows:

[0030] ,

[0031] In the formula, S i,init is the element state at the initial sampling point i, S i,loaded is the element state of sampling point i after loading, ⊕ is the state difference, which is used to determine whether two states are different, and w i is the weight of sampling point i, ΔD is the degree of change of the state of the sampling point;

[0032] By analyzing the rendering state of the DOM, we filter out the sampling points where no valid content update has occurred after the page is loaded, and correct the dynamic loading points based on the change ΔD and the characteristics of the rendering state. We calculate the corrected number of valid sampling points. The calculation expression is as follows:

[0033] ,

[0034] Where, T loaded and T init are the timestamps of the loading completion phase and the initial phase, respectively. loaded and N init are the total number of DOM nodes in the loading completion phase and the initial phase, respectively. i is the weight of the rendering state, N effective is the corrected number of effective sampling points;

[0035] By using MutationObserver to monitor the dynamic changes of the DOM after the page is loaded, the delayed rendering content is further corrected, and the correction coefficient of the dynamic change on the overall content status of the page is calculated as follows:

[0036] ,

[0037] Where N mutated is the number of node changes captured by MutationObserver, M ratio is the effective change ratio, e is the natural base, ΔT is the time window, C dynamicIt is a dynamic correction coefficient that reflects the impact of delayed page loading on content detection.

[0038] Preferably, for nested iframes and micro-frontend pages, a hierarchical sampling strategy is further adopted, and a sub-region determination algorithm is used to independently analyze the sampling points of the sub-page and the main page, and a comprehensive judgment is made as to whether the sub-page and the main page meet the white screen condition, and the specific steps of generating the detection result are as follows:

[0039] In the main page and the nested iframe page, data collection is performed according to the hierarchical sampling strategy. For the main page, the sampling points are evenly distributed according to the layout of its content area; for the iframe, the boundary area of ​​each nested iframe is first located, and then the sampling points are independently distributed in the sub-page content area. The total sampling point status value calculation formula for the main page and all sub-pages is as follows:

[0040] ,

[0041] Where D total is the total status value of the main page and all subpages, N main is the total number of sampling points of the main page, is the total number of sampling points of the jth subpage, is the state of the qth sampling point on the main page, is the kth sampling point state of the subpage, M is the number of nested iframes, is the sub-page sampling point weight, is the main page sampling point weight;

[0042] Based on the statistical results of the sampling point status, the white screen status of the main page and sub-pages is determined according to the regional strategy. The calculation expression of the white screen ratio of the main page and sub-page is as follows:

[0043]

[0044] In the formula, R main is the white screen ratio of the main page, is the white screen ratio of the jth subpage;

[0045] After the white screen ratio calculation is completed for the main page and sub-page respectively, the white screen status of all pages is comprehensively analyzed to obtain the final detection result. The comprehensive white screen status of the main page and sub-page is calculated. The calculation expression is as follows:

[0046] ,

[0047] In the formula, C whiteis the comprehensive white screen coefficient, α is the main page weight coefficient, which reflects the influence of the home page on the overall white screen state, and β is the sub-page weight coefficient, which reflects the influence of the sub-page on the overall white screen state.

[0048] A device for detecting white screens at sites, comprising a sampling point layout strategy module, a sampling point data acquisition and element consistency judgment module, an invalid sampling point statistics and white screen preliminary judgment module, a dynamic scene correction mechanism module, and a comprehensive detection module for complex page structures;

[0049] The sampling point layout strategy module presets multiple sampling points based on the page layout during the target site page loading process. The sampling point distribution follows the principle of covering the content area to ensure that the detection range of the page content area is complete.

[0050] The sampling point data acquisition and element consistency judgment module uses the elementsFromPointAPI provided by the browser to obtain the HTML element information of each sampling point and judge whether the HTML element is consistent with the preset page container element;

[0051] Invalid sampling point statistics and white screen preliminary judgment module, according to the HTML element information of the sampling point, count the number of elements in the sampling point that are empty and consistent with the page container. When the number exceeds the preset threshold, the page is judged to be in a white screen state;

[0052] The dynamic scene correction mechanism module compares the data of the initial sampling with the data of the post-loading sampling when detecting the dynamic loading scene, combines the DOM rendering status and MutationObserver to detect dynamic changes, and corrects the misjudgment caused by dynamic loading and delayed content rendering;

[0053] The comprehensive detection module for complex page structures further adopts a hierarchical sampling strategy for nested iframes and micro-frontend pages, and uses a regional determination algorithm to independently analyze the sampling points of sub-pages and main pages, comprehensively determine whether the sub-pages and main pages meet the white screen conditions, and generate detection results.

[0054] In the above technical solution, the technical effects and advantages provided by the present invention are:

[0055] The present invention significantly improves the accuracy of white screen detection through preset sampling point distribution and reasonable detection logic. The sampling point distribution strategy (such as vertical cross sampling) covers the key positions of the page content area, ensuring that no matter whether the content is loaded at the center, edge, or specific position of the page, it can be effectively detected. Combined with the element acquisition function of elementsFromPointAPI, it is possible to accurately determine whether there is valid content at the sampling point, avoiding misjudgments caused by technical limitations of traditional methods (such as screenshot comparison and DOM change monitoring). For example, in a dynamically loaded page, with the help of MutationObserver, DOM updates are continuously monitored, and misjudgments caused by loading delays or skeleton screens are dynamically corrected, thereby ensuring the accuracy of dynamic page detection. At the same time, through hierarchical sampling and regional judgment strategies, complex scene problems in nested iframes and micro-frontend architectures are solved, making white screen detection more adaptable and covering a variety of page architectures and technology stacks.

[0056] The present invention significantly enhances the problem location and feedback efficiency through comprehensive judgment and result recording of the white screen state. During the detection process, not only the invalid point ratio of the entire page is counted, but also the detailed information of each sampling point (such as coordinates, element content, and judgment status) is retained, providing data support for the specific location of the white screen problem. For example, for nested iframe pages or micro-front-end scenarios, the detection results can be refined to the sub-page or sub-application level, and a specific report of the problem module is generated, so that developers can quickly lock the source of the problem and shorten the troubleshooting time. In addition, the alarm and reporting mechanism in the scheme can help operation and maintenance personnel to obtain feedback in time and respond quickly by transmitting white screen detection data (such as URL, time, and invalid point ratio) in real time. This efficient data support and feedback capability not only improves the speed of problem solving, but also provides a strong guarantee for the overall quality monitoring of the site. BRIEF DESCRIPTION OF THE DRAWINGS

[0057] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments recorded in the present invention. For ordinary technicians in this field, other drawings can also be obtained based on these drawings.

[0058] Figure 1 The present invention is a method flow chart of a method for detecting a site white screen.

[0059] Figure 2 The present invention is a module schematic diagram of a device for detecting a white screen at a site. DETAILED DESCRIPTION

[0060] Example embodiments will now be described more fully with reference to the accompanying drawings. However, example embodiments can be implemented in a variety of forms and should not be construed as limited to the examples set forth herein; rather, these example embodiments are provided so that the description of the present disclosure will be more comprehensive and complete, and the concept of the example embodiments will be fully conveyed to those skilled in the art.

[0061] The present invention provides Figure 1 A method for detecting a white screen on a site is shown, comprising the following steps:

[0062] During the target site page loading process, multiple sampling points are preset based on the page layout. The sampling point distribution follows the principle of covering the content area to ensure that the detection range of the page content area is complete.

[0063] During the target site page loading process, multiple sampling points are preset based on the page layout. The sampling point distribution follows the principle of covering the content area. The specific steps to ensure that the detection range of the page content area is complete are as follows:

[0064] First, according to the page layout structure of the target site, clarify the location and scope of the page content area;

[0065] The page content area refers to the core content display area visible to users, usually excluding non-core areas such as the top navigation bar, bottom footer and sidebar. Layout analysis can be completed through the developer tools (DevTools) provided by the browser or the page design document, while recording the width (window.innerWidth) and height (window.innerHeight) of the page.

[0066] In addition, special attention should be paid to the characteristics of dynamically loaded pages. For example, single-page applications (SPAs) usually use dynamic routing to load content, while pages with nested iframes or micro-frontend architectures may have multiple sub-content areas. Based on these characteristics, it is necessary to identify which areas need to be sampled.

[0067] After determining the content area, it is also necessary to eliminate non-content areas that do not participate in white screen detection, such as advertising spaces or fixed layout elements, to avoid interference with sampling point selection.

[0068] Finally, the content area is divided into multiple small areas through logical coordinates, providing a basic basis for the distribution of sampling points in subsequent steps.

[0069] Based on the scope and layout of the page content area, preset sampling points and select a reasonable sampling point distribution strategy to ensure full coverage of the page content;

[0070] Specifically, the following three sampling methods can be used:

[0071] Vertical sampling: Select a number of sampling points proportionally along the vertical direction of the page, for example, evenly distribute a number of points from top to bottom.

[0072] Cross sampling: The sampling points are distributed in a diagonal pattern to ensure that the center area and corners of the page are covered.

[0073] Vertical cross sampling: Combining vertical and cross sampling methods, more sampling points are distributed to ensure more comprehensive coverage.

[0074] The number of sampling points is dynamically adjusted according to the specific size of the page. Generally, the more sampling points there are, the higher the accuracy of the detection, but it will also bring a certain amount of calculation. Therefore, in actual operation, the minimum number of sampling points per unit content area can be set using empirical rules, and the density can be reasonably increased if the browser resources allow. At the same time, in order to adapt to different devices and resolutions, the distribution of sampling points can be designed responsively.

[0075] According to the sampling point distribution strategy, combined with the width and height of the page content area, the specific location coordinates of each sampling point are calculated;

[0076] The coordinates can be calculated using mathematical formulas:

[0077] For vertical sampling, the page is divided into several segments according to its height. The midpoint of each segment is the vertical coordinate of the sampling point, and the horizontal coordinate is set according to the center position of the content area.

[0078] For cross sampling, the page is divided into several equal segments along the diagonal line, and the intersection of each segment is the coordinate position of the sampling point.

[0079] Vertical cross sampling requires a combination of the above two methods to ultimately determine the horizontal and vertical coordinates of each sampling point.

[0080] Once the coordinates of the sampling points are calculated, these point information needs to be recorded so that the HTML elements at the corresponding positions can be accurately obtained when the browser's DOM API (such as elementsFromPoint) is called later. In particular, when there is a scroll bar in the page content area, the coordinates of the sampling points need to be dynamically adjusted so that they are always accurately positioned relative to the content area.

[0081] To ensure that the sampling points always cover the content area, the sampling points are logically bound to the page content area;

[0082] This is achieved through the life cycle events of page loading (such as DOMContentLoaded or window.onload), and the position and range of the sampling point are reinitialized when the event is triggered.

[0083] The binding process includes checking whether the content area has changed, such as the page dynamically loading new content or adjusting the layout (such as resolution change). At this time, the sampling point coordinates need to be recalculated based on the latest content area range.

[0084] At the same time, in order to optimize performance, you can use the idle time API provided by the browser (such as requestIdleCallback) to update the sampling point when the page is idle to avoid affecting the performance of page loading.

[0085] By binding logic, the accuracy of the sampling point position is ensured during each detection, and it can dynamically respond to the update of the page content, laying the foundation for subsequent white screen detection.

[0086] Use the elementsFromPoint API provided by the browser to obtain the HTML element information of each sampling point and determine whether the HTML element is consistent with the preset page container element;

[0087] The specific steps of using the elementsFromPoint API provided by the browser to obtain the HTML element information of each sampling point and determine whether the HTML element is consistent with the preset page container element are as follows:

[0088] After the page reaches the detection time (such as DOMContentLoaded or window.onload trigger), traverse each sampling point according to the preset sampling point distribution rule and extract its corresponding coordinate position;

[0089] The coordinates are usually calculated from the width (window.innerWidth) and height (window.innerHeight) of the page content area combined with a distribution strategy.

[0090] In vertical sampling, the horizontal coordinate of the sampling point remains fixed, and only the vertical coordinate is distributed with the page height; in cross sampling, the sampling points are distributed along the diagonal, and their horizontal and vertical coordinates have a linear relationship.

[0091] Make sure to process all sampling points in a predetermined order during traversal, such as scanning from the upper left to the lower right, to avoid missing key areas.

[0092] If the page layout changes during the loading process (such as dynamic content loading or window resizing), the actual position of the sampling point needs to be dynamically recalculated to ensure that the latest page content data is obtained.

[0093] For each sampling point, use the elementsFromPoint(x,y) API provided by the browser to obtain the HTML element information at the sampling point;

[0094] The elementsFromPoint method returns an array containing all HTML elements at the specified coordinate position. The first element in the array is usually the top-level element.

[0095] When calling the API, ensure the accuracy of the coordinates, especially when there is a zoom or scroll bar on the page, the coordinates need to be properly converted and calibrated.

[0096] For sampling points in nested iframes or micro-frontend pages, you need to locate the iframe container first, and then call the same API inside the iframe to obtain the element information of the sub-page.

[0097] The returned HTML element information includes the element type, class name, ID and other attributes, which can be further used for subsequent comparison and judgment. Make sure to store the obtained element information in a data structure (such as an array or object) for subsequent analysis.

[0098] By using the preset page container element information (such as the class name or ID of the root container), the HTML element returned by each sampling point is compared with the container element;

[0099] If the element of the sampling point is empty or is consistent with the page container element, the sampling point is determined to be an invalid content point.

[0100] The container element is usually the root node of the page or the top-level frame used for layout, such as #app or .container. When judging, the consistency can be determined by comparing the tagName, className or id attributes of the element.

[0101] If the element array returned by the sampling point is empty, the point is directly judged as having no content; if the first element returned is consistent with the preset container element, it means that no valid content has been loaded at this point.

[0102] During the detection process, certain specific elements (such as advertisements, placeholders, etc.) can also be excluded to improve the accuracy of the judgment.

[0103] The judgment result of each sampling point is recorded, including whether the point is empty or consistent with the container element, as well as the corresponding coordinates and HTML element information. By summarizing the results of all sampling points, the number of points judged as invalid content is calculated and compared with the preset white screen judgment threshold;

[0104] The recorded content may include: sampling point coordinates, element name, judgment status (valid / invalid), etc., and is saved in a structured form (such as a JSON object).

[0105] If the number of invalid content points exceeds the preset threshold, the page is initially judged to be in a white screen state. This data analysis result can be directly used as the basis for white screen detection, or further combined with other dynamic scene correction algorithms to optimize the final conclusion.

[0106] Based on the recorded results, the log report or monitoring alarm of the white screen status can be triggered synchronously to provide real-time feedback for site maintenance.

[0107] According to the HTML element information of the sampling point, the number of elements in the sampling point that are empty and consistent with the page container is counted. When the number exceeds a preset threshold, the page is judged to be in a blank screen state;

[0108] According to the HTML element information of the sampling point, the number of elements in the sampling point that are empty and consistent with the page container is counted. When the number exceeds the preset threshold, the specific steps for determining that the page is in a blank screen state are as follows:

[0109] After completing the coordinate calculation and element information extraction of the sampling points, the statistical parameters are initialized to record the number of invalid sampling points;

[0110] Invalid sampling points are sampling points where the element is empty or consistent with the page container.

[0111] Initialize variables, such as invalidCount, which is used to count the number of invalid sampling points, and set the initial value to 0. At the same time, prepare an array or object (such as results = []) to store the judgment results of each sampling point for subsequent analysis and correction.

[0112] Traverse the coordinate list of all sampling points, call the previously saved HTML element information one by one, and perform consistency judgment on the elements of each sampling point. It is recommended to keep the traversal order consistent (such as from top to bottom or from left to right) to ensure the stability and repeatability of the statistical results.

[0113] In each traversal, the judgment result of the current sampling point is recorded, including the coordinates of the point, element information, and whether it is judged to be an invalid content point, for subsequent statistics and analysis.

[0114] For each sampling point, specific judgment logic is executed in combination with the previously extracted HTML element information;

[0115] Element is empty: Check whether no HTML element information is returned at the sampling point (that is, the array returned by elementsFromPoint is empty or has a length of 0). If it is empty, it is directly judged as an invalid sampling point.

[0116] Consistent with the page container: If the sampling point returns an HTML element, check whether the first element (i.e., the top-level element) is consistent with the root container of the page. The consistency can be determined by comparing attributes such as tagName, id, and className. For example, the root container can be .container or #app. When element.id === container.id or element.className === container.className, it is determined to be consistent.

[0117] Record results: Regardless of whether the sampling point is judged to be invalid, the judgment result needs to be recorded in the result array, for example, results.push({x,y,isInvalid}), where isInvalid is a Boolean value indicating whether it is an invalid content point.

[0118] Through the above logic, the status of each sampling point can be accurately judged and recorded, providing a basis for subsequent statistics and white screen detection.

[0119] After completing the traversal and judgment of all sampling points, the total number of invalid sampling points is counted according to the recorded result array;

[0120] The number of invalid sampling points can be counted directly by traversing the result array, for example:

[0121] Check the isInvalid flag for each item in the result array, and if it is true, increment the invalidCount statistic parameter.

[0122] After the statistics are completed, the statistical results can be printed or recorded for subsequent white screen judgment logic. At the same time, based on the statistical results, the specific status of each sampling point can be further analyzed to ensure the accuracy of the statistics. For example, some points may be misjudged due to special layout features, and a secondary check can be performed by comparing the recorded element attributes.

[0123] In addition, a detection log can be generated during the statistical process, including the distribution of invalid sampling points (such as which areas have concentrated invalid points) and statistical results, to facilitate subsequent troubleshooting or optimization of detection logic.

[0124] The number of invalid sampling points obtained by counting is compared with the preset white screen threshold, and whether the page is in a white screen state is determined according to the comparison result;

[0125] The setting of the threshold (such as threshold) needs to be combined with the actual situation of the page, for example, a reasonable ratio is set according to the total number of sampling points in the content area (such as more than 80% of invalid points are judged as white screen). If invalidCount>=threshold, the page is judged to be in a white screen state, otherwise the page is judged to be normal.

[0126] The final judgment result is output and a test report is generated at the same time, including the number and distribution of invalid sampling points, the judgment status of the page, etc. The test results can be further uploaded to the monitoring platform through logs, which is convenient for site managers to quickly locate problems.

[0127] In addition, status flags can be added to the detection results, such as "preliminary judgment is a white screen" or "partial areas are not loaded", etc., to provide support for subsequent dynamic correction algorithms or complex scene judgments.

[0128] When detecting dynamic loading scenarios, the data of the initial sampling and the post-loading sampling are compared, and the dynamic changes are detected by combining the DOM rendering status and MutationObserver to correct misjudgments caused by dynamic loading and delayed content rendering.

[0129] When detecting dynamic loading scenarios, by comparing the data of the initial sampling with the data of the post-loading sampling, combining the DOM rendering status and MutationObserver to detect dynamic changes, the specific steps to correct misjudgments caused by dynamic loading and delayed content rendering are as follows:

[0130] In the initial stage of page loading (DoMContentLoaded event triggering) and the stage of complete loading (load event triggering), the sampling points are sampled twice to obtain the initial sampling data set and the sampling data set after loading, and the change of the initial sampling data and the sampling data after loading is calculated. The calculation expression is as follows:

[0131] ,

[0132] In the formula, S i,init is the element state of the initial sampling point i, which takes the value of 0 (no content) or 1 (content), S i,loaded is the element state of sampling point i after loading, and its value is 0 (no content) or 1 (content). ⊕ is the state difference, which is used to determine whether two states are different. If they are different, the value is 1, and if they are the same, the value is 0. i is the weight of sampling point i, which is set according to the location of the sampling point. For example, the weight of the center point of the content area is higher, and the weight of the edge point is lower. Output parameter, ΔD is the degree of change of the sampling point state. The larger its value, the more obvious the dynamic change of the page is. In the subsequent steps, the dynamic change point needs to be further corrected;

[0133] By analyzing the rendering state of the DOM, we filter out sampling points where no valid content update has occurred after the page is loaded, and modify the dynamic loading points based on the change ΔD and the characteristics of the rendering state. We use the document.readystate property provided by the browser and the change in the number of DOM tree nodes to calculate the corrected number of valid sampling points. The calculation expression is as follows:

[0134] ,

[0135] Where, T loaded and T init are the timestamps of the loading completion phase and the initial phase, respectively. loaded and N init are the total number of DOM nodes in the loading completion phase and the initial phase, respectively. i is the weight of the rendering state, reflecting the impact of page loading delay on the content change of the sampling point. The rendering state weight R i The larger the value, the more significant the impact of dynamic page loading. effective is the corrected number of effective sampling points;

[0136] By using MutationObserver to monitor the dynamic changes of the DOM after the page is loaded, the delayed rendering content is further corrected, and the correction coefficient of the dynamic change on the overall content status of the page is calculated as follows:

[0137] ,

[0138] Where N mutated is the number of node changes captured by MutationObserver, M ratio is the effective change ratio, with a value range of 0-1, e is the natural base, ΔT is the time window, which is used to control the sampling time range, C dynamic It is a dynamic correction coefficient that reflects the impact of delayed page loading on content detection.

[0139] When C dynamic When the value is high, it means that dynamic loading has a greater impact on the page content, and the statistical logic of invalid points needs to be readjusted to avoid misjudgment of white screen.

[0140] For nested iframes and micro-frontend pages, a hierarchical sampling strategy is further adopted. The sampling points of the sub-pages and the main page are independently analyzed using a regional determination algorithm to comprehensively determine whether the sub-pages and the main page meet the white screen conditions and generate detection results.

[0141] For nested iframes and micro-frontend pages, a hierarchical sampling strategy is further adopted. The sampling points of the sub-pages and the main page are independently analyzed using the regional determination algorithm to comprehensively determine whether the sub-pages and the main page meet the white screen conditions and generate the detection results. The specific steps are as follows:

[0142] In the main page and the nested iframe page, data collection is performed according to the hierarchical sampling strategy. For the main page, the sampling points are evenly distributed according to the layout of its content area; for the iframe, the boundary area of ​​each nested iframe is first located, and then the sampling points are independently distributed in the sub-page content area. The total sampling point status value calculation formula for the main page and all sub-pages is as follows:

[0143] ,

[0144] Where D total is the total status value of the main page and all sub-pages, reflecting the overall effectiveness of the sampling point, N main is the total number of sampling points of the main page, is the total number of sampling points of the jth subpage, is the state of the qth sampling point on the main page, is the kth sampling point state of the subpage, M is the number of nested iframes, is the sub-page sampling point weight, is the main page sampling point weight;

[0145] Total state value D total , which is used to measure the overall content effectiveness of the main page and sub-pages in subsequent area determination.

[0146] Based on the statistical results of the sampling point status, the white screen status of the main page and sub-pages is determined according to the regional strategy. The calculation expression of the white screen ratio of the main page and sub-page is as follows:

[0147]

[0148] In the formula, R main It is the white screen ratio of the main page, the value is 0-1, is the white screen ratio of the jth subpage, with a value of 0-1;

[0149] Decision rule: If R main Exceeding the main page white screen threshold T main (such as 70%), the main page is determined to be a white screen; if Exceeding the sub-page white screen threshold T sub , determine that the jth sub-page is a white screen.

[0150] White screen ratio R of the main page and each sub-page main and Used to comprehensively judge the final white screen status of the main page and sub-pages.

[0151] After the white screen ratio calculation is completed for the main page and sub-page respectively, the white screen status of all pages is comprehensively analyzed to obtain the final detection result. The comprehensive white screen status of the main page and sub-page is calculated. The calculation expression is as follows:

[0152] ,

[0153] In the formula, C white It is the comprehensive white screen coefficient, with a value of 0-1, which indicates the overall white screen state of the main page and sub-pages. α is the main page weight coefficient, which reflects the impact of the main page on the overall white screen state. β is the sub-page weight coefficient, which reflects the impact of the sub-page on the overall white screen state.

[0154] If C white Exceeding the comprehensive white screen threshold T white , the entire page is judged to be a white screen, and a white screen detection result is generated. The detection result includes the white screen status of the main page and sub-pages, the corresponding white screen ratio, and detailed analysis data of the sampling point.

[0155] Implementation method 1: Static pages usually refer to pages whose content and structure are fixed when loaded, and do not rely on asynchronous data or dynamic rendering, such as traditional multi-page application (MPA) sites. The white screen detection method for such pages is relatively straightforward, and can be completed by detecting whether the page content has been loaded successfully through predefined sampling points.

[0156] The scope of the static page content area can be determined by calculating the width and height of the browser window. When the page layout is relatively regular, the system uses three sampling strategies: vertical, cross, and vertical cross to ensure comprehensive detection. For example, 10 sampling points can be evenly distributed in the vertical direction of the page, and the cross sampling points are distributed along the diagonal of the page; for vertical cross sampling, each column and each row are carefully covered, generating a total of 26 sampling points to cover the main content area. Through such a distribution design, it is guaranteed that the entire content area of ​​the page is covered, and that the edge and center areas can be effectively detected.

[0157] Get the element information of the sampling point:

[0158] After the page is loaded, the system traverses all sampling points in turn and calls the elementsFromPoint API provided by the browser to obtain the HTML element information of each sampling point. The API returns a set of HTML elements at the specified coordinates, and usually the first element in the set is the top-level element. The system matches these elements with the page container, for example, by comparing the element's ID or class name and other attributes to determine whether the point has loaded valid content. If the element set is empty or the first element is consistent with the root container of the page, the sampling point is marked as an invalid point.

[0159] The system will record the judgment results of each sampling point, including the coordinates of the point, element information and judgment status (valid or invalid). After all sampling points are traversed, the system counts the total number of invalid points and calculates their proportion of all sampling points. For example, if the total number of sampling points is 26, of which 20 sampling points are marked as invalid points, the proportion of invalid points is 20 / 26≈76.92%. Compare the calculation result with the preset white screen threshold (such as 70%). If the proportion of invalid points exceeds the threshold, the system determines that the page is in a white screen state. At the same time, the system will record the white screen status and detection details (such as URL, time, etc.) for further analysis and processing.

[0160] This method ensures the complete detection range of the static page content area through a reasonable sampling point layout design, and is suitable for scenes with a relatively fixed layout and a clear page loading process. Since static pages do not rely on dynamic rendering, this method does not require complex dynamic scene correction logic, and the detection process is efficient and concise, which is very suitable for traditional corporate official websites, news portals and other sites with mainly static content.

[0161] Implementation method 2: White screen detection of dynamically loaded content pages needs to adapt to the characteristics of asynchronous data loading and content rendering, and further introduce a dynamic scene correction mechanism based on the initial detection to improve the accuracy of detection.

[0162] During the page loading process, after the DOMContentLoaded or window.onload event is triggered, the system obtains the HTML element information of the initial sampling point according to the preset sampling point strategy and determines the invalid point ratio. This step is similar to static page detection. It obtains the element information of each sampling point by calling the elementsFromPointAPI and compares whether it is empty or consistent with the page container. If the invalid point ratio exceeds the preset threshold in the initial detection, the system will not directly determine that the page is a white screen, but will enter the dynamic scene correction stage to further analyze the dynamic loading situation.

[0163] In dynamic pages, content loading is often progressive, such as obtaining data through asynchronous requests (AJAX) and rendering it into the DOM. To avoid misjudgment in the initial detection, the system uses MutationObserver to continuously monitor changes in the page DOM. When the DOM structure of the content area changes, the HTML element information of all sampling points is re-collected and compared with the initial data. For example, if the element returned by the sampling point is empty during the initial detection, but valid content is detected in the subsequent update, the point is removed from the invalid point list and the statistics of the invalid point are updated.

[0164] After the dynamic scene correction is completed, the system counts the proportion of invalid points again and makes a final comparison with the white screen threshold. If the proportion of invalid points still exceeds the threshold after correction, the page is confirmed to be in a white screen state; conversely, if the proportion of invalid points is lower than the threshold, the page is considered to be loaded normally. The duration of the entire correction phase can be dynamically adjusted through configuration. For example, if no valid changes are detected within 5 seconds, it is directly determined to be a white screen.

[0165] This method solves the misjudgment problem caused by the initial loading delay of dynamic pages by introducing a dynamic scene correction mechanism. It is suitable for scenes where content is mainly rendered dynamically, such as single-page applications (SPAs), e-commerce platforms, and social networks. Although the dynamic correction process adds a certain degree of complexity, it can effectively improve the detection accuracy and is an ideal solution for dynamic page white screen detection.

[0166] Implementation method 3: For nested iframe and micro-frontend architecture pages, the page content is often composed of a main page and multiple sub-pages (iframes or sub-applications). The detection needs to consider the independence and comprehensiveness of the main page and sub-pages.

[0167] Generate sampling points in the main page content area and perform preliminary detection in a similar way to static pages, including calling elementsFromPointAPI to obtain HTML element information of the sampling points and determining the proportion of invalid points. The main page detection results are recorded separately as an important part of the final comprehensive judgment. For example, the main page may contain a navigation bar and a top-level frame, which are usually not the core of the white screen problem, but still need to be analyzed separately.

[0168] For nested iframe pages, the system uses iframe.contentWindow to enter the subpage and generates independent sampling points in the content area of ​​the subpage. The detection logic of the subpage is similar to that of the main page. It obtains the element information of each sampling point and counts the proportion of invalid points. In addition, for pages under the micro-frontend architecture, the subpage may be composed of multiple sub-applications, and the content area of ​​each sub-application needs to be sampled and detected separately. For example, a page of an e-commerce site may include independently loaded product recommendations, user comments, and shopping cart sub-modules, and each module needs to evaluate its content loading separately.

[0169] The detection results of the main page and sub-pages are comprehensively analyzed to generate the final white screen detection conclusion. For example, when the invalid point ratio of the main page is low but the invalid point ratio of a sub-page is high, the system can mark the page as a partial white screen state and accurately locate the problem area. For micro-frontend pages, a sub-application-level white screen detection report can also be generated to record the specific detection information of each sub-application so that developers can check the problems one by one.

[0170] This method solves the detection problem of nested pages and multi-module pages through hierarchical sampling and regional determination strategies, and is suitable for complex multi-layer nested architectures and micro-frontend sites. By independently detecting the main page and sub-pages, combined with comprehensive analysis logic, it can accurately identify the specific source of the white screen problem, which is a key means of modern complex page white screen detection.

[0171] The present invention significantly improves the accuracy of white screen detection through preset sampling point distribution and reasonable detection logic. The sampling point distribution strategy (such as vertical cross sampling) covers the key positions of the page content area, ensuring that no matter whether the content is loaded at the center, edge, or specific position of the page, it can be effectively detected. Combined with the element acquisition function of elementsFromPointAPI, it is possible to accurately determine whether there is valid content at the sampling point, avoiding misjudgments caused by technical limitations of traditional methods (such as screenshot comparison and DOM change monitoring). For example, in a dynamically loaded page, with the help of MutationObserver, DOM updates are continuously monitored, and misjudgments caused by loading delays or skeleton screens are dynamically corrected, thereby ensuring the accuracy of dynamic page detection. At the same time, through hierarchical sampling and regional judgment strategies, complex scene problems in nested iframes and micro-frontend architectures are solved, making white screen detection more adaptable and covering a variety of page architectures and technology stacks.

[0172] The present invention significantly enhances the problem location and feedback efficiency through comprehensive judgment and result recording of the white screen state. During the detection process, not only the invalid point ratio of the entire page is counted, but also the detailed information of each sampling point (such as coordinates, element content, and judgment status) is retained, providing data support for the specific location of the white screen problem. For example, for nested iframe pages or micro-front-end scenarios, the detection results can be refined to the sub-page or sub-application level, and a specific report of the problem module is generated, so that developers can quickly lock the source of the problem and shorten the troubleshooting time. In addition, the alarm and reporting mechanism in the scheme can help operation and maintenance personnel to obtain feedback in time and respond quickly by transmitting white screen detection data (such as URL, time, and invalid point ratio) in real time. This efficient data support and feedback capability not only improves the speed of problem solving, but also provides a strong guarantee for the overall quality monitoring of the site.

[0173] The present invention provides Figure 2 A device for detecting a white screen at a site shown in the figure includes a sampling point layout strategy module, a sampling point data acquisition and element consistency judgment module, an invalid sampling point statistics and white screen preliminary judgment module, a dynamic scene correction mechanism module, and a comprehensive detection module for complex page structures;

[0174] The sampling point layout strategy module presets multiple sampling points based on the page layout during the target site page loading process. The sampling point distribution follows the principle of covering the content area to ensure that the detection range of the page content area is complete.

[0175] The sampling point data acquisition and element consistency judgment module uses the elementsFromPointAPI provided by the browser to obtain the HTML element information of each sampling point and judge whether the HTML element is consistent with the preset page container element;

[0176] Invalid sampling point statistics and white screen preliminary judgment module, according to the HTML element information of the sampling point, count the number of elements in the sampling point that are empty and consistent with the page container. When the number exceeds the preset threshold, the page is judged to be in a white screen state;

[0177] The dynamic scene correction mechanism module compares the data of the initial sampling with the data of the post-loading sampling when detecting the dynamic loading scene, combines the DOM rendering status and MutationObserver to detect dynamic changes, and corrects the misjudgment caused by dynamic loading and delayed content rendering;

[0178] The comprehensive detection module for complex page structures further adopts a hierarchical sampling strategy for nested iframes and micro-frontend pages, and uses a regional determination algorithm to independently analyze the sampling points of sub-pages and main pages, comprehensively determine whether the sub-pages and main pages meet the white screen conditions, and generate detection results.

[0179] A method for detecting a site white screen provided in an embodiment of the present invention is implemented by the above-mentioned device for detecting a site white screen. The specific method and process of the device for detecting a site white screen are detailed in the embodiment of the above-mentioned method for detecting a site white screen, which will not be repeated here.

[0180] The above description is only by way of illustration of certain exemplary embodiments of the present invention. It is undoubted that those skilled in the art can modify the described embodiments in various ways without departing from the spirit and scope of the present invention. Therefore, the above drawings and descriptions are illustrative in nature and should not be construed as limiting the scope of protection of the claims of the present invention.

Claims

1. A method for detecting a white screen at a site, characterized in that: The following steps are involved: During the target site page loading process, multiple sampling points are preset based on the page layout. The sampling point distribution follows the principle of covering the content area to ensure that the detection range of the page content area is complete. Use the elementsFromPoint API provided by the browser to obtain the HTML element information of each sampling point and determine whether the HTML element is consistent with the preset page container element; According to the HTML element information of the sampling point, the number of elements in the sampling point that are empty and consistent with the page container is counted. When the number exceeds a preset threshold, the page is judged to be in a blank screen state; When detecting dynamic loading scenarios, the data of the initial sampling and the sampling after loading are compared, and the dynamic changes are detected by combining the DOM rendering status and MutationObserver to correct misjudgments caused by dynamic loading and delayed content rendering; For nested iframes and micro-frontend pages, a hierarchical sampling strategy is further adopted, and the sampling points of the sub-pages and the main page are independently analyzed using the regional judgment algorithm to comprehensively judge whether the sub-pages and the main page meet the white screen conditions and generate detection results.

2. A method for detecting a white screen at a site according to claim 1, characterized in that: During the target site page loading process, multiple sampling points are preset based on the page layout. The sampling point distribution follows the principle of covering the content area. The specific steps to ensure that the detection range of the page content area is complete are as follows: First, according to the page layout structure of the target site, clarify the location and scope of the page content area; Based on the scope and layout of the page content area, preset sampling points and select a reasonable sampling point distribution strategy to ensure full coverage of the page content; According to the sampling point distribution strategy, combined with the width and height of the page content area, the specific location coordinates of each sampling point are calculated; To ensure that the sampling point always covers the content area, the sampling point is logically bound to the page content area.

3. A method for detecting a white screen at a site according to claim 1, characterized in that: The specific steps of using the elementsFromPoint API provided by the browser to obtain the HTML element information of each sampling point and determine whether the HTML element is consistent with the preset page container element are as follows: After the page reaches the detection time, traverse each sampling point according to the preset sampling point distribution rule and extract its corresponding coordinate position; For each sampling point, use the elementsFromPoint(x,y) API provided by the browser to obtain the HTML element information at the sampling point; By using the preset page container element information, the HTML element returned by each sampling point is compared with the container element; The judgment result of each sampling point is recorded, and the number of points judged as invalid content is calculated by summarizing the results of all sampling points, and compared with the preset white screen judgment threshold.

4. The method for detecting a white screen at a site according to claim 1, characterized in that: According to the HTML element information of the sampling point, the number of elements in the sampling point that are empty and consistent with the page container is counted. When the number exceeds the preset threshold, the specific steps for determining that the page is in a blank screen state are as follows: After completing the coordinate calculation and element information extraction of the sampling points, the statistical parameters are initialized to record the number of invalid sampling points; For each sampling point, specific judgment logic is executed in combination with the previously extracted HTML element information; After completing the traversal and judgment of all sampling points, the total number of invalid sampling points is counted according to the recorded result array; The number of invalid sampling points obtained by counting is compared with the preset white screen threshold, and whether the page is in a white screen state is determined according to the comparison result.

5. The method for detecting a white screen at a site according to claim 1, characterized in that: When detecting dynamic loading scenarios, by comparing the data of the initial sampling with the data of the post-loading sampling, combining the DOM rendering status and MutationObserver to detect dynamic changes, the specific steps to correct misjudgments caused by dynamic loading and delayed content rendering are as follows: In the initial stage of page loading and the stage of complete loading, the sampling points are sampled twice to obtain the initial sampling data set and the sampling data set after loading, and the change of the initial sampling data and the sampling data after loading is calculated. The calculation expression is as follows: ， In the formula, S i,init is the element state at the initial sampling point i, S i,loaded is the element state of sampling point i after loading, It is used to judge whether two states are different. i is the weight of sampling point i, ΔD is the degree of change of the state of the sampling point; By analyzing the rendering state of the DOM, we filter out the sampling points where no valid content update has occurred after the page is loaded, and correct the dynamic loading points based on the change ΔD and the characteristics of the rendering state. We calculate the corrected number of valid sampling points. The calculation expression is as follows: ， Where, T loaded and T init are the timestamps of the loading completion phase and the initial phase, respectively. loaded and N init are the total number of DOM nodes in the loading completion phase and the initial phase, respectively. i is the weight of the rendering state, N effective is the corrected number of effective sampling points; By using MutationObserver to monitor the dynamic changes of the DOM after the page is loaded, the delayed rendering content is further corrected, and the correction coefficient of the dynamic change on the overall content status of the page is calculated as follows: ， Where N mutated is the number of node changes captured by MutationObserver, M ratio is the effective change ratio, e is the natural base, ΔT is the time window, C dynamic It is a dynamic correction coefficient that reflects the impact of delayed page loading on content detection.

6. The method for detecting a white screen at a site according to claim 1, characterized in that: For nested iframes and micro-frontend pages, a hierarchical sampling strategy is further adopted. The sampling points of the sub-pages and the main page are independently analyzed using the regional determination algorithm to comprehensively determine whether the sub-pages and the main page meet the white screen conditions and generate the detection results. The specific steps are as follows: In the main page and the nested iframe page, data collection is performed according to the hierarchical sampling strategy. For the main page, the sampling points are evenly distributed according to the layout of its content area; for the iframe, the boundary area of ​​each nested iframe is first located, and then the sampling points are independently distributed in the sub-page content area. The total sampling point status value calculation formula for the main page and all sub-pages is as follows: ， Where D total is the total status value of the main page and all subpages, N main is the total number of sampling points of the main page, is the total number of sampling points of the jth subpage, is the state of the qth sampling point on the main page, is the kth sampling point state of the subpage, M is the number of nested iframes, is the sub-page sampling point weight, is the main page sampling point weight; Based on the statistical results of the sampling point status, the white screen status of the main page and sub-pages is determined according to the regional strategy. The calculation expression of the white screen ratio of the main page and sub-page is as follows: ， In the formula, R main is the white screen ratio of the main page, R subj is the white screen ratio of the jth subpage; After the white screen ratio calculation is completed for the main page and sub-page respectively, the white screen status of all pages is comprehensively analyzed to obtain the final detection result. The comprehensive white screen status of the main page and sub-page is calculated. The calculation expression is as follows: ， In the formula, C white is the comprehensive white screen coefficient, α is the main page weight coefficient, which reflects the influence of the home page on the overall white screen state, and β is the sub-page weight coefficient, which reflects the influence of the sub-page on the overall white screen state.

7. A device for detecting a white screen at a site, used to implement a method for detecting a white screen at a site as described in any one of claims 1 to 6, characterized in that: It includes sampling point layout strategy module, sampling point data acquisition and element consistency judgment module, invalid sampling point statistics and white screen preliminary judgment module, dynamic scene correction mechanism module and comprehensive detection module of complex page structure; The sampling point layout strategy module presets multiple sampling points based on the page layout during the target site page loading process. The sampling point distribution follows the principle of covering the content area to ensure that the detection range of the page content area is complete. The sampling point data acquisition and element consistency judgment module uses the elementsFromPoint API provided by the browser to obtain the HTML element information of each sampling point and judge whether the HTML element is consistent with the preset page container element; Invalid sampling point statistics and white screen preliminary judgment module, according to the HTML element information of the sampling point, count the number of elements in the sampling point that are empty and consistent with the page container. When the number exceeds the preset threshold, the page is judged to be in a white screen state; The dynamic scene correction mechanism module compares the data of the initial sampling with the data of the post-loading sampling when detecting the dynamic loading scene, combines the DOM rendering status and MutationObserver to detect dynamic changes, and corrects the misjudgment caused by dynamic loading and delayed content rendering; The comprehensive detection module for complex page structures further adopts a hierarchical sampling strategy for nested iframes and micro-frontend pages, and uses a regional determination algorithm to independently analyze the sampling points of sub-pages and main pages, comprehensively determine whether the sub-pages and main pages meet the white screen conditions, and generate detection results.

Images