【野门路试验室】手机端H5网页页面载入時间获得方式

  • 栏目:知识 时间:2021-01-04 09:50 分享新闻到:
<返回列表

该协议书分成不一样的作用控制模块域(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,一种根据了设备视觉效果,前面一种精而专,后面一种泛而广,不知道道是不是能给大伙儿产生一些新的构思?

创作者详细介绍

于晖全自动化检测萌新

-已经勤奋变成打翎毛球和舞蹈好的人里敲代码最好的。

分享新闻到:

更多阅读

【野门路试验室】手机端H5网页页面载入

知识 2021-01-04
该协议书分成不一样的作用控制模块域(domains),相近与Chrome开发设计者专用工具里的不一样...
查看全文

微信小程序开发设计

知识 2021-01-04
苏州市市快点儿儿餐为商家提供扫二维码点单、外卖送餐送餐、预订在网上网上订餐、预订订...
查看全文

网页游戏制作

知识 2020-12-30
网页游戏制作:微信小程序调用内置照相机实现拍照及图片上传导读: 一款小程序,很多时候...
查看全文
返回全部新闻


区域站点: 南丰县h5和小程序有什么区别   南宫市h5微信   囊谦县h5免费   南和县h5抽奖大转盘制作   南华县h5和小程序有什么区别   南江县h5微信   南京市h5免费   南靖县h5抽奖大转盘制作   南康市h5和小程序有什么区别   南乐县h5微信   南陵县h5免费   南宁市h5抽奖大转盘制作   南平市h5和小程序有什么区别   南皮县h5微信   南市区h5免费   南通市h5抽奖大转盘制作   南投县h5和小程序有什么区别   南雄市h5微信   南溪县h5免费   南阳市h5抽奖大转盘制作   南漳县h5和小程序有什么区别   南召县h5微信   南郑县h5免费   那坡县h5抽奖大转盘制作   那曲县h5和小程序有什么区别   纳雍县h5微信   讷河市h5免费   内黄县h5抽奖大转盘制作   内江市h5和小程序有什么区别   内丘县h5微信   内乡县h5免费   嫩江市h5抽奖大转盘制作   聂荣县h5和小程序有什么区别   尼玛县h5微信   尼木县h5免费   宁安市h5抽奖大转盘制作   宁波市h5和小程序有什么区别   宁城县h5微信   宁德市h5免费   宁都县h5抽奖大转盘制作   宁国市h5和小程序有什么区别   宁海县h5微信   宁化县h5免费   宁晋县h5抽奖大转盘制作   宁陵县h5和小程序有什么区别   宁明县h5微信   宁南县h5免费   宁强县h5抽奖大转盘制作   宁陕县h5和小程序有什么区别   宁武县h5微信   宁乡市h5免费   宁阳县h5抽奖大转盘制作   宁远县h5和小程序有什么区别   农安县h5微信   磐安县h5免费   盘锦市h5抽奖大转盘制作   盘山县h5和小程序有什么区别   磐石市h5微信   盘州市h5免费   蓬安县h5抽奖大转盘制作   澎湖县h5和小程序有什么区别   蓬莱市h5微信   彭山县h5免费   蓬溪县h5抽奖大转盘制作   彭阳县h5和小程序有什么区别   彭泽县h5微信   彭州市h5免费   偏关县h5抽奖大转盘制作   平安县h5和小程序有什么区别   平昌县h5微信   平定县h5免费   屏东县h5抽奖大转盘制作   平度市h5和小程序有什么区别   平果县h5微信   平和县h5免费   平湖市h5抽奖大转盘制作   平江县h5和小程序有什么区别   平乐县h5微信   平凉市h5免费   平利县h5抽奖大转盘制作   平罗县h5和小程序有什么区别   平陆县h5微信   屏南县h5免费   平泉市h5抽奖大转盘制作   屏山县h5和小程序有什么区别   平顺县h5微信   平塘县h5免费   平潭县h5抽奖大转盘制作   平武县h5和小程序有什么区别   萍乡市h5微信   平乡县h5免费   平阳县h5抽奖大转盘制作   平遥县h5和小程序有什么区别   平阴县h5微信   平邑县h5免费   平远县h5抽奖大转盘制作   平舆县h5和小程序有什么区别   皮山县h5微信   普安县h5免费   浦北县h5抽奖大转盘制作   浦城县h5和小程序有什么区别   普洱市h5微信   普格县h5免费   浦江县h5抽奖大转盘制作   普兰县h5和小程序有什么区别   普宁市h5微信   莆田市h5免费   迁安市h5抽奖大转盘制作   乾安县h5和小程序有什么区别   潜江市h5微信   潜山市h5免费  

友情链接: 月福步宜 微信小游戏h5 超恒鑫电子 h5免费制作 h5商城 h5 大转盘

Copyright © 2002-2020 h5免费_h5抽奖大转盘制作_h5和小程序有什么区别_h5微信_手机抽奖小程序 版权所有 (网站地图) 备案号:粤ICP备10235580号