您当前的位置:首页 > 电脑百科 > 程序开发 > 算法

H5页面性能指标解读

时间:2020-07-23 15:50:55  来源:  作者:

H5页面加载过程,主要包括2个部分:H5页面容器加载和资源文件加载。

H5页面容器加载过程指标明细如图:

对照浏览器window下的Performance的数据指标。

H5页面性能指标解读

H5页面容器加载过程指标明细

H5页面容器各关键点的时耗计算方式如下:

  • 准备耗时 = domainLookupStart - navigationStart;
  • 重定向耗时= redirectEnd - redirectStart;
  • DNS解析耗时 = domainLookupEnd - domainLookupStart;
  • IP连接耗时 = connectEnd - connectStart;
  • 首包耗时= responseStart - requestStart;
  • 完整包加载耗时 = 有两种计算方式,如果从网络加载,取值:responseEnd - requestStart;如果加载缓存:responseEnd - fetchStart;(从缓存加载,performance只有responseEnd,fetchStart有值,其他参数值都为0)
  • dom处理 = domComplete - domLoading;
  • 页面白屏时间 = domLoading - navigationStart;
  • 首屏时间 = 取值:loadEventStart- navigationStart; 前端开发也可根据业务侧理解的首屏手动打点tag,取值为:tagTime - navigationStart;
  • 可交互 = domContentLoadedEventEnd - navigationStart;
  • 页面完全加载耗时 = loadEventEnd - navigationStart;

UIWebView资源文件加载过程如下:

H5页面性能指标解读

UIWebView资源文件加载

关键点的时耗计算方式如下:

  • 准备耗时 = domainLookup - fetchStart ;
  • DNS解析耗时 = domainLookupEnd - domainLookupStart;
  • IP连接耗时 = connectEnd - connectStart;
  • 首包耗时 = responseStart - requestStart;
  • 完整包加载耗时 = 有两种计算方式,如果从网络加载,取值:responseEnd - requestStart;如果加载缓存:responseEnd - fetchStart;(从缓存加载,performance只有responseEnd,fetchStart有值,其他参数值都为0)。

window Performance 数据指标:

H5页面性能指标解读

UIWebView资源文件加载过程

n["DNS解析时间"] = e.domainLookupEnd - e.domainLookupStart,

n["TCP完成握手时间"] = e.connectEnd - e.connectStart,

n["重定向时间"] = e.redirectEnd - e.redirectStart,

n["html的ttfb耗时"] = e.responseStart - e.requestStart,

n["HTTP请求响应完成时间"] = e.responseEnd - e.requestStart,

n["DOM开始加载前所花费时间"] = e.responseEnd - e.navigationStart,

n["DOM加载完成时间"] = e.domComplete - e.domLoading,

n["DOM结构解析完成时间"] = e.domInteractive - e.domLoading,

n["脚本加载时间"] = e.domContentLoadedEventEnd - e.domContentLoadedEventStart,

n["onload事件时间"] = e.loadEventEnd - e.loadEventStart,

n["页面完全加载时间"] = n["重定向时间"] + n["DNS解析时间"] + n["TCP完成握手时间"] + n["HTTP请求响应完成时间"] + n["DOM结构解析完成时间"] + n["DOM加载完成时间"]

参考: https://www.jianshu.com/p/47a6b7866ba6



