菜单

Web质量优化体系(2):剖析页面绘制时间

2019年1月29日 - Ajax

Web质量优化体系(2):剖析页面绘制时间

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

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

如今,我加入了在London举行的Facebook移动开发者大会。在那天时期,有为数不少的交谈,但真的让自身关注的是一场有关质量的,名为“让m.facebook.com更快”的交换会,它的主旨是关于Facebook怎样不断大力改良网页质量和从中得出的经历。

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地图