菜单

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

2018年11月19日 - Html/Html5

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。尽管如此,它还是有部分异常过硬的开发者工具协助您测试网页性能

图片 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 收藏
评论

不久前,我参加了以伦敦设的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地图