区块链技术博客
www.b2bchain.cn

八、性能分析面板 Performance求职学习资料

D0b2wT.gif

本文介绍了八、性能分析面板 Performance求职学习资料,有助于帮助完成毕业设计以及求职,是一篇很好的资料。

对技术面试,学习经验等有一些体会,在此分享。

在 chrome 中,Performance 是一个非常强大的性能分析工具。也是我们在做性能优化时「特别是代码优化」,必须要借助的工具。

当然,在学习 Performance 时,需要有一些应该掌握的基础知识作为铺垫,例如浏览器页面的渲染过程,函数调用栈等。它是一个集合了许多知识与一体的大型工具。好在这些知识,我们都已经做好了铺垫,相信对于大家来说,不是什么难事。

记录页面运行表现

为了避免其他插件进程对当前页面造成影响,建议在做性能分析时,使用 chrome 的无痕模式。

八、性能分析面板 Performance

记录功能的使用非常简单,如下图
八、性能分析面板 Performance

打开浏览器开发者工具,选择 Performance 面板。我们常用的功能,就是前面两个小按钮。

第一个按钮,黑色圆圈,记录浏览器运行中的某一个时间段的表现。通常情况下,我们会点击该按钮开始记录,按钮变成红色,然后去操作页面上的功能,操作完之后,再次点击结束记录,就能得到一个详细的性能分析图。

八、性能分析面板 Performance

第二个按钮,刷新圆圈,用于记录网页从最开始的加载到所有资源加载完成这个过程的性能表现。点击之后,页面会自动重新加载。

八、性能分析面板 Performance

第三个按钮,清空当前的性能分析结果。

颜色识别

在 Performance 记录之后,得到的记录结果里,使用不同的色块,代表不同的执行过程。

八、性能分析面板 Performance

八、性能分析面板 Performance

蓝色:Loading HTML解析过程等

八、性能分析面板 Performance

黄色:Scripting JS执行过程

八、性能分析面板 Performance

紫色:Rendering UI 渲染_「DOM 元素的计算过程」

八、性能分析面板 Performance

绿色:Painting UI 绘制过程

八、性能分析面板 Performance

灰色:System 系统?

八、性能分析面板 Performance

浅灰:Idle 空闲时间_「啥事也没做」

八、性能分析面板 Performance

红色:warning 警告,通常表示某一个地方有超出预期的行为

在 Performance 面板中,不同区域的行为都用对应的色块来显示,熟知这些色块可以快速读懂不同区域颜色的含义。当然,如果出现红色,则表示在做性能优化时,需要重点关注。

概况「Overview」

Overview 是 Performance 面板中,最上面的区域,如图。

八、性能分析面板 Performance

我们仔细观察该区域的内容,从上到下依次是 时间 -> FPS -> CPU -> NET -> 缩略图 -> HEAP

时间:记录过程所对应的时间刻度
FPS:FPS 是图片领域的定义,指的是画面每秒传输的帧数。我们知道多张图片依次播放,可以组成一个视频,如果一张图片就是一帧,那么视频播放一秒的过程中图片的数量,就是 FPS 的值。Frames Per Second。

理论上来说,视频播放一秒,参与的图片越多,视频越流畅。但与此同时,对性能的要求就越高。如果我们为了流畅在一秒钟刷新1000次,要求太高,GUI 肯定扛不住。浏览器处理不过来,中间的一些帧就不会处理,这就是我们常说的掉帧。同时浏览器也会因为太高的消耗而出现卡顿甚至崩溃。

通常情况下,我们在做高性能动画时,追求的帧率 是 60 FPS。这是大多数设备的屏幕支持的刷新率。也就是说,如果我们的动画能够达到 60 FPS,动画在这个屏幕上就是最流畅的。换算下来,一帧所消耗的时间就是 16.67 ms。

当然,能否支持到 60 FPS,也受到浏览器处理能力和硬件的限制,部分手机无法达到 60 FPS的高度,我们就会使用兼容方式,将帧率降低到 30 FPS,这是避免动画不流畅的最低帧率。

