CN104881273A - Webpage rendering analysis method and terminal device - Google Patents
Webpage rendering analysis method and terminal device Download PDFInfo
- Publication number
- CN104881273A CN104881273A CN201410069677.0A CN201410069677A CN104881273A CN 104881273 A CN104881273 A CN 104881273A CN 201410069677 A CN201410069677 A CN 201410069677A CN 104881273 A CN104881273 A CN 104881273A
- Authority
- CN
- China
- Prior art keywords
- rendering parameter
- target frame
- frame
- described target
- hook
- 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.)
- Granted
Links
Landscapes
- Information Transfer Between Computers (AREA)
Abstract
The invention provides a webpage rendering analysis method and a terminal device, and relates to the technical field of the Internet, and can solve the problem that when a webpage is analyzed, the application scope of a heat map is small. The webpage rendering analysis method comprises that after a target webpage is loaded, whether the rendering parameters of the target webpage are intercepted or not is determined, if the rendering parameters of the target webpage are intercepted, the target webpage is provided with a hook, furthermore when the target webpage is rendered through a rendering engine, the rendering parameters used for rendering each frame of the target webpage are obtained through the hook, when the reporting condition is satisfied, the obtained rendering parameters are reported up to a server, the server analyzes the rendering parameters, and a webpage rendering hot map is generated in dependence on the analysis result. The webpage rendering analysis method and the terminal device are used for analyzing the webpage rendering process.
Description
Technical field
The present invention relates to Internet technical field, particularly relate to analytical approach and terminal device that a kind of webpage plays up.
Background technology
In existing web analytics technology, thermal map (Heat Map) is a kind of technology relatively commonly used, thermal map can present some data originally not easily understood or express very intuitively, and such as density, frequency etc., use region instead and this mode more easy to understand of color presents.
At present, in internet industry, for the application of thermal map be mostly limited to analysis to user behavior, usually adopt the degree of concern of different colours depth representing different user, the region that wherein color is darker, represent that user's attention rate is higher.
Such as be applied to the click behavior that user operation mouse is produced, or the research of rolling behavior.Wherein, click in thermal map at mouse, the color in region is darker, and represent that the mouse clicks amount in this region is more, the color in region is more shallow, represents that the mouse clicks amount in this region is fewer.Or, in screen scroll thermal map, the color in region is darker, represent that the residence time of user when browsing in this region is longer, the color in region is more shallow, representing that the residence time of user when browsing in this region is shorter, therefore can present the region that user pays close attention at a glance, thus provide reference frame for the optimization of website and improvement.
As can be seen here, current internet industry is when utilizing thermal map to carry out web page analysis, be only limitted to the research to user behavior, do not relate to the statistical research of other information for webpage or data, the analysis that such as webpage is played up, therefore the Limited information utilizing thermal map to carry out web page analysis at present can to analyze, range of application is little.
Summary of the invention
The analytical approach that embodiments of the invention provide a kind of webpage to play up and terminal device, can solve when carrying out web page analysis, the problem that the range of application of thermal map is little.
For achieving the above object, embodiments of the invention adopt following technical scheme:
On the one hand, embodiments provide the analytical approach that a kind of webpage is played up, described method comprises:
Judge whether the rendering parameter tackling the target web loaded;
If tackle the rendering parameter of described target web, then hook is set for described target web;
Described target web carry out webpage play up time, obtain each frame of drawing described target web rendering parameter used by described hook;
When meeting and reporting the report condition of rendering parameter to server, the rendering parameter obtained is reported to described server, to make rendering parameter described in described server analysis and to play up thermal map according to analysis result generating web page.
On the other hand, the embodiment of the present invention additionally provides a kind of terminal device, and described terminal device comprises:
Judging unit, for judging whether the rendering parameter tackling the target web loaded;
Setting unit, if the rendering parameter for tackling described target web, then arranges hook for described target web;
Play up capturing unit, for carry out at described target web webpage play up time, obtain each frame of drawing described target web rendering parameter used by described hook;
Report unit, for the rendering parameter obtained being reported to described server when meeting and reporting the report condition of rendering parameter to server, to make rendering parameter described in described server analysis and to play up thermal map according to analysis result generating web page.
The analytical approach that the embodiment of the present invention provides a kind of webpage to play up and terminal device, first the rendering parameter tackling the target web loaded is judged whether, if the rendering parameter of interception target webpage, then for target web arranges hook, then by browser kernel to target web carry out webpage play up time, by the rendering parameter that each frame of hook acquisition drafting target web is used, when meeting report condition, the rendering parameter obtained is reported to server, to make server analysis rendering parameter and to play up thermal map according to analysis result generating web page.As can be seen here, compared to existing technologies, adopting said method can obtain the thermal map that play up of webpage according to the rendering parameter of each frame obtained, thus a kind of utilize thermal map to carry out mechanism that webpage plays up analysis is provided, the range of application of thermal map can be expanded when carrying out web page analysis.
Accompanying drawing explanation
In order to be illustrated more clearly in the embodiment of the present invention or technical scheme of the prior art, be briefly described to the accompanying drawing used required in embodiment or description of the prior art below, apparently, accompanying drawing in the following describes is only some embodiments of the present invention, for those of ordinary skill in the art, under the prerequisite not paying creative work, other accompanying drawing can also be obtained according to these accompanying drawings.
The schematic flow sheet of the analytical approach that Fig. 1 plays up for a kind of webpage that the embodiment of the present invention provides;
The schematic flow sheet of the analytical approach that Fig. 2 plays up for the another kind of webpage that the embodiment of the present invention provides;
Fig. 3 is browser structure schematic diagram;
The schematic flow sheet of a kind of rendering parameter acquisition methods that Fig. 4 provides for the embodiment of the present invention;
The schematic flow sheet of the another kind of rendering parameter acquisition methods that Fig. 5 provides for the embodiment of the present invention;
The schematic flow sheet of the another kind of rendering parameter acquisition methods that Fig. 6 provides for the embodiment of the present invention;
The schematic flow sheet of the analytical approach that Fig. 7 plays up for the another kind of webpage that the embodiment of the present invention provides;
The structural representation of a kind of terminal device that Fig. 8 provides for the embodiment of the present invention;
The structural representation of the another kind of terminal device that Fig. 9 provides for the embodiment of the present invention;
The structural representation of the another kind of terminal device that Figure 10 provides for the embodiment of the present invention;
A kind of structural representation playing up the interception unit of capturing unit that Figure 11 provides for the embodiment of the present invention;
The structural representation of the another kind of terminal device that Figure 12 provides for the embodiment of the present invention;
The schematic diagram of the analytic system that Figure 13 plays up for a kind of webpage that the embodiment of the present invention provides.
Embodiment
Below in conjunction with the accompanying drawing in the embodiment of the present invention, be clearly and completely described the technical scheme in the embodiment of the present invention, obviously, described embodiment is only the present invention's part embodiment, instead of whole embodiments.Based on the embodiment in the present invention, those of ordinary skill in the art, not making the every other embodiment obtained under creative work prerequisite, belong to the scope of protection of the invention.
The analytical approach that the present embodiment provides a kind of webpage to play up, as shown in Figure 1, the method comprises:
101, the rendering parameter of interception target webpage is judged whether.If the rendering parameter of interception target webpage, then perform 102, if the rendering parameter of not interception target webpage, then directly perform and by browser kernel, webpage is carried out to target web and play up.
102, for target web arranges hook.
103, target web carry out webpage play up time, obtained by hook and draw each frame of target web rendering parameter used.
104, when meeting and reporting the report condition of rendering parameter to server, the rendering parameter obtained is reported to server, to make server analysis rendering parameter and to play up thermal map according to analysis result generating web page.
The analytical approach that the present embodiment provides a kind of webpage to play up, first the rendering parameter tackling the target web loaded is judged whether, if the rendering parameter of interception target webpage, then for target web arranges hook, then by browser kernel to target web carry out webpage play up time, by the rendering parameter that each frame of hook acquisition drafting target web is used, when meeting report condition, the rendering parameter obtained is reported to server, to make server analysis rendering parameter and to play up thermal map according to analysis result generating web page.As can be seen here, compared to existing technologies, adopting said method can obtain the thermal map that play up of webpage according to the rendering parameter of each frame obtained, thus a kind of utilize thermal map to carry out mechanism that webpage plays up analysis is provided, the range of application of thermal map can be expanded when carrying out web page analysis.
The technical scheme more clearly understood the present embodiment to enable those skilled in the art and provide, below by specific embodiment, the analytical approach that a kind of webpage provided the present embodiment is played up is described in detail, and as shown in Figure 2, the method comprises:
201, terminal device determines target web to be loaded by browser shell.
Concrete, the browser architectures design of current internet industry, is generally three levels, comprises browser shell, browser kernel and API(ApplicationProgramming Interface as shown in Figure 3, application programming interfaces) layer.
Wherein, browser shell is responsible for many Tab(label usually) management of the page, advance, the operations such as retrogressings, input URL(Uniform Resource Locator, URL(uniform resource locator)), collection management etc.
Browser kernel is modal IE(Internet Explorer) kernel, WebKit kernel (Google Chrome kernel), Opera kernel (Ou Peng browser kernel), Safari kernel (apple browser kernel) etc.When after the URL receiving user's input, determine which kind of kernel is the WEB page that this URL is corresponding use go to play up by browser shell.
Api layer is for the Windows api layer in Windows system, and Windows API refers to the basic render component in Windows system, and the render component adopted when adopting different kernel to play up is also different.Such as, when adopting IE8 or WebKit kernel to play up, use Windows GDI(Graphics Device Interface, Graphics Device Interface) technology, then employ the Direct2D technology in DirectX external member when adopting IE9 high speed kernel to play up.
Therefore, when receive user input URL, or receive webpage in collection clicked after, determine what target web to be loaded be by browser shell, and load this webpage.
202, terminal device judges whether the rendering parameter of interception target webpage.
Wherein, if determine the rendering parameter of interception target webpage, then 203 ~ 206 are performed; If determine the rendering parameter of not interception target webpage, then directly carry out the rendering parameter of target web.
Concrete, analysis is played up owing to there is no need to carry out webpage to all webpages, therefore do not need all to tackle all webpages, so first need the rendering parameter judging whether interception target webpage, the foundation judged can be pre-set a control strategy, tackle this webpage rendering parameter when this control strategy is used for which webpage of controlled loading, remaining webpage does not process.Such as, an interception list can be set, the information needing to carry out webpage and play up the webpage of analysis is added this interception list.Certainly, arrange interception list be only exemplary, concrete control strategy includes but not limited to this, can arrange according to actual needs.
In addition, the mode of accessing this control strategy includes but not limited to following several:
A) specific C/S(Client/Server or client/server is used) control protocol, when startup browser or when accessing certain webpage, inquire about this control strategy by terminal device to backstage (backstage can be understood as background server, belongs to network side).
B) when loading a certain webpage, control strategy is inquired about by JavaScript to backstage.
C) control strategy is initiatively pushed to terminal device by backstage.
In addition, terminal device can be kept in terminal device after acquisition control strategy, directly to use when next time accesses again.
203, terminal device is that target web arranges hook (Hook).
Concrete, can be arranged in the kernel of browser for target web arranges hook, also can be arranged in the shell of browser.To be arranged in the shell of browser, the rendering parameter obtaining target web can be tackled different objects to realize by hook, such as, message (i.e. WM_PAINT message) can be drawn by intercept window, or can tackle and start to draw at least one in window (BeginPaint), these two kinds of API of ends drawing window (EndPaint).
Wherein, WM_PAINT message is for notifying a kind of message of frame updating in Windows system.BeginPaint and EndPaint two kinds of API are actually two call functions.Exemplary, BeginPaint can pass through following codes implement:
After receiving WM_PAINT message, the process for WM_PAINT message is normally drawn from a BeginPaint calls, calls ends drawing with an EndPaint.When the carrying out of certain webpage is played up, each frame of this webpage all can produce WM_PAINT message corresponding to this frame when drawing, and carries and draw this frame rendering parameter used in WM_PAINT message.After starting to play up, also can comprise in BeginPaint and EndPaint called and draw this frame rendering parameter used.
Therefore, the rendering parameter that obtain a certain frame can both can be tackled the WM_PAINT message of this frame, also can tackle at least one in BeginPaint and EndPaint.
In addition, for different interception objects, the hook pre-set is also different.Exemplary, if interception is WM_PAINT message, then the hook pre-set is message hook, such as SetWindowsHook; If interception is at least one in BeginPaint, EndPaint, then the hook pre-set is API hook.
204, terminal device carries out webpage by browser kernel to target web and plays up, and obtains each frame of drawing target web rendering parameter used by hook.
In the render process of a webpage, playing up of tens frames (such as progressive displayed web page) frame (animation) even up to ten thousand may be comprised, so in order to clear, facilitate set forth the acquisition flow process of rendering parameter, be described for wherein any frame (hereinafter referred to as target frame) of target web.
First, be described at least one of tackling in BeginPaint, EndPaint:
In the first implementation, only tackle EndPaint, exemplary, as shown in Figure 4, can realize in the following manner:
401, by browser kernel, DOM(Document ObjectModel is carried out to target frame, DOM Document Object Model) analyze, obtain DOM analysis result.
402, call BeginPaint by browser kernel to start to draw target frame with notice.
403, target frame is drawn according to DOM analysis result.
404, call EndPaint by browser kernel to complete with notification target frame.
405, utilize API hook to tackle EndPaint, obtain the end rendering parameter of target frame, end rendering parameter is defined as the rendering parameter of target frame.
406, EndPaint is performed with the drafting of target end frame.
Wherein, the end rendering parameter in the EndPaint of interception is rect(rectangle), rect structure defines the coordinate in a rectangle frame upper left corner and the coordinate in the lower right corner.An exemplary rect can by following coded representation:
Wherein, left, top specify x coordinate and the y coordinate in the rectangle frame upper left corner respectively, and right, bottom specify X-coordinate and the y coordinate in the rectangle frame lower right corner respectively.Rect in such EndPaint just illustrates size and the position of the minimum rectangle that can comprise this EndPaint institute drawing image.
In the second implementation, can BeginPaint and EndPaint be tackled, exemplary, as shown in Figure 5, can realize in the following manner:
501, carry out DOM by browser kernel to target frame to analyze, obtain DOM analysis result.
502, call BeginPaint by browser kernel to start to draw target frame with notice.
503, utilize API hook to tackle BeginPaint, obtain the beginning rendering parameter of target frame.
504, target frame is drawn according to DOM analysis result.
505, call EndPaint by browser kernel to complete with notification target frame.
506, utilize API hook to tackle EndPaint, obtain the end rendering parameter of target frame, and according to starting rendering parameter and terminating the rendering parameter that rendering parameter obtains target frame.
507, EndPaint is performed with the drafting of target end frame.
Wherein, beginning rendering parameter in the BeginPaint of interception and the end rendering parameter in EndPaint are all rect functions, the rendering parameter of the target frame obtained according to the beginning rendering parameter in BeginPaint and the end rendering parameter in EndPaint is also a rect function, and this rect function can represent the size and position that comprise this BeginPaint and EndPaint institute drawing image.
In the third implementation, only can tackle BeginPaint, exemplary, as shown in Figure 6, can realize in the following manner:
601, by browser kernel, DOM analysis is carried out to target frame, obtain DOM analysis result.
602, call BeginPaint by browser kernel to start to draw target frame with notice.
603, utilize API hook to tackle BeginPaint, obtain the beginning rendering parameter of target frame, beginning rendering parameter is defined as the rendering parameter of target frame.
604, target frame is drawn according to DOM analysis result.
605, call EndPaint by browser kernel to complete with notification target frame.
606, EndPaint is performed with the drafting of target end frame.
Wherein, the beginning rendering parameter in the BeginPaint of interception is rect function, and this rect function can represent the size and position that comprise this BeginPaint institute drawing image.
In addition, it should be noted that, before calling EndPaint and completing the drafting of this frame, the image drawn is sightless for user.
Secondly, by SetWindowsHook before the drafting starting target frame, WM_PAINT message can also be tackled, obtains the rendering parameter of target frame.Exemplary, the rendering parameter of the target frame now obtained also is rect function.
205, terminal device judges whether to meet the report condition reporting rendering parameter to server, and when meeting report condition, terminal device performs 206.
206, the rendering parameter obtained is reported to server by terminal device.
Concrete, terminal device is when the webpage carrying out target web is played up, and after a frame of often completing, to be saved by the rendering parameter of this frame obtained etc. to be reported, when meeting report condition, the rendering parameter obtained is reported to server by terminal device again.
Exemplary, in one implementation, terminal device can preset monitored event, occurs, then determine to meet report condition, the rendering parameter obtained is reported to server if listen to predeterminable event; If do not hear predeterminable event to occur, then continue to perform preset monitored event.
Wherein, Preset Time can include but not limited to following event:
A) document completes event (onDocumentComplete event), onDocumentComplete event is that browser completes playing up of target web, illustrate event during whole webpage completely, generally, now user can see all elements such as word, figure in webpage.
B) DOM analyzes and is ready to complete event (OnDomReady event), and OnDomReady event is the event that browser kernel has analyzed the DOM element of webpage, and generally, user now can see the word of webpage.
C) report timer then event, such as load URL and start, within 30 seconds, report later, or reported once every 5 seconds, stop after 1 minute reporting.Certainly, it is only exemplary for calling time on above-mentioned, includes but not limited to this.
D) customized event pre-set, such as browser manufacturer and Web page developer arrange certain event, are selected when the time of origin of this event can be loaded into by webpage by JavaScript.
Or in another kind of implementation, the rendering parameter of this frame obtained, when the webpage carrying out target web is played up, after a frame of often completing, reports by terminal device immediately.
207, the rendering parameter of target web that receives from multiple terminal device of server analysis, and play up thermal map according to the webpage that analysis result generates target web.
The background server of network side receives the rendering parameter about target web that great amount of terminals equipment reports, and then background server carries out statistical study according to these rendering parameter received, and plays up thermal map according to the webpage of analysis result generation target web.Webpage is played up field color in thermal map and is more deeply felt and show that the number of times of this zone rendering is more, the number of times of this zone rendering of the more shallow expression of field color is fewer, thus developer can be made to find out intuitively, and the element in which region of this target web consumes the CPU of terminal device most, thus can be optimized the material of this target web.
Optionally, as shown in Figure 7, while execution 204 and 205, the analytical approach that this webpage is played up can also comprise:
208, after the default frame of terminal device in target web completes drafting, the two field picture presetting frame is intercepted.
209, terminal device judges whether to meet the report condition reporting two field picture to server, performs 210 when meeting report condition.
210, the two field picture obtained is reported server by terminal device.Wherein, default frame can be each frame of target web, also can specify and get a frame as default frame at interval of N frame, and N is positive integer; In addition, judge whether to meet pre-conditioned method identical with 205, repeat no more.
In addition, reporting in the report condition of two field picture and 205 to server in 209 and report the report condition of rendering parameter to be identical report condition to server, also can be different report condition.
For each frame that default frame is target web, intercept two field picture when each frame of target web completes drafting and be uploaded to the background server of network side, developer can be made to find out the degree played up at each frame webpage intuitively, thus developer's Timeliness coverage problem can be made and the loading of webpage is optimized.
The analytical approach that the present embodiment provides a kind of webpage to play up, after determining target web to be loaded by browser shell, judge whether the rendering parameter of interception target webpage, if the rendering parameter of interception target webpage, then for target web arranges hook, then by browser kernel to target web carry out webpage play up time, by the rendering parameter that each frame of hook acquisition drafting target web is used, when meeting report condition, the rendering parameter obtained is reported to server, to make server analysis rendering parameter and to play up thermal map according to analysis result generating web page.As can be seen here, compared to existing technologies, adopt the thermal map that said method can be played up according to the rendering parameter acquisition webpage of each frame obtained, thus a kind of utilize thermal map to carry out mechanism that webpage plays up analysis is provided, the range of application of thermal map can be expanded when carrying out web page analysis, and utilize the characteristic of thermal map can more intuitively carry out webpage and play up analysis, facilitate developer to be optimized.
The present embodiment provides a kind of terminal device 1, and as shown in Figure 8, terminal device 1 comprises:
Judging unit 11, for judging whether the rendering parameter of interception target webpage;
Setting unit 12, if for the rendering parameter of interception target webpage, then for target web arranges hook;
Playing up capturing unit 13, playing up for carrying out webpage by browser kernel to target web; By the rendering parameter that each frame of hook acquisition drafting target web is used;
Report unit 14, for the rendering parameter obtained being reported to server when meeting and reporting the report condition of rendering parameter to server, to make server analysis rendering parameter and to play up thermal map according to analysis result generating web page.
Optionally, as shown in Figure 9, play up capturing unit 13 can comprise:
Analytic unit 131, analyzes for carrying out DOM Document Object Model DOM by browser kernel to target frame, obtains DOM analysis result; Target frame is any frame of target web;
Call unit 132, starts to draw window to notify to start to draw target frame for being called by browser kernel;
Drawing unit 133, for drawing target frame according to DOM analysis result;
Call unit 132 is also completed with notification target frame for being called ends drawing window by browser kernel;
Interception unit 134, for utilizing hook to tackle ends drawing window, obtains the end rendering parameter of target frame;
Parameter acquiring unit 135, for being defined as the rendering parameter of target frame by end rendering parameter; Wherein hook is application programming interfaces hook;
Drawing unit 133 is also for performing ends drawing window with the drafting of target end frame.
Optionally, in another kind of implementation, as shown in Figure 9, play up capturing unit 14 to comprise:
Analytic unit 131, analyzes for carrying out DOM by browser kernel to target frame, and obtain DOM analysis result, target frame is any frame of target web;
Call unit 132, starts to draw window to notify to start to draw target frame for being called by browser kernel;
Interception unit 134, tackles for utilizing hook and starts to draw window, obtain the beginning rendering parameter of target frame;
Drawing unit 133, for drawing target frame according to DOM analysis result;
Call unit 132 is also completed with notification target frame for being called ends drawing window by browser kernel;
Interception unit 134 also for utilizing hook to tackle ends drawing window, obtains the end rendering parameter of target frame;
Parameter acquiring unit 135, for obtaining the rendering parameter of target frame according to beginning rendering parameter and end rendering parameter; Wherein hook is application programming interfaces hook;
Drawing unit 133 is also for performing ends drawing window with the drafting of target end frame.
Optionally, in another kind of implementation, as shown in Figure 9, play up capturing unit 14 to comprise:
Analytic unit 131, analyzes for carrying out DOM by browser kernel to target frame, obtains DOM analysis result; Target frame is any frame of target web;
Call unit 132, starts to draw window to notify to start to draw target frame for being called by browser kernel;
Interception unit 134, tackles for utilizing hook and starts to draw window, obtain the beginning rendering parameter of target frame;
Parameter acquiring unit 135, for starting the rendering parameter of rendering parameter as target frame; Wherein hook is application programming interfaces hook;
Drawing unit 133, for drawing target frame according to DOM analysis result;
Call unit 132 is also completed with notification target frame for being called ends drawing window by browser kernel;
Drawing unit 133 is also for performing ends drawing window with the drafting of target end frame.
Optionally, in another kind of implementation, as shown in Figure 10, play up capturing unit 014 to comprise:
Interception unit 134, for before drawing target frame, draws message WM_PAINT by the window of hook interception target frame, obtains the rendering parameter of the target frame comprised in WM_PAINT; Wherein hook is message hook;
Drawing unit 133, for being drawn target frame according to WM_PAINT by browser kernel, target frame is any frame of target web.
Optionally, as shown in figure 11, interception unit 134 comprises:
Parameter interception unit 1341, for utilizing application programming interfaces hook to tackle ends drawing window, obtain the call parameters of ends drawing window, call parameters comprises the end rendering parameter of window handle and target frame;
Window judging unit 1342, for judging according to window handle whether ends drawing window is the window needing to catch;
Storage unit 1343, if be the window needing to catch for ends drawing window, then preserves the end rendering parameter of target frame;
Wherein, the end rendering parameter of target frame comprises in target frame the parameter needing the rectangle drawn, and the parameter of rectangle comprises top left co-ordinate and the lower right corner coordinate of rectangle.
Optionally, report unit 13 for:
Preset monitored event, predeterminable event comprises that document completes event, DOM analyze be ready to complete event, report timer then in event, the customized event that pre-sets any one;
If listen to predeterminable event to occur, then determine to meet report condition, the rendering parameter obtained is reported to server; If do not hear predeterminable event to occur, then continue to perform preset monitored event.
Or, optionally, report unit with 14 for:
After obtaining the rendering parameter of any frame of target web, the rendering parameter of any frame is reported to server.
Optionally, as shown in figure 11, terminal device 1 can also comprise:
Sectional drawing unit 15, after completing drafting, intercepts the two field picture presetting frame for the default frame in target web;
Report unit 15 that the two field picture obtained is reported server when meeting to report during the report condition of two field picture to server.
The present embodiment provides a kind of terminal device, first the rendering parameter tackling the target web loaded is judged whether, if the rendering parameter of interception target webpage, then for target web arranges hook, then by browser kernel to target web carry out webpage play up time, by the rendering parameter that each frame of hook acquisition drafting target web is used, when meeting report condition, the rendering parameter obtained is reported to server, to make server analysis rendering parameter and to play up thermal map according to analysis result generating web page.As can be seen here, compared to existing technologies, adopt the thermal map that said method can be played up according to the rendering parameter acquisition webpage of each frame obtained, thus a kind of utilize thermal map to carry out mechanism that webpage plays up analysis is provided, the range of application of thermal map can be expanded when carrying out web page analysis, and utilize the characteristic of thermal map can more intuitively carry out webpage and play up analysis, facilitate developer to be optimized.
In addition, the analytic system that the present embodiment also provides a kind of webpage to play up, as shown in figure 13, this system comprises:
The terminal device 1 that multiple previous embodiment provides, and the background server 2 of network side.
Server 2 receives the rendering parameter about target web that great amount of terminals equipment 1 reports, and then background server carries out statistical study according to these rendering parameter received, and plays up thermal map according to the webpage of analysis result generation target web.Thus compared to existing technologies, provide a kind of utilize thermal map to carry out mechanism that webpage plays up analysis, expand the range of application of thermal map, and utilize the characteristic of thermal map can more intuitively carry out webpage to play up analysis, facilitate developer to be optimized.
In several embodiments that the application provides, should be understood that, disclosed system, apparatus and method, can realize by another way.Such as, device embodiment described above is only schematic, such as, the division of described unit, be only a kind of logic function to divide, actual can have other dividing mode when realizing, such as multiple unit or assembly can in conjunction with or another system can be integrated into, or some features can be ignored, or do not perform.Another point, shown or discussed coupling each other or direct-coupling or communication connection can be by some interfaces, and the indirect coupling of device or unit or communication connection can be electrical, machinery or other form.
The described unit illustrated as separating component or can may not be and physically separates, and the parts as unit display can be or may not be physical location, namely can be positioned at a place, or also can be distributed in multiple network element.Some or all of unit wherein can be selected according to the actual needs to realize the object of the present embodiment scheme.
In addition, each functional unit in each embodiment of the present invention can be integrated in a processing unit, also can be that the independent physics of unit comprises, also can two or more unit in a unit integrated.Above-mentioned integrated unit both can adopt the form of hardware to realize, and the form that hardware also can be adopted to add SFU software functional unit realizes.
The above-mentioned integrated unit realized with the form of SFU software functional unit, can be stored in a computer read/write memory medium.Above-mentioned SFU software functional unit is stored in a storage medium, comprises the part steps of some instructions in order to make a computer equipment (can be personal computer, server, or the network equipment etc.) perform method described in each embodiment of the present invention.And aforesaid storage medium comprises: USB flash disk, portable hard drive, ROM (read-only memory) (Read-OnlyMemory, be called for short ROM), random access memory (Random Access Memory, be called for short RAM), magnetic disc or CD etc. various can be program code stored medium.
The above; be only the specific embodiment of the present invention, but protection scope of the present invention is not limited thereto, is anyly familiar with those skilled in the art in the technical scope that the present invention discloses; change can be expected easily or replace, all should be encompassed within protection scope of the present invention.Therefore, protection scope of the present invention should be as the criterion with the protection domain of described claim.
Claims (18)
1. the analytical approach played up of webpage, it is characterized in that, described method comprises:
Judge whether the rendering parameter tackling the target web loaded;
If tackle the rendering parameter of described target web, then hook is set for described target web;
Described target web carry out webpage play up time, obtain each frame of drawing described target web rendering parameter used by described hook;
When meeting and reporting the report condition of rendering parameter to server, the rendering parameter obtained is reported to described server, to make rendering parameter described in described server analysis and to play up thermal map according to analysis result generating web page.
2. method according to claim 1, is characterized in that, described described target web carry out webpage play up time, the rendering parameter obtaining each frame of drawing described target web used by described hook comprises:
By described browser kernel, DOM Document Object Model DOM analysis is carried out to target frame, obtain DOM analysis result; Described target frame is any frame of described target web;
Called by described browser kernel and start to draw window to notify to start to draw described target frame;
Described target frame is drawn according to described DOM analysis result;
Ends drawing window is called to notify that described target frame is completed by described browser kernel;
Utilize described hook to tackle described ends drawing window, obtain the end rendering parameter of described target frame;
Described end rendering parameter is defined as the rendering parameter of described target frame; Wherein said hook is application programming interfaces hook;
Perform described ends drawing window to terminate the drafting of described target frame.
3. method according to claim 1, is characterized in that, described described target web carry out webpage play up time, the rendering parameter obtaining each frame of drawing described target web used by described hook comprises:
Carry out DOM analysis by described browser kernel to target frame, obtain DOM analysis result, described target frame is any frame of described target web;
Called by described browser kernel and start to draw window to notify to start to draw described target frame;
Utilize described hook to tackle described beginning and draw window, obtain the beginning rendering parameter of described target frame;
Described target frame is drawn according to described DOM analysis result;
Ends drawing window is called to notify that described target frame is completed by described browser kernel;
Utilize described hook to tackle described ends drawing window, obtain the end rendering parameter of described target frame;
The rendering parameter of described target frame is obtained according to described beginning rendering parameter and described end rendering parameter; Wherein said hook is application programming interfaces hook;
Perform described ends drawing window to terminate the drafting of described target frame.
4. method according to claim 1, is characterized in that, described described target web carry out webpage play up time, the rendering parameter obtaining each frame of drawing described target web used by described hook comprises:
By described browser kernel, DOM analysis is carried out to target frame, obtain DOM analysis result; Described target frame is any frame of described target web;
Called by described browser kernel and start to draw window to notify to start to draw described target frame;
Utilize described hook to tackle described beginning and draw window, obtain the beginning rendering parameter of described target frame;
Described beginning rendering parameter is defined as the rendering parameter of described target frame; Wherein said hook is application programming interfaces hook;
Described target frame is drawn according to described DOM analysis result;
Ends drawing window is called to notify that described target frame is completed by described browser kernel;
Perform described ends drawing window to terminate the drafting of described target frame.
5. method according to claim 1, is characterized in that, described described target web carry out webpage play up time, the rendering parameter obtaining each frame of drawing described target web used by described hook comprises:
Before drawing target frame, message WM_PAINT drawn by the window being tackled described target frame by described hook, obtains in described WM_PAINT the rendering parameter of the described target frame comprised; Wherein said hook is message hook;
Drawn described target frame according to described WM_PAINT by browser kernel, described target frame is any frame of described target web.
6. according to the method in claim 2 or 3, it is characterized in that, describedly utilize described application programming interfaces hook to tackle described ends drawing window, the end rendering parameter obtaining described target frame comprises:
Utilize described application programming interfaces hook to tackle described ends drawing window, obtain the call parameters of described ends drawing window, described call parameters comprises the end rendering parameter of window handle and described target frame;
Judge whether described ends drawing window is the window needing to catch according to described window handle;
If described ends drawing window is the window needing to catch, then preserve the end rendering parameter of described target frame;
Wherein, the end rendering parameter of described target frame comprises in described target frame the parameter needing the rectangle drawn, and the parameter of described rectangle comprises top left co-ordinate and the lower right corner coordinate of described rectangle.
7. method according to claim 1, is characterized in that, describedly when meeting and reporting the report condition of rendering parameter to server, the rendering parameter obtained is reported to described server and comprises:
Preset monitored event, described predeterminable event comprises that document completes event, DOM analyze be ready to complete event, report timer then in event, the customized event that pre-sets any one;
If listen to described predeterminable event to occur, then determine to meet described report condition, the rendering parameter obtained is reported to server;
If do not hear described predeterminable event to occur, then continue to perform described preset monitored event.
8. method according to claim 1, is characterized in that, describedly when meeting and reporting the report condition of rendering parameter to server, the rendering parameter obtained is reported to described server and comprises:
After obtaining the rendering parameter of any frame of described target web, the rendering parameter of described any frame is reported to described server.
9. method according to claim 1, is characterized in that, described method also comprises:
After default frame in described target web completes drafting, intercept the two field picture of described default frame;
When meeting and reporting the report condition of two field picture to server, the two field picture obtained is reported described server.
10. a terminal device, is characterized in that, described terminal device comprises:
Judging unit, for judging whether the rendering parameter tackling the target web loaded;
Setting unit, if the rendering parameter for tackling described target web, then arranges hook for described target web;
Play up capturing unit, for carry out at described target web webpage play up time, obtain each frame of drawing described target web rendering parameter used by described hook;
Report unit, for the rendering parameter obtained being reported to described server when meeting and reporting the report condition of rendering parameter to server, to make rendering parameter described in described server analysis and to play up thermal map according to analysis result generating web page.
11. terminal devices according to claim 10, is characterized in that, described in play up capturing unit and comprise:
Analytic unit, analyzes for carrying out DOM Document Object Model DOM by described browser kernel to target frame, obtains DOM analysis result; Described target frame is any frame of described target web;
Call unit, starts to draw window to notify to start to draw described target frame for being called by described browser kernel;
Drawing unit, for drawing described target frame according to described DOM analysis result;
Described call unit is also for calling ends drawing window to notify that described target frame is completed by described browser kernel;
Interception unit, for utilizing described hook to tackle described ends drawing window, obtains the end rendering parameter of described target frame;
Parameter acquiring unit, for being defined as the rendering parameter of described target frame by described end rendering parameter; Wherein said hook is application programming interfaces hook;
Described drawing unit is also for performing described ends drawing window to terminate the drafting of described target frame.
12. terminal devices according to claim 10, is characterized in that, described in play up capturing unit and comprise:
Analytic unit, analyzes for carrying out DOM by described browser kernel to target frame, and obtain DOM analysis result, described target frame is any frame of described target web;
Call unit, starts to draw window to notify to start to draw described target frame for being called by described browser kernel;
Interception unit, tackles described beginning for utilizing described hook and draws window, obtain the beginning rendering parameter of described target frame;
Drawing unit, for drawing described target frame according to described DOM analysis result;
Described call unit is also for calling ends drawing window to notify that described target frame is completed by described browser kernel;
Described interception unit also for utilizing described hook to tackle described ends drawing window, obtains the end rendering parameter of described target frame;
Parameter acquiring unit, for obtaining the rendering parameter of described target frame according to described beginning rendering parameter and described end rendering parameter; Wherein said hook is application programming interfaces hook;
Described drawing unit is also for performing described ends drawing window to terminate the drafting of described target frame.
13. terminal devices according to claim 10, is characterized in that, described in play up capturing unit and comprise:
Analytic unit, analyzes for carrying out DOM by described browser kernel to target frame, obtains DOM analysis result; Described target frame is any frame of described target web;
Call unit, starts to draw window to notify to start to draw described target frame for being called by described browser kernel;
Interception unit, tackles described beginning for utilizing described hook and draws window, obtain the beginning rendering parameter of described target frame;
Parameter acquiring unit, for being defined as the rendering parameter of described target frame by described beginning rendering parameter; Wherein said hook is application programming interfaces hook;
Drawing unit, for drawing described target frame according to described DOM analysis result;
Described call unit is also for calling ends drawing window to notify that described target frame is completed by described browser kernel;
Described drawing unit is also for performing described ends drawing window to terminate the drafting of described target frame.
14. terminal devices according to claim 10, is characterized in that, described in play up capturing unit and comprise:
Interception unit, for before drawing target frame, message WM_PAINT drawn by the window being tackled described target frame by described hook, obtains in described WM_PAINT the rendering parameter of the described target frame comprised; Wherein said hook is message hook;
Drawing unit, for being drawn described target frame according to described WM_PAINT by browser kernel, described target frame is any frame of described target web.
15. terminal devices according to claim 11 or 12, it is characterized in that, described interception unit comprises:
Parameter interception unit, for utilizing described application programming interfaces hook to tackle described ends drawing window, obtain the call parameters of described ends drawing window, described call parameters comprises the end rendering parameter of window handle and described target frame;
Window judging unit, for judging according to described window handle whether described ends drawing window is the window needing to catch;
Storage unit, if be the window needing to catch for described ends drawing window, then preserves the end rendering parameter of described target frame;
Wherein, the end rendering parameter of described target frame comprises in described target frame the parameter needing the rectangle drawn, and the parameter of described rectangle comprises top left co-ordinate and the lower right corner coordinate of described rectangle.
16. terminal devices according to claim 10, is characterized in that, described in report unit for:
Preset monitored event, described predeterminable event comprises that document completes event, DOM analyze be ready to complete event, report timer then in event, the customized event that pre-sets any one;
If listen to described predeterminable event to occur, then determine to meet described report condition, the rendering parameter obtained is reported to server; If do not hear described predeterminable event to occur, then continue to perform described preset monitored event.
17. terminal devices according to claim 10, is characterized in that, described in report unit for:
After obtaining the rendering parameter of any frame of described target web, the rendering parameter of described any frame is reported to described server.
18. terminal devices according to claim 10, is characterized in that, described terminal device also comprises:
Sectional drawing unit, after completing drafting, intercepts the two field picture of described default frame for the default frame in described target web;
When meet report the report condition of two field picture to server time described in report unit that the two field picture obtained is reported described server.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410069677.0A CN104881273B (en) | 2014-02-27 | 2014-02-27 | A kind of analysis method and terminal device of webpage rendering |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410069677.0A CN104881273B (en) | 2014-02-27 | 2014-02-27 | A kind of analysis method and terminal device of webpage rendering |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN104881273A true CN104881273A (en) | 2015-09-02 |
| CN104881273B CN104881273B (en) | 2019-03-15 |
Family
ID=53948782
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201410069677.0A Active CN104881273B (en) | 2014-02-27 | 2014-02-27 | A kind of analysis method and terminal device of webpage rendering |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN104881273B (en) |
Cited By (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107797904A (en) * | 2017-09-12 | 2018-03-13 | 福建天晴数码有限公司 | A kind of method and terminal for measuring the response time |
| WO2018077041A1 (en) * | 2016-10-25 | 2018-05-03 | 腾讯科技（深圳）有限公司 | Method and apparatus for running application |
| CN109948085A (en) * | 2017-11-23 | 2019-06-28 | 广州市动景计算机科技有限公司 | Browser kernel initial method, calculates equipment and storage medium at device |
| CN110069254A (en) * | 2019-04-30 | 2019-07-30 | 广东三维家信息科技有限公司 | Text display method, device and server |
| CN110119273A (en) * | 2019-05-10 | 2019-08-13 | 北京墨云科技有限公司 | A kind of browse request optimization method, device, terminal and storage medium |
| CN113018848A (en) * | 2021-03-09 | 2021-06-25 | 腾讯科技（深圳）有限公司 | Game picture display method, related device, equipment and storage medium |
| CN113269893A (en) * | 2021-05-26 | 2021-08-17 | 北京搜房科技发展有限公司 | VR rendering method and device |
| CN113872921A (en) * | 2020-06-30 | 2021-12-31 | 腾讯科技（深圳）有限公司 | Webpage detection method, device, equipment and computer readable storage medium |
| WO2022134875A1 (en) * | 2020-12-21 | 2022-06-30 | 北京达佳互联信息技术有限公司 | Data acquisition method and electronic device |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102479151A (en) * | 2010-11-26 | 2012-05-30 | 腾讯科技（深圳）有限公司 | Testing method and device of webpage access speed |
| CN102750372A (en) * | 2012-06-15 | 2012-10-24 | 翁时锋 | Analytical method for automatically acquiring webpage structured information |
| CN102831209A (en) * | 2012-08-13 | 2012-12-19 | 优视科技有限公司 | Rendering method and rendering device for webpage browsing and mobile terminal |
| US8407665B1 (en) * | 2005-11-16 | 2013-03-26 | Google Inc. | Rendering contextual related content with a document, such as on a web page for example |
| CN103324521A (en) * | 2013-06-20 | 2013-09-25 | 张家港保税区润桐电子技术研发有限公司 | Method for measuring initial screen time of webpage |
-
2014
- 2014-02-27 CN CN201410069677.0A patent/CN104881273B/en active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8407665B1 (en) * | 2005-11-16 | 2013-03-26 | Google Inc. | Rendering contextual related content with a document, such as on a web page for example |
| CN102479151A (en) * | 2010-11-26 | 2012-05-30 | 腾讯科技（深圳）有限公司 | Testing method and device of webpage access speed |
| CN102750372A (en) * | 2012-06-15 | 2012-10-24 | 翁时锋 | Analytical method for automatically acquiring webpage structured information |
| CN102831209A (en) * | 2012-08-13 | 2012-12-19 | 优视科技有限公司 | Rendering method and rendering device for webpage browsing and mobile terminal |
| CN103324521A (en) * | 2013-06-20 | 2013-09-25 | 张家港保税区润桐电子技术研发有限公司 | Method for measuring initial screen time of webpage |
Cited By (13)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2018077041A1 (en) * | 2016-10-25 | 2018-05-03 | 腾讯科技（深圳）有限公司 | Method and apparatus for running application |
| US10824449B2 (en) | 2016-10-25 | 2020-11-03 | Tencent Technology (Shenzhen) Company Limited | Application running method and device |
| CN107797904B (en) * | 2017-09-12 | 2021-12-24 | 福建天晴数码有限公司 | Method and terminal for measuring response time |
| CN107797904A (en) * | 2017-09-12 | 2018-03-13 | 福建天晴数码有限公司 | A kind of method and terminal for measuring the response time |
| CN109948085A (en) * | 2017-11-23 | 2019-06-28 | 广州市动景计算机科技有限公司 | Browser kernel initial method, calculates equipment and storage medium at device |
| CN110069254A (en) * | 2019-04-30 | 2019-07-30 | 广东三维家信息科技有限公司 | Text display method, device and server |
| CN110119273A (en) * | 2019-05-10 | 2019-08-13 | 北京墨云科技有限公司 | A kind of browse request optimization method, device, terminal and storage medium |
| CN113872921A (en) * | 2020-06-30 | 2021-12-31 | 腾讯科技（深圳）有限公司 | Webpage detection method, device, equipment and computer readable storage medium |
| CN113872921B (en) * | 2020-06-30 | 2024-01-26 | 腾讯科技（深圳）有限公司 | Webpage detection method, device, equipment and computer readable storage medium |
| WO2022134875A1 (en) * | 2020-12-21 | 2022-06-30 | 北京达佳互联信息技术有限公司 | Data acquisition method and electronic device |
| CN113018848A (en) * | 2021-03-09 | 2021-06-25 | 腾讯科技（深圳）有限公司 | Game picture display method, related device, equipment and storage medium |
| CN113269893A (en) * | 2021-05-26 | 2021-08-17 | 北京搜房科技发展有限公司 | VR rendering method and device |
| CN113269893B (en) * | 2021-05-26 | 2024-03-01 | 北京搜房科技发展有限公司 | VR rendering method and device |
Also Published As
| Publication number | Publication date |
|---|---|
| CN104881273B (en) | 2019-03-15 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN104881273A (en) | Webpage rendering analysis method and terminal device | |
| KR102436987B1 (en) | Method and terminal device for extracting web page content | |
| US11949750B2 (en) | System and method for tracking browsing activity | |
| US9201572B2 (en) | A/B test configuration environment | |
| US9756140B2 (en) | Tracking user behavior relative to a network page | |
| US8640037B2 (en) | Graphical overlay related to data mining and analytics | |
| US20150370912A1 (en) | Method and system for displaying customized webpage on double webview | |
| CN112114913B (en) | Application program interface updating method and device, computer equipment and storage medium | |
| CN107943997B (en) | Remote website evidence obtaining method based on Google browser, terminal device and storage medium | |
| JP2015503152A (en) | Measuring the rendering time of a web page | |
| CN107832041B (en) | Method, device and equipment for making thematic page and readable storage medium | |
| CN110209978B (en) | Data processing method and related device | |
| CN101419620A (en) | Method for shielding web page element and apparatus thereof | |
| CN109740041B (en) | Webpage crawling method and device, storage medium and computer equipment | |
| CN113282488B (en) | Terminal test method and device, storage medium and terminal | |
| US20170169122A1 (en) | Webpage display method, mobile terminal, intelligent terminal, program and storage medium | |
| CN105528200A (en) | Browser tab display method and device | |
| CN110046072A (en) | Monitoring method, device, terminal and the readable storage medium storing program for executing of the page | |
| CN107391914B (en) | Parameter display method, device and equipment | |
| CN103488508B (en) | Browser working method, browser and terminal equipment | |
| CN109240664A (en) | A kind of method and terminal acquiring user behavior information | |
| CN105224611A (en) | Based on the operation processing method of browser, device and browser | |
| CN107451163B (en) | Animation display method and device | |
| CN107102937B (en) | User interface testing method and device | |
| WO2016137435A1 (en) | Element identifier generation |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |