该协议书分成不一样的作用控制模块域(domains),相近与Chrome开发设计者专用工具里的不一样作用控制模块,常见API:
Network:互联网恳求、Cookie、缓存文件、资格证书等有关內容
Page:网页页面的载入、資源內容、弹层、截屏、复印等有关內容
DOM:文本文档DOM的获得、改动、删掉、查寻等有关內容
Runtime:Java编码的实行
Network:互联网恳求、Cookie、缓存文件、资格证书等有关內容
Page:网页页面的载入、資源內容、弹层、截屏、复印等有关內容
DOM:文本文档DOM的获得、改动、删掉、查寻等有关內容
Runtime:Java编码的实行
Chrome DevTools Protocol是根据 WebScoket 协议书来与网页页面创建通讯安全通道,由推送给网页页面的Commands和它所造成的Events构成;每一个 Command 包括request 和 response 两台分,request 一部分特定所需开展的实际操作及其实际操作说要的主要参数,response 一部分说明实际操作情况,取得成功或不成功。
可是一般不用立即启用Websocket有关的內容来启用Chrome的调节指令,现阶段现有许多封裝库,chrome-remote-interface - java是现阶段应用最广的,而此次试验将应用一个轻量的python封裝库PyChromeDevTools。
试验计划方案
此次试验将试着运用CDP来获得Android WebView或Android Chrome中网页页面载入時间数据信息。
本溪企业网站建设
提前准备环节
Android必须port forwarding:
若要获得APP的WebView中数据信息,必须将其配备为适用debugging:
并必须了解相匹配的pid:
撰写编码获得网页页面载入数据信息
获得网页页面loading時间:
获得网页页面loading時间:
輸出結果:
能够挑选带缓存文件和没有缓存文件的方式reload,能够用以检测数次开启网页页面的特性数据信息转变。
能够挑选带缓存文件和没有缓存文件的方式reload,能够用以检测数次开启网页页面的特性数据信息转变。
获得全部网页页面载入的url:
获得全部网页页面载入的url:
在其中messages中是全部恳求数据信息,且为json文件格式:
获得当今网页页面資源树
获得当今网页页面資源树
能够相近在console操纵台键入js指令,比如获得W3C的PerformanceTimingAPI的時间数据信息。
能够相近在console操纵台键入js指令,比如获得W3C的PerformanceTimingAPI的時间数据信息。
能够相互配合Command Line API干大量事。
获得含有特定的 CSS 挑选器的第一个 DOM 原素的引入:
简易alert(1):
显示屏放缩:
完毕检测清除
检测结束后查询和消除adb forward:
假如将WebView改成Chrome for Android,能够适用大量protocol,包含:
截屏:Page.captureScreenshot
仿真模拟不一样互联网自然环境:Network.emulateNetworkConditions
截屏:Page.captureScreenshot
仿真模拟不一样互联网自然环境:Network.emulateNetworkConditions
结果
优点:
准确:它是 Webkit 核心意见反馈的数据信息,而并不是表层 Java 插口的统计分析,都不是根据代理商监管互联网数据信息取得的結果。
丰富多彩:有许多数据信息,其他方式压根拿不上。比如,缓存文件情况、Java 方式实行状况。
规范:调节协议书自身早已界定了很多的 JSON 数据信息构造,你没必须再度开展抽象性设计方案。
准确:它是 Webkit 核心意见反馈的数据信息,而并不是表层 Java 插口的统计分析,都不是根据代理商监管互联网数据信息取得的結果。
丰富多彩:有许多数据信息,其他方式压根拿不上。比如,缓存文件情况、Java 方式实行状况。
规范:调节协议书自身早已界定了很多的 JSON 数据信息构造,你没必须再度开展抽象性设计方案。
缺点:
若Chrome早已执政全部手机上,那该方式基本不会有缺点;可是现阶段我国Android端仍存有许多别的访问器的拥趸者,而他们可沒有都开源系统成那样。
若Chrome早已执政全部手机上,那该方式基本不会有缺点;可是现阶段我国Android端仍存有许多别的访问器的拥趸者,而他们可沒有都开源系统成那样。
根据设备视觉效果的网页页面动态性载入全过程的剖析方式
哪来的门路
前一种方式现阶段只有获得H5网页页面在Chrome或WebView下开启时的载入時间,如要要在非Chrome非原生态访问器勤奋行時间获得呢?乃至是必须适配iOS呢?
前几个星期在百度搜索QA的微信公众号里见到了一篇根据帧测算的精准App响应速度测算的的文章内容。行为主体构思是将实际操作App的视頻线下解决为去重复后的帧的数字能量数组,并呈现在服务平台上供客户人为因素判断选中App刚开始起动和起动完毕時间点的相匹配帧,进而测算出相匹配的用时。而这一方式还可以用以H5网页页面载入時间的获得。
可是除开文章内容创作者明确提出的实行時间相对性较长的缺陷之外,试验一个超过一分钟的视頻,用该方式会造成很多截帧,客户访问挑选也能变得痛楚。
因而考虑到将人为因素判断H5网页页面载入時间刚开始和完毕的全过程也用设备去处理。
试验构思
对不一样型号、访问器的应用观查,小结发觉访问器一般会包括一个进展条来标志网页页面的载入进展。进展条的出現和消退,也各自相匹配了网页页面的刚开始和完毕载入2个時间点。因而根据对进展条的鉴别剖析来明确载入時间,也合乎客户对网页页面载入全过程的具体视觉效果体会。
本试验的关键工作中內容也就变为了根据设备视觉效果的方式来寻找进展条的部位和情况,进而判断载入時间。
首例鉴别计划方案及实际效果
小结进展条视觉效果特性:
静态数据特点:一条水准的平行线
健身运动特点:从左方刚开始出現,慢慢加长直至右端消退
单帧静态数据特点剖析
录屏截帧
将图象变为灰度值图
边沿检验
霍夫转换搜索平行线
对寻找的平行线做进一步过虑,留有水准的且从最左方刚开始的平行线,即是潜伏的进展条
录屏截帧
将图象变为灰度值图
边沿检验
霍夫转换搜索平行线
对寻找的平行线做进一步过虑,留有水准的且从最左方刚开始的平行线,即是潜伏的进展条
多帧动态性特点剖析
构思:
在持续的多帧里,在row同样的部位出現的平行线,它的col特性是伴随着帧数提升而逐渐提升的。
进展条会不断出現在好几个持续帧中,比如至少必须300Ms
第一次出現时的平行线长短要低于全部显示屏总宽的4/5
当这条平行线消退时,它的较大长短与最初出現时的最少长短的误差,必须超出显示屏总宽的1/5(过虑掉相近固定不动页面切分线)
在持续的多帧里,在row同样的部位出現的平行线,它的col特性是伴随着帧数提升而逐渐提升的。
进展条会不断出現在好几个持续帧中,比如至少必须300Ms
第一次出現时的平行线长短要低于全部显示屏总宽的4/5
当这条平行线消退时,它的较大长短与最初出現时的最少长短的误差,必须超出显示屏总宽的1/5(过虑掉相近固定不动页面切分线)
实际效果
该版本号早已能够把出示的手机上实际操作录屏中存有的全部载入恶性事件段都找到来,可是仍存有下列不够:
仍存有非进展条的原素被误鉴别成进展条,乃至是人眼观查非平行线。
对进展条的起始点鉴别不足精准,比如进展条仅有3个清晰度时,人眼能够分辨是进展条,可是cv未鉴别。
仍存有非进展条的原素被误鉴别成进展条,乃至是人眼观查非平行线。
对进展条的起始点鉴别不足精准,比如进展条仅有3个清晰度时,人眼能够分辨是进展条,可是cv未鉴别。
不断改善计划方案
改善构思:人眼能确定3个清晰度的蓝点是进展条起止一部分,由于人们依据工作经验了解这一部位的深蓝色清晰度将会是进展条一一部分。
因此,大家将鉴别全过程分成两台分:
第一遍剖析全部视頻帧,学习培训明确进展条的大约部位(row值),进展条的backgroud color foreground color的色调范畴。
第二遍剖析全部视頻帧,在将会的row值部位,依据色调转变状况更加精准确实定进展条的起止和完毕点。
特点获取
去黑边:由于存有视频录制视頻清晰度与手机上原显示屏清晰度的不配对难题,造成视頻帧合理范畴上下两侧将会存有黑边,危害检验。因而根据阀值检验方式明确上下黑边并除去。
相近最初的鉴别计划方案我国法,寻找将会的健身运动平行线的部位,并对反复出現的部位信息内容做合拼与计数,过虑掉影响,并在此全过程中测算进展条的色调特点(RGB值范畴)。
精确鉴别
解析xml全部视頻帧,在第一遍寻找的将会的progressbar的row值部位上,测算全部row的清晰度色调特点,与以前获取的色调配对的,则觉得是进展条。
实际效果
結果:
第一遍学习培训获得的row值比较精准,能够鉴别出伴随着网页页面的翻转造成的进展条在2个部位上轮着出現的状况。
根据色调特点鉴别的方式能够鉴别到仅有3个清晰度点的这类状况,鉴别到的进展条起止部位更加精确。下面的图中从左往右各自是进展条出現前一帧、进展条出現之仅有3个清晰度、进展条最终一帧、进展条消退以后。
小结
鉴别精密度:现阶段现有检测case下为100%鉴别,无错判无漏判,且刚开始与完毕点精准到帧。
解决高效率:1080p的mp4文档,i7单进程下,必须花销视頻时间的1/5時间。
存有难题:由于根据录屏,因而精密度受到限制于录屏帧率;另外该方式获得的载入時间为loading时间,将会仍存有多线程恳求未完的状况,并非彻底客户角度的可互动時间(Time to Interactive , TTI)。
最终小小的的小结
文中详细介绍和试验了2种手机端H5网页页面载入時间的全自动化获得方式,一种运用了Chrome DevTools Protocol,一种根据了设备视觉效果,前面一种精而专,后面一种泛而广,不知道道是不是能给大伙儿产生一些新的构思?
创作者详细介绍
于晖全自动化检测萌新
-已经勤奋变成打翎毛球和舞蹈好的人里敲代码最好的。