CN104899336B - It is a kind of to measure the first method for shielding complete render time of webpage - Google Patents
It is a kind of to measure the first method for shielding complete render time of webpage Download PDFInfo
- Publication number
- CN104899336B CN104899336B CN201510373936.3A CN201510373936A CN104899336B CN 104899336 B CN104899336 B CN 104899336B CN 201510373936 A CN201510373936 A CN 201510373936A CN 104899336 B CN104899336 B CN 104899336B
- Authority
- CN
- China
- Prior art keywords
- node
- screen
- time
- dom
- coordinate
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; 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/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
- User Interface Of Digital Computer (AREA)
- Debugging And Monitoring (AREA)
Abstract
The first method for shielding complete render time of webpage is measured the invention discloses a kind of, the realization of method includes eight steps：Resource element and the node of render tree are set up a mapping relations by url, and this mapping relations is stored in a mapping table；The url set of resource element in the range of a first screen is calculated according to mapping table；In set of resource elements in the range of head screens, according to node element coordinate and deadline relation table, the element for finally completing loading is calculated.The present invention can more accurately test out the sense of reality that user browses webpage, the accuracy of the first screen display of raising webpage, and all elements accurately tested in the range of screen of informing against render true moment during completion completely；The time tested out by the present invention is exactly the time that element all in the range of first screen renders completion completely, the time that all elements are shown completely in the range of namely first screen, and the time of to be also user's naked eyes experience this time most the first screen of real webpage opening.
Description
Technical field
The present invention relates to a kind of measuring method more particularly to a kind of methods for measuring the first complete render time of screen of webpage.
Background technology
In current application performance management platforms (APM), an important indicator of one web site performance of description is exactly website
Head screen performances, and first screen performance is not because be the criterion behavior and structure that webpage should have in standard as defined in W3C.So
Major browser manufacturer is in the event handling of browser also without designing relevant interface and event for first screen performance, but right
For the developer of webpage and the viewer of webpage, this performance but can really react when a webpage is opened to user very much
Subjective feeling.For this demand, major performance management platforms both increase such a index, i.e., first screen performance, it refers to
Be when webpage renders, head screen interior elements render height and reach time of specified altitude assignment.Its main computational methods is：User
The inquiry provided by browser renders the Com interfaces of height, with a fixed period frequency, must actively go to obtain current clear
Device of looking at renders the value of height, compares the value and the value of first screen height that user specifies, if the height that renders inquired is more than head
Shield height value, be considered as this inquiry time i.e. headed by screen performance value.
Although calculating this refers to that calibration method is varied, various algorithms calculate at present initial screen time mainly has following several
A shortcoming：
1. the value of head screen performances deposits error；When the computational methods of head screen performances are browsing webpages, real-time query is currently clear
It lookes at the height that renders of device, and modern browser is to increase the friendly that user uses, renders generally using batch, large area
Strategy is rendered, this results in the value bounce property of the first screen height inquired bigger, such as the value inquired may be following sequence
The value of row：0,0,500,1800,1800 (unit：Pixel).If the first screen height that we set is 600 pixels, then we are only
Us can approximately be chosen and find to render and shield performance as our first at the time of height is 1800 pixel, this results in ours
There is very big error in the value of head screen performances.
It is finished 2. whether the content that the index of head screen performances can not be described accurately in the range of current first screen renders；Because headed by
The computational methods of screen performance are the Dom interfaces by browser, and the longitudinal direction that real-time query currently renders window renders height, and horizontal
It is irrespective to the data rendered, this results in rendering in altitude range in specified, and the content in possible left side is rendered
It finishes, and the content on right side does not start also to render, and the time finished is rendered completely so as to can not accurately react screen of informing against.
3. the computational methods of head screen performances are defective；The computational methods for shielding performance because headed by are that we are provided by browser
Dom interfaces, with certain period frequency active go Query Browser it is current render height, and if this period frequency
It is less suitable to set, and may result in if the cycle is too long at the time of we inquire value is not to be really rendered into inside browser
At the time of this height, it may result in and deposit very big error.
The content of the invention
In order to solve the above technical problems, the technical solution adopted by the present invention is：A kind of first screen of measurement webpage renders completely
The method of time, the realization of method comprise the following steps：
(1), in a browser during webpage loading, by the interface of browser developers instrument, acquisition webpage adds
The element waterfall diagram data of load records the time that each element loading is completed, and this data is saved in the element container specified
In；
(2), at the time of current web page loads completion, pass through the interface of browser, obtain the complete Dom trees of current web page
Data, the specifying information of each node in Dom trees, in the container for storing Dom trees；
(3), the interface provided using rendering engine in browser searches the URL for the resource that each Dom nodes are relied on,
And current Dom nodes and the corresponding mapping relations of resource Url are established, this mapping relations is stored in a mapping table, table
Structure is as follows：
Dom node resource mapping tables
(4), the interface provided by browser rendering engine obtains the complete wash with watercolours that current page completes the moment in loading
Dye tree, and absolute coordinate of each rendering node in browser window and current rendering node ID are established a mapping pass
It is table, table structure is as follows：
Rendering node coordinate map
| Key | Value |
| Rendering node ID | Node displaing coordinate { x, y, width, height } |
(5), by the interface of browser rendering engine, lookup each renders the Dom node objects that tree node is relied on, and
Establish the mapping relations of Dom nodes and rendering node；Establish the relation mapping table of following relation：
Rendering node and Dom node mapping tables
| Key | Value |
| Rendering node ID | Dom node IDs |
(6), according to three relation mapping tables establishing of former steps, finally set up and resource url and render area coordinate
Relation table, ignore the anonymous node in non-visualization node and the rendering node in Dom nodes, the final mapping table knot of foundation
Structure is as follows：
Resource url and displaing coordinate mapping table
| Key | Value |
| Resource url | Node displaing coordinate { x, y, width, height } |
(7), after the mapping table of node element coordinate and deadline relation is obtained, according to first screen Height assignment
Value determines the area coordinate of head screen scopes, then chooses node coordinate and first screen in node element coordinate relation table successively again
Range areas compares, if the regional extent of the two has intersection, it is considered that this node element passes through in the range of head screens
Node element is carried out after once traveling through, we just obtain the element resource url of all displays in the range of first screen, are configured to
The url set of resource element in the range of one first screen；
(8), in the range of head screens in set of resource elements, according to node element coordinate and deadline relation table, successively
The element for finally completing loading is searched, the time that the loading of this element is completed is that our the first screens to be calculated render completely
The value of time.
The present invention can more accurately test out the sense of reality that user browses webpage, improve the standard of the first screen display of webpage
Exactness, all elements more accurately tested in the range of screen of informing against render true moment during completion completely；Pass through the present invention
The time tested out is exactly all in the range of the time that element all in the range of first screen renders completion completely, that is, first screen
The time that element display is completed, all elements in the range of first screen that exactly user with the naked eye can see at this time all render completion
Time.
Description of the drawings
The present invention will be further described in detail below with reference to the accompanying drawings and specific embodiments.
Fig. 1 is pel element node coordinate of the present invention and deadline relation product process figure.
Fig. 2 calculates complete render time timing diagram for the present invention.
Specific embodiment
When the definition that head shields complete render time is that browser loads webpage, the complete wash with watercolours of content in first screen altitude range
Contaminate the time completed.
The specific implementation step of the present invention is as follows：
Its measuring method mainly has following steps：
1. in a browser during webpage loading, pass through the interface of browser developers instrument, acquisition webpage loading
Element waterfall diagram data, record the time that the loading of each element is completed, and this data be saved in the element container specified.
2. at the time of current web page loads completion, pass through the interface of browser, obtain the complete Dom trees number of current web page
According to the specifying information of each node in Dom trees, in the container for storing Dom trees.
3. the interface provided using rendering engine in browser searches the URL for the resource that each Dom nodes are relied on, and
Current Dom nodes and the corresponding mapping relations of resource Url are established, this mapping relations is stored in a mapping table, table knot
Structure is as follows：
Dom node resource mapping tables
| Key | Value |
| Dom node IDs | Resource Url |
4. the interface provided by browser rendering engine obtains current page and completes completely rendering for moment in loading
Tree, and absolute coordinate of each rendering node in browser window and current rendering node ID are established a mapping relations
Table, table structure are as follows：
Rendering node coordinate map
| Key | Value |
| Rendering node ID | Node displaing coordinate { x, y, width, height } |
5. by the interface of browser rendering engine, lookup each renders the Dom node objects that tree node is relied on, and builds
The mapping relations of vertical Dom nodes and rendering node.Establish the relation mapping table of following relation：
Rendering node and Dom node mapping tables
| Key | Value |
| Rendering node ID | Dom node IDs |
6. according to three relation mapping tables establishing of former steps, finally set up and resource url and render area coordinate
Non- visualization node in relation table, wherein Dom nodes and the anonymous node in (Render) node is rendered because not being related to
Display and resource, ignore here.The final mapping table structure established is as follows：
Resource url and displaing coordinate mapping table
| Key | Value |
| Resource url | Node displaing coordinate { x, y, width, height } |
Resource url and the relational graph of corresponding displaing coordinate and deadline are established, as shown in Figure 1.
7. after node element coordinate and the mapping table of deadline relation is obtained, according to first screen Height assignment
Value determines the area coordinate of head screen scopes, then chooses node coordinate and first screen in node element coordinate relation table successively again
Range areas compares, if the regional extent of the two has intersection, it is considered that this node element passes through in the range of head screens
Node element is carried out after once traveling through, we just obtain the element resource url of all displays in the range of first screen, are configured to
The url set of resource element in the range of one first screen.
8. in set of resource elements in the range of head screens, according to node element coordinate and deadline relation table, look into successively
The element for finally completing loading is looked for, when the time of the loading completion of this element is that our the first screens to be calculated render completely
Between value.The first working timing figure for shielding complete render time of measurement, as shown in Figure 2.
Head screens：The scope of browser window is initialized in a browser.
DOM：The abbreviation of DOM Document Object Model (Document Object Model), abbreviation DOM.
Com：The Component Object Model (ComponentObject Model) is software of the Microsoft for computer industry
Production is more in line with a kind of new software development technique of the behavior exploitation of the mankind.
It renders completely：In the range of specified browser window, it should the state that the content of display is shown completely.
Complete render time defined in the present invention, the method for greatly improving description initial screen time, is embodied in
The following aspects.
1. the opportunity of calculating is advantageous；Because complete render time is the time just calculated at the end of webpage is browsed, this
When the first screen of browser in the range of all the elements all render, and traditional initial screen time is when browser starts loading
The time of real-time testing, it is impossible to ensure that all elements in the range of first screen all load completion.
2. the accuracy of data improves a lot；The time that complete render time calculates is the first screen when the page loads completion
In the range of time for completing of all elements loading, no matter so the element being vertically oriented, the element being also horizontally oriented, all
Through loading completion completely, there is no the load time situation about not accounting for of which element, and our elements for obtaining
Loading deadline oneself record when being loading element inside browser the element deadline, be not us outside browser
Portion actively goes the time arrived by certain frequency queries by oneself, so the complete render time that we calculate is clear in fact
The time that device inside is recorded oneself is look at, greatly improves the accuracy of first screen initial screen time.
The above embodiment is not limitation of the present invention, and the present invention is also not limited to the example above, this technology neck
The variations, modifications, additions or substitutions that the technical staff in domain is made in the range of technical scheme, also belong to this hair
Bright protection domain.
Claims (1)
1. a kind of measure the first method for shielding complete render time of webpage, it is characterised in that：The realization of the method includes following step
Suddenly：
(1), in a browser during webpage loading, by the interface of browser developers instrument, acquisition webpage loads
Element waterfall diagram data records the time that each element loading is completed, and this data is saved in the element container specified；
(2), at the time of current web page loads completion, pass through the interface of browser, obtain the complete Dom trees number of current web page
According to the specifying information of each node in Dom trees, in the container for storing Dom trees；
(3), the interface provided using rendering engine in browser, is searched the URL for the resource that each Dom nodes are relied on, and built
Current Dom nodes and the corresponding mapping relations of resource Url are found, this mapping relations are stored in a mapping table, table structure
It is as follows：
Dom node resource mapping tables
(4), the interface provided by browser rendering engine obtains current page and completes completely rendering for moment in loading
Tree, and absolute coordinate of each rendering node in browser window and current rendering node ID are established a mapping relations
Table, table structure are as follows：
Rendering node coordinate map
(5), by the interface of browser rendering engine, lookup each renders the Dom node objects that tree node is relied on, and establishes
The mapping relations of Dom nodes and rendering node；Establish the relation mapping table of following relation：
Rendering node and Dom node mapping tables
(6), according to three relation mapping tables establishing of former steps, finally set up and resource url and render the pass of area coordinate
It is table, ignores the anonymous node in non-visualization node and the rendering node in Dom nodes, the final mapping table structure of foundation is such as
Under：
Resource url and displaing coordinate mapping table
(7), after the mapping table of node element coordinate and deadline relation is obtained, the value of Height assignment is shielded according to head,
It determines the area coordinate of first screen scope, then chooses the node coordinate in node element coordinate relation table and first screen scope successively again
Region compares, if the regional extent of the two has intersection, it is considered that this node element head screen in the range of, by member
Plain node is carried out after once traveling through, we just obtain the element resource url of all displays in the range of first screen, are configured to one
The url set of resource element in the range of head screens；
(8), in set of resource elements in the range of head screens, according to node element coordinate and deadline relation table, search successively
Finally complete the element of loading, the time that the loading of this element is completed is our complete render times of head screens to be calculated
Value.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510373936.3A CN104899336B (en) | 2015-07-01 | 2015-07-01 | It is a kind of to measure the first method for shielding complete render time of webpage |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510373936.3A CN104899336B (en) | 2015-07-01 | 2015-07-01 | It is a kind of to measure the first method for shielding complete render time of webpage |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN104899336A CN104899336A (en) | 2015-09-09 |
| CN104899336B true CN104899336B (en) | 2018-05-22 |
Family
ID=54031998
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201510373936.3A Active CN104899336B (en) | 2015-07-01 | 2015-07-01 | It is a kind of to measure the first method for shielding complete render time of webpage |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN104899336B (en) |
Families Citing this family (18)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105260406A (en) * | 2015-09-23 | 2016-01-20 | 北京金山安全软件有限公司 | Method and device for determining loading speed of browser |
| CN105373617A (en) * | 2015-11-27 | 2016-03-02 | 中国联合网络通信集团有限公司 | Web page first screen determination method and apparatus |
| CN106445809B (en) * | 2016-08-30 | 2019-04-05 | 北京华恒铭圣科技发展有限责任公司 | A kind of first screen time delay method of acquisition webpage load |
| CN108984384A (en) * | 2017-06-01 | 2018-12-11 | 中国电信股份有限公司 | Webpage head screen time-delay measuring method, device and system |
| CN107885645B (en) * | 2017-10-31 | 2020-06-23 | 阿里巴巴集团控股有限公司 | Method and device for calculating rendering duration of first screen of page and electronic equipment |
| CN108322359A (en) * | 2018-01-08 | 2018-07-24 | 阿里巴巴集团控股有限公司 | A kind of acquisition methods and device of page initial screen time |
| CN108228463B (en) * | 2018-01-10 | 2021-09-21 | 百度在线网络技术（北京）有限公司 | Method and device for detecting first screen time |
| CN108671547A (en) * | 2018-04-24 | 2018-10-19 | 腾讯科技（深圳）有限公司 | A kind of method, apparatus and storage medium of the initial screen time obtaining application |
| CN108595652A (en) * | 2018-04-27 | 2018-09-28 | 平安科技（深圳）有限公司 | Load method, apparatus, computer equipment and the storage medium of DOM node data |
| CN109039715A (en) * | 2018-07-17 | 2018-12-18 | 中国联合网络通信集团有限公司 | User's web page browsing experience evaluation method and system, network base station configuration method |
| CN109271600B (en) * | 2018-08-16 | 2022-02-22 | 微梦创科网络科技（中国）有限公司 | Method, system and device for monitoring performance data |
| CN111258877B (en) * | 2018-11-30 | 2023-05-02 | 阿里巴巴集团控股有限公司 | Method and device for detecting visible time of first screen page and electronic equipment |
| CN109740093A (en) * | 2018-12-26 | 2019-05-10 | 无线生活(北京)信息技术有限公司 | The determination method and device of initial screen time |
| CN110781427A (en) * | 2019-10-30 | 2020-02-11 | 北京博睿宏远数据科技股份有限公司 | A calculation method, device, device and storage medium for time above the fold |
| CN111061607A (en) * | 2019-11-25 | 2020-04-24 | 贝壳技术有限公司 | Monitoring method and monitoring device for white screen of page |
| CN111124530B (en) * | 2019-11-25 | 2023-06-02 | 北京博睿宏远数据科技股份有限公司 | Method and device for calculating first rendering time of browser, browser and storage medium |
| CN111061633B (en) * | 2019-12-05 | 2024-04-30 | 北京达佳互联信息技术有限公司 | Webpage first screen time detection method, device, terminal and medium |
| CN117171469A (en) * | 2022-09-22 | 2023-12-05 | 深圳Tcl新技术有限公司 | Web page indicator information acquisition method, device, computer equipment and storage medium |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US6981211B1 (en) * | 1999-09-30 | 2005-12-27 | International Business Machines Corporation | Method for processing a document object model (DOM) tree using a tagbean |
| US7207000B1 (en) * | 2000-02-24 | 2007-04-17 | International Business Machines Corporation | Providing dynamic web pages by separating scripts and HTML code |
| WO2014048489A1 (en) * | 2012-09-28 | 2014-04-03 | Telefonaktiebolaget L M Ericsson (Publ) | Measuring web page rendering time |
| CN103777939A (en) * | 2013-03-18 | 2014-05-07 | 北京基调网络系统有限公司 | Method for measuring webpage first screen time |
| CN104239206A (en) * | 2014-09-17 | 2014-12-24 | 可牛网络技术（北京）有限公司 | Webpage test method and device |
-
2015
- 2015-07-01 CN CN201510373936.3A patent/CN104899336B/en active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US6981211B1 (en) * | 1999-09-30 | 2005-12-27 | International Business Machines Corporation | Method for processing a document object model (DOM) tree using a tagbean |
| US7207000B1 (en) * | 2000-02-24 | 2007-04-17 | International Business Machines Corporation | Providing dynamic web pages by separating scripts and HTML code |
| WO2014048489A1 (en) * | 2012-09-28 | 2014-04-03 | Telefonaktiebolaget L M Ericsson (Publ) | Measuring web page rendering time |
| CN103777939A (en) * | 2013-03-18 | 2014-05-07 | 北京基调网络系统有限公司 | Method for measuring webpage first screen time |
| CN104239206A (en) * | 2014-09-17 | 2014-12-24 | 可牛网络技术（北京）有限公司 | Webpage test method and device |
Also Published As
| Publication number | Publication date |
|---|---|
| CN104899336A (en) | 2015-09-09 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN104899336B (en) | It is a kind of to measure the first method for shielding complete render time of webpage | |
| CN103777939B (en) | A kind of method for measuring initial screen time of webpage | |
| US8527936B2 (en) | Method and system for implementing graphical analysis of hierarchical coverage information using treemaps | |
| CN103324521A (en) | Method for measuring initial screen time of webpage | |
| CN106776615B (en) | Thermodynamic diagram generation method and device | |
| CN104899146B (en) | Software stability testing method and device based on image matching technology | |
| US20150347528A1 (en) | Pixel-aware query rewriting | |
| CN106846122A (en) | Commodity data treating method and apparatus | |
| CN107918575B (en) | Page state monitoring method and device | |
| CN109101410A (en) | A kind of risk driven test method and device and computer readable storage medium | |
| CN106161133A (en) | The method of testing of a kind of web page loading time and device | |
| CN105069169B (en) | A kind of detection method and device of website mirroring | |
| CN111247517B (en) | An image processing method, device and system | |
| CN109977952A (en) | Candidate target detection method based on local maximum | |
| CN102866885B (en) | Method and device for confirming clicking position in webpage | |
| CN104462445A (en) | Webpage access data processing method and webpage access data processing device | |
| CN110309049A (en) | Web page contents monitor method, device, computer equipment and storage medium | |
| CN106708896A (en) | ECharts map displaying method and device | |
| CN109753710A (en) | A kind of check of drawings method, apparatus, system and the readable storage medium storing program for executing of component design drawing | |
| CN106323266B (en) | Method and device for processing point of interest position information | |
| WO2017107797A1 (en) | Method and device for displaying network products on product shelf | |
| CN110160459A (en) | Based on the method for improving light stream field theory extraction speckle interference fringe pattern deformation phase | |
| CN105138311B (en) | A kind of method and device for improving graphic plotting efficiency | |
| CN109522494A (en) | A kind of dark chain detection method, device, equipment and computer readable storage medium | |
| CN104408133B (en) | The display methods and device of the thermodynamic chart in web page interlinkage region |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| CB02 | Change of applicant information |
Address after: 100020 Beijing City, Chaoyang District Hing Building 6, room 702, block B Applicant after: Beijing Bo Hongyuan data Polytron Technologies Inc Address before: 100020 Beijing City, Chaoyang District Hing Building 6, room 702, block B Applicant before: BEIJING BONREE HONGYUAN TECHNOLOGY DEVELOPMENT CO., LTD. |
|
| COR | Change of bibliographic data | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |