一种网页渲染的分析方法和终端设备的制造方法

一种网页渲染的分析方法和终端设备的制造方法
【技术领域】
[0001] 本发明涉及互联网技术领域，尤其涉及一种网页撞染的分析方法和终端设备。
【背景技术】
[0002] 在现有的网站分析技术中，热图（HeatMap)是比较常用的一种技术，热图可W非 常直观的呈现一些原本不易理解或表达的数据，比如密度、频率等，改用区域和颜色该种更 容易被人理解的方式来呈现。
[0003]目前，在互联网业界，对于的热图的应用大多限于对用户行为的分析，通常采用不 同颜色深度表示不同用户的关注程度，其中颜色越深的区域，表示用户关注度越高。
[0004] 比如应用于对用户操作鼠标产生的点击行为，或者滚动行为的研究。其中，在鼠标 点击热图中，区域的颜色越深，表示该区域的鼠标点击数量越多，区域的颜色越浅，表示该 区域的鼠标点击数量越少。或者，在屏幕滚动热图中，区域的颜色越深，表示用户在浏览时 在该区域的停留时间越长，区域的颜色越浅，表示用户在浏览时在该区域的停留时间越短， 因此可W-目了然地呈现用户所关注的区域，从而为网站的优化和改进提供参考依据。
[0005] 由此可见，目前互联网业界在利用热图进行网页分析时，仅限于对用户行为的研 究，并不涉及对于网页的其他信息或数据的统计研究，比如网页撞染的分析，因此目前利用 热图进行网页分析能够分析的信息有限，应用范围小。

【发明内容】

