CN106445809A - 一种获取网页加载首屏时延方法 - Google Patents

一种获取网页加载首屏时延方法 Download PDF

Info

Publication number
CN106445809A
CN106445809A CN201610766138.1A CN201610766138A CN106445809A CN 106445809 A CN106445809 A CN 106445809A CN 201610766138 A CN201610766138 A CN 201610766138A CN 106445809 A CN106445809 A CN 106445809A
Authority
CN
China
Prior art keywords
time delay
screen
resource
loaded
webpage
Prior art date
Application number
CN201610766138.1A
Other languages
English (en)
Other versions
CN106445809B (zh
Inventor
李万林
张洋
李克
Original Assignee
北京华恒铭圣科技发展有限责任公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 北京华恒铭圣科技发展有限责任公司 filed Critical 北京华恒铭圣科技发展有限责任公司
Priority to CN201610766138.1A priority Critical patent/CN106445809B/zh
Publication of CN106445809A publication Critical patent/CN106445809A/zh
Application granted granted Critical
Publication of CN106445809B publication Critical patent/CN106445809B/zh

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING; COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F11/00Error detection; Error correction; Monitoring
    • G06F11/36Preventing errors by testing or debugging software
    • G06F11/3668Software testing
    • G06F11/3672Test management
    • G06F11/3688Test management for test execution, e.g. scheduling of test suites
    • GPHYSICS
    • G06COMPUTING; CALCULATING; COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation
    • G06F16/9574Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
    • Y02D10/45

Abstract

一种获取网页加载首屏时延方法,属于网络和业务测试领域。首先获得并预置目标网站的布局;资源在html已经下载完成,且document.readyState已经在处于interactive状态同时,在目标网站的网页加载资源开始时注入js代码,轮询检查计算当前网页中加载的资源元素是否在首屏范围内及是否已经加载显示。一旦在首屏的资源符合布局并加载完成,则计算从用户请求网页开始到当前的时延,记为首屏时延。与现有技术相比较,本发明操作简单,用户只需点击功能按钮便可进行测试,无需其他繁琐操作;耗电低,本方法仅仅简单的脚本程序运行,占用cpu及内存资源极低,不使用其他的耗电硬件,对用户无感觉。计算速度快、安全可靠、普及性高、适用性广,易于大范围推广。

Description

一种获取网页加载首屏时延方法

技术领域

[0001] 本发明涉及网络优化测试领域,更具体地,本发明涉及获取网页加载首屏时延的 方法。

背景技术

[0002] 在现有的网络状态下,使用者经常会遇到带宽拥塞、应用性能低下、蠕虫病毒、DoS 肆虐、恶意入侵等对网络使用及资源有负面影响的问题及困扰,网络优化功能是针对现有 的防火墙、安防及入侵检测、负载均衡、频宽管理、网络防毒等设备及网络问题的补充,能够 通过接入硬件及软件操作的方式进行参数采集、数据分析,找出影响网络质量的原因,通过 技术手段或增加相应的硬件设备及调整使网络达到最佳运行状态的方法,使网络资源获得 最佳效益,同时了解网络的增长趋势并提供更好的解决方案。

[0003] 实现网络应用性能加速、安全内容管理、安全事件管理、用户管理、网络资源管理 与优化、桌面系统管理,流量模式监控、测量、追踪、分析和管理,并提高在广域网上应用传 输的性能的功能的产品。主要包括网络资源管理器,应用性能加速器,网页性能加速器三大 类,针对不同的需求及功能要求进行网络优化。

[0004] 现有的运营商网络优化模式中,首先需要有效获得网页首屏加载时延以衡量主流 网站用户感知的流畅度。随着移动网络带宽的提高以及手机用户数据使用的不断普及,运 营商需要以用户的视角来衡量网络及web网页的流畅度,而web网页里最直观最重要地就是 首屏显示时延(即用户看到并可操作的时延),而该时延直接反映了用户对一般网站流畅度 的主观认知,一般使用普通终端抓包或网络侧无法直接获得,从而使该指标无法简单有效 量化并分析。

[0005] 目前存在的首屏时延方式是通过截屏来比对分析图像,这种方法限制较大,一旦 网站内容更换也需要更换样本图片才能确保正常工作;且截图方式在手机端操作步骤复 杂、耗电高、精确性低,因此,不适合大规模推广。

发明内容

[0006] 本发明的目的在于协助运营商直观了解网站用户的体验感知,以达到简单方便获 得网站交互性感知时延,为此本发明提出了一种获取网页首屏时延的方法。

[0007] 为实现上述目的,本发明采用的技术方案为一种获取网页加载首屏时延方法,其 特征在于:网页首屏所需要加载的资源已经在html页面上加载完成;

[0008] 由于首屏时延所包含的主要部分在于资源的下载和加载,所以本方法通过在 webview中注入javascript结合网站布局动态检查屏幕状态来确定首屏时延,具体步骤如 下:

[0009] 步骤1)首先获得并预置目标网站页面的布局;