在上图的面板中,右侧使用 FPS 字样表示了这块区域是用来展示记录过程中的帧率表现。通常是绿色区域。绿色区域越高,表示 FPS 越高,如果上方出现红色,表示出现了卡帧现象「一帧渲染太长的时间」,此时页面的表现是卡顿。

可以使用鼠标选中某个时间段,并在下方的 Frames 面板中观察具体的帧率情况,包括时间与每一帧的缩略图。

八、性能分析面板 Performance

在上图中,我们选中绿色区域,可以看到下方对应显示出来许多缩略图,表示这个时间段渲染了很多帧。如果我们选中红色区域,看看是什么情况。

八、性能分析面板 Performance

只有一帧。表示这一帧的渲染消耗了许多时间。与之对应的是同一时间,下方出现大面积的黄色块。也就有可能是因为 JS 的某些复杂计算,导致 GUI 无法快速渲染完这一帧,这样优化的大体方向就出来了。

CPU FPS 下方的区域,不同的颜色表示对应的事件在消耗 CPU 资源。「注意观察最右侧,有对应的文字表示」

八、性能分析面板 Performance

色块表示的内容与刚才我们说的颜色是一致的。另外绿色阴影部分表示没有占用CPU。

如果绿色区域时间过长,则表示 HTML 解析时间偏长,可查看一下是否是资源加载时间过长,可结合 network 面板进行优化。

八、性能分析面板 Performance

如果发现大面积的黄色部分,表示 长时间的 JS 逻辑执行,可结合自身代码实现,与下方的 Main 面板进行优化。Main 面板以火焰图的形式展示。是可视化的函数调用栈信息。如果没有代码压缩「许多方法压缩之后被重命名」,结合火焰图,我们可以很简单找到对应的函数及其执行方法。

代码压缩让 JS 的调试和优化都受到了非常大的限制

火焰图不同的颜色,表示了对应方法可能会涉及的能力。例如,如果是蓝色,则可能是在解析 HTML。如果出现红色,则需要根据具体的提示进行对应的优化。有的页面函数调用栈出现大量红色,就表示需要优化的地方非常多,代码质量可能比较低。

过长的函数调用栈也在优化的范畴之内。

八、性能分析面板 Performance

简洁的

八、性能分析面板 Performance

点击右上角有红色的函数块,在下方会出现对应的警告以及详细信息

八、性能分析面板 Performance

大面积的绿色区域,表示 页面正在进行大量的绘制工作。如果部分操作导致绿色面积偏大,则需要考虑是否有操作导致过多的回流与重绘。

在 Summary中,下方内容的第一行,会显示函数调用名或者部分已知类型对应的名称。理解这些事件,可以帮助定位到对应的代码实现。

Loading 过程中,可能会包括如下一些事件

在 chrome 中,Performance 是一个非常强大的性能分析工具。也是我们在做性能优化时「特别是代码优化」,必须要借助的工具。

当然,在学习 Performance 时,需要有一些应该掌握的基础知识作为铺垫,例如浏览器页面的渲染过程,函数调用栈等。它是一个集合了许多知识与一体的大型工具。好在这些知识,我们都已经做好了铺垫,相信对于大家来说,不是什么难事。

记录页面运行表现

为了避免其他插件进程对当前页面造成影响,建议在做性能分析时,使用 chrome 的无痕模式。

八、性能分析面板 Performance

记录功能的使用非常简单,如下图
八、性能分析面板 Performance

打开浏览器开发者工具,选择 Performance 面板。我们常用的功能,就是前面两个小按钮。

第一个按钮,黑色圆圈,记录浏览器运行中的某一个时间段的表现。通常情况下,我们会点击该按钮开始记录,按钮变成红色,然后去操作页面上的功能,操作完之后,再次点击结束记录,就能得到一个详细的性能分析图。

八、性能分析面板 Performance

第二个按钮,刷新圆圈,用于记录网页从最开始的加载到所有资源加载完成这个过程的性能表现。点击之后,页面会自动重新加载。

