CN112487338A - Method, device, equipment and medium for determining FMP of webpage - Google Patents
Method, device, equipment and medium for determining FMP of webpage Download PDFInfo
- Publication number
- CN112487338A CN112487338A CN202011444926.1A CN202011444926A CN112487338A CN 112487338 A CN112487338 A CN 112487338A CN 202011444926 A CN202011444926 A CN 202011444926A CN 112487338 A CN112487338 A CN 112487338A
- Authority
- CN
- China
- Prior art keywords
- determining
- target
- fmp
- page
- webpage
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Human Computer Interaction (AREA)
- Data Mining & Analysis (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The application discloses a method for determining FMP of a webpage, which comprises the following steps: determining target page elements according to the position relation of each page element of the webpage displayed in the first screen visible range by the target webpage file; calculating the accumulated rendering duration of each target page element in the process of generating the corresponding DOM tree according to the target webpage file; and determining the FMP of the webpage according to the accumulated rendering time. The method can improve the accuracy of calculating the FMP, and further improve the accuracy of judging the page performance according to the FMP. The application also discloses a device and equipment for determining the FMP of the webpage and a computer readable storage medium, which have the beneficial effects.
Description
Technical Field
The present invention relates to the field of web page performance detection, and in particular, to a method, an apparatus, a device, and a computer-readable storage medium for determining an FMP of a web page.
Background
With the increasing complexity of Web applications, it is increasingly difficult for domcatentloaded events and OnLoad events to accurately define the opening speed of a Web page, and currently, in an actual project, a front-end developer measures the opening speed of the Web page by calculating the FMP (First meaningfull Paint) of the Web page and using the FMP to further judge the page performance of the Web page.
In the prior art, the FMP is generally calculated by adding a script implantation time function at the beginning and end of a target web page file to obtain two time points, and then performing subtraction by using the two time points to obtain a duration, which is the time required for rendering all nodes of a web page of the target web page file; or acquiring startTime of a first node of a rendering target webpage file through a window provided by an official party and acquiring time nodes triggered and ended by events of loadEventStart and loadEventEnd to obtain the time length of all the initialized nodes. Therefore, in the method for calculating the FMP in the prior art, the time for loading the whole webpage of the target webpage file is calculated, but not the rendering time of the webpage within the visible range of the first screen; that is, the time calculating method of the FMP in the prior art is not accurate, and the result of the page performance judgment according to the FMP is not accurate.
Therefore, how to improve the accuracy of calculating the FMP and further improve the accuracy of judging the page performance according to the FMP is a technical problem that needs to be solved by those skilled in the art.
Disclosure of Invention
In view of this, the present invention provides a method for determining an FMP of a web page, which can improve the accuracy of calculating the FMP, and further improve the accuracy of determining the page performance according to the FMP; another object of the present invention is to provide an apparatus, a device and a computer readable storage medium for determining FMP of a web page, all having the above advantages.
In order to solve the above technical problem, the present invention provides a method for determining an FMP of a web page, including:
determining target page elements according to the position relation of each page element of the webpage displayed in the first screen visible range by the target webpage file;
calculating the accumulated rendering duration of each target page element in the process of generating the corresponding DOM tree according to the target webpage file;
and determining the FMP of the webpage according to the accumulated rendering duration.
Preferably, the page elements include parent blocks and child blocks; correspondingly, the process of determining the target page element according to the position relationship of each page element of the webpage displayed in the first screen visible range by the target webpage file specifically includes:
if the total area of the sub-blocks of the webpage displayed in the first screen visible range by the target webpage file is smaller than the total area of the parent block, setting the parent block as the target page element;
if the total area of the sub-blocks of the webpage displayed in the first-screen visible range by the target webpage file is larger than the total area of the parent block and the sub-blocks are not descendant blocks of the parent block, setting the parent block and the sub-blocks as the target page elements;
and if the total area of the sub-blocks of the webpage displayed in the first screen visible range by the target webpage file is larger than the total area of the parent block, and the sub-blocks are descendant blocks of the parent block, setting the sub-blocks as the target page elements.
Preferably, the step of calculating the accumulated rendering duration of each target page element in the process of generating the corresponding DOM tree according to the target web page file specifically includes:
and in the process of generating a corresponding DOM tree according to the target webpage file, triggering and monitoring the change of the DOM tree through a MutationObserver event, triggering and monitoring when the page element is put into the DOM tree, and canceling monitoring when the page element is completely loaded to obtain the accumulated rendering time.
Preferably, the process of determining the target page element according to the position relationship of each page element of the web page displayed by the target web page file in the first screen visual range specifically includes:
determining effective page elements according to each page element of a webpage displayed in the first screen visible range by the target webpage file;
and determining the target page element according to the position relation of each effective page element.
Preferably, after the determining the FMP of the web page according to the accumulated rendering duration, the method further includes:
and displaying the FMP in the visible range of the first screen.
Preferably, after the determining the FMP of the web page according to the accumulated rendering duration, the method further includes:
and determining the page performance of the webpage according to the FMP.
Preferably, after the determining the page performance of the web page according to the FMP, the method further includes:
and sending out corresponding prompt information when the page performance is determined to be abnormal.
In order to solve the above technical problem, the present invention further provides a device for determining an FMP of a web page, including:
the first determining module is used for determining target page elements according to the position relation of all page elements of the webpage displayed in the first screen visible range by the target webpage file;
the calculation module is used for calculating the accumulated rendering duration of each target page element in the process of generating the corresponding DOM tree according to the target webpage file;
and the second determining module is used for determining the FMP of the webpage according to the accumulated rendering time.
In order to solve the above technical problem, the present invention further provides an FMP determining apparatus for a web page, including:
a memory for storing a computer program;
and the processor is used for realizing the steps of the FMP determining method of any one webpage when the computer program is executed.
In order to solve the above technical problem, the present invention further provides a computer-readable storage medium, wherein a computer program is stored on the computer-readable storage medium, and when being executed by a processor, the computer program implements the steps of any one of the above methods for determining the FMP of a web page.
The method for determining the FMP of the webpage provided by the invention determines the target page element according to the position relation of each page element of the webpage displayed in the first screen visible range by the target webpage file; calculating the accumulated rendering duration of each target page element in the process of generating the corresponding DOM tree according to the target webpage file; determining the FMP of the webpage according to the accumulated rendering duration; therefore, the method determines the FMP of the webpage by calculating the accumulated rendering duration of the target page elements of the webpage displayed in the visible range of the first screen, and compared with the prior art of calculating the rendering durations of all the webpage elements of the target webpage file, the method can improve the accuracy of FMP calculation, and further improve the accuracy of judging the performance of the webpage according to the FMP.
In order to solve the technical problem, the invention also provides a device, equipment and a computer readable storage medium for determining the FMP of the webpage, which have the beneficial effects.
Drawings
In order to more clearly illustrate the embodiments or technical solutions of the present invention, the drawings used in the description of the embodiments or the prior art will be briefly described below, and it is obvious that the drawings in the following description are only some embodiments of the present invention, and for those skilled in the art, other drawings can be obtained according to the provided drawings without creative efforts.
Fig. 1 is a flowchart of a method for determining an FMP of a web page according to an embodiment of the present invention;
fig. 2 is a structural diagram of an apparatus for determining an FMP of a web page according to an embodiment of the present invention;
fig. 3 is a structural diagram of an apparatus for determining an FMP of a web page according to an embodiment of the present invention.
Detailed Description
The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
The core of the embodiment of the invention is to provide a method for determining the FMP of a webpage, which can improve the accuracy of calculating the FMP and further improve the accuracy of judging the page performance according to the FMP; another core of the present invention is to provide a device, an apparatus and a computer readable storage medium for determining FMP of a web page, all having the above advantages.
In order that those skilled in the art will better understand the disclosure, the invention will be described in further detail with reference to the accompanying drawings and specific embodiments.
Fig. 1 is a flowchart of a method for determining an FMP of a web page according to an embodiment of the present invention. As shown in fig. 1, a method for determining an FMP of a web page includes:
s10: and determining the target page elements according to the position relation of each page element of the target webpage in the visible range of the first screen.
In this embodiment, the target web page file refers to a file provided with web page content to be displayed on a screen, and is usually in HTML format, and has a file extension of HTML or htm or aspp or aspx or php or jsp. In actual operation, when a target webpage file is opened, webpage content of the target webpage file is displayed in a webpage form; if the content of the target webpage file is more, the entire content of the target webpage file cannot be displayed in the first screen visual range, and the content of the target webpage file needs to be displayed in a split screen mode, so that the target webpage file corresponds to a plurality of webpage pages.
Any node in a web page is initially a block, i.e., a page element; the web page contents such as title, head portrait, carousel image and the like are respectively corresponding to different page elements; each page element in the first screen visible range refers to each page element appearing in the first page when the target webpage file is opened; the method comprises the following steps of determining target page elements for calculating the FMP of the webpage within the first screen visual range according to the position relation of all page elements of the webpage displayed within the first screen visual range by the target webpage file.
S20: calculating the accumulated rendering duration of each target page element in the process of generating the corresponding DOM tree according to the target webpage file;
s30: and determining the FMP of the webpage according to the accumulated rendering time.
Specifically, the DOM tree refers to an HTML tree structure and a corresponding access method generated by parsing an HTML page through a DOM (Document Object Model); in this embodiment, in the process of converting the target web page file into the corresponding DOM tree, the process of placing each page element into each leaf node of the DOM tree is a page rendering process.
In this step, after the target page elements are determined, the accumulated rendering time of the target page elements in the webpage is obtained by further accumulating the time required for rendering each target page element. In other words, the accumulated rendering time is the longest time required for rendering each page element of the webpage within the first-screen visible range. For example, assuming that two target page elements are determined in a webpage, and a second target page element is rendered after a first target page element is rendered, rendering time periods required by the two target page elements are respectively 1ms and 2ms, and then the cumulative rendering time period is 3 ms; if two target page elements can be rendered simultaneously, and the rendering time lengths required by the two target page elements are 1ms and 2ms respectively, the longer rendering time length in the target page elements is taken as the accumulated rendering time length, that is, the accumulated rendering time length is 2 ms.
And after the accumulated rendering time length is determined, determining the FMP of the webpage according to the accumulated rendering time length, and setting the determined accumulated rendering time length as the FMP of the webpage displayed in the first-screen visual range.
The method for determining the FMP of the webpage provided by the embodiment of the invention determines the target page element according to the position relation of each page element of the webpage displayed in the first screen visible range by the target webpage file; calculating the accumulated rendering duration of each target page element in the process of generating the corresponding DOM tree according to the target webpage file; determining the FMP of the webpage according to the accumulated rendering duration; therefore, the method determines the FMP of the webpage by calculating the accumulated rendering duration of the target page elements of the webpage displayed in the visible range of the first screen, and compared with the prior art of calculating the rendering durations of all the webpage elements of the target webpage file, the method can improve the accuracy of FMP calculation, and further improve the accuracy of judging the performance of the webpage according to the FMP.
On the basis of the above embodiment, the present embodiment further describes and optimizes the technical solution, and specifically, in the present embodiment, the page element includes a parent block and a child block; correspondingly, the process of determining the target page element according to the position relationship of each page element of the webpage displayed in the first screen visible range by the target webpage file specifically comprises the following steps:
if the total area of the sub-blocks of the webpage displayed in the first screen visual range by the target webpage file is smaller than the total area of the parent block, setting the parent block as a target page element;
if the total area of the sub-blocks of the webpage displayed in the first screen visible range of the target webpage file is larger than the total area of the parent block, and the sub-blocks are not descendant blocks of the parent block, setting the parent block and the sub-blocks as target page elements;
and if the total area of the sub-blocks of the webpage displayed in the first screen visible range of the target webpage file is larger than the total area of the parent block, and the sub-blocks are descendant blocks of the parent block, setting the sub-blocks as target page elements.
It should be noted that, in this step, the case that the page element includes a parent block and a child block is considered; the parent block and the child block refer to page elements with overlapping position relations in the webpage. For example, if the web page includes a carousel image and identification information of the relationship between the current image sequence number and the total image number is displayed in the lower left corner of the carousel image, the carousel image is a parent block, and the identification information is a child block; the above description of the parent block and the child block is only an illustration and is not a specific limitation.
In this embodiment, three scenarios are mainly considered, and corresponding target page elements are respectively determined according to the three scenarios:
scene one: and if the total area of the sub-blocks of the webpage displayed in the first screen visible range by the target webpage file is smaller than the total area of the parent block, setting the parent block as a target page element.
In this scenario, the total area of the child blocks of the web page displayed in the first screen visual range by the target web page file is smaller than the total area of the parent block, that is, each child block is in the parent block, and therefore if rendering of the parent block is completed, rendering of the current web page is completed, and therefore the parent block is set as a target page element.
Scene two: and if the total area of the sub-blocks of the webpage displayed in the first screen visible range of the target webpage file is larger than the total area of the parent block, and the sub-blocks are not descendant blocks of the parent block, setting the parent block and the sub-blocks as target page elements.
In this scenario, the total area of the sub-blocks of the web page displayed in the first screen visual range by the target web page file is greater than the total area of the parent block, and the sub-blocks are not descendant blocks of the parent block, so that the accumulated rendering time needs to be determined according to the rendering time required by the last rendered page element, and therefore the parent block and the sub-blocks are set as the target page elements.
Scene three: and if the total area of the sub-blocks of the webpage displayed in the first screen visible range of the target webpage file is larger than the total area of the parent block, and the sub-blocks are descendant blocks of the parent block, setting the sub-blocks as target page elements.
In this scenario, the child blocks of the web page displayed in the first screen visible range of the target web page file are all descendant blocks of the parent block, and under the condition that the total area of the child blocks is larger than that of the parent block, if rendering of the child blocks is completed, rendering of the current web page is completed, so that the child blocks are set as target page elements.
Therefore, in the embodiment, the corresponding target page element is correspondingly determined according to the specific position state of the page element, so that the convenience and accuracy of determining the FMP of the webpage page can be further improved.
On the basis of the above embodiments, the present embodiment further describes and optimizes the technical solution, and specifically, in the present embodiment,
in the process of generating a corresponding DOM tree according to a target web page file, a process of calculating the accumulated rendering duration of each target page element specifically includes:
in the process of generating a corresponding DOM tree according to a target webpage file, monitoring change of the DOM tree is triggered through a MutationObserver event, monitoring is triggered when a page element is placed in the DOM tree, monitoring is cancelled when the page element is loaded, and the accumulated rendering time length is obtained.
Specifically, in this embodiment, the change made to the DOM tree is monitored by the MutationObserver; in the process of generating a corresponding DOM tree according to a target webpage file, triggering and monitoring the change of the DOM tree through a MutationObserver event; and triggering monitoring when the page elements are placed in the DOM tree, canceling the monitoring after the page elements are loaded, and determining the accumulated rendering time according to the time between the triggering monitoring and the canceling of the monitoring.
Therefore, in the embodiment, the cumulative rendering time is obtained by using the MutationObserver event, and the operation mode is convenient and fast.
On the basis of the above embodiments, the present embodiment further describes and optimizes the technical solution, and specifically, in the present embodiment,
the process of determining the target page element according to the position relationship of each page element of the webpage displayed in the first screen visible range by the target webpage file specifically comprises the following steps:
determining effective page elements according to all page elements of a webpage displayed in a first screen visible range by a target webpage file;
and determining the target page elements according to the position relation of each effective page element.
Specifically, the effective page element refers to a page element displayed in a webpage displayed in a first-screen visible range; in this embodiment, an effective page element is determined according to each page element in a webpage displayed in the first screen visual range by the target webpage file, and then the target page element is determined from the effective page element.
It can be understood that, because the calculation process for determining the target page element is more complicated, according to the method of the embodiment, the effective page elements are determined first, and then the target page element is determined from the effective page elements, so that the efficiency of determining the target page element can be improved.
On the basis of the foregoing embodiment, the embodiment further describes and optimizes the technical solution, and specifically, after determining the FMP of the web page according to the accumulated rendering duration, the embodiment further includes:
the FMP is displayed within the first screen view.
Specifically, in this embodiment, after the FMP of the web page is determined according to the accumulated rendering time, the currently determined FMP is displayed by using a preset display device. In this embodiment, a specific form of displaying the FMP is not limited, and it should be noted that, in this embodiment, a specific type of the display device is also not limited, and may be, for example, a liquid crystal display or a touch panel. In this embodiment, it is preferable to display the currently determined FMP on the display device for displaying the web page of the target web document, that is, to display the FMP within the first-screen visible range of the display device.
Therefore, in the embodiment, the FMP is further displayed in the first screen visible range, so that the user can more intuitively view the opening speed of the current webpage, and the user experience is further improved.
On the basis of the foregoing embodiment, the embodiment further describes and optimizes the technical solution, and specifically, after determining the FMP of the web page according to the accumulated rendering duration, the embodiment further includes:
and determining the page performance of the webpage according to the FMP.
Specifically, in this embodiment, after the FMP of the web page is determined, the page performance of the web page is further determined according to a preset determination rule. For example, if the currently determined FMP is smaller than the first threshold, it indicates that the opening speed of the web page is fast and the performance of the web page is good; if the currently determined FMP is larger than a first threshold and smaller than a second threshold, the fact that the opening speed of the webpage is general and the performance of the webpage is general is represented; if the currently determined FMP is larger than the second threshold, the fact that the opening speed of the webpage is slow is indicated, and the performance of the webpage is poor. Of course, in actual operation, the page performance of the web page can be determined according to FMP according to other determination rules.
Therefore, the page performance of the webpage is determined according to the FMP, and the use experience of the user can be further improved.
On the basis of the above embodiment, the embodiment further describes and optimizes the technical solution, and specifically, after determining the page performance of the web page according to the FMP, the embodiment further includes:
and sending out corresponding prompt information when the page performance is determined to be abnormal.
Specifically, in this embodiment, after determining the page performance corresponding to the web page according to the FMP, if it is determined that the page performance of the web page is abnormal, the prompting device is further triggered to send out the corresponding prompting information. It should be noted that the prompting device may specifically be a buzzer and/or an indicator light, and the user is intuitively prompted that the FMP of the current web page has been obtained and the page performance of the current web page is determined to be abnormal by triggering the prompting devices such as the buzzer and the indicator light to send corresponding prompting information, such as a buzzer and a flashing light, so that the user experience can be further improved.
The above detailed description is made on the embodiment of the method for determining the FMP of the web page provided by the present invention, and the present invention also provides a device, an apparatus, and a computer-readable storage medium for determining the FMP of the web page corresponding to the method.
Fig. 2 is a structural diagram of an apparatus for determining an FMP of a web page according to an embodiment of the present invention, and as shown in fig. 2, the apparatus for determining an FMP of a web page includes:
the first determining module 21 is configured to determine a target page element according to a position relationship between page elements of a web page displayed by a target web file in a visible range of a first screen;
the calculation module 22 is configured to calculate an accumulated rendering duration of each target page element in the process of generating the corresponding DOM tree according to the target web page file;
and the second determining module 23 is configured to determine the FMP of the web page according to the accumulated rendering duration.
The device for determining the FMP of the webpage provided by the embodiment of the invention has the beneficial effects of the method for determining the FMP of the webpage.
As a preferred embodiment, the first determining module specifically includes:
the first determining submodule is used for setting the parent block as a target page element if the total area of the child blocks of the webpage displayed in the first screen visual range of the target webpage file is smaller than the total area of the parent block;
the second determining submodule is used for setting the parent block and the child block as target page elements if the total area of the child blocks of the webpage displayed in the first screen visual range of the target webpage file is larger than the total area of the parent block and the child blocks are not descendant blocks of the parent block;
and the third determining submodule is used for setting the sub-block as the target page element if the total area of the sub-blocks of the webpage displayed in the first screen visual range of the target webpage file is larger than the total area of the parent block and the sub-block is a descendant block of the parent block.
As a preferred embodiment, the calculation module specifically includes:
and the calculation submodule is used for triggering and monitoring the change of the DOM tree through the MutationObserver event in the process of generating the corresponding DOM tree according to the target webpage file, triggering and monitoring when the page elements are put into the DOM tree, and canceling the monitoring when the page elements are loaded, so that the accumulated rendering time is obtained.
As a preferred embodiment, the apparatus for determining the FMP of another web page further includes:
and the display module is used for displaying the FMP in the visible range of the first screen.
As a preferred embodiment, the apparatus for determining the FMP of another web page further includes:
and the third determining module is used for determining the page performance of the webpage according to the FMP.
As a preferred embodiment, the apparatus for determining the FMP of another web page further includes:
and the prompt module is used for sending out corresponding prompt information when the page performance is determined to be abnormal.
Fig. 3 is a structural diagram of an apparatus for determining an FMP of a web page according to an embodiment of the present invention, and as shown in fig. 3, the apparatus for determining an FMP of a web page includes:
a memory 31 for storing a computer program;
a processor 32 for implementing the steps of the method for determining the FMP of a web page as described above when executing the computer program.
The device for determining the FMP of the webpage provided by the embodiment of the invention has the beneficial effects of the method for determining the FMP of the webpage.
In order to solve the above technical problem, the present invention further provides a computer-readable storage medium, on which a computer program is stored, and the computer program, when executed by a processor, implements the steps of the method for determining the FMP of the web page.
The computer-readable storage medium provided by the embodiment of the invention has the beneficial effect of the method for determining the FMP of the webpage.
The method, apparatus, device and computer readable storage medium for determining FMP of web page provided by the present invention are described in detail above. The principles and embodiments of the present invention are explained herein using specific examples, which are set forth only to help understand the method and its core ideas of the present invention. It should be noted that, for those skilled in the art, it is possible to make various improvements and modifications to the present invention without departing from the principle of the present invention, and those improvements and modifications also fall within the scope of the claims of the present invention.
The embodiments are described in a progressive manner in the specification, each embodiment focuses on differences from other embodiments, and the same and similar parts among the embodiments are referred to each other. The device disclosed by the embodiment corresponds to the method disclosed by the embodiment, so that the description is simple, and the relevant points can be referred to the method part for description.
Those of skill would further appreciate that the various illustrative elements and algorithm steps described in connection with the embodiments disclosed herein may be implemented as electronic hardware, computer software, or combinations of both, and that the various illustrative components and steps have been described above generally in terms of their functionality in order to clearly illustrate this interchangeability of hardware and software. Whether such functionality is implemented as hardware or software depends upon the particular application and design constraints imposed on the implementation. Skilled artisans may implement the described functionality in varying ways for each particular application, but such implementation decisions should not be interpreted as causing a departure from the scope of the present invention.
Claims (10)
1. A method for determining an FMP of a web page, comprising:
determining target page elements according to the position relation of each page element of the webpage displayed in the first screen visible range by the target webpage file;
calculating the accumulated rendering duration of each target page element in the process of generating the corresponding DOM tree according to the target webpage file;
and determining the FMP of the webpage according to the accumulated rendering duration.
2. The method of claim 1, wherein the page elements comprise parent blocks and child blocks; correspondingly, the process of determining the target page element according to the position relationship of each page element of the webpage displayed in the first screen visible range by the target webpage file specifically includes:
if the total area of the sub-blocks of the webpage displayed in the first screen visible range by the target webpage file is smaller than the total area of the parent block, setting the parent block as the target page element;
if the total area of the sub-blocks of the webpage displayed in the first-screen visible range by the target webpage file is larger than the total area of the parent block and the sub-blocks are not descendant blocks of the parent block, setting the parent block and the sub-blocks as the target page elements;
and if the total area of the sub-blocks of the webpage displayed in the first screen visible range by the target webpage file is larger than the total area of the parent block, and the sub-blocks are descendant blocks of the parent block, setting the sub-blocks as the target page elements.
3. The method according to claim 1, wherein the step of calculating the accumulated rendering duration of each target page element in the step of generating the corresponding DOM tree according to the target web page file specifically comprises:
and in the process of generating a corresponding DOM tree according to the target webpage file, triggering and monitoring the change of the DOM tree through a MutationObserver event, triggering and monitoring when the page element is put into the DOM tree, and canceling monitoring when the page element is completely loaded to obtain the accumulated rendering time.
4. The method according to claim 1, wherein the process of determining the target page element according to the position relationship of each page element of the web page displayed by the target web document in the visible range of the first screen specifically comprises:
determining effective page elements according to each page element of a webpage displayed in the first screen visible range by the target webpage file;
and determining the target page element according to the position relation of each effective page element.
5. The method of claim 1, wherein after determining the FMP of the web page based on the cumulative rendering duration, further comprising:
and displaying the FMP in the visible range of the first screen.
6. The method of any of claims 1 to 5, wherein after determining the FMP of the web page based on the cumulative rendering duration, further comprising:
and determining the page performance of the webpage according to the FMP.
7. The method of claim 6, after said determining the page performance of the web page according to the FMP, further comprising:
and sending out corresponding prompt information when the page performance is determined to be abnormal.
8. An apparatus for determining an FMP of a web page, comprising:
the first determining module is used for determining target page elements according to the position relation of all page elements of the webpage displayed in the first screen visible range by the target webpage file;
the calculation module is used for calculating the accumulated rendering duration of each target page element in the process of generating the corresponding DOM tree according to the target webpage file;
and the second determining module is used for determining the FMP of the webpage according to the accumulated rendering time.
9. An apparatus for determining an FMP of a web page, comprising:
a memory for storing a computer program;
a processor for implementing the steps of the method of determining the FMP of a web page as claimed in any one of claims 1 to 6 when executing said computer program.
10. A computer-readable storage medium, characterized in that a computer program is stored thereon, which computer program, when being executed by a processor, carries out the steps of the method of determining the FMP of a web page according to any one of claims 1 to 6.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011444926.1A CN112487338A (en) | 2020-12-11 | 2020-12-11 | Method, device, equipment and medium for determining FMP of webpage |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011444926.1A CN112487338A (en) | 2020-12-11 | 2020-12-11 | Method, device, equipment and medium for determining FMP of webpage |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112487338A true CN112487338A (en) | 2021-03-12 |
Family
ID=74940097
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011444926.1A Pending CN112487338A (en) | 2020-12-11 | 2020-12-11 | Method, device, equipment and medium for determining FMP of webpage |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112487338A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113806197A (en) * | 2021-09-22 | 2021-12-17 | 北京字节跳动网络技术有限公司 | Page loading duration calculation method and device |
| CN114741266A (en) * | 2022-05-17 | 2022-07-12 | 盐城金堤科技有限公司 | Page white screen duration determining method and device, electronic equipment and storage medium |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111538885A (en) * | 2020-04-24 | 2020-08-14 | 腾讯音乐娱乐科技（深圳）有限公司 | Page monitoring method and device, electronic equipment and storage medium |
| CN111552473A (en) * | 2020-04-27 | 2020-08-18 | 腾讯科技（深圳）有限公司 | Application processing method, device and equipment |
-
2020
- 2020-12-11 CN CN202011444926.1A patent/CN112487338A/en active Pending
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111538885A (en) * | 2020-04-24 | 2020-08-14 | 腾讯音乐娱乐科技（深圳）有限公司 | Page monitoring method and device, electronic equipment and storage medium |
| CN111552473A (en) * | 2020-04-27 | 2020-08-18 | 腾讯科技（深圳）有限公司 | Application processing method, device and equipment |
Non-Patent Citations (3)
| Title |
|---|
| GITHUB: "FMP-TTI自动化无埋点方式计算页面FCP/FMP /TTI时间", 《HTTPS://GITHUB.COM/XINGQIAO/FMP-TTI》 * |
| 木羽: "前端那些事儿5定位性能指标FMP", 《HTTPS://JUEJIN.CN/POST/6844903817612361735》 * |
| 木羽: "如何相对准确的计算FMP", 《HTTPS://ZHUANLAN.ZHIHU.COM/P/81332247》 * |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113806197A (en) * | 2021-09-22 | 2021-12-17 | 北京字节跳动网络技术有限公司 | Page loading duration calculation method and device |
| CN113806197B (en) * | 2021-09-22 | 2024-04-12 | 抖音视界有限公司 | Page loading time length calculation method and device |
| CN114741266A (en) * | 2022-05-17 | 2022-07-12 | 盐城金堤科技有限公司 | Page white screen duration determining method and device, electronic equipment and storage medium |
| CN114741266B (en) * | 2022-05-17 | 2024-03-15 | 盐城天眼察微科技有限公司 | Page white screen duration determination method and device, electronic equipment and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106802935B (en) | Page fluency testing method and device | |
| US11232011B2 (en) | Method and apparatus for testing performance of a page control and electronic device | |
| CN112487338A (en) | Method, device, equipment and medium for determining FMP of webpage | |
| CN104184731B (en) | A kind of method for information display, apparatus and system | |
| EP3407200A1 (en) | Method and device for updating online self-learning event detection model | |
| CN107451193B (en) | A kind of acquisition methods and device of customer terminal webpage load time, electronic equipment | |
| CN110401580B (en) | Webpage state monitoring method based on heartbeat mechanism and related equipment | |
| CN110333864B (en) | Tree-shaped data rendering method, device, equipment and medium | |
| CN104346267A (en) | Method and device for generating program bug positioning information | |
| CN106843700B (en) | Screenshot method and device | |
| CN110347319B (en) | Method and device for screenshot in application | |
| CN109976966A (en) | A kind of application program launching time counting method, apparatus and system | |
| CN105260082A (en) | Display method for test data and development terminal | |
| CN110806965A (en) | Automatic test method, device, equipment and medium | |
| CN110287093A (en) | Mobile terminal, data interface test method and storage medium | |
| CN110717122A (en) | Page performance acquisition method and device and electronic equipment | |
| EP3148120A1 (en) | Service system test method and device | |
| CN110531402A (en) | PET system fault detection method, device, terminal device and PET system | |
| CN109815083B (en) | Application crash monitoring method and device, electronic equipment and medium | |
| CN111818393A (en) | Video progress adjusting method and device and electronic equipment | |
| CN110069194B (en) | Page blockage determining method and device, electronic equipment and readable storage medium | |
| CN112463591B (en) | Agricultural Internet of things system evaluation method, device, equipment and storage medium | |
| CN109521894A (en) | Business executes method, apparatus and electronic equipment | |
| CN111629266B (en) | Playing progress display method and device, electronic equipment and storage medium | |
| CN114741266B (en) | Page white screen duration determination method and device, electronic equipment and storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20210312 |