[0010] 步骤2)资源在html已经下载完成,且document. readyState已经在处于 interactive状态同时,在目标网站的网页加载资源开始时注入js代码,轮询检查计算当前 网页中加载的资源元素是否在首屏范围内及是否已经加载显示;

[0011] 步骤3)-旦在首屏的资源符合布局并加载完成,则计算从用户请求网页开始到当 前的时延,记为首屏时延;

[0012] 所述资源是指网页展示所需要加载的全部内容,包括文本、图片、脚本、flash。

[0013] 与现有技术相比较,本发明具有如下有益效果。

[0014] 1、操作简单,用户只需点击功能按钮便可进行测试,无需其他繁琐操作。

[0015] 2、耗电低,本方法仅仅简单的脚本程序运行,占用CPU及内存资源极低,不使用其 他的耗电硬件,对用户无感觉。

[0016] 3、计算速度快,用户在看到网页加载完毕时即可得知首页加载时延,不需要额外 等待。

[0017] 4、安全可靠,代码运行在专门测试程序里,不对普通用户产生任何影响。

[0018] 5、普及性高,普通android2.2以上手机均可运行,适用性广,易于大范围推广。

[0019] 总体而言,相对于截图对比的方式,本设计操作简单、耗电低、计算速度快,安全可 靠,适合大范围推广

附图说明

[0020] 图1是根据本发明进行的总体结构图。

[0021] 图2是本发明的工作时序图。

[0022]图3是本发明的流程图。

具体实施方式

[0023]以下结合附图1-3对本发明作进一步详细说明。

[0024] 如图1所示,实现本发明方法的架构包括操作系统、应用程序框架层、Webview-FrameWork层、应用程序、运行脚本。

[0025] 〇S-Android操作系统,包含Linux2.6内核及驱动,对系统安全性、内存、进程、网络 协议栈及硬件层进行管理。

[0026] 应用程序框架层包括活动管理器、窗口管理器、内容提供者、视图系统、包管理器、 电话管理器、资源管理器、位置管理器、通知管理器和XMPP服务等部分。应用程序框架层为 FrameWork,FrameWork是Android应用程序的运行基础,以提供android应用程序所使用的 API框架。

[0027] Webview-FrameWork层提供公共控件,Android应用程序能够使用webview进行网 页加载并运行javascript等操作。

[0028] 应用程序为指APP-Android首屏时延监测程序。

[0029] 运行脚本为JavaScript-java脚本,能够在html加载时运行,由webview提供运行 环境

[0030] 架构总体描述

[0031] 首屏时延监测程序运行在APP层,使用webview加载网页,并在html加载过程中注 入javascript脚本获得首屏时延时序图步骤描述前置条件:

[0032] 预先获得目标网站的页面布局特点,目标网站需要加载两张360*180,3张90*67的 图片。

[0033] 步骤1:首屏时延监测程序使用webview加载目标网站,譬如新浪网、搜狐网、凤凰 网等。

[0034] 步骤2: webview首先下载html并进行加载,在加载过程中会以此触发loading、 interactive、complete几个状态,当加载到interactive时表示网页已经开始响应与用户 之间的交互,譬如交互的方式为点击操作,但仍可能有一部分资源在加载。

[0035]步骤3:在 interactive 状态时注入 javascript。

[0036] 步骤4: javascript开始运行,首先根据当前网站的布局特点,遍历所有html已加 载的资源元素及根据资源位置计算是否属于首屏,同时也确定该资源是否已加载显示;如 果已经加载显示的资源全部符合布局要求,则判定为首屏加载完毕,考虑的加载的滞后性, 需要重复执行几次;

