CN104899336A - Method for measuring full rendering time of front page of webpage - Google Patents

Method for measuring full rendering time of front page of webpage Download PDF

Info

Publication number
CN104899336A
CN104899336A CN201510373936.3A CN201510373936A CN104899336A CN 104899336 A CN104899336 A CN 104899336A CN 201510373936 A CN201510373936 A CN 201510373936A CN 104899336 A CN104899336 A CN 104899336A
Authority
CN
China
Prior art keywords
node
mapping
dom
resource
time
Prior art date
Application number
CN201510373936.3A
Other languages
Chinese (zh)
Other versions
CN104899336B (en
Inventor
赵栋
Original Assignee
北京博睿宏远科技发展有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 北京博睿宏远科技发展有限公司 filed Critical 北京博睿宏远科技发展有限公司
Priority to CN201510373936.3A priority Critical patent/CN104899336B/en
Publication of CN104899336A publication Critical patent/CN104899336A/en
Application granted granted Critical
Publication of CN104899336B publication Critical patent/CN104899336B/en

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING; COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation
    • G06F16/9574Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching

Abstract

The invention discloses a method for measuring full rendering time of a front page of a webpage. The method includes the steps of building a mapping relation between resource elements and nodes of a render tree via URL (uniform resource locator), and storing the mapping relation in a mapping table; according to the mapping table, calculating a URL set of the resource elements within the front page; in the URL set of the resource elements within the front page, according to a relational table of coordinates of element nodes and completion time, calculating the elements finally loaded. The method has the advantages that the tree feeling of users browsing the webpage can be more accurately tested, the accuracy of displaying the front page of the webpage is improved, the true time of completion for full rendering of all elements within the front page is accurately tested, the tested time is the time when all elements within the front page are fully rendered, namely the time when all elements within the front page are fully displayed, and the time is the time when the first page of the web opens and which the user truly feels with eyes.

Description

A kind of method measuring the complete render time of webpage head screen

Technical field

The present invention relates to a kind of measuring method, particularly relate to a kind of method measuring the complete render time of webpage head screen.

Background technology

In current application performance management platforms (APM), describing an important indicator of a web site performance is exactly that the head of website shields performance, and first screen performance is not because be the criterion behavior and structure that in W3C specified standard, webpage should have.So Ge great browser manufacturer does not design relevant interface and the event of shielding performance for head in the event handling of browser yet, but for the developer of webpage and the viewer of webpage, this performance but can react the subjective feeling to user when a webpage is opened very really.For this demand, each large performance management platforms both increases such index, i.e. first screen performance, and it refers to when webpage is played up, and first screen interior element plays up the time highly reaching specified altitude assignment.Its main computing method are: user plays up the Com interface of height by the inquiry that browser provides, with a fixing period frequency, initiatively must go to obtain the value that current browser plays up height, the head that relatively this value and user specify shields the value of height, if playing up of inquiring highly is greater than the value of first screen height, just think that this time of inquire about shields the value of performance headed by being.

Although calculate this to refer to that calibration method is varied, the head that current various algorithm calculates shields the time and mainly contains following shortcoming:

1. the value of first screen performance deposits error; The computing method of first screen performance are when browsing webpage, real-time query current browser play up height, and the friendly that modern browser uses in order to adding users, play up and generally adopt batch, large-area strategy of playing up, this with regard to cause the head inquired shield height beating property of value larger, the value such as inquired may be the value of following sequence: 0,0,500,1800,1800 (units: pixel).If to shield be highly 600 pixels to we head of setting, then what we can only be similar to choose, and we find that to play up be highly moment of 1800 pixels shield performance as our head, and this shields the very large error of the value existence of performance with regard to causing our head.

2. whether the content that the index of first screen performance cannot describe within the scope of current first screen is accurately played up complete; Because of headed by shield performance computing method are Dom interfaces by browser, the current longitudinal direction playing up window of real-time query plays up height, and the data laterally played up are irrespective, this just causes playing up in altitude range what specify, the content in possibility left side has been played up complete, and the content on right side does not also start to play up, thus cannot react accurately inform against screen play up the complete time completely.

3. the computing method defectiveness of first screen performance; The computing method of shielding performance headed by cause are the Dom interfaces that we are provided by browser, with certain period frequency initiatively go Query Browser current play up height, if and the setting of this period frequency is not too suitable, the moment that cycle oversize words will cause us to inquire value is not the moment that browser inside is truly rendered into this height, will cause depositing very large error.

Summary of the invention

In order to solve the weak point existing for above-mentioned technology, the invention provides a kind of mobile phone A PP performance data acquisition method based on intercepting api calls technology.

In order to solve above technical matters, the technical solution used in the present invention is: a kind of method measuring the complete render time of webpage head screen, and the realization of method comprises the following steps:

(1) in the process that webpage loads, in a browser, by the interface of browser developers instrument, gather the element Waterfall plot data that webpage loads, record the time that each element has loaded, and these data are saved in the element container of specifying;

(2), when current web page has loaded, by the interface of browser, obtain the complete Dom of current web page and set data, the specifying information of each node in Dom tree, be stored in the container of Dom tree;

(3) interface that in browser, render engine provides, is utilized, search the URL of the resource that each Dom node relies on, and set up current Dom node and mapping relations corresponding to resource Url, these mapping relations are stored in a mapping table, and list structure is as follows:

Dom node resource mapping table

Key Value Dom node ID Resource Url

(4), by interface that browser renders engine provides, obtain current page and load the complete render tree in moment, and the absolute coordinates of each rendering node in browser window and current rendering node ID are set up a mapping relations table, list structure is as follows:

Rendering node coordinate map

Key Value Rendering node ID Node displaing coordinate { x, y, width, height}

(5), in the interface, by browser renders engine, search the Dom node object that each render tree node relies on, and set up the mapping relations of Dom node and rendering node; Set up the relation mapping table of following relation:

Rendering node and Dom node mapping table

Key Value Rendering node ID Dom node ID

(6), according to three relation mapping table that it former step is set up, finally set up resource url and the relation table playing up area coordinate, wherein the non-visualizes nodes in Dom node and the anonymous node in rendering node be not because relate to display and resource, and the final mapping table structure of foundation is as follows:

Resource url and displaing coordinate mapping table

Key Value Resource url Display node coordinate { x, y, width, height}

(7), after the mapping table obtaining node element coordinate and deadline relation, the value of Height assignment is shielded according to head, determine the area coordinate of first screen scope, and then the node coordinate chosen successively in node element coordinate relation table compares with first screen range areas, if the regional extent of the two has common factor, then we think that this node element shields in scope at head, after node element is once traveled through, we just obtain the element resource url of all displays within the scope of first screen, are configured to the url set of resource element within the scope of a first screen;

(8), to shield in scope in set of resource elements at head, according to node element coordinate and deadline relation table, search the element finally completing loading successively, the time that the loading of this element completes is the value that head that we will calculate shields complete render time.

The present invention can test out the sense of reality that user browses webpage more accurately, improves the accuracy that the first screen display of webpage is shown, tests the true moment when all elements of informing against within the scope of screen has been played up completely more accurately; The time tested out by the present invention is exactly the time that elements all within the scope of first screen has been played up completely, the time that namely within the scope of first screen, all elements have shown, the time that all elements now just within the scope of the head screen that with the naked eye can see of user has all been played up.

Accompanying drawing explanation

Below in conjunction with the drawings and specific embodiments, the present invention is further detailed explanation.

Fig. 1 is figure element node coordinate of the present invention and deadline relation product process figure.

Fig. 2 is that the present invention calculates complete render time timing diagram.

Embodiment

When the complete render time of first screen is defined as browser Web page loading, the time that the content of shielding in altitude range at head has been played up completely.

Specific embodiment of the invention step is as follows:

Its measuring method mainly contains following step:

1., in the process that webpage loads in a browser, by the interface of browser developers instrument, gather the element Waterfall plot data that webpage loads, record the time that each element has loaded, and these data are saved in the element container of specifying.

2. when current web page has loaded, by the interface of browser, obtain the complete Dom of current web page and set data, the specifying information of each node in Dom tree, be stored in the container of Dom tree.

3. utilize the interface that in browser, render engine provides, search the URL of the resource that each Dom node relies on, and set up current Dom node and mapping relations corresponding to resource Url, these mapping relations are stored in a mapping table, and list structure is as follows:

Dom node resource mapping table

Key Value Dom node ID Resource Url

4. by interface that browser renders engine provides, obtain current page and load the complete render tree in moment, and the absolute coordinates of each rendering node in browser window and current rendering node ID are set up a mapping relations table, list 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 renders engine, search the Dom node object that each render tree node relies on, and set up the mapping relations of Dom node and rendering node.Set up the relation mapping table of following relation:

Rendering node and Dom node mapping table

Key Value Rendering node ID Dom node ID

6. according to three relation mapping table that it former step is set up, finally set up resource url and the relation table playing up area coordinate, non-visualizes nodes wherein in Dom node and the anonymous node played up in (Render) node show and resource because do not relate to, and ignore here.The final mapping table structure set up is as follows:

Resource url and displaing coordinate mapping table

Key Value Resource url Display node coordinate { x, y, width, height}

Set up the displaing coordinate of resource url and correspondence and the graph of a relation of deadline, as shown in Figure 1.

7. after the mapping table obtaining node element coordinate and deadline relation, the value of Height assignment is shielded according to head, determine the area coordinate of first screen scope, and then the node coordinate chosen successively in node element coordinate relation table compares with first screen range areas, if the regional extent of the two has common factor, then we think that this node element shields in scope at head, after node element is once traveled through, we just obtain the element resource url of all displays within the scope of first screen, are configured to the url set of resource element within the scope of a first screen.

8. shield in scope in set of resource elements at head, according to node element coordinate and deadline relation table, search the element finally completing loading successively, the time that the loading of this element completes is the value that head that we will calculate shields complete render time.Measure the working timing figure of the complete render time of first screen, as shown in Figure 2.

First screen: the scope of window is browsed in initialization in a browser.

DOM: the abbreviation of DOM Document Object Model (Document Object Model), is called for short DOM.

Com: the Component Object Model (ComponentObject Model) is Microsoft in order to the software setup of computer industry meets a kind of new software development technique of the behavior exploitation of the mankind more.

Play up completely: within the scope of the browser window of specifying, the state that the content that should show shows completely.

The complete render time that the present invention defines, improves the method describing the first screen time greatly, is embodied in the following aspects.

1. calculating has superiority opportunity; Because render time is the time just calculated at the end of browsing webpage completely, all the elements now within the scope of the first screen of browser are all played up, and traditional head shields the time that the time is the real-time testing when browser starts to load, can not ensure that all elements within the scope of first screen has all loaded.

2. the accuracy of data improves a lot, the time that complete render time calculates is the time that within the scope of first screen, all elements has loaded when the page has loaded, so be no matter the element of vertical direction, or the element of horizontal direction, all load completely, the situation that its load time that there is not which element is not considered, and we is the element deadline of browser inside oneself record when loading element loading deadline of element that obtain, not that we outside by initiatively going the time arrived by certain frequency queries at browser ourselves, so the complete render time that we calculate is the time that browser inside is recorded oneself in fact, greatly improve the accuracy of first screen first screen time.

Above-mentioned embodiment is not limitation of the present invention; the present invention is also not limited in above-mentioned citing; the change that those skilled in the art make within the scope of technical scheme of the present invention, remodeling, interpolation or replacement, also all belong to protection scope of the present invention.

Claims (1)

1. measure a method for the complete render time of webpage head screen, it is characterized in that: the realization of described method comprises the following steps:
(1) in the process that webpage loads, in a browser, by the interface of browser developers instrument, gather the element Waterfall plot data that webpage loads, record the time that each element has loaded, and these data are saved in the element container of specifying;
(2), when current web page has loaded, by the interface of browser, obtain the complete Dom of current web page and set data, the specifying information of each node in Dom tree, be stored in the container of Dom tree;
(3) interface that in browser, render engine provides, is utilized, search the URL of the resource that each Dom node relies on, and set up current Dom node and mapping relations corresponding to resource Url, these mapping relations are stored in a mapping table, and list structure is as follows:
Dom node resource mapping table
Key Value Dom node ID Resource Url
(4), by interface that browser renders engine provides, obtain current page and load the complete render tree in moment, and the absolute coordinates of each rendering node in browser window and current rendering node ID are set up a mapping relations table, list structure is as follows:
Rendering node coordinate map
Key Value Rendering node ID Node displaing coordinate x, y, width, height)
(5), in the interface, by browser renders engine, search the Dom node object that each render tree node relies on, and set up the mapping relations of Dom node and rendering node; Set up the relation mapping table of following relation:
Rendering node and Dom node mapping table
Key Value Rendering node ID Dom node ID
(6), according to three relation mapping table that it former step is set up, finally set up resource url and the relation table playing up area coordinate, wherein the non-visualizes nodes in Dom node and the anonymous node in rendering node be not because relate to display and resource, and the final mapping table structure of foundation is as follows:
Resource url and displaing coordinate mapping table
Key Value Resource url Display node coordinate x, y, width, height)
(7), after the mapping table obtaining node element coordinate and deadline relation, the value of Height assignment is shielded according to head, determine the area coordinate of first screen scope, and then the node coordinate chosen successively in node element coordinate relation table compares with first screen range areas, if the regional extent of the two has common factor, then we think that this node element shields in scope at head, after node element is once traveled through, we just obtain the element resource url of all displays within the scope of first screen, are configured to the url set of resource element within the scope of a first screen;
(8), to shield in scope in set of resource elements at head, according to node element coordinate and deadline relation table, search the element finally completing loading successively, the time that the loading of this element completes is the value that head that we will calculate shields complete render time.
CN201510373936.3A 2015-07-01 2015-07-01 It is a kind of to measure the first method for shielding complete render time of webpage CN104899336B (en)

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 true CN104899336A (en) 2015-09-09
CN104899336B CN104899336B (en) 2018-05-22

