菜单

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

2019年1月24日 - Bootstrap

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

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

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

近来,我在场了在London举行的非死不可移动开发者大会。在这天时期,有好多的攀谈,但确确实实让自身关心的是一场关于性能的,名为“让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)进行的Facebook移动开发者大会。在那天时期,有过多的攀谈,但的确让自身关注的是一场关于性能的,名为“让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地图