perform指标分析_performace 监控统计

浏览器浏览器是多进程的，js是单线程的。进程：程序运行，资源分配。

线程：进程中独立执行的流

浏览器有哪些进程Browser进程： 浏览器的主进程(负责协调、主控)

GPU进程： 最多一个，用于3D绘制等

浏览器渲染进程：默认每个Tab页面一个进程，互不影响

第三方插件进程：每种类型的插件对应一个进程，仅当使用该插件时才创建

注：在浏览器中打开一个网页相当于新起了一个进程(进程内有自己的多线程)浏览器内核(渲染进程)是多线程的

GUI渲染线程与JS引擎线程互斥：由于JavaScript是可操纵DOM的，如果在修改这些元素属性同时渲染界面(即JS线程和UI线程同时运行)，那么渲染线程前后获得的元素数据就可能不一致了。

Chrome Performance 工具

performance

performance面板有如下四个窗格：

1、controls。开始记录，停止记录和配置记录期间捕获的信息

2、overview。页面性能的高级汇总(W、A、S 和 D 键调整您的选择。 W 和 S 分别代表放大和缩小。 A 和 D 分别代表左移和右移)

3、火焰图。 CPU 堆叠追踪的可视化

4、统计汇总。以图表的形式汇总数据

Redering

小功能：查看合成层、显示实时FPS面板

Layer

合成层细节和原因

window.performance

前端性能监控和报警

​memory​字段代表JavaScript对内存的占用。chrome拓展对象

​navigation​字段统计的是一些网页导航相关的数据：​redirectCount​:重定向的数量(只读)，但是这个接口有同源策略限制，即仅能检测同源的重定向；

type 返回值应该是0,1,2 中的一个。分别对应三个枚举值:0 : TYPE_NAVIGATE (用户通过常规导航方式访问页面，比如点一个链接，或者一般的get方式)

1 : TYPE_RELOAD (用户通过刷新，包括JS调用刷新接口等方式访问页面)

2 : TYPE_BACK_FORWARD (用户通过后退按钮访问本页面)

最重要的是​timing​字段的统计数据，它包含了网络、解析等一系列的时间数据。startTime​：有些浏览器实现为​baidu.com，在地址栏输入google.com并回车，浏览器的执行动作依次为：unload当前文档(即baidu.com)->请求下一文档(即google.com)。

如果当前文档为空，则navigationStart的值等于fetchStart。

​redirectStart​和​redirectEnd​：如果页面是由redirect而来，则redirectStart和redirectEnd分别代表redirect开始和结束的时间节点；

​unloadEventStart​和​unloadEventEnd​：如果前一个文档和请求的文档是同一个域的，则​unloadEventStart​和​unloadEventEnd​分别代表浏览器unload前一个文档的开始和结束时间节点。否则两者都等于0；

​fetchStart​是指在浏览器发起任何请求之前的时间值。在fetchStart和​domainLookupStart​之间，浏览器会检查当前文档的缓存；

​domainLookupStart​和​domainLookupEnd​分别代表DNS查询的开始和结束时间节点。如果浏览器没有进行DNS查询(比如使用了cache)，则两者的值都等于​fetchStart​；

​connectStart​和​connectEnd​分别代表TCP建立连接和连接成功的时间节点。如果浏览器没有进行TCP连接(比如使用持久化连接webscoket)，则两者都等于​domainLookupEnd​；

​secureConnectionStart​：可选。如果页面使用HTTPS，它的值是安全连接握手之前的时刻。如果该属性不可用，则返回undefined。如果该属性可用，但没有使用HTTPS，则返回0；

​requestStart​代表浏览器发起请求的时间节点，请求的方式可以是请求服务器、缓存、本地资源等；

​responseStart​和​responseEnd​分别代表浏览器收到从服务器端(或缓存、本地资源)响应回的第一个字节和最后一个字节数据的时刻；

​domLoading​代表浏览器开始解析html文档的时间节点。我们知道IE浏览器下的document有​readyState​属性，​domLoading​的值就等于​readyState​改变为​loading​的时间节点；

​domInteractive​代表浏览器解析html文档的状态为​interactive​时的时间节点。​domInteractive​并非DOMReady，它早于DOMReady触发，代表html文档解析完毕(即dom tree创建完成)但是内嵌资源(比如外链css、js等)还未加载的时间点；

