Chrome开发者工具详解(3):Timeline面板

2019-04-08 02:59栏目:ca888圈内

打赏支持我翻译更多好文章,谢谢!

任选一种支付方式

图片 1 图片 2

赞 2 收藏 评论

图片 3

Chrome 开发者工具详解(1):Elements、Console、Sources面板

复合

最后一步,将所有绘制好的元素进行复合。默认情况下,所有元素将会被绘制到同一个层中;如果将元素分开到不同的复合层中,更新元素对性能友好,不在同一层的元素不容易受到影响。CPU 绘制层,GPU 生成层。基础绘图操作在硬件加速合成中完成效率高。层的分离允许非破坏性的改变,正如你所猜测的,GPU 复合层上的改变代价最小性能消耗最少

关于作者:刘健超-J.c

图片 4

前端,在路上... 个人主页 · 我的文章 · 19 ·     

图片 5

这是一个很好的,在Google IO 网站上的视频,它更深入地阐述绘制时间,并介绍一些减少网页“jank(卡顿)”的技巧。

【转载】
Chrome开发者工具详解(3):Timeline面板

性能测试

知道了如何优化页面性能后,还要做性能测试才行。依我之见,Chrome 开发者工具就是最棒的测试工具。在 ‘More Tools’ 中有一个 ‘Rendering’ 面板,其中包含了一些选项:比如追踪「脏元素」、计算每秒的帧率、高亮每层的边界还有监测滚动性能问题。

图片 6

‘Performance’ 面板中的 ‘Timeline’ 工具能记录动画过程,开发者可以直接定位到出问题的部分。很简单,红色表示有问题,绿色表示渲染正常。开发者可以直接点击红色区域,看看是哪个函数造成了性能问题的函数。

另一个有趣的工具是在 ‘Caputrue Settings’ 中的 ‘CPU throtting’,开发者可以通过这个选项模拟页面运行在一台非常卡的设备上。开发者在桌面浏览器上测试页面的时候效果可能很好,那是因为 PC 或者 Mac 的本身性能就优于移动设备。这个选项提供了很好的真机模拟。

图片 7

Web性能优化系列(2):剖析页面绘制时间

2015/04/15 · CSS, HTML5, JavaScript · 性能优化

本文由 伯乐在线 - 刘健超-J.c 翻译,sunbiaobiao 校稿。未经许可,禁止转载!
英文出处:www.deanhume.com。欢迎加入翻译组。

最近,我参加了在伦敦举办的Facebook移动开发者大会。在那天期间,有很多的交谈,但真正让我关注的是一场关于性能的,名为“让m.facebook.com更快”的交流会,它的主题是关于Facebook如何不断努力改善网页性能和从中汲取的经验。

Facebook开发团队是使用Chrome Cannry来测试网页CSS性能的。Google Chrome Canary拥有Chrome的最新特性,并允许试用一些即将成为Chrome标准版本的,可行的最新特性。考虑到Chrome Canary作为一个为开发者和尝鲜者专门设计的“预览版”,所以有时候会因Chrome开发团队的快速迭代而导致一些B UG。尽管如此,它仍然有一些很棒的开发者工具帮助你测试网页性能

图片 8

在这篇文章里,我展示如何使用Chrome Canary的开发者工具去定位你的CSS中的一部分,这部分CSS可能会导致页面滚动缓慢和影响页面的绘制时间。当浏览器加载和绘制页面时,为了“绘制”并让内容显示在屏幕上,需要遍历所有可见元素。由于这依赖于布局和复杂的CSS,你可能会发现绘制时间会很长。这会导致网页看起来忽动忽停和响应较慢。这种缓慢滚动也称为jank(jank是Android系统的一个专业术语,指的是屏幕上流畅动态画面中断的卡顿现象)。在移动设备上滚动页面时,浏览器会使劲地绘制复杂的CSS,这时这种情况更加明显。

即使页面的加载时间十分快,也仍然值得去研究页面的绘制时间。不同设备对CSS属性有着不一样的反应,但无论如何,能提高性能总是一件很好的事。为了进行测试,首先得去Google Chrome网站下载Chrome Canary。一旦安装完成,就可以打开你想测试的网页。HTML5 Rocks网站里有一个很好的案例网站,我们使用它来证明高耗能CSS属性的操作,会增加页面的绘制时间。

图片 9

一旦你打开到这个网页,按下F12,会弹出Chrome的开发者工具。然后在开发者工具的底部右侧点击设置按钮,开启测试页面渲染性能的设置。

图片 10

点击后会显示一个允许你更改设置的控制板。

图片 11

因为我们要测试页面的渲染性能,所以选择“Enable continuous page repainting(页面持续重新绘制)“和 “Show FPS meter(显示FPS仪表)”**。如果你关闭设置面板,查看你的网页,你应该会看到下面的图片在页面右上角。

图片 12

该表显示以毫秒为单位的当前页面绘制所需时间,而右侧显示了当前图表的最小与最大值。另外,也显示了最近80帧的树状图。这个图表的强大之处是它不断试图重新绘制页面,使得页面好像是第一次加载。这允许你精确定位因CSS影响的绘制问题,而不用每次重新加载页面。无论你的改变是否产生影响,树状图都会持续监测。

如果我们详细查看这个页面的HTML和CSS,你会看到其中一个div添加了一些CSS效果。

图片 13

这个div有border-radius(圆角)和投影属性。当移除box-shadow属性,再观察FPS meter在绘制时间的变化。

图片 14

哇!正如你从图表可看出,页面绘制时间有一个令人关注的变化。通过简单地将border-radius属性移除,就可以证明这个改变能让页面的绘制时间显著减少。当你更新或改变CSS属性时,这个图表就立即下降。在同一个元素上同时使用box-shadowborder-radius,会导致非常重的绘制负担,这是因为浏览器不能为之做出优化。如果有一个元素需要频繁的重复绘制,你应该在建立网页时时刻记住这点。

