菜单

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

2019年1月30日 - Html/Html5

Web质量优化种类(2):剖析页面绘制时间

2015/04/15 · CSS,
HTML5,
JavaScript ·
品质优化

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

近日,我插足了在London举行的脸书移动开发者大会。在那天时期,有好多的攀谈,但确实让自家关爱的是一场关于品质的,名为“让m.facebook.com更快”的沟通会,它的宗旨是关于Facebook怎么着不断努力立异网页质量和从中汲取的阅历。

Facebook支出团队是拔取Chrome
Cannry
来测试网页CSS性能的。Google Chrome
Canary
所有Chrome的摩登特性,并同意试用一些将要成为Chrome标准版本的,可行的风尚特性。考虑到Chrome
Canary作为一个为开发者和尝鲜者专门陈设的“预览版”,所以有时会因Chrome开发团队的飞跃迭代而造成一些B
UG。即便如此,它如故有一对很棒的开发者工具帮忙你测试网页性能

图片 1

在这篇文章里,我体现如何利用Chrome
Canary的开发者工具去稳定你的CSS中的一有的,那有些CSS可能会促成页面滚动缓慢和潜移默化页面的绘图时间。当浏览器加载和制图页面时,为了“绘制”并让内容展现在屏幕上,需求遍历所有可知元素。由于那倚重于布局和复杂性的CSS,你可能会发现绘制时间会很长。那会造成网页看起来忽动忽停和响应较慢。那种缓慢滚动也称为jank(jank是Android系统的一个专业术语,指的是屏幕上朗朗上口动态画面中断的卡顿现象)。在活动装备上滚动页面时,浏览器会全力以赴地绘制复杂的CSS,那时那种景观越发明朗。

就是页面的加载时间万分快,也仍旧值得去探究页面的绘图时间。不一样装备对CSS属性有着不平等的反响,但好歹,能增高品质总是一件很好的事。为了举办测试,首先得去Google
Chrome
网站下载Chrome
Canary。一旦设置落成,就足以打开你想测试的网页。HTML5
Rocks
网站里有一个很好的案例网站,大家应用它来证实高耗电CSS属性的操作,会追加页面的绘图时间。

图片 2

一旦您打开到这一个网页,按下F12,会弹出Chrome的开发者工具。然后在开发者工具的尾部左边点击设置按钮,开启测试页面渲染品质的装置。

图片 3

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

图片 4

因为大家要测试页面的渲染质量,所以选择“Enable continuous page
repainting
(页面持续重新绘制)“和 “Show FPS
meter(显示FPS仪表)”**。借使你关闭设置面板,查看你的网页,你应该相会到上边的图片在页面右上角。

图片 5

该表突显以阿秒为单位的脚下页面绘制所需时间,而左侧展现了现阶段图表的蝇头与最大值。其它,也展示了近日80帧的树状图。这一个图片的兵不血刃之处是它不断试图再一次绘制页面,使得页面好像是首先次加载。那允许你精确定位因CSS影响的绘图问题,而不用每回重复加载页面。无论你的变动是还是不是暴发影响,树状图都会不断监测。

一经我们详细查看那么些页面的HTML和CSS,你见面到其中一个div添加了一部分CSS效果。

图片 6

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

图片 7

哇!正如您从图纸可知到,页面绘制时间有一个令人关注的浮动。通过简单地将border-radius属性移除,就足以讲明那些改变能让页面的绘图时间肯定滑坡。当您更新或转移CSS属性时,那一个图片就当下下落。在同一个因素上同时使用box-shadowborder-radius,会导致相当重的绘图负担,那是因为浏览器不能够为之做出优化。假诺有一个因素须要频仍的重新绘制,你应当在成立网页时时刻记住那一点。

那是一个很好的,在Google IO
网站
上的视频,它更透彻地解说绘制时间,并介绍部分裁减网页“jank(卡顿)”的技艺。

想更进一步深造绘制时间的优化,看看那么些链接

