摘要：概述最近在做一个上报相关的需求，该需求指定上班的内容中包含页面记载的事件请求花费的事件以及渲染所要完成的时间等。网页导航的相关对象。浏览器内存情况相关对象。
概述
最近在做一个上报相关的需求，该需求指定上班的内容中包含页面记载的事件、请求花费的事件、以及DOM渲染所要完成的时间等。
为此查阅了大量的文档，收集了很多资料，所以趁热打铁，把自己所了解的记录下来，方便以后查询。
浏览器暴露给js的一个接口，可以通过这个接口查看用户访问网站的连接建立时间、dns时间等信息。使用该api时需要在页面完全加载完成之后才能使用，最简单的办法是在window.onload事件中读取各种数据，因为很多值必须在页面完全加载之后才能得出。
浏览器支持情况IE9和chrome6以上的版本都支持：
pc端
window.performance : ie9
window.webkitPerformance : chrome6-9
window.performance : chrome10+
移动端
android4.0
performance是ECMAScript5中新增的一个特性，对于该特性，所支持的浏览器并不多。
属性和方法 属性performance.timing ：performance对象的timing属性指向一个对象，它包含了各种与浏览器性能有关的时间数据，提供浏览器处理网页各个阶段的耗时，这也是本文介绍的重点。
performance.navigation ：网页导航的相关对象。
performance.memory ：浏览器内存情况相关对象。
方法performance.getEntries ：浏览器获取网页时，会对网页中每一个对象（脚本文件、样式表、图片文件等等）发出一个HTTP请求。
performance.mark：mark方法用于为相应的视点做标记。
performance.now：performance.now方法返回当前网页自从performance.timing.navigationStart到当前时间之间的微秒数（毫秒的千分之一）
上报相关内容上报相关的内容，大部分在performance.timing里面，performance.timing中包含的属性有：
navigationStart：准备加载新页面的起始时间
redirectStart：如果发生了HTTP重定向，并且从导航开始，中间的每次重定向，都和当前文档同域的话，就返回开始重定向的timing.fetchStart的值。其他情况，则返回0
redirectEnd：如果发生了HTTP重定向，并且从导航开始，中间的每次重定向，都和当前文档同域的话，就返回最后一次重定向，接收到最后一个字节数据后的那个时间.其他情况则返回0
fetchStart：如果一个新的资源获取被发起，则 fetchStart必须返回用户代理开始检查其相关缓存的那个时间，其他情况则返回开始获取该资源的时间
domainLookupStart：返回用户代理对当前文档所属域进行DNS查询开始的时间。如果此请求没有DNS查询过程，如长连接，资源cache,甚至是本地资源等。 那么就返回 fetchStart的值
domainLookupEnd：返回用户代理对结束对当前文档所属域进行DNS查询的时间。如果此请求没有DNS查询过程，如长连接，资源cache，甚至是本地资源等。那么就返回 fetchStart的值
connectStart：返回用户代理向服务器服务器请求文档，开始建立连接的那个时间，如果此连接是一个长连接，又或者直接从缓存中获取资源（即没有与服务器建立连接）。则返回domainLookupEnd的值
-(secureConnectionStart)：可选特性。用户代理如果没有对应的东东，就要把这个设置为undefined。如果有这个东东，并且是HTTPS协议，那么就要返回开始SSL握手的那个时间。 如果不是HTTPS， 那么就返回0
connectEnd：返回用户代理向服务器服务器请求文档，建立连接成功后的那个时间，如果此连接是一个长连接，又或者直接从缓存中获取资源（即没有与服务器建立连接）。则返回domainLookupEnd的值
requestStart：返回从服务器、缓存、本地资源等，开始请求文档的时间
responseStart：返回用户代理从服务器、缓存、本地资源中，接收到第一个字节数据的时间
responseEnd：返回用户代理接收到最后一个字符的时间，和当前连接被关闭的时间中，更早的那个。同样，文档可能来自服务器、缓存、或本地资源
domLoading：返回用户代理把其文档的 "current document readiness" 设置为 "loading"的时候
domInteractive：返回用户代理把其文档的 "current document readiness" 设置为 "interactive"的时候.
domContentLoadedEventStart：返回文档发生 DOMContentLoaded事件的时间
domContentLoadedEventEnd：文档的DOMContentLoaded 事件的结束时间
domComplete：返回用户代理把其文档的 "current document readiness" 设置为 "complete"的时候
loadEventStart：文档触发load事件的时间。如果load事件没有触发，那么该接口就返回0
loadEventEnd：文档触发load事件结束后的时间。如果load事件没有触发，那么该接口就返回0
上报的内容上报的内容是通过上面的performance.timing各个属性的差值组成的，常用的有：
DNS查询耗时 ：domainLookupEnd - domainLookupStart
TCP链接耗时 ：connectEnd - connectStart
request请求耗时 ：responseEnd - responseStart
解析dom树耗时 ： domComplete - domInteractive
白屏时间 ：responseStart - navigationStart
domready时间 ：domContentLoadedEventEnd - navigationStart
onload时间 ：loadEventEnd - navigationStart
帮助文档performance对象：高精度时间戳
window.performance 详解
使用简洁的 Navigation Timing API 测试网页加载速度（不完全译文）
Chrome Developer Tools之网络监控与调优
关键字搜索：performance.timing 、performance 上报
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/85449.html
摘要：本文的介绍的是如何设计一个通用的可以以较小的侵入性，自动上报前端的性能数据。具体的做法可以看我的上一篇文章在单页应用中，如何优雅的监听的变化。三如何上报性能数据那么如何上报性能数据呢，我们第一反应就是通过请求的形式来上报前端性能数据。 最近在做一个较为通用的前端性能监控平台，区别于前端异常监控，前端的性能监控主要需要上报和展示的是前端的性能数据，包括首页渲染时间、每个页面的白屏时...
摘要：本文的介绍的是如何设计一个通用的可以以较小的侵入性，自动上报前端的性能数据。具体的做法可以看我的上一篇文章在单页应用中，如何优雅的监听的变化。三如何上报性能数据那么如何上报性能数据呢，我们第一反应就是通过请求的形式来上报前端性能数据。 最近在做一个较为通用的前端性能监控平台，区别于前端异常监控，前端的性能监控主要需要上报和展示的是前端的性能数据，包括首页渲染时间、每个页面的白屏时...
摘要：本文的介绍的是如何设计一个通用的可以以较小的侵入性，自动上报前端的性能数据。具体的做法可以看我的上一篇文章在单页应用中，如何优雅的监听的变化。三如何上报性能数据那么如何上报性能数据呢，我们第一反应就是通过请求的形式来上报前端性能数据。 最近在做一个较为通用的前端性能监控平台，区别于前端异常监控，前端的性能监控主要需要上报和展示的是前端的性能数据，包括首页渲染时间、每个页面的白屏时...
摘要：回过头来发现，我们的项目，虽然在服务端层面做好了日志和性能统计，但在前端对异常的监控和性能的统计。对于前端的性能与异常上报的可行性探索是有必要的。这是我们页面加载性能优化需求中主要上报的相关信息。 概述 对于后台开发来说，记录日志是一种非常常见的开发习惯，通常我们会使用try...catch代码块来主动捕获错误、对于每次接口调用，也会记录下每次接口调用的时间消耗，以便我们监控服务器接口...
阅读 1639·2023-04-25 18:19
阅读 2081·2021-10-26 09:48
阅读 1081·2021-10-09 09:44
阅读 1735·2021-09-09 11:35
阅读 3029·2019-08-30 15:54
阅读 2027·2019-08-30 11:26
阅读 2288·2019-08-29 17:06
阅读 887·2019-08-29 16:38