八、性能分析面板 Performance

第三个按钮,清空当前的性能分析结果。

颜色识别

在 Performance 记录之后,得到的记录结果里,使用不同的色块,代表不同的执行过程。

八、性能分析面板 Performance

八、性能分析面板 Performance

蓝色:Loading HTML解析过程等

八、性能分析面板 Performance

黄色:Scripting JS执行过程

八、性能分析面板 Performance

紫色:Rendering UI 渲染_「DOM 元素的计算过程」

八、性能分析面板 Performance

绿色:Painting UI 绘制过程

八、性能分析面板 Performance

灰色:System 系统?

八、性能分析面板 Performance

浅灰:Idle 空闲时间_「啥事也没做」

八、性能分析面板 Performance

红色:warning 警告,通常表示某一个地方有超出预期的行为

在 Performance 面板中,不同区域的行为都用对应的色块来显示,熟知这些色块可以快速读懂不同区域颜色的含义。当然,如果出现红色,则表示在做性能优化时,需要重点关注。

概况「Overview」

Overview 是 Performance 面板中,最上面的区域,如图。

八、性能分析面板 Performance

我们仔细观察该区域的内容,从上到下依次是 时间 -> FPS -> CPU -> NET -> 缩略图 -> HEAP

时间:记录过程所对应的时间刻度
FPS:FPS 是图片领域的定义,指的是画面每秒传输的帧数。我们知道多张图片依次播放,可以组成一个视频,如果一张图片就是一帧,那么视频播放一秒的过程中图片的数量,就是 FPS 的值。Frames Per Second。

理论上来说,视频播放一秒,参与的图片越多,视频越流畅。但与此同时,对性能的要求就越高。如果我们为了流畅在一秒钟刷新1000次,要求太高,GUI 肯定扛不住。浏览器处理不过来,中间的一些帧就不会处理,这就是我们常说的掉帧。同时浏览器也会因为太高的消耗而出现卡顿甚至崩溃。

通常情况下,我们在做高性能动画时,追求的帧率 是 60 FPS。这是大多数设备的屏幕支持的刷新率。也就是说,如果我们的动画能够达到 60 FPS,动画在这个屏幕上就是最流畅的。换算下来,一帧所消耗的时间就是 16.67 ms。

当然,能否支持到 60 FPS,也受到浏览器处理能力和硬件的限制,部分手机无法达到 60 FPS的高度,我们就会使用兼容方式,将帧率降低到 30 FPS,这是避免动画不流畅的最低帧率。

在上图的面板中,右侧使用 FPS 字样表示了这块区域是用来展示记录过程中的帧率表现。通常是绿色区域。绿色区域越高,表示 FPS 越高,如果上方出现红色,表示出现了卡帧现象「一帧渲染太长的时间」,此时页面的表现是卡顿。

可以使用鼠标选中某个时间段,并在下方的 Frames 面板中观察具体的帧率情况,包括时间与每一帧的缩略图。

八、性能分析面板 Performance

在上图中,我们选中绿色区域,可以看到下方对应显示出来许多缩略图,表示这个时间段渲染了很多帧。如果我们选中红色区域,看看是什么情况。

八、性能分析面板 Performance

只有一帧。表示这一帧的渲染消耗了许多时间。与之对应的是同一时间,下方出现大面积的黄色块。也就有可能是因为 JS 的某些复杂计算,导致 GUI 无法快速渲染完这一帧,这样优化的大体方向就出来了。

CPU FPS 下方的区域,不同的颜色表示对应的事件在消耗 CPU 资源。「注意观察最右侧,有对应的文字表示」

八、性能分析面板 Performance

色块表示的内容与刚才我们说的颜色是一致的。另外绿色阴影部分表示没有占用CPU。

如果绿色区域时间过长,则表示 HTML 解析时间偏长,可查看一下是否是资源加载时间过长,可结合 network 面板进行优化。

八、性能分析面板 Performance