[0037] 步骤5:首屏判定完毕返回给主程序,从加载目标网站开始到此计算为首屏时延。

[0038] 流程图步骤描述:

[0039] 步骤1:开始执行首屏时延监测任务;

[0040] 步骤2:使用webview加载目标网站;

[0041] 步骤3:首先下载html及script;

[0042] 步骤4:在html下载完毕同时运行html及相关脚本;

[0043] 步骤5:在加载过程中会以此触发loading、interactive、complete几个状态,当加 载到interactive时表示网页已经响应用户交互(譬如点击操作),但仍可能有一部分资源 在加载;

[0044] 步骤6:在interactive状态时注入测试javascript;

[0045] 步骤7: javascript开始运行,首先根据当前网站的布局特点,遍历所有html已加 载的资源元素及根据资源位置计算是否属于首屏,同时也确定该资源是否已加载显示;如 果已经加载显示的资源全部符合布局要求,则判定为首屏加载完毕,考虑加载的滞后性,需 要重复执行几次;

[0046] 步骤8:首屏判定完毕返回给主程序,从加载目标网站开始到此计算为首屏时延;

[0047] 主要 JavaScript 代码 if(curU rl. i ndexOf(" sina." )>-1) { var template=new Object(); template.width =360;

[0048] template.height= 180; template.sum=0; template.defSum=2; temp 1 ates Arry, pu sh(temp i ate); var template-new ()bject〇; temp I ale. width =90; temp 1 ate. he i gh t=67; template.surn=0; template.defSum=3; templatesArry,push( template); document.addEventListener('DOMContentLoaded'. function() { window.js_method.notify("DOMContentLoaded"); tickEnablecHxue; }, false):

[0049] document.onreadystatechange = function!) { if (documentreadyState =:=: "interactive") { vvindow.js_method,nonfy("interact:ive"); } else if (document.readyState == "complete") | if (timer) J cl ea r I n terval (ti mer); } if(!alllmgLoaded){ al 11 mgLoaded=true; w indow.js_method.fi rstScreenFin(); } wi ndo w.j s_method, notify("comp lete"); } }; var timer - setinterval(tunction() { if(!tiekEnabled)5 return; } var obj = document.querySelectorAII('IMG'); for (var i = 0; i < obj.length; i++) {

[0050] var clLcft=obj[i].getBoundingCliemRect().left + documen l.documenlFIemeni.scro111.,eΠ ; Yar elPos = obj[i].getBoundingCiientReet〇.top + document, document E1 emen t.scro 11 Top; var elHeight _ obj[i].scrollHeiglit; yar e 1 Wi dth=obj [ i ]. scro 11 Wi dth; if (obj[i].src !== null && obj[i].src !== undefined && obj[i].src !==" && elHeightX) && elPosX) && elWidthX) && {elPos + elHeight) <_ screenLimitHeight) J var picExist=false; if (firstScreenImgs.length > 0) { for(varj ^0;j < firstScreenlmgs.length; j++) { var img = firstScrccnlmgsjj]; if (img.src == obj[i].src) { picExist=4rue; break; }

[0051] if(!picExist) | fi rstSc reenl mes. push (ob j Γ i 1) * } } for (var i = 0; ΐ < firstScreenlmgs.length; i++) { vaf img = firstScreenImgs[i]; if (img.complete) { for(var j=0;j<templatesAriy. length;j++) { if( templates Arryij].width==iiTig.scroll Width &81 Math.abs(teinplaresArry[j].height-img.sciOlIHeight)<5 &.& templatesArry[j].siira<templatesArry[j].defSiim){ te mp 1 ate s Λ r ry [j ] ' s u m++; ) } } var elLeft=img. get BoondmgC 1 i entRect() .left .+ document.documentElement.scrollLeft; var elPos = img.getBoundingClientRect().top + doeument.documentElement.scroilTop; varcIHcight = img.scrollHcight;

[0052] var el Width=img.scroll Width; } var templateOK=true; for(var j=0;j<templatesAiTy.iength;j++) { if(teinplatesArry[j].sum<tempiatesAtTy[j].defSum)( temp I ateO K =fal se; } } if (templateOK && !al 1 imgLoaded) i al 1 ImgLoaded=true; window.js_method.firstSci'eenFin(); }

[0053] },1000)。

Claims (4)

1. 一种获取网页加载首屏时延方法,其特征在于:网页首屏所需要加载的资源已经在 html页面上加载完成; 由于首屏时延所包含的主要部分在于资源的下载和加载,所以本方法通过在web v i ew 中注入javascript结合网站布局动态检查屏幕状态来确定首屏时延,具体步骤如下: 步骤1)首先获得并预置目标网站页面的布局; 步骤2)资源在html已经下载完成,且document.readyState已经在处于interactive状 态同时,在目标网站的网页加载资源开始时注入js代码,轮询检查计算当前网页中加载的 资源元素是否在首屏范围内及是否已经加载显示; 步骤3)-旦在首屏的资源符合布局并加载完成,则计算从用户请求网页开始到当前的 时延,记为首屏时延; 所述资源是指网页展示所需要加载的全部内容,包括文本、图片、脚本、flash。
2. 根据权利要求1所述的一种获取网页加载首屏时延方法,其特征在于:实现本方法的 架构包括操作系统、应用程序框架层、Webview-FrameWork层、应用程序、运行脚本; OS-Android操作系统,包含Linux2.6内核及驱动,对系统安全性、内存、进程、网络协议 栈及硬件层进行管理; 应用程序框架层包括活动管理器、窗口管理器、内容提供者、视图系统、包管理器、电话 管理器、资源管理器、位置管理器、通知管理器和XMPP服务等部分;应用程序框架层为 FrameWork,FrameWork是Android应用程序的运行基础,以提供android应用程序所使用的 API框架; Webview-FrameWork层提供公共控件,Android应用程序能够使用webview进行网页加 载并运行javascript等操作; 应用程序为指APP-Android首屏时延监测程序; 运行脚本为JavaScript-java脚本,能够在html加载时运行,由webview提供运行环境。
3. 根据权利要求1所述的一种获取网页加载首屏时延方法,其特征在于:架构总体描述 如下, 首屏时延监测程序运行在APP层,使用webview加载网页,并在html加载过程中注入 javascript脚本获得首屏时延时序图步骤描述前置条件: 预先获得目标网站的页面布局特点; 步骤1:首屏时延监测程序使用webview加载目标网站; 步骤2 : web view首先下载html并进行加载,在加载过程中会以此触发loading、 interactive、complete几个状态,当加载到interactive时表示网页已经开始响应与用户 之间的交互,譬如交互的方式为点击操作,但仍可能有一部分资源在加载; 步骤3:在interactive状态时注入javascript; 步骤4: javascript开始运行,首先根据当前网站的布局特点,遍历所有html已加载的 资源元素及根据资源位置计算是否属于首屏,同时也确定该资源是否已加载显示;如果已 经加载显示的资源全部符合布局要求,则判定为首屏加载完毕,考虑的加载的滞后性,需要 重复执行几次; 步骤5:首屏判定完毕返回给主程序,从加载目标网站开始到此计算为首屏时延。
4. 根据权利要求1所述的一种获取网页加载首屏时延方法,其特征在于:流程图步骤描 述: 步骤1:开始执行首屏时延监测任务; 步骤2:使用webview加载目标网站; 步骤3:首先下载html及script; 步骤4:在html下载完毕同时运行html及相关脚本; 步骤5:在加载过程中会以此触发loading、interactive、complete几个状态,当加载到 interactive时表示网页已经响应用户交互(譬如点击操作),但仍可能有一部分资源在加 载; 步骤6:在interactive状态时注入测试javascript; 步骤7: javascript开始运行,首先根据当前网站的布局特点,遍历所有html已加载的 资源元素及根据资源位置计算是否属于首屏,同时也确定该资源是否已加载显示;如果已 经加载显示的资源全部符合布局要求,则判定为首屏加载完毕,考虑加载的滞后性,需要重 复执行几次; 步骤8:首屏判定完毕返回给主程序,从加载目标网站开始到此计算为首屏时延。
CN201610766138.1A 2016-08-30 2016-08-30 一种获取网页加载首屏时延方法 CN106445809B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201610766138.1A CN106445809B (zh) 2016-08-30 2016-08-30 一种获取网页加载首屏时延方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201610766138.1A CN106445809B (zh) 2016-08-30 2016-08-30 一种获取网页加载首屏时延方法

