菜单

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

2019年1月24日 - CSS/CSS3

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

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

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

近日,我参与了在伦敦(London)举行的Facebook移动开发者大会。在那天时期,有不少的攀谈,但确实让自身关心备至的是一场关于性能的,名为“让m.facebook.com更快”的沟通会,它的主题是关于脸书怎样不断努力立异网页性能和从中汲取的阅历。

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进行的脸书移动开发者大会。在那天时期,有这些的攀谈,但真的让自身关心的是一场关于性能的,名为“让m.facebook.com更快”的调换会,它的主旨是关于非死不可怎样不断大力改良网页性能和从中得出的阅历。

有关小编:刘健超-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地图