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 PDFInfo
- 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
Links
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
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.
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 (17)
| 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 |
| 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)
| 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 | 腾讯科技（深圳）有限公司 | Testing method and device of 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 |
-
2013
- 2013-03-18 CN CN201310085482.0A patent/CN103777939B/en active Active
Patent Citations (4)
| 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 | 腾讯科技（深圳）有限公司 | Testing method and device of 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 | |
| CN106296779B (en) | A kind of threedimensional model rendering indication method and system | |
| US11657510B2 (en) | Automatic sizing and placement of text within a digital image | |
| KR20150091132A (en) | Page rendering method and apparatus | |
| WO2017152762A1 (en) | Interface color adjustment method and apparatus, and webpage color adjustment method and apparatus | |
| CN110377285A (en) | A kind of method, apparatus and computer equipment generating page skeleton screen | |
| WO2019085598A1 (en) | Method and apparatus for calculating above-the-fold rendering duration of page, and electronic device | |
| US11551392B2 (en) | Graphic drawing method and apparatus, device, and storage medium | |
| CN109165364B (en) | Page rendering method, device, equipment and storage medium | |
| CN110209978B (en) | Data processing method and related device | |
| EP2965290A1 (en) | Data visualization | |
| CN105988793A (en) | Image display method and apparatus used for screen display device | |
| CN110046072A (en) | Monitoring method, device, terminal and the readable storage medium storing program for executing of the page | |
| CN106161133A (en) | The method of testing of a kind of web page loading time and device | |
| CN110471700B (en) | Graphic processing method, apparatus, storage medium and electronic device | |
| CN105677678B (en) | Method and system for determining first screen position of webpage and displaying webpage information | |
| CN111694493A (en) | Webpage screenshot method, computer equipment and readable storage medium | |
| JP5563703B2 (en) | Content distribution apparatus, content distribution method, content distribution program, and terminal program | |
| CN112419456B (en) | Special effect picture generation method and device | |
| CN111247517B (en) | Image processing method, device and system | |
| KR101996816B1 (en) | Method of measuring web style guide compliance rate in responsive web | |
| JP4759957B2 (en) | Method for creating inspection / measurement program, computer program for creating the program, and apparatus for creating inspection / measurement program | |
| JP2016042372A (en) | Program for terminal, terminal device and terminal control method |
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 |