​domContentLoadedEventStart​：代表​DOMContentLoaded​事件触发的时间节点：页面文档完全加载并解析完毕之后,会触发DOMContentLoaded事件，HTML文档不会等待样式文件,图片文件,子框架页面的加载. document.ready

​domContentLoadedEventEnd​：代表​DOMContentLoaded​事件完成的时间节点，此刻用户可以对页面进行操作，也就是jQuery中的domready时间；

​domComplete​：html文档解析完成、网页内资源准备就绪；

​loadEventStart​和​loadEventEnd​分别代表onload事件触发和结束的时间节点

获取时间获取精度更高的时间浏览器使用 performance.now() 可以获取到performance.timing.navigationStart 到当前时间之间的微秒数

Node.js 使用 process.hrtime 返回一个数组，其中第一个元素的时间以秒为单位，第二个元素为剩余的纳秒获取首屏时间

H5 如果页面首屏有图片：

首屏时间 = 首屏图片全部加载完毕的时刻 - performance.timing.navigationStart

如果页面首屏没有图片：

首屏时间 = performance.timing.domContentLoadedEventStart-performance.timing.navigationStart

1. DNS 查询耗时

​domainLookupEnd - domainLookupStart​，如果使用了 DNS 缓存或采用了持久连接，值为 0

2. TCP链接耗时

​connectEnd - connectStart​，如果采用了持久连接，值为 0

3. request请求耗时

​responseStart - fetchStart​，这个指标可以反映出网络和后端处理的整体耗时

4、解析dom树耗时

= domComplete - domInteractive

5. 白屏时间

白屏时间指页面展示出第一个元素的时间，主要通过看到是 DOM 解析完成的时间，​domInteractive - fetchStart​

6. 首屏时间(onload时间)

​首屏时间指第一屏页面完全展示完毕的时间，loadEventStart - fetchStart​

更多表现计算可参考vconsole源码：https://github.com/Tencent/vConsole​github.com

MDN

监控统计有哪些需求？

日志定义

参考

大会演讲PPT合集​ppt.geekbang.org大会演讲PPT合集​ppt.geekbang.org蚂蚁金服如何把前端性能监控做到极致?-InfoQ​www.infoq.cn4f37a0ee9e5203757845e6cad59795a8.png美团性能分析框架和性能监控平台​tech.meituan.com6f30da26a053ac53166a9f752e26e8d1.png7 天打造前端性能监控系统 - FEX​fex.baidu.come651d2f9c8e446ac6679c14306458fa0.png前端数据之美 -- 基础篇 - FEX​fex.baidu.com2a2256d6e1039c605d105c40e29b4ea9.pnghttps://speakerd.s3.amazonaws.com/presentations/dcc10ff09b7a013185554adba30e7edb/%E7%99%BE%E5%BA%A6%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E6%95%B0%E6%8D%AE%E5%B9%B3%E5%8F%B0%E4%BB%8B%E7%BB%8D.pdf​speakerd.s3.amazonaws.comSPA页面上报_前端监控特殊使用场景_前端监控_应用实时监控服务 ARMS-阿里云​help.aliyun.comhttp://docs-aliyun.cn-hangzhou.oss.aliyun-inc.com/pdf/arms-arms-retcode-cn-zh-2018-01-23.pdf​docs-aliyun.cn-hangzhou.oss.aliyun-inc.com监控平台前端SDK开发实践​juejin.im

webkit技术内幕Performance - 前端性能监控利器​www.cnblogs.com5481fef3f72471a2af88397ebcf1d288.pngNavigation Timing获取页面加载各个阶段所需时间​www.jianshu.comhttps://web.dev/rail/​web.dev18 Tips for Website Performance Optimization - KeyCDN​www.keycdn.com01809c99dd43f2dcb1d6d9f28c84a5ad.pngLife of a pixel​docs.google.comResource Hints - What is Preload, Prefetch, and Preconnect? - KeyCDN​www.keycdn.comaaae93dd514bed9ce779415a667b2011.pnghttps://developers.google.com/web/tools/chrome-devtools/​developers.google.com

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/327941.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

