Web性能优化系列(2):剖析页面绘制时间网赌正规网站网址

Web质量优化类别(2):分析页面绘制时间

2015/04/15 · CSS,
HTML5,
JavaScript ·
质量优化

本文由 伯乐在线 –
刘健超-J.c
翻译,sunbiaobiao
校稿。未经许可,制止转发!
阿尔巴尼亚语出处:www.deanhume.com。迎接参加翻译组。

新近,作者参加了在London进行的推文(Tweet)(TWTENCORE.US)移动开荒者大会。在此天时期,有为数不菲的攀谈,但真正让自家关切的是一场关于质量的,名叫“让m.facebook.com更快”的交换会,它的主题是关于Instagram怎么样不断大力改正网页品质和从当中得出的经验。

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(卡顿)”的技艺。

想更进一竿深造绘制时间的优化,看看那几个链接。

祝测量检验兴奋!

打赏帮助本身翻译更加多好文章,谢谢!

打赏译者

打赏扶助本人翻译越来越多好小说,感谢!

任选如日方升种支付方式

网赌正规网站网址 8
网赌正规网站网址 9

赞 2 收藏
评论

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

网赌正规网站网址 10

前端,在路上…网赌正规网站网址,
个人主页 ·
小编的稿子 ·
19 ·
    

网赌正规网站网址 11

相关文章

发表评论

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

网站地图xml地图