菜单

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

2019年1月24日 - JavaScript

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

近些年,我加入了在伦敦举办的非死不可移动开发者大会。在那天时期,有诸多的交谈,但真正让自身关心的是一场有关性能的,名为“让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地图