菜单

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

2019年1月25日 - XML

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

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

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

新近,我加入了在伦敦(London)进行的脸书移动开发者大会。在那天时期,有成百上千的交谈,但真的让自己关心的是一场有关性能的,名为“让m.facebook.com更快”的沟通会,它的主旨是有关Facebook怎样不断大力创新网页性能和从中得出的阅历。

Facebook支付团队是使用Chrome
Cannry
来测试网页CSS性能的。Google Chrome
Canary
不无Chrome的新式特性,并允许试用一些将要成为Chrome标准版本的,可行的新型特性。考虑到Chrome
Canary作为一个为开发者和尝鲜者专门规划的“预览版”,所以有时会因Chrome开发公司的神速迭代而造成一些B
UG。固然如此,它仍旧有局部很棒的开发者工具支持您测试网页性能

manbetx2.0手机版 1

在那篇文章里,我出示什么采纳Chrome
Canary的开发者工具去稳定你的CSS中的一部分,那有些CSS可能会促成页面滚动缓慢和潜移默化页面的绘图时间。当浏览器加载和制图页面时,为了“绘制”并让内容突显在显示屏上,须要遍历所有可知元素。由于那看重于布局和复杂的CSS,你可能会发现绘制时间会很长。那会造成网页看起来忽动忽停和响应较慢。这种缓慢滚动也叫做jank(jank是Android系统的一个专业术语,指的是屏幕上朗朗上口动态画面中断的卡顿现象)。在移动设备上滚动页面时,浏览器会努力地绘制复杂的CSS,那时那种情状愈加显眼。

尽管页面的加载时间万分快,也照例值得去琢磨页面的绘图时间。差距装备对CSS属性有着不雷同的反馈,但不管怎么着,能增强性能总是一件很好的事。为了拓展测试,首先得去Google
Chrome
网站下载Chrome
Canary。一旦设置到位,就足以打开你想测试的网页。HTML5
Rocks
网站里有一个很好的案例网站,我们拔取它来表明高耗能CSS属性的操作,会增多页面的绘图时间。

manbetx2.0手机版 2

比方您打开到那一个网页,按下F12,会弹出Chrome的开发者工具。然后在开发者工具的平底右边点击设置按钮,开启测试页面渲染性能的安装。

manbetx2.0手机版 3

点击后会突显一个同意你转移设置的控制板。

manbetx2.0手机版 4

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

manbetx2.0手机版 5

该表显示以阿秒为单位的眼前页面绘制所需时日,而右手显示了当前图表的细微与最大值。其余,也显得了近来80帧的树状图。那一个图形的强硬之处是它不止试图重新绘制页面,使得页面好像是首先次加载。那允许你精确定位因CSS影响的绘图问题,而不用每一遍重复加载页面。无论你的改观是不是暴发震慑,树状图都会没完没了监测。

一旦大家详细查看那个页面的HTML和CSS,你会见到其中一个div添加了部分CSS效果。

manbetx2.0手机版 6

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

manbetx2.0手机版 7

哇!正如你从图纸可阅览,页面绘制时间有一个让人关怀的转变。通过简单地将border-radius属性移除,就足以印证这几个改变能让页面的绘图时间明确减弱。当您更新或转移CSS性能时,这些图形就立时下落。在同一个因素上还要使用box-shadowborder-radius,会造成万分重的绘图负担,那是因为浏览器无法为之做出优化。如若有一个因素需求反复的双重绘制,你应当在创立网页时时刻记住那点。

那是一个很好的,在Google IO
网站
上的录像,它更深远地论述绘制时间,并介绍部分回落网页“jank(卡顿)”的技能。

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

祝测试开心!

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


打赏译者

manbetx2.0手机版 8

打赏协理我翻译更多好小说,谢谢!

任选一种支付办法

manbetx2.0手机版 9
manbetx2.0手机版 10

赞 2 收藏
评论

