菜单

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

2019年1月29日 - JavaScript

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

前不久,我加入了在伦敦进行的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地图