[0006] 本发明的实施例提供一种网页撞染的分析方法和终端设备，能够解决进行网页分 析时，热图的应用范围小的问题。
[0007] 为达到上述目的，本发明的实施例采用如下技术方案：
[0008] -方面，本发明实施例提供了一种网页撞染的分析方法，所述方法包括：
[0009] 判断是否拦截已加载的目标网页的撞染参数；
[0010] 若拦截所述目标网页的撞染参数，则为所述目标网页设置钩子；
[0011] 在所述目标网页进行网页撞染时，通过所述钩子获取绘制所述目标网页的每一峽 所用的撞染参数；
[0012] 当满足向服务器上报撞染参数的上报条件时将已获取的撞染参数上报至所述服 务器，W使所述服务器分析所述撞染参数并根据分析结果生成网页撞染热图。
[0013] 另一方面，本发明实施例还提供了一种终端设备，所述终端设备包括：
[0014] 判断单元，用于判断是否拦截已加载的目标网页的撞染参数；
[0015] 设置单元，用于若拦截所述目标网页的撞染参数，则为所述目标网页设置钩子；
[0016] 撞染捕获单元，用于在所述目标网页进行网页撞染时，通过所述钩子获取绘制所 述目标网页的每一峽所用的撞染参数；
[0017] 上报单元，用于当满足向服务器上报撞染参数的上报条件时将已获取的撞染参数 上报至所述服务器，W使所述服务器分析所述撞染参数并根据分析结果生成网页撞染热 图。
[0018] 本发明实施例提供一种网页撞染的分析方法和终端设备，首先判断是否拦截已加 载的目标网页的撞染参数，若拦截目标网页的撞染参数，则为目标网页设置钩子，而后在通 过浏览器内核对目标网页进行网页撞染时，通过钩子获取绘制目标网页的每一峽所用的撞 染参数，当满足上报条件时将已获取的撞染参数上报至服务器，W使服务器分析撞染参数 并根据分析结果生成网页撞染热图。由此可见，相比现有技术而言，采用上述方法能够根据 获取的每一峽的撞染参数获取网页撞染的热图，从而提供一种利用热图进行网页撞染分析 的机制，能够在进行网页分析时扩大热图的应用范围。
【附图说明】
[0019] 为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现 有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本 发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可W 根据该些附图获得其他的附图。
[0020] 图1为本发明实施例提供的一种网页撞染的分析方法的流程示意图；
[0021] 图2为本发明实施例提供的另一种网页撞染的分析方法的流程示意图；
[0022] 图3为浏览器结构示意图；
[0023] 图4为本发明实施例提供的一种撞染参数获取方法的流程示意图；
[0024] 图5为本发明实施例提供的另一种撞染参数获取方法的流程示意图；
[0025] 图6为本发明实施例提供的另一种撞染参数获取方法的流程示意图；
[0026] 图7为本发明实施例提供的另一种网页撞染的分析方法的流程示意图；
[0027] 图8为本发明实施例提供的一种终端设备的结构示意图；
[0028] 图9为本发明实施例提供的另一种终端设备的结构示意图；
[0029] 图10为本发明实施例提供的另一种终端设备的结构示意图；
[0030] 图11为本发明实施例提供的一种撞染捕获单元的拦截单元的结构示意图；
[0031] 图12为本发明实施例提供的另一种终端设备的结构示意图；
[0032] 图13为本发明实施例提供的一种网页撞染的分析系统的示意图。
【具体实施方式】
[0033] 下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完 整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于 本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他 实施例，都属于本发明保护的范围。
[0034] 本实施例提供一种网页撞染的分析方法，如图1所示，该方法包括：
[00巧]101、判断是否拦截目标网页的撞染参数。若拦截目标网页的撞染参数，则执行 102,若不拦截目标网页的撞染参数，则直接执行通过浏览器内核对目标网页进行网页撞 染。
[0036] 102、为目标网页设置钩子。
[0037] 103、在目标网页进行网页撞染时，通过钩子获取绘制目标网页的每一峽所用的撞 染参数。
[003引104、当满足向服务器上报撞染参数的上报条件时将已获取的撞染参数上报至服 务器，W使服务器分析撞染参数并根据分析结果生成网页撞染热图。
[0039] 本实施例提供一种网页撞染的分析方法，首先判断是否拦截已加载的目标网页的 撞染参数，若拦截目标网页的撞染参数，则为目标网页设置钩子，而后在通过浏览器内核对 目标网页进行网页撞染时，通过钩子获取绘制目标网页的每一峽所用的撞染参数，当满足 上报条件时将已获取的撞染参数上报至服务器，W使服务器分析撞染参数并根据分析结果 生成网页撞染热图。由此可见，相比现有技术而言，采用上述方法能够根据获取的每一峽的 撞染参数获取网页撞染的热图，从而提供一种利用热图进行网页撞染分析的机制，能够在 进行网页分析时扩大热图的应用范围。
[0040]为了使本领域技术人员能够更清楚地理解本实施例提供的技术方案，下面通过具 体的实施例，对本实施例提供的一种网页撞染的分析方法进行详细说明，如图2所示，该方 法包括：
[0041] 201、终端设备通过浏览器外壳确定待加载的目标网页。
[0042] 具体的，目前互联网业界的浏览器架构设计，普遍是H个层次，如图3所示包括浏 览器外壳、浏览器内核和API(ApplicationProgrammingInte;rface，应用程序接口）层。
[0043] 其中，浏览器外壳通常负责多T油（标签)页面的管理，前进，后退等操作，输入U化 (UniformResourceLocator,统一资源定位符），收藏夹管理等。
[0044] 浏览器内核最常见的有IE(InternetExplorer)内核、WebKit内核（谷歌Qirome 内核)、化era内核(欧朋浏览器内核XSafari内核(苹果浏览器内核）等。当接收到用户输 入的U化后，由浏览器外壳决定该U化对应的WEB页面使用哪种内核去撞染。
[0045]API层WWindows系统中的WindowsAPI层为例，WindowsAPI是指Windows系 统中的基础撞染组件，采用不同内核撞染时所采用的撞染组件也不同。例如，采用IE8或 WebKit内核撞染时使用的是WindowsGDI(GraphicsDeviceInte;rface，图形设备接口） 技术，采用IE9高速内核撞染时则使用了DirectX套件中的Direct2D技术。
[0046] 因此，当接收到用户输入的U化，或者接收到收藏夹中网页被点击之后，由浏览器 外壳确定待加载的目标网页是什么，并加载该网页。
[0047] 202、终端设备判断是否拦截目标网页的撞染参数。
[0048] 其中，若确定拦截目标网页的撞染参数，则执行203~206;若确定不拦截目标网 页的撞染参数，则直接进行目标网页的撞染参数。
[0049] 具体的，由于没有必要对所有网页进行网页撞染分析，因此不需要对所有网页都 进行拦截，所W首先需要判断是否拦截目标网页的撞染参数，判断的依据可W是预先设置 一个控制策略，该控制策略用于控制加载哪些网页时对该网页撞染参数进行拦截，其余的 网页不进行处理。比如，可W设置一个拦截列表，将需要进行网页撞染分析的网页的信息加 入该拦截列表。当然、设置拦截列表仅仅为示例性的，具体的控制策略包括但不限于此，可 W根据实际需要设置。
[0050] 另外，访问该控制策略的方式包括但不限于W下几种：
[0051]a)使用特定的C/S(Client/server或客户端/服务器）控制协议，当启动浏览器 或者访问某个网页时，由终端设备向后台（后台可W理解为后台服务器，属于网络侧）查询 该控制策略。
[0052] b)当加载某一网页时，通过化vaScript向后台查询控制策略。
[0053] C)后台主动将控制策略推送至终端设备。
[0054] 另外，终端设备在获取控制策略后可W保存在终端设备中，W便再下次访问时直 接使 用。
[00巧]203、终端设备为目标网页设置钩子（化ok)。
[0056] 具体的，为目标网页设置钩子可W设置在浏览器的内核中，也可W设置在浏览器 的外壳中。W设置在浏览器的外壳中为例，获取目标网页的撞染参数可W通过钩子拦截不 同的对象来实现，例如，可W拦截窗口绘制消息巧PWM_PAINT消息)，或者可W拦截开始绘制 窗口（Begin化int)、结束绘制窗口（EndPaint)该两种API中至少一种。
[0057] 其中，WM_PAINT消息是Windows系统中用于通知画面更新的一种消息。 BeginPaint和ElndPaint两种API实际上是两个调用函数。示例性的，BeginPaint可W通 过W下代码实现：
[0058]
[0059] 在收到WM_PAINT消息后，对于WM_PAINT消息的处理通常是从一个BeginPaint调 用开始绘制，W-个化dPaint调用结束绘制。当某个网页的进行撞染时，该网页的每一峽 在绘制时都会产生该峽对应的WM_PAINT消息，WM_PAINT消息中携带有绘制该峽所用的撞 染参数。当开始撞染后，调用的BeginPaint和化dPaint中也会包括绘制该峽所用的撞染 参数。
[0060] 因此，要获取某一峽的撞染参数可W既可W对该峽的WM_PAINT消息进行拦截，也 可W拦截BeginPaint和ElndPaint中的至少一种。
[0061] 另外，对于不同的拦截对象，预先设置的钩子也不同。示例性的，如果拦截的 是WM_PAINT消息，则预先设置的钩子为消息钩子，比如SetWindows化ok;如果拦截的是 Begin化int、化dPaint中的至少一种，则预先设置的钩子为API钩子。
[0062] 204、终端设备通过浏览器内核对目标网页进行网页撞染，并通过钩子获取绘制目 标网页的每一峽所用的撞染参数。
[0063] 在一个网页的撞染过程中，可能会包含几十峽（比如渐进展示网页）甚至上万峽 (动画）的撞染，所W为了清楚、方便得阐述撞染参数的获取流程，W目标网页的其中任意一 峽下简称目标峽）为例进行说明。
[0064] 首先，W拦截BeginPaint、EndPaint中的至少一种为例进行说明：
[0065] 在第一种实现方式中，只拦截化dPaint，示例性的，如图4所示，可W通过W下方 式实现：
[0066] 401、通过浏览器内核对目标帧进行D0M(DocumentObjectModel,文档对象模型） 分析，获得DOM解析结果。
[0067] 402、通过浏览器内核调用BeginPaintW通知开始绘制目标峽。
[006引 403、根据D0M解析结果绘制目标峽。
[0069] 404、通过浏览器内核调用化dPaintW通知目标峽绘制完成。
[0070] 405、利用API钩子拦截化dPaint，获得目标峽的结束撞染参数，将结束撞染参数 确定为目标峽的撞染参数。
[0071] 406、执行化dPaintW结束目标峽的绘制。
[0072] 其中，拦截的化dPaint中的结束撞染参数为rect(矩形)，rect结构定义了一个 矩形框左上角的坐标W及右下角的坐标。示例性的一个rect可W通过W下代码表示：
[0073]
[0074]
[00巧]其中，left、top分别指定矩形框左上角的X坐标和y坐标，ri曲t、bottom分别指 定矩形框右下角的X坐标和y坐标。该样化dPaint中的rect就表示了能够包含该化dPaint 所绘制图像的最小矩形的大小和位置。
[0076] 在第二种实现方式中，可W拦截BeginPaint和化dPaint，示例性的，如图5所示， 可W通过W下方式实现：
[0077] 501、通过浏览器内核对目标峽进行D0M进行分析，获得D0M解析结果。
[007引 502、通过浏览器内核调用BeginPaintW通知开始绘制目标峽。
[0079] 503、利用API钩子拦截BeginPaint，获得目标峽的开始撞染参数。
[0080] 504、根据D0M解析结果绘制目标峽。
[0081] 505、通过浏览器内核调用化dPaintW通知目标峽绘制完成。
[0082] 506、利用API钩子拦截化dPaint，获得目标峽的结束撞染参数，并根据开始撞染 参数和结束撞染参数获取目标峽的撞染参数。
[0083] 507、执行化dPaintW结束目标峽的绘制。
[0084] 其中，拦截的BeginPaint中的开始撞染参数和化dPaint中的结束撞染参数都是 rect函数，根据BeginPaint中的开始撞染参数和化dPaint中的结束撞染参数获取的目标 中贞的撞染参数也为一个rect函数，该rect函数能够表示包含该BeginPaint和化dPaint 所绘制图像的大小和位置。
[0085] 在第H种实现方式中，可W只拦截BeginPaint，示例性的，如图6所示，可W通过 W下方式实现：
[0086] 601、通过浏览器内核对目标峽进行D0M分析，获得D0M解析结果。
[0087] 602、通过浏览器内核调用BeginPaintW通知开始绘制目标峽。
[0088] 603、利用API钩子拦截BeginPaint，获得目标峽的开始撞染参数，将开始撞染参 数确定为目标峽的撞染参数。
[0089] 604、根据D0M解析结果绘制目标峽。
[0090] 605、通过浏览器内核调用化dPaintW通知目标峽绘制完成。
[0091] 606、执行化dPaintW结束目标峽的绘制。
[0092] 其中，拦截的BeginPaint中的开始撞染参数为rect函数，该rect函数能够表示 包含该BeginPaint所绘制图像的大小和位置。
[0093] 另外，需要说明的是，在调用化dPaint完成该一峽的绘制之前，所绘制的图像对 于用户而言是不可见的。
[0094] 其次，还可W通过SetWindows化ok在开始目标峽的绘制前，对WM_PAINT消息进行 拦截，获取目标峽的撞染参数。示例性的，此时获取的目标峽的撞染参数也为rect函数。
[0095] 205、终端设备判断是否满足向服务器上报撞染参数的上报条件，当满足上报条件 时终端设备执行206。
[0096] 206、终端设备将已获取的撞染参数上报至服务器。
[0097] 具体的，终端设备在进行目标网页的网页撞染时，在每绘制完成一峽后，将获取的 该峽的撞染参数保存起来等待上报，当满足上报条件时再终端设备将已获取的撞染参数上 报至服务器。
[0098] 示例性的，在一种实现方式中，终端设备可W监听预设事件，若监听到预设事件发 生，则确定满足上报条件，将已获取的撞染参数上报至服务器；若未监听到预设事件发生， 则继续执行监听预设事件。
[0099] 其中，预设时间可W包括但不限于W下事件：
[0100]a)文档完成事件（onDo州mentComplete事件），onDo州mentComplete事件是浏览 器完成目标网页的撞染，完全展示了整个网页时的事件，一般情况下，此时用户能看到网页 中的文字、图形等所有元素。
[0101]b)D0M分析准备完成事件（OnDomReady事件)，OnDomReady事件是浏览器内核分析 完网页的D0M元素的事件，一般情况下，用户此时能看见网页的文字。
[0102]C)上报定时器到时事件，比如加载U化开始，30砂W后上报，或者每隔5砂上报一 次，1分钟后停止上报。当然，上述上报时间仅仅为示例性的，包括但不限于此。
[0103] d)预先设置的自定义事件，比如浏览器厂商和网页开发者约定某个事件，该事件 的发生时间可W由网页载入时由化vaScript来选择。
[0104] 或者，在另一种实现方式中，终端设备在进行目标网页的网页撞染时，在每绘制完 成一峽后，将获取的该峽的撞染参数立即上报。
[0105] 207、服务器分析从多个终端设备接收的目标网页的撞染参数，并根据分析结果生 成目标网页的网页撞染热图。
[0106] 网络侧的后台服务器接收大量终端设备上报的关于目标网页的撞染参数，而后后 台服务器根据接收到的该些撞染参数进行统计分析，并根据分析结果生成目标网页的网页 撞染热图。网页撞染热图中区域颜色越深表示该区域撞染的次数越多，区域颜色越浅表示 该区域撞染的次数越少，从而能够使开发人员直观的看出该目标网页哪个区域的元素最消 耗终端设备的CPU,从而能够对该目标网页的素材进行优化。
[0107] 可选的，如图7所示，在执行204和205的同时，该网页撞染的分析方法还可W包 括：
[010引 208、终端设备在目标网页中的预设峽完成绘制之后，截取预设帧的峽图像。
[0109] 209、终端设备判断是否满足向服务器上报峽图像的上报条件，当满足上报条件时 执行210。
[0110] 210、终端设备将已获取的峽图像上报服务器。其中，预设峽可W是目标网页的每 一峽，也可W指定每间隔N峽取一峽作为预设峽，N为正整数；另外，判断是否满足预设条件 的方法与205相同，不再费述。
[0111] 另外，209中向服务器上报峽图像的上报条件和205中向服务器上报撞染参数的 上报条件可W为相同的上报条件，也可W为不同的上报条件。
[0112] W预设峽是目标网页的每一峽为例，截取目标网页的每一峽完成绘制时峽图像并 上传至网络侧的后台服务器，可W使开发人员直观的看出在每一峽网页撞染的程度，从而 可W使开发人员及时发现问题并对网页的加载进行优化。
[0113] 本实施例提供一种网页撞染的分析方法，在通过浏览器外壳确定待加载的目标网 页后，判断是否拦截目标网页的撞染参数，若拦截目标网页的撞 染参数，则为目标网页设置 钩子，而后在通过浏览器内核对目标网页进行网页撞染时，通过钩子获取绘制目标网页的 每一峽所用的撞染参数，当满足上报条件时将已获取的撞染参数上报至服务器，W使服务 器分析撞染参数并根据分析结果生成网页撞染热图。由此可见，相比现有技术而言，采用上 述方法能够根据获取的每一峽的撞染参数获取网页撞染的热图，从而提供一种利用热图进 行网页撞染分析的机制，能够在进行网页分析时扩大热图的应用范围，并且利用热图的特 性能够更加直观进行网页撞染分析，方便开发人员进行优化。
[0114] 本实施例提供一种终端设备1，如图8所示，终端设备1包括：
[0115] 判断单元11，用于判断是否拦截目标网页的撞染参数；
[0116] 设置单元12,用于若拦截目标网页的撞染参数，则为目标网页设置钩子；
[0117] 撞染捕获单元13,用于通过浏览器内核对目标网页进行网页撞染；通过钩子获取 绘制目标网页的每一峽所用的撞染参数；
[0118] 上报单元14,用于当满足向服务器上报撞染参数的上报条件时将已获取的撞染参 数上报至服务器，W使服务器分析撞染参数并根据分析结果生成网页撞染热图。
[0119] 可选的，如图9所示，撞染捕获单元13可W包括：
[0120] 分析单元131，用于通过浏览器内核对目标峽进行文档对象模型D0M进行分析，获 得D0M解析结果；目标峽为目标网页的任意一峽；
[0121] 调用单元132,用于通过浏览器内核调用开始绘制窗口W通知开始绘制目标峽；
[0122] 绘制单元133,用于根据D0M解析结果绘制目标峽；
[0123] 调用单元132还用于通过浏览器内核调用结束绘制窗口W通知目标峽绘制完成；
[0124] 拦截单元134,用于利用钩子拦截结束绘制窗口，获得目标峽的结束撞染参数；
[0125] 参数获取单元135,用于将结束撞染参数确定为目标峽的撞染参数；其中钩子为 应用程序接口钩子；
[0126] 绘制单元133还用于执行结束绘制窗口W结束目标峽的绘制。
[0127] 可选的，在另一种实现方式中，如图9所示，撞染捕获单元14包括：
[0128] 分析单元131，用于通过浏览器内核对目标峽进行D0M进行分析，获得D0M解析结 果，目标峽为目标网页的任意一峽；
[0129] 调用单元132,用于通过浏览器内核调用开始绘制窗口W通知开始绘制目标峽；
[0130] 拦截单元134,用于利用钩子拦截开始绘制窗口，获得目标峽的开始撞染参数；
[0131] 绘制单元133,用于根据D0M解析结果绘制目标峽；
[0132] 调用单元132还用于通过浏览器内核调用结束绘制窗口W通知目标峽绘制完成；
[0133] 拦截单元134还用于利用钩子拦截结束绘制窗口，获得目标峽的结束撞染参数；
[0134] 参数获取单元135,用于根据开始撞染参数和结束撞染参数获取目标峽的撞染参 数；其中钩子为应用程序接口钩子；
[0135] 绘制单元133还用于执行结束绘制窗口W结束目标峽的绘制。
[0136] 可选的，在另一种实现方式中，如图9所示，撞染捕获单元14包括：
[0137] 分析单元131，用于通过浏览器内核对目标峽进行D0M进行分析，获得D0M解析结 果；目标峽为目标网页的任意一峽；
[013引调用单元132,用于通过浏览器内核调用开始绘制窗口W通知开始绘制目标峽；
[0139] 拦截单元134,用于利用钩子拦截开始绘制窗口，获取目标峽的开始撞染参数；
[0140] 参数获取单元135,用于将开始撞染参数作为目标峽的撞染参数；其中钩子为应 用程序接口钩子；
[0141] 绘制单元133,用于根据D0M解析结果绘制目标峽；
[0142] 调用单元132还用于通过浏览器内核调用结束绘制窗口W通知目标峽绘制完成；
[0143] 绘制单元133还用于执行结束绘制窗口W结束目标峽的绘制。
[0144] 可选的，在另一种实现方式中，如图10所示，撞染捕获单元014包括：
[0145] 拦截单元134,用于在对目标峽进行绘制前，通过钩子拦截目标峽的窗口绘制消息 WM_PAINT，获得WM_PAINT中包含的目标峽的撞染参数；其中钩子为消息钩子；
[0146] 绘制单元133,用于通过浏览器内核根据WM_PAINT对目标峽进行绘制，目标峽为 目标网页的任意一峽。
[0147] 可选的，如图11所示，拦截单元134包括：
[014引参数拦截单元1341，用于利用应用程序接口钩子拦截结束绘制窗口，获得结束绘 制窗口的调用参数，调用参数包括窗口句柄和目标峽的结束撞染参数；
[0149] 窗口判断单元1342,用于根据窗口句柄判断结束绘制窗口是否为需要捕获的窗 n；
[0150] 保存单元1343,用于若结束绘制窗口是需要捕获的窗口，则保存目标峽的结束撞 染参数；
[0151] 其中，目标峽的结束撞染参数包括目标峽中需要绘制的矩形的参数，矩形的参数 包括矩形的左上角坐标和右下角坐标。
[0152] 可选的，上报单元13用于：
[0153] 监听预设事件，预设事件包括文档完成事件、D0M分析准备完成事件、上报定时器 到时事件、预先设置的自定义事件中的任意一种；
[0154] 若监听到预设事件发生，则确定满足上报条件，将已获取的撞染参数上报至服务 器；若未监听到预设事件发生，则继续执行监听预设事件。
[0155] 或者，可选的，上报单元用14用于：
[0156] 在获取了目标网页的任意一峽的撞染参数后，将任意一峽的撞染参数上报至服务 器。
[0157] 可选的，如图11所示，终端设备1还可W包括：
[015引截图单元15,用于在目标网页中的预设峽完成绘制之后，截取预设峽的峽图像；
[0159] 当满足向服务器上报峽图像的上报条件时上报单元15将已获取的峽图像上报服 务器。
[0160] 本实施例提供一种终端设备，首先判断是否拦截已加载的目标网页的撞染参数， 若拦截目标网页的撞染参数，则为目标网页设置钩子，而后在通过浏览器内核对目标网页 进行网页撞染时，通过钩子获取绘制目标网页的每一峽所用的撞染参数，当满足上报条件 时将已获取的撞染参数上报至服务器，W使服务器分析撞染参数并根据分析结果生成网页 撞染热图。由此可见，相比现有技术而言，采用上述方法能够根据获取的每一峽的撞染参数 获取网页撞染的热图，从而提供一种利用热图进行网页撞染分析的机制，能够在进行网页 分析时扩大热图的应用范围，并且利用热图的特性能够更加直观进行网页撞染分析，方便 开发人员进行优化。
[0161]另外，本实施例还提供一种网页撞染的分析系统，如图13所示，该系统包括：
[0162] 多个前述实施例提供的终端设备1，W及网络侧的后台服务器2。
[0163] 服务器2接收大量终端设备1上报的关于目标网页的撞染参数，而后后台服务器 根据接收到的该些撞染参数进行统计分析，并根据分析结果生成目标网页的网页撞染热 图。从而相比现有技术而言，提供了一种利用热图进行网页撞染分析的机制，扩大了热图的 应用范围，并且利用热图的特性能够更加直观进行网页撞染分析，方便开发人员进行优化。
[0164] 在本申请所提供的几个实施例中，应该理解到，所掲露的系统，装置和方法，可W 通过其它的方式实现。例如，W上所描述的装置实施例仅仅是示意性的，例如，所述单元的 划分，仅仅为一种逻辑功能划分，实际实现时可W有另外的划分方式，例如多个单元或组件 可W结合或者可W集成到另一个系统，或一些特征可W忽略，或不执行。另一点，所显示或 讨论的相互之间的禪合或直接禪合或通信连接可W是通过一些接口，装置或单元的间接禪 合或通信连接，可W是电性，机械或其它的形式。
[0165] 所述作为分离部件说明的单元可W是或者也可W不是物理上分开的，作为单元显 示的部件可W是或者也可W不是物理单元，即可W位于一个地方，或者也可W分布到多个 网络单元上。可W根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目 的。
[0166] 另外，在本发明各个实施例中的各功能单元可W集成在一个处理单元中，也可W 是各个单元单独物理包括，也可W两个或两个W上单元集成在一个单元中。上述集成的单 元既可W采用硬件的形式实现，也可W采用硬件加软件功能单元的形式实现。
[0167] 上述W软件功能单元的形式实现的集成的单元，可W存储在一个计算机可读取存 储介质中。上述软件功能单元存储在一个存储介质中，包括若干指令用W使得一台计算机 设备(可W是个人计算机，服务器，或者网络设备等）执行本发明各个实施例所述方法的部 分步骤。而前述的存储介质包括；U盘、移动硬盘、只读存储器（ReadHDnlyMemory,简称 ROM)、随机存取存储器（RandomAccessMemo巧，简称RAM)、磁碟或者光盘等各种可W存储 程序代码的介质。
[016引W上所述，仅为本发明的【具体实施方式】，但本发明的保护范围并不局限于此，任何 熟悉本技术领域的技术人员在本发明掲露的技术范围内，可轻易想到变化或替换，都应涵 盖在本发明的保护范围之内。因此，本发明的保护范围应W所述权利要求的保护范围为准。
【主权项】
1. 一种网页渲染的分析方法，其特征在于，所述方法包括： 判断是否拦截已加载的目标网页的渲染参数； 若拦截所述目标网页的渲染参数，则为所述目标网页设置钩子； 在所述目标网页进行网页渲染时，通过所述钩子获取绘制所述目标网页的每一帧所用 的渲染参数； 当满足向服务器上报渲染参数的上报条件时将已获取的渲染参数上报至所述服务器， 以使所述服务器分析所述渲染参数并根据分析结果生成网页渲染热图。2. 根据权利要求1所述的方法，其特征在于，所述在所述目标网页进行网 页渲染时，通 过所述钩子获取绘制所述目标网页的每一帧所用的渲染参数包括： 通过所述浏览器内核对目标帧进行文档对象模型DOM分析，获得DOM解析结果；所述目 标帧为所述目标网页的任意一帧； 通过所述浏览器内核调用开始绘制窗口以通知开始绘制所述目标帧； 根据所述DOM解析结果绘制所述目标帧； 通过所述浏览器内核调用结束绘制窗口以通知所述目标帧绘制完成； 利用所述钩子拦截所述结束绘制窗口，获得所述目标帧的结束渲染参数； 将所述结束渲染参数确定为所述目标帧的渲染参数；其中所述钩子为应用程序接口钩 子； 执行所述结束绘制窗口以结束所述目标帧的绘制。3. 根据权利要求1所述的方法，其特征在于，所述在所述目标网页进行网页渲染时，通 过所述钩子获取绘制所述目标网页的每一帧所用的渲染参数包括： 通过所述浏览器内核对目标帧进行DOM分析，获得DOM解析结果，所述目标帧为所述目 标网页的任意一帧； 通过所述浏览器内核调用开始绘制窗口以通知开始绘制所述目标帧； 利用所述钩子拦截所述开始绘制窗口，获得所述目标帧的开始渲染参数； 根据所述DOM解析结果绘制所述目标帧； 通过所述浏览器内核调用结束绘制窗口以通知所述目标帧绘制完成； 利用所述钩子拦截所述结束绘制窗口，获得所述目标帧的结束渲染参数； 根据所述开始渲染参数和所述结束渲染参数获取所述目标帧的渲染参数；其中所述钩 子为应用程序接口钩子； 执行所述结束绘制窗口以结束所述目标帧的绘制。4. 根据权利要求1所述的方法，其特征在于，所述在所述目标网页进行网页渲染时，通 过所述钩子获取绘制所述目标网页的每一帧所用的渲染参数包括： 通过所述浏览器内核对目标帧进行DOM分析，获得DOM解析结果；所述目标帧为所述目 标网页的任意一帧； 通过所述浏览器内核调用开始绘制窗口以通知开始绘制所述目标帧； 利用所述钩子拦截所述开始绘制窗口，获得所述目标帧的开始渲染参数； 将所述开始渲染参数确定为所述目标帧的渲染参数；其中所述钩子为应用程序接口钩 子； 根据所述DOM解析结果绘制所述目标帧； 通过所述浏览器内核调用结束绘制窗口以通知所述目标帧绘制完成； 执行所述结束绘制窗口以结束所述目标帧的绘制。5. 根据权利要求1所述的方法，其特征在于，所述在所述目标网页进行网页渲染时，通 过所述钩子获取绘制所述目标网页的每一帧所用的渲染参数包括： 在对目标帧进行绘制前，通过所述钩子拦截所述目标帧的窗口绘制消息WM_PAINT，获 得所述WM_PAINT中包含的所述目标帧的渲染参数；其中所述钩子为消息钩子； 通过浏览器内核根据所述WM_PAINT对所述目标帧进行绘制，所述目标帧为所述目标 网页的任意一帧。6. 根据权利要求2或3所述的方法，其特征在于，所述利用所述应用程序接口钩子拦截 所述结束绘制窗口，获得所述目标帧的结束渲染参数包括： 利用所述应用程序接口钩子拦截所述结束绘制窗口，获得所述结束绘制窗口的调用参 数，所述调用参数包括窗口句柄和所述目标帧的结束渲染参数； 根据所述窗口句柄判断所述结束绘制窗口是否为需要捕获的窗口； 若所述结束绘制窗口是需要捕获的窗口，则保存所述目标帧的结束渲染参数； 其中，所述目标帧的结束渲染参数包括所述目标帧中需要绘制的矩形的参数，所述矩 形的参数包括所述矩形的左上角坐标和右下角坐标。7. 根据权利要求1所述的方法，其特征在于，所述当满足向服务器上报渲染参数的上 报条件时将已获取的渲染参数上报至所述服务器包括： 监听预设事件，所述预设事件包括文档完成事件、DOM分析准备完成事件、上报定时器 到时事件、预先设置的自定义事件中的任意一种； 若监听到所述预设事件发生，则确定满足所述上报条件，将已获取的渲染参数上报至 服务器； 若未监听到所述预设事件发生，则继续执行所述监听预设事件。8. 根据权利要求1所述的方法，其特征在于，所述当满足向服务器上报渲染参数的上 报条件时将已获取的渲染参数上报至所述服务器包括： 在获取了所述目标网页的任意一帧的渲染参数后，将所述任意一帧的渲染参数上报至 所述服务器。9. 根据权利要求1所述的方法，其特征在于，所述方法还包括： 在所述目标网页中的预设帧完成绘制之后，截取所述预设帧的帧图像； 当满足向服务器上报帧图像的上报条件时将已获取的帧图像上报所述服务器。10. -种终端设备，其特征在于，所述终端设备包括： 判断单元，用于判断是否拦截已加载的目标网页的渲染参数； 设置单元，用于若拦截所述目标网页的渲染参数，则为所述目标网页设置钩子； 渲染捕获单元，用于在所述目标网页进行网页渲染时，通过所述钩子获取绘制所述目 标网页的每一帧所用的渲染参数； 上报单元，用于当满足向服务器上报渲染参数的上报条件时将已获取的渲染参数上报 至所述服务器，以使所述服务器分析所述渲染参数并根据分析结果生成网页渲染热图。11. 根据权利要求10所述的终端设备，其特征在于，所述渲染捕获单元包括： 分析单元，用于通过所述浏览器内核对目标帧进行文档对象模型DOM进行分析，获得 DOM解析结果；所述目标帧为所述目标网页的任意一帧； 调用单元，用于通过所述浏览器内核调用开始绘制窗口以通知开始绘制所述目标帧； 绘制单元，用于根据所述DOM解析结果绘制所述目标帧； 所述调用单元还用于通过所述浏览器内核调用结束绘制窗口以通知所述目标帧绘制 完成； 拦截单元，用于利用所述钩子拦截所述结束绘制窗口，获得所述目标帧的结束渲染参 数； 参数获取单元，用于将所述结束渲染参数确定为所述目标帧的渲染参数；其中所述钩 子为应用程序接口钩子； 所述绘制单元还用于执行所述结束绘制窗口以结束所述目标帧的绘制。12. 根据权利要求10所述的终端设备，其特征在于，所述渲染捕获单元包括： 分析单元，用于通过所述浏览器内核对目标帧进行DOM进行分析，获得DOM解析结果， 所述目标帧为所述目标网页的任意一帧； 调用单元，用于通过所述浏览器内核调用开始绘制窗口以通知开始绘制所述目标帧； 拦截单元，用于利用所述钩子拦截所述开始绘制窗口，获得所述目标帧的开始渲染参 数； 绘制单元，用于根据所述DOM解析结果绘制所述目标帧； 所述调用单元还用于通过所述浏览器内核调用结束绘制窗口以通知所述目标帧绘制 完成； 所述拦截单元还用于利用所述钩子拦截所述结束绘制窗口，获得所述目标帧的结束渲 染参数； 参数获取单元，用于根据所述开始渲染参数和所述结束渲染参数获取所述目标帧的渲 染参数；其中所述钩子为应用程序接口钩子； 所述绘制单元还用于执行所述结束绘制窗口以结束所述目标帧的绘制。13. 根据权利要求10所述的终端设备，其特征在于，所述渲染捕获单元包括： 分析单元，用于通过所述浏览器内核对目标帧进行DOM进行分析，获得DOM解析结果； 所述目标帧为所述目标网页的任意一帧； 调用单元，用于通过所述浏览器内核调用开始绘制窗口以通知开始绘制所述目标帧； 拦截单元，用于利用所述钩子拦截所述开始绘制窗口，获得所述目标帧的开始渲染参 数； 参数获取单元，用于将所述开始渲染参数确定为所述目标帧的渲染参数；其中所述钩 子为应用程序接口钩子； 绘制单元，用于根据所述DOM解析结果绘制所述目标帧； 所述调用单元还用于通过所述浏览器内核调用结束绘制窗口以通知所述目标帧绘制 完成； 所述绘制单元还用于执行所述结束绘制窗口以结束所述目标帧的绘制。14. 根据权利要求10所述的终端设备，其特征在于，所述渲染捕获单元包括： 拦截单元，用于在对目标帧进行绘制前，通过所述钩子拦截所述目标帧的窗口绘制消 息WM_PAINT，获得所述WM_PAINT中包含的所述目标帧的渲染参数；其中所述钩子为消息钩 子； 绘制单元，用于通过浏览器内核根据所述WM_PAINT对所述目标帧进行绘制，所述目标 帧为所述目标网页的任意一帧。15. 根据权利要求11或12所述的终端设备，其特征在于，所述拦截单元包括： 参数拦截单元，用于利用所述应用程序接口钩子拦截所述结束绘制窗口，获得所述结 束绘制窗口的调用参数，所述调用参数包括窗口句柄和所述目标帧的结束渲染参数； 窗口判断单元，用于根据所述窗口句柄判断所述结束绘制窗口是否为需要捕获的窗 n； 保存单元，用于若所述结束绘制窗口是需要捕获的窗口，则保存所述目标帧的结束渲 染参数； 其中，所述目标帧的结束渲染参数包括所述目标帧中需要绘制的矩形的参数，所述矩 形的参数包括所述矩形的左上角坐标和右下角坐标。16. 根据权利要求10所述的终端设备，其特征在于，所述上报单元用于： 监听预设事件，所述预设事件包括文档完成事件、DOM分析准备完成事件、上报定时器 到时事件、预先设置的自定义事件中的任意一种； 若监听到所述预设事件发生，则确定满足所述上报条件，将已获取的渲染参数上报至 服务器；若未监听到所述预设事件发生，则继续执行所述监听预设事件。17. 根据权利要求10所述的终端设备，其特征在于，所述上报单元用于： 在获取了所述目标网页的任意一帧的渲染参数后，将所述任意一帧的渲染参数上报至 所述服务器。18. 根据权利要求10所述的终端设备，其特征在于，所述终端设备还包括： 截图单元，用于在所述目标网页中的预设帧完成绘制之后，截取所述预设帧的帧图 像； 当满足向服务器上报帧图像的上报条件时所述上报单元将已获取的帧图像上报所述 服务器。
【专利摘要】本发明实施例提供一种网页渲染的分析方法和终端设备，涉及互联网技术领域，能够解决进行网页分析时，热图的应用范围小的问题。其方法为：在加载目标网页后，判断是否拦截目标网页的渲染参数，若拦截目标网页的渲染参数，则为目标网页设置钩子，而后在通过浏览器内核对目标网页进行网页渲染时，通过钩子获取绘制目标网页的每一帧所用的渲染参数，当满足上报条件时将已获取的渲染参数上报至服务器，以使服务器分析渲染参数并根据分析结果生成网页渲染热图。本发明实施例用于对网页渲染进行分析。
【IPC分类】G06F9/44
【公开号】CN104881273
【申请号】CN201410069677
【发明人】李昶博, 张博瑜
【申请人】腾讯科技（深圳）有限公司
【公开日】2015年9月2日
【申请日】2014年2月27日