如果发现大面积的黄色部分,表示 长时间的 JS 逻辑执行,可结合自身代码实现,与下方的 Main 面板进行优化。Main 面板以火焰图的形式展示。是可视化的函数调用栈信息。如果没有代码压缩「许多方法压缩之后被重命名」,结合火焰图,我们可以很简单找到对应的函数及其执行方法。

代码压缩让 JS 的调试和优化都受到了非常大的限制

火焰图不同的颜色,表示了对应方法可能会涉及的能力。例如,如果是蓝色,则可能是在解析 HTML。如果出现红色,则需要根据具体的提示进行对应的优化。有的页面函数调用栈出现大量红色,就表示需要优化的地方非常多,代码质量可能比较低。

过长的函数调用栈也在优化的范畴之内。

八、性能分析面板 Performance

简洁的

八、性能分析面板 Performance

点击右上角有红色的函数块,在下方会出现对应的警告以及详细信息

八、性能分析面板 Performance

大面积的绿色区域,表示 页面正在进行大量的绘制工作。如果部分操作导致绿色面积偏大,则需要考虑是否有操作导致过多的回流与重绘。

在 Summary中,下方内容的第一行,会显示函数调用名或者部分已知类型对应的名称。理解这些事件,可以帮助定位到对应的代码实现。

Loading 过程中,可能会包括如下一些事件

在 chrome 中,Performance 是一个非常强大的性能分析工具。也是我们在做性能优化时「特别是代码优化」,必须要借助的工具。

当然,在学习 Performance 时,需要有一些应该掌握的基础知识作为铺垫,例如浏览器页面的渲染过程,函数调用栈等。它是一个集合了许多知识与一体的大型工具。好在这些知识,我们都已经做好了铺垫,相信对于大家来说,不是什么难事。

记录页面运行表现

为了避免其他插件进程对当前页面造成影响,建议在做性能分析时,使用 chrome 的无痕模式。

八、性能分析面板 Performance

记录功能的使用非常简单,如下图
八、性能分析面板 Performance

打开浏览器开发者工具,选择 Performance 面板。我们常用的功能,就是前面两个小按钮。

第一个按钮,黑色圆圈,记录浏览器运行中的某一个时间段的表现。通常情况下,我们会点击该按钮开始记录,按钮变成红色,然后去操作页面上的功能,操作完之后,再次点击结束记录,就能得到一个详细的性能分析图。

八、性能分析面板 Performance

第二个按钮,刷新圆圈,用于记录网页从最开始的加载到所有资源加载完成这个过程的性能表现。点击之后,页面会自动重新加载。

八、性能分析面板 Performance

第三个按钮,清空当前的性能分析结果。

颜色识别

在 Performance 记录之后,得到的记录结果里,使用不同的色块,代表不同的执行过程。

八、性能分析面板 Performance

八、性能分析面板 Performance

蓝色:Loading HTML解析过程等

八、性能分析面板 Performance

黄色:Scripting JS执行过程

八、性能分析面板 Performance

紫色:Rendering UI 渲染_「DOM 元素的计算过程」

八、性能分析面板 Performance

绿色:Painting UI 绘制过程

八、性能分析面板 Performance

灰色:System 系统?

八、性能分析面板 Performance

浅灰:Idle 空闲时间_「啥事也没做」

八、性能分析面板 Performance

红色:warning 警告,通常表示某一个地方有超出预期的行为

在 Performance 面板中,不同区域的行为都用对应的色块来显示,熟知这些色块可以快速读懂不同区域颜色的含义。当然,如果出现红色,则表示在做性能优化时,需要重点关注。

概况「Overview」

Overview 是 Performance 面板中,最上面的区域,如图。

八、性能分析面板 Performance

我们仔细观察该区域的内容,从上到下依次是 时间 -> FPS -> CPU -> NET -> 缩略图 -> HEAP

时间:记录过程所对应的时间刻度
FPS:FPS 是图片领域的定义,指的是画面每秒传输的帧数。我们知道多张图片依次播放,可以组成一个视频,如果一张图片就是一帧,那么视频播放一秒的过程中图片的数量,就是 FPS 的值。Frames Per Second。