Family

ID=54031998

Family Applications (1)

Application Number Title Priority Date Filing Date
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

Country Status (1)

Country Link
CN (1) CN104899336B (en)

Cited By (5)

* Cited by examiner, † Cited by third party
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
CN106445809A (en) * 2016-08-30 2017-02-22 北京华恒铭圣科技发展有限责任公司 Method for obtaining webpage loading first screen time delay
CN107885645A (en) * 2017-10-31 2018-04-06 阿里巴巴集团控股有限公司 Calculate method, apparatus and electronic equipment that the first screen of the page renders duration
CN109740093A (en) * 2018-12-26 2019-05-10 无线生活(北京)信息技术有限公司 The determination method and device of initial screen time

Citations (5)

* Cited by examiner, † Cited by third party
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

Patent Citations (5)

* Cited by examiner, † Cited by third party
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

Cited By (6)

* Cited by examiner, † Cited by third party
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
CN106445809A (en) * 2016-08-30 2017-02-22 北京华恒铭圣科技发展有限责任公司 Method for obtaining webpage loading first screen time delay
CN106445809B (en) * 2016-08-30 2019-04-05 北京华恒铭圣科技发展有限责任公司 A kind of first screen time delay method of acquisition webpage load
CN107885645A (en) * 2017-10-31 2018-04-06 阿里巴巴集团控股有限公司 Calculate method, apparatus and electronic equipment that the first screen of the page renders duration
CN109740093A (en) * 2018-12-26 2019-05-10 无线生活(北京)信息技术有限公司 The determination method and device of initial screen time