祝测试欢快!

打赏支持自己翻译越多好文章,谢谢!


打赏译者

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

打赏协理我翻译更多好文章,谢谢!

任选一种支付办法

图片 8
图片 9

赞 2 收藏
评论

新近,我在场了在London进行的Facebook移动开发者大会。在那天时期,有广大的攀谈,但真的让自己关怀的是一场关于质量的,名为“让m.facebook.com更快”的互换会,它的宗旨是关于Facebook如何不断努力革新网页品质和从中汲取的经验。

关于小编:刘健超-J.c

图片 10

前端,在路上…http://jchehe.github.io
个人主页
·
我的稿子
·
19
·
    

图片 11

Facebook付出团队是利用Chrome
Cannry
来测试网页CSS性能的。Google Chrome
Canary
具备Chrome的风行特性,并允许试用一些快要成为Chrome标准版本的,可行的新星特性。考虑到Chrome
Canary作为一个为开发者和尝鲜者专门布置的“预览版”,所以有时候会因Chrome开发团队的登时迭代而导致部分B
UG。即使如此,它如故有局地很棒的开发者工具匡助你测试网页性能

图片 12

在那篇小说里,我显得什么行使Chrome
Canary的开发者工具去稳定你的CSS中的一片段,那有些CSS可能会促成页面滚动缓慢和潜移默化页面的绘图时间。当浏览器加载和制图页面时,为了“绘制”并让内容突显在屏幕上,必要遍历所有可知元素。由于那看重于布局和错综复杂的CSS,你恐怕会意识绘制时间会很长。那会导致网页看起来忽动忽停和响应较慢。那种缓慢滚动也号称jank(jank是Android系统的一个专业术语,指的是屏幕上朗朗上口动态画面中断的卡顿现象)。在运动装备上滚动页面时,浏览器会不遗余力地绘制复杂的CSS,那时那种状态越来越显眼。

哪怕页面的加载时间越发快,也照样值得去商讨页面的绘图时间。不一致装备对CSS属性有着分歧的反应,但好歹,能坚实品质总是一件很好的事。为了进行测试,首先得去Google
Chrome
网站下载Chrome
Canary。一旦设置到位,就可以打开你想测试的网页。HTML5
Rocks
网站里有一个很好的案例网站,大家运用它来证实高耗电CSS属性的操作,会扩充页面的绘图时间。

图片 13

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

图片 14

点击后会展现一个同意你改变设置的控制板。

图片 15

因为大家要测试页面的渲染品质,所以选拔“Enable continuous page
repainting
(页面持续重新绘制)“和 “Show FPS
meter(显示FPS仪表)”**。假设您关闭设置面板,查看你的网页,你应该相会到上面的图样在页面右上角。

图片 16

该表显示以毫秒为单位的眼前页面绘制所需时日,而右手展现了当前图表的小不点儿与最大值。别的,也显得了方今80帧的树状图。这几个图形的兵不血刃之处是它不断试图重新绘制页面,使得页面好像是首先次加载。这允许你精确定位因CSS影响的绘图难题,而不用每一遍重复加载页面。无论你的改观是不是暴发震慑,树状图都会没完没了监测。

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

图片 17

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

图片 18

哇!正如您从图片可看出,页面绘制时间有一个令人关怀的变通。通过简单地将border-radius属性移除,就可以申明这几个改变能让页面的绘图时间明显滑坡。当你更新或改动CSS属性时,那么些图片就当下下跌。在同一个元素上同时选择box-shadowborder-radius,会促成万分重的绘图负担,那是因为浏览器不可以为之做出优化。借使有一个元素需求反复的重复绘制,你应当在创立网页时时刻记住那点。

这是一个很好的,在Google IO
网站
上的摄像,它更长远地讲演绘制时间,并介绍一些减去网页“jank(卡顿)”的技巧。

想更进一步深造绘制时间的优化,看看那么些链接

祝测试欢欣!

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图