理论上来说,视频播放一秒,参与的图片越多,视频越流畅。但与此同时,对性能的要求就越高。如果我们为了流畅在一秒钟刷新1000次,要求太高,GUI 肯定扛不住。浏览器处理不过来,中间的一些帧就不会处理,这就是我们常说的掉帧。同时浏览器也会因为太高的消耗而出现卡顿甚至崩溃。

通常情况下,我们在做高性能动画时,追求的帧率 是 60 FPS。这是大多数设备的屏幕支持的刷新率。也就是说,如果我们的动画能够达到 60 FPS,动画在这个屏幕上就是最流畅的。换算下来,一帧所消耗的时间就是 16.67 ms。

当然,能否支持到 60 FPS,也受到浏览器处理能力和硬件的限制,部分手机无法达到 60 FPS的高度,我们就会使用兼容方式,将帧率降低到 30 FPS,这是避免动画不流畅的最低帧率。

在上图的面板中,右侧使用 FPS 字样表示了这块区域是用来展示记录过程中的帧率表现。通常是绿色区域。绿色区域越高,表示 FPS 越高,如果上方出现红色,表示出现了卡帧现象「一帧渲染太长的时间」,此时页面的表现是卡顿。

可以使用鼠标选中某个时间段,并在下方的 Frames 面板中观察具体的帧率情况,包括时间与每一帧的缩略图。

八、性能分析面板 Performance

在上图中,我们选中绿色区域,可以看到下方对应显示出来许多缩略图,表示这个时间段渲染了很多帧。如果我们选中红色区域,看看是什么情况。

八、性能分析面板 Performance

只有一帧。表示这一帧的渲染消耗了许多时间。与之对应的是同一时间,下方出现大面积的黄色块。也就有可能是因为 JS 的某些复杂计算,导致 GUI 无法快速渲染完这一帧,这样优化的大体方向就出来了。

CPU FPS 下方的区域,不同的颜色表示对应的事件在消耗 CPU 资源。「注意观察最右侧,有对应的文字表示」

八、性能分析面板 Performance

色块表示的内容与刚才我们说的颜色是一致的。另外绿色阴影部分表示没有占用CPU。

如果绿色区域时间过长,则表示 HTML 解析时间偏长,可查看一下是否是资源加载时间过长,可结合 network 面板进行优化。

八、性能分析面板 Performance

如果发现大面积的黄色部分,表示 长时间的 JS 逻辑执行,可结合自身代码实现,与下方的 Main 面板进行优化。Main 面板以火焰图的形式展示。是可视化的函数调用栈信息。如果没有代码压缩「许多方法压缩之后被重命名」,结合火焰图,我们可以很简单找到对应的函数及其执行方法。

代码压缩让 JS 的调试和优化都受到了非常大的限制

火焰图不同的颜色,表示了对应方法可能会涉及的能力。例如,如果是蓝色,则可能是在解析 HTML。如果出现红色,则需要根据具体的提示进行对应的优化。有的页面函数调用栈出现大量红色,就表示需要优化的地方非常多,代码质量可能比较低。

过长的函数调用栈也在优化的范畴之内。

八、性能分析面板 Performance

简洁的

八、性能分析面板 Performance

点击右上角有红色的函数块,在下方会出现对应的警告以及详细信息

八、性能分析面板 Performance

大面积的绿色区域,表示 页面正在进行大量的绘制工作。如果部分操作导致绿色面积偏大,则需要考虑是否有操作导致过多的回流与重绘。

在 Summary中,下方内容的第一行,会显示函数调用名或者部分已知类型对应的名称。理解这些事件,可以帮助定位到对应的代码实现。

Loading 过程中,可能会包括如下一些事件

部分转自互联网,侵权删除联系

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » 八、性能分析面板 Performance求职学习资料
分享到: 更多 (0)
D0b2wT.gif

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们