hibernate正向生成数据库表以及配置——Teacher.hbm.xml

hibernate正向生成数据库表以及配置——Teacher.hbm.xml

<?xml version"1.0" encoding"utf-8"?> <!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3.0//EN" "http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd"> <!-- Mapping file au…
阅读更多...
数据库中modify和change的区别

数据库中modify和change的区别

修改字段 : ALTER TABLE 表名 MODIFY 字段名 列类型[属性] 无法重命名ALTER TABLE 表名 CHANGE 旧字段名 新字段名 列属性[属性] 可以重命名
阅读更多...
ExceptionLess新玩法 — 记日志

ExceptionLess新玩法 — 记日志

ExceptionLess 之前也有介绍过这个框架&#xff0c;其实网上也有很多的资料&#xff0c;无论是部署还是一些详细的高级玩法都讲的很清楚也很棒&#xff0c;博主也学习了一些他们的博文&#xff0c;因为很多的东西比如本地部署别人已经写了&#xff0c;我再去写也不免俗套。所以…
阅读更多...
19年8月 字母哥 番外篇：周边技术生态

19年8月 字母哥 番外篇：周边技术生态

番外篇&#xff1a;周边技术生态 如何使用git查看本教程代码 centos7安装docker图文详解 docker安装mongodb(单点)图文详解 如何使用mybatis自动生成的代码
阅读更多...
pt939g联通_尝试修改友华PT939G的省份设置，成功！

pt939g联通_尝试修改友华PT939G的省份设置，成功！

本帖最后由 笑西风 于 2020-7-4 08:04 编辑个人感觉友华PT939G无线光猫一体机的配置还不错&#xff0c;核心跟新路由三相同&#xff0c;所以总想折腾它。之前找了各类root/1234&#xff0c;user/1234之类的密码&#xff0c;最终通过CSDN大侠的yhtcAdmin /Cm1YHfw登录了光猫。准…
阅读更多...
MySQL中有外键时数据表的删除方法

MySQL中有外键时数据表的删除方法

直接删除grade&#xff0c;被引用的数据表时如下 报错 解决方法 先删除student&#xff0c;要引用的数据表 然后删除grade&#xff0c;被引用的数据表 成功
阅读更多...
微软全球副总裁给你发了一张Connect 2016专属邀请卡:信仰再充值！Connect 2016技术大会在线直播！

微软全球副总裁给你发了一张Connect 2016专属邀请卡:信仰再充值！Connect 2016技术大会在线直播！

Connect(); 2016在线直播啦&#xff01;11月16日晚 22:45不见不散&#xff01;快来制作专属自己的大会邀请函&#xff01; Connect(); 是微软面向开发者的一场顶级线上技术盛会&#xff0c;意在为广大开发者带来微软最新的开发技术资讯&#xff0c;每年有超过50万资深开发人员及…
阅读更多...
MongoDb安装使用

MongoDb安装使用

Microsoft Windows [版本 10.0.17763.107] (c) 2018 Microsoft Corporation。保留所有权利。 C:\Users\Administrator>mongon mongon 不是内部或外部命令&#xff0c;也不是可运行的程序 或批处理文件。 C:\Users\Administrator>mongo mongo 不是内部或外部命令&#x…
阅读更多...
Java中的String与常量池

Java中的String与常量池

转载自 Java中的String与常量池string是java中的字符串。String类是不可变的,对String类的任何改变,都是返回一个新的String类对象。下面介绍java中的String与常量池。 1. 首先String不属于8种基本数据类型&#xff0c;String是一个对象。 因为对象的默认值是null&#xff0c;…
阅读更多...
tp中怎么执行mysql事务_tp中使用事务

tp中怎么执行mysql事务_tp中使用事务

是什么事务是为了防止&#xff0c;多个操作&#xff0c;其中有失败&#xff0c;数据有部分被执行成功的时候使用的。比如&#xff0c;银行&#xff0c;用户转账。张三钱扣了&#xff0c;结果李四钱还增加&#xff01;这个时候需要使用事务&#xff0c;确保张三钱扣了&#xff0…
阅读更多...
TRUNCATE vs DELETE命令

TRUNCATE vs DELETE命令

