浏览器浏览器是多进程的，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.cn美团性能分析框架和性能监控平台​tech.meituan.com7 天打造前端性能监控系统 - FEX​fex.baidu.com前端数据之美 -- 基础篇 - FEX​fex.baidu.comhttps://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.comNavigation Timing获取页面加载各个阶段所需时间​www.jianshu.comhttps://web.dev/rail/​web.dev18 Tips for Website Performance Optimization - KeyCDN​www.keycdn.comLife of a pixel​docs.google.comResource Hints - What is Preload, Prefetch, and Preconnect? - KeyCDN​www.keycdn.comhttps://developers.google.com/web/tools/chrome-devtools/​developers.google.com