在那篇文章里,我显示怎么样运用Chrome
Canary的开发者工具去稳定你的CSS中的一局地,这一部分CSS可能会造成页面滚动缓慢和震慑页面的绘图时间。当浏览器加载和制图页面时,为了“绘制”并让内容突显在屏幕上,须要遍历所有可知元素。由于那依赖于布局和错综复杂的CSS,你恐怕会意识绘制时间会很长。那会导致网页看起来忽动忽停和响应较慢。那种缓慢滚动也号称jank(jank是Android系统的一个专业术语,指的是屏幕上朗朗上口动态画面中断的卡顿现象)。在运动装备上滚动页面时,浏览器会全力以赴地绘制复杂的CSS,那时那种景色尤为旗帜显著。

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

manbetx2.0手机版 11

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

manbetx2.0手机版 12

祝测试快乐!

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

manbetx2.0手机版 13

该表突显以飞秒为单位的此时此刻页面绘制所需时间,而左边展现了眼前图表的微小与最大值。其余,也突显了近日80帧的树状图。那一个图形的强硬之处是它不止试图重新绘制页面,使得页面好像是首先次加载。那允许你精确定位因CSS影响的绘图问题,而不用每趟重复加载页面。无论你的变动是不是发生影响,树状图都会没完没了监测。

因为大家要测试页面的渲染性能,所以选用“Enable continuous page
repainting
(页面持续重新绘制)“和 “Show FPS
meter(显示FPS仪表)”**。就算你关闭设置面板,查看你的网页,你应有会看到上面的图纸在页面右上角。

manbetx2.0手机版 14

就是页面的加载时间更加快,也依然值得去商量页面的绘图时间。不相同装备对CSS属性有着不平等的感应,但无论怎样,能增长性能总是一件很好的事。为了进行测试,首先得去Google
Chrome
网站下载Chrome
Canary。一旦设置到位,就可以打开你想测试的网页。HTML5
Rocks
网站里有一个很好的案例网站,大家利用它来评释高耗能CSS属性的操作,会扩充页面的绘图时间。

哇!正如你从图片可见到,页面绘制时间有一个令人关注的成形。通过简单地将border-radius属性移除,就足以表明这么些改变能让页面的绘图时间明确裁减。当你更新或转移CSS属性时,那些图形就马上下落。在同一个元素上同时使用box-shadowborder-radius,会造成万分重的绘图负担,这是因为浏览器不可能为之做出优化。若是有一个因素须要频仍的双重绘制,你应当在制造网页时时刻记住这一点。

点击后会突显一个同意你转移设置的控制板。

manbetx2.0手机版 15

想更进一步读书绘制时间的优化,看看这么些链接

这是一个很好的,在Google IO
网站
上的录像,它更深刻地阐释绘制时间,并介绍一些压缩网页“jank(卡顿)”的技巧。

manbetx2.0手机版 16

近年来,我参与了在伦敦(London)举行的Facebook移动开发者大会。在那天时期,有不少的攀谈,但的确让自家关切的是一场关于性能的,名为“让m.facebook.com更快”的交换会,它的大旨是有关非死不可怎么样不断努力创新网页性能和从中汲取的阅历。

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

设若大家详细查看这么些页面的HTML和CSS,你会看出里面一个div添加了一些CSS效果。

Facebook支出团队是利用Chrome
Cannry
来测试网页CSS性能的。Google Chrome
Canary
有着Chrome的风靡特性,并同意试用一些将要成为Chrome标准版本的,可行的新星特性。考虑到Chrome
Canary作为一个为开发者和尝鲜者专门规划的“预览版”,所以有时候会因Chrome开发集团的高速迭代而导致部分B
UG。即使如此,它如故有一些很棒的开发者工具辅助您测试网页性能

manbetx2.0手机版 17

manbetx2.0手机版 18

若是您打开到那几个网页,按下F12,会弹出Chrome的开发者工具。然后在开发者工具的最底层左边点击设置按钮,开启测试页面渲染性能的安装。

相关文章

发表评论

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

网站地图xml地图