Tags:H5   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
前言前段时间笔者一直忙于数据可视化方面的工作,比如如何实现拖拽式生成可视化大屏,如何定制可视化图表交互和数据导入方案等,这块需求在B端企业中应用非常大,所以非常有探索价...【详细内容】
2021-08-18  Tags: H5  点击:(90)  评论:(0)  加入收藏
首先明确几个概念1. W3C:指万维网联盟(World Wide Web Consortium),是一个国际的标准的制定机构。2. H5(HTML5,HyperText Markup Language 5的缩写),HTML5 是由W3C制定的新HTML标...【详细内容】
2021-07-06  Tags: H5  点击:(152)  评论:(0)  加入收藏
Hybrid APP指的是半原生半Web的混合类App。需要下载安装,看上去类似Native App,但只有很少的UI Web View,访问的内容是 Web 。 原生是Native APP,H5就是Web App在Hybrid 当中,如...【详细内容】
2021-04-28  Tags: H5  点击:(289)  评论:(0)  加入收藏
前言移动端开发在前端里像神一样地存在,不是说它多难而是说它坑位实在太多了,怎样填都填不完。Android和iOS各显神通,Android的系统版本和屏幕分辨率多得难以一招兼容,iOS的顽固...【详细内容】
2021-03-18  Tags: H5  点击:(228)  评论:(0)  加入收藏
前言浏览器越来越强大,从文字、图片、到声音、视频、动画与游戏都有了丰富的应用。H5之后,不仅仅是表现层,数据存储与通讯能力也得到大幅度提高,并逐渐取得共识,形成了标准。随着...【详细内容】
2020-12-29  Tags: H5  点击:(165)  评论:(0)  加入收藏
今天给大家推荐一款超棒的H5可视化网页制作编辑工具H5DS。 h5ds 基于HTML5构建的web网页可视化制作器。通过轻松拖拽元素即可快速生成精美的H5页面。 技术栈 前端:React+Mo...【详细内容】
2020-11-12  Tags: H5  点击:(393)  评论:(0)  加入收藏
项目已经在10月底上线,最近又进入到其他项目里,到今天才抽出时间对这个项目总结一下。回顾一下,在项目的初期就设定为轻量级H5 App,上线后已经运行在 原生app、微信小程序、百...【详细内容】
2020-11-10  Tags: H5  点击:(109)  评论:(0)  加入收藏
上一篇主要是对新项目的一些介绍和对技术栈升级的思考,之前也提到,既然是新项目,从0开始,没有历史包袱,应该可以放手玩了。但考虑到如何能让老项目受益,并且从技术架构的普适性去...【详细内容】
2020-10-23  Tags: H5  点击:(87)  评论:(0)  加入收藏
本文主要讲述的是采用浏览器来识别二维码 / 条形码等,并对其解析得到相应的结果。还有一个目的就是为了验证 iPhone 是否无法自动开启摄像头进行扫描。需求也非常简单,就是用...【详细内容】
2020-10-20  Tags: H5  点击:(1184)  评论:(0)  加入收藏
一、说明1. JSMpeg简介JSMpeg是一个JavaScript编写的视频解码器,支持MPEG1视频、MP2音频解码,WebGL&Canvas2D渲染、WebAudio音频输出。 JSMpeg可以通过Ajax加载静态视频、或...【详细内容】
2020-09-02  Tags: H5  点击:(159)  评论:(0)  加入收藏
▌简易百科推荐
前言Kafka 中有很多延时操作,比如对于耗时的网络请求(比如 Produce 是等待 ISR 副本复制成功)会被封装成 DelayOperation 进行延迟处理操作,防止阻塞 Kafka请求处理线程。Kafka...【详细内容】
2021-12-27  Java技术那些事    Tags:时间轮   点击:(1)  评论:(0)  加入收藏
博雯 发自 凹非寺量子位 报道 | 公众号 QbitAI在炼丹过程中,为了减少训练所需资源,MLer有时会将大型复杂的大模型“蒸馏”为较小的模型,同时还要保证与压缩前相当的结果。这就...【详细内容】
2021-12-24  量子位    Tags:蒸馏法   点击:(9)  评论:(0)  加入收藏
分稀疏重建和稠密重建两类:稀疏重建:使用RGB相机SLAMOrb-slam,Orb-slam2,orb-slam3:工程地址在: http://webdiis.unizar.es/~raulmur/orbslam/ DSO(Direct Sparse Odometry)因为...【详细内容】
2021-12-23  老师明明可以靠颜值    Tags:算法   点击:(7)  评论:(0)  加入收藏
1. 基本概念希尔排序又叫递减增量排序算法,它是在直接插入排序算法的基础上进行改进而来的,综合来说它的效率肯定是要高于直接插入排序算法的;希尔排序是一种不稳定的排序算法...【详细内容】
2021-12-22  青石野草    Tags:希尔排序   点击:(6)  评论:(0)  加入收藏
ROP是一种技巧,我们对execve函数进行拼凑来进行system /bin/sh。栈迁移的特征是溢出0x10个字符,在本次getshell中,还碰到了如何利用printf函数来进行canary的泄露。ROP+栈迁移...【详细内容】
2021-12-15  星云博创    Tags:栈迁移   点击:(19)  评论:(0)  加入收藏
一、什么是冒泡排序1.1、文字描述冒泡排序是一种简单的排序算法。它重复地走访要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来。走访数列的工作是重复地...【详细内容】
2021-12-15    晓掌柜丶韶华  Tags:排序算法   点击:(16)  评论:(0)  加入收藏
在了解golang的map之前,我们需要了解哈希这个概念。哈希表,又称散列表(Hash table),是根据键(key)而直接访问在内存储存位置的数据结构。也就是说,它通过计算出一个键值的函数,将...【详细内容】
2021-12-07  一棵梧桐木    Tags:哈希表   点击:(13)  评论:(0)  加入收藏
前面文章在谈论分布式唯一ID生成的时候,有提到雪花算法,这一次,我们详细点讲解,只讲它。SnowFlake算法据国家大气研究中心的查尔斯·奈特称,一般的雪花大约由10^19个水分子...【详细内容】
2021-11-17  小心程序猿QAQ    Tags:雪花算法   点击:(24)  评论:(0)  加入收藏
导读:在大数据时代,对复杂数据结构中的各数据项进行有效的排序和查找的能力非常重要,因为很多现代算法都需要用到它。在为数据恰当选择排序和查找策略时,需要根据数据的规模和类型进行判断。尽管不同策略最终得到的结果完...【详细内容】
2021-11-04  华章科技    Tags:排序算法   点击:(37)  评论:(0)  加入收藏
这是我在网上找的资源的一个总结,会先给出一个我看了觉得还行的关于算法的讲解,再配上实现的代码: Original author: Bill_Hoo Original Address: http://blog.sina.com.cn/s/bl...【详细内容】
2021-11-04  有AI野心的电工和码农    Tags: KMP算法   点击:(36)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条