TRUNCATE vs DELETE命令 作用&#xff1a;用于完全清空表数据 , 但表结构 , 索引 , 约束等不变 ; 语法&#xff1a; TRUNCATE [TABLE] table_name;-- 清空年级表 TRUNCATE grade注意&#xff1a;区别于DELETE命令 相同 : 都能删除数据 , 不删除表结构 , 但TRUNCATE速度更快 …
阅读更多...
mysql 时间 1_(转)mysql日期时间函数1

mysql 时间 1_(转)mysql日期时间函数1

MySQL 日期跟时间函数(一)作者&#xff1a; Mr.ZhangMySQL 日期跟时间的样式在MySQL 中有很多有用处的日期跟时间函数。我们常常看到许多应用于日期的计算是在代码方面上进行的&#xff0c;但是其实他们完全可以使用MySQL中自带的函数来实现。在我们实际的查看MySQL的时间跟日期…
阅读更多...
ASP.NET Core 整合Autofac和Castle实现自动AOP拦截

ASP.NET Core 整合Autofac和Castle实现自动AOP拦截

前言&#xff1a; 除了ASP.NETCore自带的IOC容器外&#xff0c;我们还可以使用其他成熟的DI框架&#xff0c;如Autofac&#xff0c;StructureMap等&#xff08;笔者只用过Unity&#xff0c;Ninject和Castle&#xff09;。 1.ASP.NET Core中的Autofac 首先在Project.json的Depen…
阅读更多...
csdn可以发东西吗

csdn可以发东西吗

csdn可以发东西吗
阅读更多...
hibernate多对多、正向工程创建数据表——访问温馨提示

hibernate多对多、正向工程创建数据表——访问温馨提示

大家都知道&#xff0c;hibernate可以反向生成实体类以及配置文件&#xff0c;但是正向的可能做的人并不是很多&#xff0c;什么是正向&#xff0c;什么是反向呢&#xff0c;正向指的是先有了实体类&#xff08;entity&#xff09;&#xff0c;然后在根据你的实体类通过hiberna…
阅读更多...
SQL---空字符串不等于null

SQL---空字符串不等于null

查询没有写家庭住址的同学 SELECT studentname FROM student WHERE Address IS NULL; 空字符串不等于null&#xff0c;所以输入的是空字符串&#xff0c;仍然可以查到 正确做法 SELECT studentname FROM student WHERE Address’’ OR Address IS NULL;
阅读更多...
Redis安装与配置（ Windows10 ）

Redis安装与配置（ Windows10 ）

Redis安装与配置&#xff08; Windows10 &#xff09; 2018-09-22 17:54:21 gcl_air 阅读数 13357更多 分类专栏&#xff1a; redis 版权声明&#xff1a;本文为博主原创文章&#xff0c;遵循 CC 4.0 BY-SA 版权协议&#xff0c;转载请附上原文出处链接和本声明。 本文链接…
阅读更多...
我为什么选择Angular 2？

我为什么选择Angular 2？

没有选择是痛苦的&#xff0c;有太多的选择却更加痛苦。而后者正是目前前端领域的真实写照。新的框架层出不穷&#xff1a;它难吗&#xff1f;它写得快吗&#xff1f;可维护性怎样&#xff1f;运行性能如何&#xff1f;社区如何&#xff1f;前景怎样&#xff1f;好就业吗&#…
阅读更多...
java io系列09之 FileDescriptor总结

java io系列09之 FileDescriptor总结

转载自 java io系列09之 FileDescriptor总结FileDescriptor 介绍 FileDescriptor 是“文件描述符”。FileDescriptor 可以被用来表示开放文件、开放套接字等。以FileDescriptor表示文件来说&#xff1a;当FileDescriptor表示某文件时&#xff0c;我们可以通俗的将FileDescri…
阅读更多...
mod auth mysql_Apache使用mysql认证用户

mod auth mysql_Apache使用mysql认证用户

使用MySQL进行认证第1步&#xff1a;下载MySQL认证模块&#xff0c;并更名为mod_auth_mysql.so文件&#xff0c;并保存在apache的modules目录下第2步&#xff1a;apache要加载此功能模块LoadModule 模块名 所在的目录示例&#xff1a;LoadModule mysql_auth_module modules/mod…
阅读更多...
最新文章

Copyright @ 2022~2023