怎么使用Performance监控前端性能

Performance.now

Performance是一个做前端性能监控离不开的API,较好在页面完全加载完成之后再使用,因为很多值必须在页面完全加载之后才能得到。最简单的办法是在window.onload事件中读取各种数据。

performance.now()方法返回一个精确到毫秒的 DOMHighResTimeStamp 。

根据 MDN :

这个时间戳实际上并不是高精度的。为了降低像Spectre这样的安全威胁,各类浏览器对该类型的值做了不同程度上的四舍五入处理。(Firefox从Firefox 59开始四舍五入到2毫秒精度)一些浏览器还可能对这个值作稍微的随机化处理。这个值的精度在未来的版本中可能会再次改善;浏览器开发者还在调查这些时间测定攻击和如何更好的缓解这些攻击。

因为,要计算一个函数的执行时间,分别比较函数执行前和执行后的两次 performance.now()的值即可,如下所示:

const t0 = performance.now(); for (let i = 0; i < array.length; i++)  {   // some code } const t1 = performance.now(); console.log(t1 - t0, 'milliseconds');

怎么使用Performance监控前端性能

在这里,我们可以看到 Firefox 中的结果与 Chrome 完全不同。这是因为从版本60开始,Firefox 将performance API的精度降低到2ms。

performance API 不当当只有返回时间戳这个功能,还有很多实用方法,大家可以根据需要到 MDN 查询相关的文档。

然而,对于我们的用例,我们只想计算单个函数的性能,因此时间戳就足够了。

performance.now() 和 Date.now一样吗?

你可能会想,嘿,我也可以使用Date.now来做?

是的,你可以,但这有缺点。

Date.now返回自Unix纪元(1970-01-01T00:00:00Z)以来经过的时间(以毫秒为单位),并取决于系统时钟。这不仅意味着它不够精确,而且还不总是递增。WebKit工程师(Tony Gentilcore)的解释如下:

基于系统时间的日期可能不太会被采用,对于实际的用户监视也不是理想的选择。大多数系统运行一个守护程序,该守护程序定期同步时间。通常每15至20分钟将时钟调整几毫秒。以该速率,大约10秒间隔的1%将是不准确的。

Performance.mark 和 Performance.measure

除了Performance.now函数外,还有一些函数可以让我们度量代码不同部分的时间,并将它们作为性能测试工具(如Webpagetest)中的自定义度量。

Performance.mark

先来看看MDN中关于mark方法的定义:

  • The mark() method creates a timestamp in the browser’s performance entry buffer with the given name.

这段话可以分解出三个关键词。首先timestamp,这里的timestamp指的是高精度时间戳(千分之一毫秒),其次是performance entry buffer。

performance entry buffer指的是存储performance实例对象的区域,初始值为空。

最后就是given name,表示生成的每一个timestamp都有相应的名称。

所以这句话就可以理解成,在浏览器的performance entry buffer中,根据名称生成高精度时间戳。也就是很多人说过的**“打点”**。

就像Performance.now一样,此函数的精度分数高达5&micro;s。

performance.mark('name');

标记 的 performance entry将具有以下属性值:

  • entryType – 设置为 “mark”.

  • name – 设置为mark被创建时给出的 “name”

  • startTime – 设置为 mark() 方法被调用时的 timestamp 。

  • duration – 设置为 “0” (标记没有持续时间).

Performance.measure

同样先来看看 MDN 上关于 measure 的定义:

这段定义和上面 mark 的定义有些类似,其最核心的不同点在于这句话 between two specified marks。所以measure是指定两个mark点之间的时间戳。如果说mark可以理解为**”打点”的话,measure就可以理解为”连线”**。

performance.measure(name, startMark, endMark);

计算两个mark之间的时长,创建一个DOMHighResTimeStamp保存在资源缓存数据中,可通过performance.getEntries()等相关接口获取。

  • entryType 为字符串 measure

  • name 为创建时设置的值

  • startTime为调用 measure 时的时间

  • duration为两个 mark 之间的时长

从导航开始测量

performance.measure('measure name');

导航开始到标记

performance.measure('measure name', undefined, 'mark-2');

从标记到标记

performance.measure('measure name', 'mark-1', 'mark-2');

资源性能数据

从 performance entry buffer 获取数据

在上面的函数中,总是提到结果存储在performance entry buffer,但是如何访问其中的内容呢?

performance API有3个函数可以用来访问该数据:

performance.getEntries()

获取一组当前页面已经加载的资源PerformanceEntry对象。接收一个可选的参数options进行过滤,options支持的属性有name,entryType,initiatorType。

let entries = window.performance.getEntries();

performance.getEntriesByName

根据参数name,type获取一组当前页面已经加载的资源数据。name的取值对应到资源数据中的name字段,type取值对应到资源数据中的entryType字段。

let entries = window.performance.getEntriesByName(name, type);

performance.getEntriesByType

根据参数type获取一组当前页面已经加载的资源数据。type取值对应到资源数据中的entryType字段。

var entries = window.performance.getEntriesByType(type);

结合事例:

performance.mark('mark-1'); // some code performance.mark('mark-2') performance.measure('test', 'mark-1', 'mark-2') console.log(performance.getEntriesByName('test')[0].duration);

Console.time

这个 API确实易于使用。当需要统计一段代码的执行时间时,可以使用console.time方法与console.timeEnd方法,其中console.time方法用于标记开始时间,console.timeEnd方法用于标记结束时间,并且将结束时间与开始时间之间经过的毫秒数在控制台中输出。这两个方法的使用方法如下所示。

console.time('test'); for (let i = 0; i < array.length; i++) {   // some code } console.timeEnd('test');

怎么使用Performance监控前端性能

输出的结果与Performance API非常相似。

console.time的优点是易于使用,因为它不需要手动计算两个时间戳之间的差。

减少时间精度

如果在不同的浏览器中使用上面提到的 api 测量函数,你可能会注意到结果是不同的。

这是由于浏览器试图保护用户免受时序攻击(timing attack)和指纹采集(Fingerprinting ),如果时间戳过于准确,黑客可以使用它们来识别用户。

例如,Firefox等浏览器试图通过将精度降低到2ms(版本60)来防止这种情况发生。

注意事项

现在,我们已经知道了要测量JavaScript函数的速度所需方法。但是,较好还要避免一些陷阱:

分而治之

开发过程中,我们可能会我发现有些模块执行速度很慢,但是我们不知道具体问题出在哪里。解决一个方法是,使用上面提到的这些函数来测量它,而不是胡乱猜测代码的哪一部分比较慢。

要对其进行跟踪,首先将console.time语句放在执行比较慢的代码块周围。然后测量它们不同部分的表现。如果一个比另一个慢,那就继续往下走,直到发现问题所在。

注意输入值

在实际应用中,给定函数的输入值可能会发生很大变化。仅针对任意随机值测量函数的速度并不能提供我们可以实际使用的任何有价值的数据。

确保使用相同的输入值运行代码。

多次运行该函数

假设你有一个函数,它的功是遍历一个数组,对数组的每个值进行一些计算,然后返回一个带有结果的数组。你想知道是forEach循环还是简单的for循环性能更好。

function testForEach(x) {   console.time('test-forEach');   const res = [];   x.forEach((value, index) => {     res.push(value / 1.2 * 0.1);   });    console.timeEnd('test-forEach')   return res; }  function testFor(x) {   console.time('test-for');   const res = [];   for (let i = 0; i < x.length; i ++) {     res.push(x[i] / 1.2 * 0.1);   }    console.timeEnd('test-for')   return res; }

然后这样测试它们:

const x = new Array(100000).fill(Math.random()); testForEach(x); testFor(x);

如果在 Firefox 中运行上述函数,结果:

怎么使用Performance监控前端性能

看起来forEach慢多了,对吧?

那如果是相同的输入,运行两次呢:

testForEach(x); testForEach(x); testFor(x); testFor(x);

怎么使用Performance监控前端性能

如果我们第二次调用forEach测试,它的执行效果和for循环一样好。考虑到初始值较慢,在一些性能要求极高的项目,可能就不适合使用forEach。

在多个浏览器中测试

如果我们在Chrome中运行上述代码,结果又会不一样:

怎么使用Performance监控前端性能

这是因为Chrome和Firefox具有不同的JavaScript引擎,它们具有不同类型的性能优化。

在本例中,Firefox 在对相同输入的forEach进行优化方面做得更好。

for在两个引擎上的性能都更好,因此在一些性能要求极高的项目就需要使用for循环。

这是为什么要在多个引擎中进行测量的一个很好的例子。如果仅使用Chrome进行测量,你可能会得出结论,与for相比,forEach并不那么糟糕。

限制的 CPU

我们在本地测试值是不能代表用户在浏览器使用的情况,因为 我们开发的电脑一般都会比大部分的用户好很多。

浏览器有一个特性可以限制CPU性能,我们通过设置可以更贴切一些真实情况。

关于“怎么使用Performance监控前端性能”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。

文章标题:怎么使用Performance监控前端性能,发布者:亿速云,转载请注明出处:https://worktile.com/kb/p/21346

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
亿速云的头像亿速云认证作者
上一篇 2022年8月29日 下午11:58
下一篇 2022年8月29日 下午11:59

相关推荐

  • Vue.js 前端路由和异步组件是什么

    目录 文章目标 P6 P6+ ~ P7 一、背景 二、前端路由特性 三、面试!!! 四、Hash 原理及实现 1、特性 2、如何更改 hash 3、手动实现一个基于 hash 的路由 五、History 原理及实现 1、HTML5 History 常用的 API 2、pushState/replac…

    2022年9月13日
    53200
  • windows驱动程序无法使用如何解决

    解决方法: 方法一: 1、首先确认之前是否存在这个问题。 2、如果该设备之前运行是正常的,突然出现驱动程序无法使用。 3、那么可以尝试右键开始菜单,进入“设备管理器” 4、然后在其中双击存在问题的设备。 5、最后在驱动程序下选择“回退驱动程序”即可。 方法二: 1、如果该设备是首次使用,就出现驱动程…

    2022年9月21日
    71400
  • Pytorch中的tensor数据结构实例代码分析

    torch.Tensor torch.Tensor 是一种包含单一数据类型元素的多维矩阵,类似于 numpy 的 array。Tensor 可以使用 torch.tensor() 转换 Python 的 list 或序列数据生成,生成的是dtype 默认是 torch.FloatTensor。 注意…

    2022年9月15日
    76900
  • 内核和linux系统的区别有哪些

    linux内核和linux系统的区别:1、linux操作系统是包含linux内核的,是将linux内核进行扩展,而linux内核只提供了硬件抽象层、硬盘以及文件系统控制的核心程序;2、linux系统会在内核的基础上加入了用户界面和各种软件的支持,而linux内核则没有用户界面和软件的支持。

    2022年6月29日
    99500
  • windows谷歌浏览器控件怎么添加

    谷歌浏览器添加控件的方法: 1、首先打开谷歌浏览器点击“自定义及控制”。 2、随后点击“更多工具”打开“扩展程序”。 3、进入已经安装了的插件页面。 4、随后点击左上角的“扩展程序”。 5、之后打开谷歌网上应用店搜索“Tencent”。 6、将需要的程序添加到扩展程序即可。 读到这里,这篇“wind…

    2022年9月8日
    54500
  • pr如何修改视频尺寸

    pr修改视频尺寸的方法: 1、首先进入特效控制台,然后点击打开“运动”。 2、然后在里面找到“缩放比例”。 3、接着可以去打开比例控制条,然后可以调节改变视频的大小。 4、最后去掉“等比缩放”将前面的√取消即可。 以上就是关于“pr如何修改视频尺寸”这篇文章的内容,相信大家都有了一定的了解,希望小编…

    2022年8月29日
    83200
  • Java基于面向对象如何实现一个战士小游戏

    一、思路 首先,我们知道在系统中有个战士的角色叫Soldier,Soldier角色拥有自己的名字、等级、生命力、攻击力、防御力。我们就要区分有什么类型。战士有个行为是普通攻击,行为:方法。由此我们就知道到战士Soldier是一个类,在进行代码实现。 二、代码实现 当我们得知Soldier属于一个类是…

    2022年9月6日
    60800
  • windows中appdata文件夹怎么查看

    appdata文件夹查看方法: 1、首先打开桌面的计算机,再点击“工具”选择“文件夹选项”。 2、然后点击“查看”选项栏。 3、勾选下面的“显示隐藏的文件、文件夹和驱动器”。 4、最后只要进入c盘,就可以看到appdata文件夹了。 关于“windows中appdata文件夹怎么查看”这篇文章的内容…

    2022年8月31日
    1.2K00
  • ppt中分数如何打出来

    分数打出来ppt方法: 方法一: 名列前茅步,先在想要输入分数的地方“插入”一个“文本框” 第二步,在其中输入数字,再按下回车,然后按下“shift+——”键 第三步,输入完成再按回车并输入数字就能形成一个分数了。 方法二: 名列前茅步,点击“插入”下的“公式”按钮。 第二步,点击第二行第二列的按钮…

    2022年8月29日
    2.4K00
  • Redis RESP协议如何实现

    回顾RESP协议 RESP是基于TCP来实现的Redis通信协议,该协议是以/r/n(行)进行分割的,协议支持5种类型,具体信息如下: 类型 前缀 备注 简单字符串 + 简单字符串以+开头 错误数据 – 错误数据以-开头 整数 : 整数以:开头 复杂字符串 $ 复杂字符串以$开头 数组 …

    2022年9月8日
    51500
站长微信
站长微信
电话联系

400-800-1024

工作日9:30-21:00在线

分享本页
返回顶部