Publications (2)

Publication Number Publication Date
CN106445809A true CN106445809A (zh) 2017-02-22
CN106445809B CN106445809B (zh) 2019-04-05

Family

ID=58091073

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201610766138.1A CN106445809B (zh) 2016-08-30 2016-08-30 一种获取网页加载首屏时延方法

Country Status (1)

Country Link
CN (1) CN106445809B (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109347726A (zh) * 2018-11-06 2019-02-15 西安海润通信技术有限公司 一种基于微信公众号的手机上网网络感知质量评测方法

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130007710A1 (en) * 2011-06-28 2013-01-03 Microsoft Corporation Deploying Environments For Testing By Providing Instantaneous Availability Of Prebuilt Environments
CN104899336A (zh) * 2015-07-01 2015-09-09 北京博睿宏远科技发展有限公司 一种测量网页首屏完全渲染时间的方法
CN105045645A (zh) * 2015-09-22 2015-11-11 广州神马移动信息科技有限公司 网页加载方法、装置及系统
CN105045620A (zh) * 2015-07-07 2015-11-11 深信服网络科技(深圳)有限公司 测量网页首屏加载时间的方法及检测设备

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130007710A1 (en) * 2011-06-28 2013-01-03 Microsoft Corporation Deploying Environments For Testing By Providing Instantaneous Availability Of Prebuilt Environments
CN104899336A (zh) * 2015-07-01 2015-09-09 北京博睿宏远科技发展有限公司 一种测量网页首屏完全渲染时间的方法
CN105045620A (zh) * 2015-07-07 2015-11-11 深信服网络科技(深圳)有限公司 测量网页首屏加载时间的方法及检测设备
CN105045645A (zh) * 2015-09-22 2015-11-11 广州神马移动信息科技有限公司 网页加载方法、装置及系统

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109347726A (zh) * 2018-11-06 2019-02-15 西安海润通信技术有限公司 一种基于微信公众号的手机上网网络感知质量评测方法

Also Published As

Publication number Publication date
CN106445809B (zh) 2019-04-05

Similar Documents

Publication Publication Date Title
US10257199B2 (en) Online privacy management system with enhanced automatic information detection
US20170116349A1 (en) Creation and delivery of pre-rendered web pages for accelerated browsing
CA2936379C (en) System and method for detecting classes of automated browser agents
US20200137196A1 (en) Capturing and replaying application sessions using resource files
Luo et al. Attacks on WebView in the Android system
US8752183B1 (en) Systems and methods for client-side vulnerability scanning and detection
Felt et al. Phishing on mobile devices
US9135445B2 (en) Providing information about a web application or extension offered by website based on information about the application or extension gathered from a trusted site
Wang et al. The Multi-Principal OS Construction of the Gazelle Web Browser.
US20160198015A1 (en) URL Prefetching
Starov et al. Xhound: Quantifying the fingerprintability of browser extensions
US20190306278A1 (en) Determining whether to perform requests at a server or at a client device based on resources provided by the client device
EP2419843B1 (en) Method and apparatus for authentication of a remote session
US8495137B2 (en) Preventing cross-site request forgery attacks on a server
US8332654B2 (en) Secure framework for invoking server-side APIs using AJAX
US10613916B2 (en) Enabling a web application to call at least one native function of a mobile device
CN102088379B (zh) 基于沙箱技术的客户端蜜罐网页恶意代码检测方法与装置
EP1088427B1 (en) System and method for security of code
CN101539911B (zh) 加快浏览器网页显示的装置及方法
US20140137006A1 (en) Graphical Overlay Related To Data Mining And Analytics
US10708287B2 (en) Analyzing client application behavior to detect anomalies and prevent access
CN105940654B (zh) 特权静态被托管的web应用
KR20150009996A (ko) 푸쉬메세지를 표시하는 방법, 장치, 프로그램 및 기록매체
US8806627B1 (en) Content randomization for thwarting malicious software attacks
US9460292B2 (en) Dynamic rendering of a document object model

Legal Events

Date Code Title Description
PB01 Publication
C06 Publication
SE01 Entry into force of request for substantive examination
C10 Entry into substantive examination
GR01 Patent grant
GR01 Patent grant