Also Published As

Publication number Publication date
CN104899336B (en) 2018-05-22

Similar Documents

Publication Publication Date Title
Waltman et al. On the calculation of percentile‐based bibliometric indicators
US9411782B2 (en) Real time web development testing and reporting system
CN107402990B (en) Distributed New SQL database system and semi-structured data storage method
US8959104B2 (en) Presenting query suggestions based upon content items
CN103455396B (en) The method of testing of electronic equipment hardware performance and device
US8135731B2 (en) Administration of search results
JP6430020B2 (en) Web page loading method and system
DE102012210794A1 (en) System and method for data quality monitoring
US8527936B2 (en) Method and system for implementing graphical analysis of hierarchical coverage information using treemaps
US20160241656A1 (en) Method and system for tracking web link usage
CN102609256B (en) A kind of Dynamic Graph table generating method based on webpage
JP2016520936A5 (en)
US9865005B1 (en) Unified content visibility and video content monitoring
CN103678307B (en) Page display method and client
CN102479151B (en) Testing method and device of webpage access speed
CN102629273B (en) Advertising information pushing method based on browser, device and browser system
CN102004756B (en) Traffic visualization across web maps
KR20140012664A (en) Method for rearranging web page
US20120204094A1 (en) Application above-the-fold rendering measurements
CN103685604B (en) A kind of domain name pre-parsed method and device
Jati et al. Quality evaluation of e-government website using web diagnostic tools: Asian case
CN102915375B (en) A kind of webpage loading method based on layout subregion
WO2012103439A2 (en) Rule-based validation of websites
JP5917542B2 (en) Evaluation score for online store
JP2009252070A (en) Method for calculating score for search query

Legal Events

Date Code Title Description
PB01 Publication
C06 Publication
SE01 Entry into force of request for substantive examination
C10 Entry into 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