CN103777939B - A kind of method for measuring initial screen time of webpage - Google Patents

A kind of method for measuring initial screen time of webpage Download PDF

Info

Publication number
CN103777939B
CN103777939B CN201310085482.0A CN201310085482A CN103777939B CN 103777939 B CN103777939 B CN 103777939B CN 201310085482 A CN201310085482 A CN 201310085482A CN 103777939 B CN103777939 B CN 103777939B
Authority
CN
China
Prior art keywords
page
screen
height
browser
event
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
Application number
CN201310085482.0A
Other languages
Chinese (zh)
Other versions
CN103777939A (en
Inventor
甄志会
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing keynote Network Inc.
Original Assignee
NETWORKBENCH SYSTEMS CORP
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 NETWORKBENCH SYSTEMS CORP filed Critical NETWORKBENCH SYSTEMS CORP
Priority to CN201310085482.0A priority Critical patent/CN103777939B/en
Publication of CN103777939A publication Critical patent/CN103777939A/en
Application granted granted Critical
Publication of CN103777939B publication Critical patent/CN103777939B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Landscapes

  • Debugging And Monitoring (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

The invention discloses a kind of computational methods of the page initial screen time based on rendering engine event.Methods described comprises the following steps:The current state information for rendering event, obtaining the page by DOM methods in event is rendered of browser rendering engine is caught by ad hoc approach, when page status are not less than particular state, is continued, otherwise returned and catch;Page actual height is obtained by DOM methods in browser renders event, when height of the page actual height not less than first screen region, is continued, otherwise returned and catch;The current scope for rendering region is obtained in browser renders event, if currently render region in the range of head screens, is continued, otherwise return to seizure;The screen picture of current page is obtained, judges whether the first screen of the page is filled according to screen picture, if not being filled, that continues monitoring rendering engine renders event, if being filled, initial screen time numerical value is recorded, and stop catching browser rendering engine and render event.

Description

A kind of method for measuring initial screen time of webpage
Technical field
The invention belongs to automatic test field, in particular it relates to a kind of method for measuring initial screen time of webpage, It can be applied in browser rendering engine, the automatic test of page load performance or performance monitoring.
Background technology
Access of the user to website, is realized based on the webpage acquired in browser.Generally, a Website page is complete After full loaded, total page height is from a screen to more than ten screens, and total load time is more long very than the head screen content load times It is many.From for Consumer's Experience angle, initial screen time is user to an important factors of experience for website loading performance.When the page fills During full first screen region, it is seen that content and the operation such as clicked on, rolled for user, without when all the elements All loadeds.Therefore, since user initiates access, to this period of head screen content loadeds, to Consumer's Experience Speech is most important.Generally, website is referred to as initial screen time by the full frame region of browser full of the required time.In order to accessing Website and some local parameters are weighed in journey, it usually needs initial screen time is measured.
Page performance monitoring is, based on browser application process (IE, firefox, chrome etc.), to be opened for the page A series of performance tests of exhibition, combine the performance indications of Internet, session layer, application layer;Page performance monitoring is to browsing The basic means that device behavior is characterized, quantified to indices.
Rendering engine is responsible for representing content (such as HTML, XML, picture etc.) in browser software and arranges information (such as CSS, html tag etc.), and format the content into output.Rendering engine obtains the content for asking document by network first, Then completed by parsing html, building dom trees, structure render trees, layout render trees, the several steps of drafting render trees Content of pages represents.In order to obtain more preferable Consumer's Experience, this process is gradually completing, and browser rendering engine can be use up Early content may be presented on screen, can't go to build and be laid out again after all of html is parsed Render trees.Rendering engine has parsed a part of content and has just shown a part of content, meanwhile, also downloaded in remaining by network Hold.For a user, the page is not disposably all to be shown on screen, but loads in batches and show, when the page fills During full first screen region, user just with browsing content and can be clicked on, roll etc. and to operate.Automatic test and monitoring of software are The performance indications of browser initial screen time are obtained, it is necessary to the in real time and accurately render process of monitoring browser rendering engine.
The usual method that prior art solves the above problems is the screen picture for using the timer timing acquisition page, then Point by point scanning line by line carries out pixel ratio pair, accumulative to be not equal to white-based color when pixel color numerical value is not equal to white-based color Whether pixel quantity, while comparing the pixel color of key point on the page, filled by the first screen of the conditions above comprehensive descision page It is full.
The above method has following shortcoming:(1) the method is the triggering based on timer, timing in windows systems Device full accuracy is 55ms, there is certain error in certainty of measurement;(2) operation for obtaining screen picture consumes internal memory and CPU Compare many, high-frequency obtains screen picture in hardware configuration than that can influence the performance of browser process on relatively low machine, that is, draw Entering monitoring causes measurement result and actually has than larger deviation;(3) in addition, the method does not account for page layout background color, user The influence of self-defined windows appearance colors, the measurement result produced on the special page in part may be with user's naked eyes Observation result is inconsistent.(4) the need for the page of part website is due to typesetting, content, wrapped near the first screen height of the page just Containing a large amount of blank, when actual initial screen time is reached, software thinks that first screen region is not still completely filled with perhaps without in.
The content of the invention
In view of the above problems, it is simultaneous it is an object of the invention to provide a kind of low consumption, high efficiency, time precision high, vision high The performance index calculation method for measuring page initial screen time of capacitive.
In order to solve the above-mentioned technical problem, the present invention proposes a kind of page initial screen time based on rendering engine event Computational methods, as shown in figure 1, including step:
(1) event is rendered by certain ad hoc approach seizure browser rendering engine;
(2) current state information of the page is obtained by DOM methods in browser renders event, when page status are not small When particular state, continue step (3), any judgement is not carried out otherwise;
(3) page actual height is obtained by DOM methods in browser renders event, when page actual height is not less than During the height in head screens region, continue step (4), any judgement is not carried out otherwise;
(4) the current scope for rendering region is obtained in browser renders event, if the current region that renders is in head screen models When enclosing interior, continue step (5), any judgement is not carried out otherwise;
(5) screen picture of current page is obtained;
(6) judge whether the first screen of the page is filled according to screen picture, if the underfill of first screen, continues to monitor rendering engine Render event;When the first screen of the page is already filled with, initial screen time numerical value is recorded, stop catching rendering for browser rendering engine Event.
In wherein described step (1) ad hoc approach refer to different types of browser because framework is different with implementation method, Capture renders event a different implementation methods, and what technological means depended on browser realizes framework.
Particular state refers to the state LOADING in the state constant table of W3C tissue definition in the step (2), with reference to text Offer《http://www.w3.org/TR/XMLHttpRequest/》.
The step (6) realizes the specific logic for judging that initial screen time is reached, as shown in Fig. 2 comprising the following steps:
(61) adjustment judges the height of foundation in first screen region;
(62) obtain the primary colours list that first screen judges, including pure white, User Defined windows appearance colors, Multiple key point coordinates colors;
(63) pixel of the circulation page height of foundation nearby and near key point so that each pixel is carried out with primary colours list Compare, when color is mismatched in pixel value and primary colours list, accumulated pixel points;
(64) when accumulated pixel points are more than specific threshold, it is believed that the first screen of the page is already filled with.
Also include in the step (61):Shield height headed by acquiescence height of foundation, blank is exactly near height of foundation When, height of foundation moves down specific pixel, and mobile total drift amount can not exceed maximum magnitude, first screen is rolled back to if exceeding Highly, as shown in Figure 3.
Background colour and key point coordinate information defined in the step (62), the selection rule of key point is left in screen Upper, left, left and right, a middle left side, center, the middle right side, bottom left, it is lower in, 9 key points of bottom right, as shown in Figure 4.
Rhombus inclined wire trellis sparsely scanning algorithm is taken in circulation in the step (63), and grid interval is according to page font Pixel value determination, saves sweep time, as shown in Figure 5 as far as possible.
Measuring method of the present invention renders event-driven by browser rendering engine, improve certainty of measurement and Efficiency, and by rendering event in browser in by DOM methods obtain the page current state information and page actual height, Scope, improves measurement efficiency;By the way that when the first screen state of screen picture is judged, dynamic adjustment head shields the basis of Rule of judgment Highly, multipoint acquisition background colour and key point information and use rhombus inclined wire trellis sparsely scanning algorithm, improve vision simultaneous Capacitive and measurement efficiency.
Brief description of the drawings
Fig. 1 is the flow chart for measuring the method for initial screen time of webpage of the present invention.
Fig. 2 is the step of present invention judges first screen state by image schematic diagram.
Fig. 3 is the schematic diagram of the height of foundation dynamic fluctuation in the present invention.
Fig. 4 is the schematic diagram that the present invention chooses key point.
Fig. 5 is the schematic diagram of rhombus inclined wire trellis sparsely scanning result of the present invention.
Specific embodiment
Method of the present invention is described in detail below in conjunction with the accompanying drawings.
The invention provides a kind of low consumption, high efficiency, time precision high, vision high compatibility it is first for measuring the page The performance index calculation method of screen time, the present invention is applied to the meter of the initial screen time performance indications of current all major browsers Calculate, which includes IE, firefox, chrome, safari, opera browser, below in conjunction with accompanying drawing the present invention is made into The detailed description of one step.
In the present invention, Survey Software is attached to browser process or will be clear in the form of host in the form of extension Device control of looking at is loaded into Survey Software process.
Step (1) renders event by certain ad hoc approach seizure browser rendering engine.
When use IE browser as measurement target when, first process of measurement IE controls are loaded into as host measure into In journey, then at the message using the technology of SubClassing window using the message processing function adapter IE controls inside process of measurement Reason function.When browser rendering engine notification screen is drawn, Windows sends WM_ can to the message processing function of IE controls PAINT drawing message, now because process of measurement has taken over message processing function, WM_PAINT drawing message can be forwarded Message processing function inside to process of measurement, internal message processing function calls the message processing function of former IE controls first Real mapping operation is realized, then invocation step (2) is judged and processed to rendering event.
When using Firefox browser as measurement target, content of pages excites corresponding event after being drawn every time, this Individual event is called MozAfterPaint, is excited by document object, bubbling always to window objects.Process of measurement is made first For the form of extension is attached to inside Firefox browser, then using code window.addEventListener (" MozAfterPaint ", onAfterPaint, false) registration Firefox browser renders event.Draw when browser is rendered Hold up after completing actual mapping operation, browser can send MozAfterPaint message to the onAfterPaint of process of measurement Function, process of measurement invocation step 2) judged and processed to rendering event.
Step (2) obtains the current shape of the page in browser renders event by obtaining browser ReadyState methods State information, when page status are not less than LOADING, continues step (3), and any judgement, direct return to step are not carried out otherwise (1)。
Step (3) obtains page reality in browser renders event by obtaining the scrollHeight attributes of page documents Step (4) highly, when height of the page actual height not less than first screen region, is continued in border, any judgement is not carried out otherwise, directly Connect return to step (1).
Step (4) is obtained in browser renders event and currently renders the scope in region, if currently rendering region in head When in the range of screen, continue step (5), any judgement, direct return to step (1) are not carried out otherwise.
When using IE browser as measurement target, need what is drawn when Window detects the capped place of window When, it can send a WM_PAINT message to user program, the region for needing to draw be included in message, then by user Program determines how to draw the content of this scope.After window procedure receives WM_PAINT message, whole client area is not represented It is required for being refreshed, it is possible to which the capped region in client area only has a fritter, and this region is called " inactive area ", The second parameter of windows api function BeginPaint functions is a buffer zone address for pictorial information structure, Windows can herein return to pictorial information structure, position and the size of inactive area be contained in structure, by calling BeginPaint functions, can obtain the current scope for rendering region.
When using Firefox browser as measurement target, MozAfterPaint events provide two attributes: ClientRects and boundingClientRect, the two attributes are used for showing that what scope is repainted, use Two methods of getClientRects and getBoundingClientRect obtain the coordinate range drawn.
Step (5) obtains the screen picture of current page:When using work E browsers as measurement target, use OleDraw functions obtain the screen picture of IE controls.
When using Firefox browser as measurement target, obtain Firefox's using the canvas characteristics of HTML5 Screen picture.
Step (6) judges whether the first screen of the page is filled according to screen picture, if the underfill of first screen, continues monitoring and render Engine renders event.
After obtaining screen picture, adjustment first judges the height of foundation in first screen region, and height is shielded headed by acquiescence height of foundation, Judge however, it was found that when first screen is filled, height of foundation moves down 20 pixels, mobile total drift amount when last time carried out first screen 100 pixels can not be exceeded, if first screen height is rolled back to if, as shown in Figure 3.
The primary colours list that first screen judges is obtained, including pure white, User Defined windows appearance colors, screen Upper left, left, left and right, a middle left side, center, the middle right side, bottom left, it is lower in, 9 key point colors of bottom right, as shown in Figure 4.
Take rhombus inclined wire trellis sparsely scanning algorithm to circulate pixel of the page height of foundation nearby and near key point, make Each pixel is obtained to compare with primary colours list, when color is mismatched in pixel value and primary colours list, accumulated pixel points, As shown in figure 5, when accumulated pixel points are more than specific threshold, it is believed that the first screen of the page is already filled with.
When the first screen of the page is already filled with, initial screen time numerical value is recorded, stop seizure browser rendering engine renders thing Part.
Measuring method of the present invention renders event-driven by browser rendering engine, improve certainty of measurement and Efficiency, and by rendering event in browser in by DOM methods obtain the page current state information and page actual height, Scope, improves measurement efficiency;By the way that when the first screen state of screen picture is judged, dynamic adjustment head shields the basis of Rule of judgment Highly, multipoint acquisition background colour and key point information and use rhombus inclined wire trellis sparsely scanning algorithm, improve vision simultaneous Capacitive and measurement efficiency.
Above content is only presently preferred embodiments of the present invention, to those skilled in the art, according to the utility model Thought, a certain degree of change can be carried out to it in specific implementation and range of application, the content of this specification is not It is interpreted as limitation of the present invention.

Claims (6)

1. a kind of method for measuring initial screen time of webpage, comprises the following steps:
(1) based on current browser, browser rendering engine is caught using the method for being suitable to current browser and renders event;
(2) current state information of the page is obtained by DOM methods in browser renders event, when page status are not less than spy When determining state, continue step (3), any judgement, return to step (1) are not carried out otherwise;
(3) page actual height is obtained by DOM methods in browser renders event, when page actual height is shielded not less than first During the height in region, continue step (4), any judgement, return to step (1) are not carried out otherwise;
(4) the current scope for rendering region is obtained in browser renders event, if the current region that renders is in the range of head screens When, continue step (5), any judgement, return to step (1) are not carried out otherwise;
(5) screen picture of current page is obtained;
(6) page status are judged according to screen picture, it is determined that whether first screen is filled, if the underfill of first screen, continues to monitor wash with watercolours Contaminate engine renders event;When the first screen of the page is already filled with, initial screen time numerical value is recorded, stop catching browser rendering engine Render event, wherein, when page status are judged, the height of foundation of the first screen Rule of judgment of dynamic adjustment, multipoint acquisition background Color and key point information, and using rhombus inclined wire trellis sparsely scanning algorithm circulation page height of foundation nearby and near key point Pixel.
2. the particular state the method for claim 1, wherein in step (2) refers to the state of W3C tissue definition LOADING in constant table.
3. the method for claim 1, wherein step (6) is further included:
(61) adjustment judges the height of foundation in first screen region;
(62) the primary colours list that first screen judges is obtained, including pure white, User Defined windows appearance colors, multiple Crucial point coordinates color;
(63) pixel of the circulation page height of foundation nearby and near key point so that each pixel is compared with primary colours list It is right, when color is mismatched in pixel value and primary colours list, accumulated pixel points;
(64) when accumulated pixel points are more than specific threshold, confirmation page kept man of a noblewoman's screen is already filled with.
4. method as claimed in claim 3, wherein, also include in the step (61):Shield height headed by acquiescence height of foundation, When being exactly blank near height of foundation, height of foundation moves down specific pixel, and mobile total drift amount can not be beyond maximum Scope, height is shielded if head is rolled back to if.
5. method as claimed in claim 3, wherein, background colour and key point coordinate information defined in the step (62), The selection rule of key point be screen upper left, left, left and right, a middle left side, center, the middle right side, bottom left, it is lower in, 9 keys of bottom right Point.
6. method as claimed in claim 3, wherein, rhombus inclined wire trellis sparsely scanning is taken in the circulation in the step (63) Algorithm, grid interval determines according to page font pixel value.
CN201310085482.0A 2013-03-18 2013-03-18 A kind of method for measuring initial screen time of webpage Active CN103777939B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201310085482.0A CN103777939B (en) 2013-03-18 2013-03-18 A kind of method for measuring initial screen time of webpage

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201310085482.0A CN103777939B (en) 2013-03-18 2013-03-18 A kind of method for measuring initial screen time of webpage

Publications (2)

Publication Number Publication Date
CN103777939A CN103777939A (en) 2014-05-07
CN103777939B true CN103777939B (en) 2017-07-04

Family

ID=50570223

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201310085482.0A Active CN103777939B (en) 2013-03-18 2013-03-18 A kind of method for measuring initial screen time of webpage

Country Status (1)

Country Link
CN (1) CN103777939B (en)

Families Citing this family (18)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104394026B (en) * 2014-10-08 2019-02-15 百度在线网络技术(北京)有限公司 The measurement method and device of web page loading time
CN104899336B (en) * 2015-07-01 2018-05-22 北京博睿宏远数据科技股份有限公司 It is a kind of to measure the first method for shielding complete render time of webpage
CN106612198B (en) * 2015-10-26 2019-08-13 中国移动通信集团公司 A kind of test method and device of measure of the quality of service index
CN105760284A (en) * 2016-02-01 2016-07-13 广州酷狗计算机科技有限公司 Website performance monitoring method and device
CN108984384A (en) * 2017-06-01 2018-12-11 中国电信股份有限公司 Webpage head screen time-delay measuring method, device and system
CN109656645A (en) * 2017-10-11 2019-04-19 阿里巴巴集团控股有限公司 Presentation time determines the determination method and device of method and page rendering deadline
CN108322359A (en) * 2018-01-08 2018-07-24 阿里巴巴集团控股有限公司 A kind of acquisition methods and device of page initial screen time
CN110198324B (en) * 2018-02-26 2021-12-14 腾讯科技(深圳)有限公司 Data monitoring method and device, browser and terminal
CN111258877B (en) * 2018-11-30 2023-05-02 阿里巴巴集团控股有限公司 Method and device for detecting visible time of first screen page and electronic equipment
CN110209978B (en) * 2019-01-28 2023-05-16 腾讯科技(深圳)有限公司 Data processing method and related device
CN112417330A (en) * 2019-08-23 2021-02-26 腾讯科技(深圳)有限公司 Page loading method, device, equipment and storage medium
CN110781063B (en) * 2019-10-25 2023-12-05 北京博睿宏远数据科技股份有限公司 Method, device, equipment and storage medium for measuring first screen time of web 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
CN112163175A (en) * 2020-10-14 2021-01-01 南京焦点领动云计算技术有限公司 Speed optimization method for website mobile terminal
CN112669404B (en) * 2020-12-28 2023-11-14 北京达佳互联信息技术有限公司 Image processing method, device, electronic equipment and storage medium
DE202022101830U1 (en) 2022-04-05 2022-05-18 Iftikar Ahmed Wearable medical device for monitoring screen time with Internet of Things sensor
CN117076813B (en) * 2023-10-18 2024-01-23 中国电子科技集团公司第十五研究所 Front-end browser rendering method and device, electronic equipment and storage medium

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101046888A (en) * 2006-03-30 2007-10-03 株式会社东芝 Rendering apparatus and method, and shape data generation apparatus and method
CN102479151A (en) * 2010-11-26 2012-05-30 腾讯科技(深圳)有限公司 Method and device for testing webpage access speed
CN102760133A (en) * 2011-04-28 2012-10-31 腾讯科技(深圳)有限公司 Webpage loading method, webpage loading system, browser, terminal and server
CN102902799A (en) * 2012-10-12 2013-01-30 中科方德软件有限公司 Browser page display method and device based on WebKit

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101046888A (en) * 2006-03-30 2007-10-03 株式会社东芝 Rendering apparatus and method, and shape data generation apparatus and method
CN102479151A (en) * 2010-11-26 2012-05-30 腾讯科技(深圳)有限公司 Method and device for testing webpage access speed
CN102760133A (en) * 2011-04-28 2012-10-31 腾讯科技(深圳)有限公司 Webpage loading method, webpage loading system, browser, terminal and server
CN102902799A (en) * 2012-10-12 2013-01-30 中科方德软件有限公司 Browser page display method and device based on WebKit

Also Published As

Publication number Publication date
CN103777939A (en) 2014-05-07

Similar Documents

Publication Publication Date Title
CN103777939B (en) A kind of method for measuring initial screen time of webpage
CN103324521A (en) Method for measuring initial screen time of webpage
CN104899336B (en) It is a kind of to measure the first method for shielding complete render time of webpage
US10409899B2 (en) Method, device and mobile terminal for processing webpage in night mode
US11657510B2 (en) Automatic sizing and placement of text within a digital image
KR20150091132A (en) Page rendering method and apparatus
TWI671647B (en) Method, device and electronic device for calculating the duration of the first screen of a page
WO2017152762A1 (en) Interface color adjustment method and apparatus, and webpage color adjustment method and apparatus
US11551392B2 (en) Graphic drawing method and apparatus, device, and storage medium
CN110377285A (en) A kind of method, apparatus and computer equipment generating page skeleton screen
CN110209978B (en) Data processing method and related device
CN109165364B (en) Page rendering method, device, equipment and storage medium
CN111694493B (en) Webpage screenshot method, computer equipment and readable storage medium
CN104881273A (en) Webpage rendering analysis method and terminal device
CN106161133A (en) The method of testing of a kind of web page loading time and device
CN110046072A (en) Monitoring method, device, terminal and the readable storage medium storing program for executing of the page
CN105677678B (en) Method and system for determining first screen position of webpage and displaying webpage information
JP5563703B2 (en) Content distribution apparatus, content distribution method, content distribution program, and terminal program
CN111247517B (en) Image processing method, device and system
CN112419456B (en) Special effect picture generation method and device
JP6339550B2 (en) Terminal program, terminal device, and terminal control method
JP4759957B2 (en) Method for creating inspection / measurement program, computer program for creating the program, and apparatus for creating inspection / measurement program
KR101996816B1 (en) Method of measuring web style guide compliance rate in responsive web
KR101836852B1 (en) An End-User Perspective Performance Monitoring Method and System based on Framebuffer Image Recognition
CN113076480B (en) Page recommendation method and device, electronic equipment and medium

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant
CP03 Change of name, title or address

Address after: Room 301, 5 Xiaguangli, Chaoyang District, Beijing 100027

Patentee after: Beijing keynote Network Inc.

Address before: Room 1005, room 125, yunrun building, Chaoyang District, Beijing

Patentee before: NETWORKBENCH SYSTEMS Corp.

CP03 Change of name, title or address