Web性能优化系列,剖析页面绘制时间

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

任选一种支付方式

图片 1
图片 2

赞 2 收藏
评论

图片 3

作者:伯乐在线专栏作者 – CharlieChu
点击 →
了解如何加入专栏作者
如需转载,发送「转载」二字查看说明

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。尽管如此,它仍然有一些很棒的开发者工具帮助你测试网页性能

图片 4

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

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

图片 5

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

图片 6

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

图片 7

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

图片 8

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

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

图片 9

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

图片 3

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

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

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

祝测试愉快!

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

打赏译者

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

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

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

图片 11

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

图片 12

图片 6

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

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

网页录制详情

支持两种网页录制操作:①录制网页加载,②录制网页交互。为了便于分析,录制的时间不宜太长、还要避免不必要的交互操作、并禁用浏览器的缓存和插件。
当录制完成后,在Flame
Chart
(火焰图)中点击左侧三角可以展开详情,点击其中的事件或者空白处,可以在Details里面查看该事件或者总的概要信息。这里面包含的信息量很大,限于篇幅原因,下次有机会再作深入介绍,或者直接到Google上查看Timeline
Event Reference这个参考文档。

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

录制中进行JS分析

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

图片 14

祝测试愉快!

录制中捕获截屏

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

图片 15

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

运行时性能分析

上面大致介绍了Timeline面板上的各个功能菜单,那么如何去利用该面板去分析和优化网页程序的运行性能呢,由于篇幅限制,就不在这边展开讨论,感兴趣的读者直接到Google开发者文档上查看,Google开发者文档有最权威最新的信息。
参考文档
Analyze Runtime Performance

Diagnose Forced Synchronous Layouts

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

Chrome 开发者工具详解(2):Network
面板

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

查询指定事件

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

图片 16

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

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

Timeline面板

Timeline面板是整个面板里面最复杂的一个面板,涉及的东西比较多。可以利用这个面板来记录和分析网页运行过程中的所有活动行为信息。
你可以充分利用这个面板来分析你的网页的程序性能问题。

图片 17

概述
下图是从Google官方网站中介绍Timeline面板的图贴到这里,该面板主要包括4大块窗格(Pane):
Controls 录制开关和控制录制过程中需要记录哪些信息。

Overview 网页性能的概要信息。

Flame Chart
CPU堆栈轨迹的可视化图表(火焰图)。在图表里面有1到3条虚竖线。

Details
当选择一个指定的事件后,会显示这个事件的更多信息;当没有选择事件时,会显示指定的时间帧信息。

Flame
Chart
里面的虚竖线含义:蓝色标记DOMContentLoaded事件;绿色标记第一次的绘制时间点;红色代表load事件。

图片 18

其中第2块Overview显示了网页性能相关的概要信息,可以通过鼠标或者区域边界上的灰色滑块来拖出一个指定区域范围,Flame
Chart
会跟着局部放大显示指定区域内的详情信息。
可以通过键盘上的W
,S
来放大和缩小指定区域,通过A
,D
来向左或向右移动指定区域。

从Google把图贴到这里,这个窗格包含了三个图表:
FPS 每秒帧数(Frames Per
Second)。绿色柱状条越高,则每秒帧数越高。在FPS图表上方的红色块是标记一个长帧。

CPU 标记CPU资源的使用情况,这里的面积图标记着消耗CPU资源的各类事件。

NET
各种颜色的柱状条分别显示一种资源。柱状条越长,代表获取这个资源的时间越长。

图片 19

CPU面积图中各颜色的含义:蓝色代表HTML文件;黄色代表脚本文件;紫色代表样式文件;绿色代表媒体文件;灰色代表其它杂项文件。

NET图表柱状条两种颜色的含义:较亮的部分表示等待时间(当资源被请求时,直到第一个字节被下载的时间);较暗的部分表示传输时间(在第一个和最后一个字节被下载之间的时间)。

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

绘制解析

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

图片 20

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

Layer Borders 显示Layer边界。

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

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

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

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

图片 21

图片 4

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

图片 9

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

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

图片 8

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

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

图片 5

图片 7

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