Getting started in window.performance

wthee 发布于2019-08-22 11:23 / 2411人阅读

摘要：如何理解是由性能小组提出的用于精确计算网页性能数据的特性，它返一个对象，支持以上的所有浏览器，这里给出对象的原型返回对象，包含延迟相关的性能信息。返回对象，该对象表示在当前给定浏览上下文中网页导航的类型，，，以及次数。

如何理解 window.performance

window.performance 是由 W3C 性能小组提出的用于精确计算网页性能数据的特性，它返一个 Performance 对象，支持 IE9 以上的所有浏览器，这里给出对象的原型：

Performance.timing

返回 PerformanceTiming 对象，包含延迟相关的性能信息。

Performance.navigation

返回 PerformanceNavigation 对象，该对象表示在当前给定浏览上下文中网页导航的类型（TYPE_BACK_FORWARD，TYPE_NAVIGATE，TYPE_RELOAD，TYPE_RESERVED）以及次数。

performance.memory

在 Chrome 中添加的一个非标准扩展，返回内存占用的基本信息。（尽量避免使用非标准化API）

Performance.timeOrigin

返回关于性能评估的开始时间（高分辨率时间戳）

Performance.onresourcetimingbufferfull

当 resourcetimingbufferfull 事件触发时，作为事件处理回调

function buffer_full_handler(event) {
    console.log("[Warning]: Resource Timing Buffer is full");
    performance.setResourceTimingBufferSize(200); // size >= 150
}

function initPerformanceMeasurement() {
    if (performance === undefined) {
        console.log("[Warning]: Performance interface is not supported");
        return
    }
    // Set a callback if the resource buffer becomes filled
    performance.onresourcetimingbufferfull = buffer_full_handler;
}

document.body.onload = initPerformanceMeasurement;

通常建议 performance entry 应该满足至少 150 个以上

为何使用 Performance

通常熟悉 Chrome 开发者工具的朋友都会在开发环境下用到网络面板的相关操作，当我们开启记录功能时，就会实时传回关于网页响应阶段的性能数据，但当我们需要统计分析用户打开网页时的性能，因此我们将 performance 原始信息或通过简单计算后的信息上传到服务器，配合其他网络属性（例如 HTTP 请求头信息），就可以很好地进行性能上报。

项目中的应用

1.判断是否刷新页面

const performance = window.performance

if(performance.navigation.type === 1) {
    console.log("Page was not reloaded.")
} else {
    console.log("Page was reloaded.")
}

这里的 performance.navigation.type 返回一个整数值，表示网页的加载来源，有以下几种情况：

返回值：0
类型常量：performance.navigation.TYPE_NAVIGATENEXT
描述：网页通过点击链接、地址栏输入、表单提交、脚本操作等方式加载

返回值：1
类型常量：performance.navigation.TYPE_RELOAD
描述：网页通过刷新按钮或者 location.reload() 方法加载

返回值：2
类型常量：performance.navigation.TYPE_BACK_FORWARD
描述；网页通过前进或后退按钮加载

返回值：255
类型常量：performance.navigation.TYPE_UNDEFINED
描述：网页通过其它 任何可执行的来源 加载

此外，通过 performance.navigation.redirectCount 可以获取当前网页重定向跳转的次数

2.测试函数执行时间

function fac() {
    return n === 1 ? 1 : n * arguments.callee(n - 1)
}

let t1 = window.performance.now()
fac(100)
let t2 = window.performance.now()
console.log("diff: ", t2 - t1, " ms")

// output: diff: 0.14500000001862645 ms

未完待续...

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92313.html

前端质量监控之页面性能相关

摘要：前言最近有幸参与一个前端质量监控类项目的重构，算是个人初次接触到前端质量监控相关的知识，对于其中的性能统计部分很感兴趣，查询资料之后写了文章，作为个人学习记录，如有错误，敬请斧正页面整体性能通过浏览器提供的方法，我们能够得到网页每个处理阶段前言最近有幸参与一个前端质量监控类项目的重构，算是个人初次接触到前端质量监控相关的知识，对于其中的性能统计部分很感兴趣，查询资料之后写了文章，作...

Shihira 2019-08-23 12:56 评论0 收藏0
解析nodeJS模块源码亲手打造基于ES6的观察者系统

摘要：为指定事件注册一个单次监听器，即监听器最多只会触发一次，触发后立刻解除该监听器。移除指定事件的某个监听器，监听器必须是该事件已经注册过的监听器。返回指定事件的监听器数组。如何创建空对象我们已经了解到，是要来储存监听事件监听器数组的。毫无疑问，nodeJS改变了整个前端开发生态。本文通过分析nodeJS当中events模块源码，由浅入深，动手实现了属于自己的ES6事件观察者系统。千万不...

csRyan 2019-08-20 15:19 评论0 收藏0
【Getting Started with pandas】笔记一

In [1]: from pandas import Series, DataFrame In [2]: import pandas as pd In [3]: obj = Series([4,7,-5,3]) In [4]: obj Out[4]: 0 4 1 7 2 -5 3 3 dtype: int64

ad6623 2019-07-24 17:51 评论0 收藏0
从一次有趣的实验学习性能优化

摘要：从一次实验学习性能优化之接口详解下图是接口的属性提供给定页面的与时间相关的性能信息包含了页面浏览上下文的导航信息，比如大量获取资源的重定向。返回当前网页事件的回调函数运行结束时的毫秒时间戳。从一次实验学习性能优化 Web API之Performance 接口详解下图是Performance 接口的属性,提供给定页面的与时间相关的性能信息.showImg(https://segmen...

canger 2019-08-20 18:04 评论0 收藏0