这是一个很好的,在Google IO 网站上的视频,它更深入地阐述绘制时间,并介绍一些减少网页“jank(卡顿)”的技巧。

想更进一步学习绘制时间的优化,看看这些链接。

祝测试愉快!

打赏支持我翻译更多好文章,谢谢!

打赏译者

哇!正如你从图表可看出,页面绘制时间有一个令人关注的变化。通过简单地将border-radius属性移除,就可以证明这个改变能让页面的绘制时间显著减少。当你更新或改变CSS属性时,这个图表就立即下降。在同一个元素上同时使用box-shadowborder-radius,会导致非常重的绘制负担,这是因为浏览器不能为之做出优化。如果有一个元素需要频繁的重复绘制,你应该在建立网页时时刻记住这点。

查询指定事件

你可以通过在DevTools上按Cmd F(Mac)
调出查询框,来查看指定时间区域范围内的指定类型的事件,点击Cmd G(Mac)
或者Cmd Shift G(Mac)
可以按事件发生的顺序来查询。

图片 15

图中查询到了4个红色标记着的Parse HTML
事件,点击Cmd G
焦点会在这4个事件移动。

新方法

现在有了will-change,它能够显式地通知浏览器对某一个元素的某个或某些元素做渲染优化。will-change 接收各种各样的属性值,比如一个或多个 CSS 属性 (transform, opacity)、contents 或者 scroll-position。不过最常用值可能就是 auto,这个值表示的是浏览器将进行默认的优化:

.box { will-change: auto; }

1
2
3
.box {
  will-change: auto;
}

优化有度,我们总能听到关于「复合层过多反而阻碍渲染」的讨论。因为浏览器已经为优化做了能做的一切, will-change 的性能优化方案本身对资源要求很高。如果浏览器持续在执行某个元素的 will-change,就意味着浏览器要持续对这个元素的进行优化,性能消耗造成页面卡顿。过多的复合层降低页面性能的现象在移动端很常见。

该表显示以毫秒为单位的当前页面绘制所需时间,而右侧显示了当前图表的最小与最大值。另外,也显示了最近80帧的树状图。这个图表的强大之处是它不断试图重新绘制页面,使得页面好像是第一次加载。这允许你精确定位因CSS影响的绘制问题,而不用每次重新加载页面。无论你的改变是否产生影响,树状图都会持续监测。

录制中进行JS分析

在录制之前点击Controls中的JS Profile复选框,可以在时间轴中捕获JavaScript的堆栈信息(会产生一定的性能消耗),并且在Flame Chart(火焰图)中会显示所有被调用的JavaScript函数信息。

图片 16

滚动

实现性能良好的平滑滚动可是个挑战。幸运的是,最近规范提供一些可配置选项。开发者不再需要通过禁止浏览器默认行为 (preventDefault),开启 Passive event listeners 即可提升滚动性能(声明之后,就不需要通过阻止元素的 touch 事件监听和鼠标滚轮事件监听以优化滚动性能)。使用方法仅是在需要的监听器中声明 {passive: true}

element.addEventListener('touchmove', doSomething(), { passive: true });

1
element.addEventListener('touchmove', doSomething(), { passive: true });

从 Chrome 56 开始,这个选项将在 touchmovetouchstart 中默认开启。

新出的 Intersection Observer API 能够告诉开发者某个元素是不是在视口内,或者是不是和其他元素有交互。和通过事件处理这种会阻塞主线程的交互方式相比,Intersection Observer API 可以监听元素,只有当元素交叉路径的时候才会执行相应操作。这个 API 在无限滚动和懒加载的场景都可以使用。

图片 17

录制中捕获截屏

在录制之前点击Controls中的Screenshots复选框,可以在录制过程中捕获截屏,鼠标在Overview上从左向右移动则可以看到录制的动画。

图片 18

手动优化

还有一个好消息 — 开发者可以选择想要控制的属性,创建复合层,并将元素拖到该层。通过手动优化,确保元素总能被绘制好,这也是通知浏览器准备绘制该元素的最简单方式。需要独立层的场景包括:元素的状态将发生一些变化(比如动画)、改变了很消耗性能的样式(比如 position:fixedoverflow:scroll)。可能你也见过了糟糕的性能导致了页面闪烁、震动…或其他不如预期的效果,例如移动端常见的固定在视口顶部的头部,会在页面滚动的时候闪烁。将这样的元素独立到自己的复合层,就是常见的解决这类问题的方法。

这个div有border-radius(圆角)和投影属性。当移除box-shadow属性,再观察FPS meter在绘制时间的变化。

绘制解析

在录制之前点击Controls中的Paint复选框,可以获取绘制事件的更多细节信息(注意这会产生很多的性能消耗)。如果要深入了解网页渲染方面的信息,可以点击DevTools右上角的菜单,在More tools里面选中Rendering settings,这里面包含了如下设置项:

图片 19

Paint Flashing 高亮显示网页中需要被重绘的部分。

Layer Borders 显示Layer边界。

FPS Meter 每一秒的帧细节,帧速率的分布信息和GPU的内存使用情况。

Scrolling Performance Issues 分析鼠标滚动时的性能问题,会显示使屏幕滚动变慢的区域。

Emulate CSS Media 仿真CSS媒体类型,查看不同的设备上CSS样式效果,可能的媒体类型选项有print
、screen

把上面的所有设置项勾选上,网页的显示效果如下:

图片 20

推荐阅读

2 赞 3 收藏 1 评论

图片 21

版权声明:本文由ca888发布于ca888圈内,转载请注明出处:Chrome开发者工具详解(3):Timeline面板