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

有关笔者:刘健超-J.c

图片 1

前端,在路上…
个人主页 ·
我的篇章 ·
19 ·
    

图片 2

如果您打开到那么些网页,按下F12,会弹出Chrome的开辟者工具。然后在开采者工具的底层侧边点击设置开关,开启测量检验页面渲染质量的设置。

打赏帮衬自身翻译更加的多好小说,多谢!

任选大器晚成种支付办法

图片 3
图片 4

赞 2 收藏
评论

本文由 伯乐在线 – J.c 翻译,sunbiaobiao 校稿。未经许可,防止转发!
俄语出处:www.deanhume.com。接待参与翻译小组。

Web品质优化类别(2):剖判页面绘制时间

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

本文由 伯乐在线 –
刘健超-J.c
翻译,sunbiaobiao
校稿。未经许可,禁止转发!
保加瓦伦西亚语出处:www.deanhume.com。款待插足翻译组。

多年来,小编在场了在伦敦进行的Twitter移动开拓者大会。在那天时期,有不菲的攀谈,但的确让自己关怀的是一场有关品质的,名字为“让m.facebook.com更快”的沟通会,它的主旨是关于推特(TWTR.US)怎样不断大力修改网页品质和从当中得出的阅历。

Facebook支付团队是行使Chrome
Cannry
来测量检验网页CSS性能的。Google Chrome
Canary
装有Chrome的新型性格,并同意试用一些快要成为Chrome标准版本的,可行的流行天性。怀想到Chrome
Canary作为一个为开垦者和尝鲜者特意设计的“预览版”,所以不常会因Chrome开采团队的敏捷迭代而导致部分B
UG。就算如此,它依然有局地很棒的开拓者工具帮衬您测验网页性能

图片 5

在此篇小说里,笔者呈现怎么样使用Chrome
Canary的开辟者工具去牢固你的CSS中的大器晚成有的,那有的CSS也许会促成页面滚动缓慢和震慑页面包车型大巴绘图时间。当浏览器加载和制图页面时,为了“绘制”并让内容显示在显示屏上,必要遍历全部可知成分。由于那信赖于布局和复杂的CSS,你大概会发觉绘制时间会十分长。那会变成网页看起来忽动忽停和响应相当的慢。这种缓慢滚动也号称jank(jank是Android系统的二个专门的学业术语,指的是荧屏上轻重缓急动态画面中断的卡顿现象)。在活动设备上滚动页面时,浏览器会竭力地绘制复杂的CSS,当时这种情景进一步断定。

尽管页面的加载时间拾分快,也照例值得去探究页面的绘图时间。差异道具对CSS属性有着不均等的反射,但无论怎么样,能拉长质量总是生机勃勃件很好的事。为了实行测量检验,首先得去Google
Chrome
网址下载Chrome
Canary。生龙活虎旦设置达成,就可以展开你想测验的网页。HTML5
Rocks
网址里有一个很好的案例网址,大家接受它来表明高功耗CSS属性的操作,会扩展页面包车型地铁绘图时间。

图片 6

假如您张开到那一个网页,按下F12,会弹出Chrome的开采者工具。然后在开拓者工具的底层右边点击设置按键,开启测试页面渲染质量的安装。

图片 7

点击后会呈现二个允许你转移设置的调整板。

图片 8

因为我们要测量检验页面包车型大巴渲染性能,所以选择“Enable continuous page
repainting
(页面持续重新绘制)“和 “Show FPS
meter(显示FPS仪表)”**。即使你关闭设置面板,查看你的网页,你应有探访到上面包车型地铁图纸在页面右上角。

图片 9

该表展现以飞秒为单位的当下页面绘制所需时日,而左臂突显了现阶段图表的微小与最大值。其它,也展现了近年来80帧的树状图。那几个图形的有力之处是它不仅试图重新绘制页面,使得页面好疑似第二次加载。这允许你正确定位因CSS影响的绘图问题,而不用每便重复加载页面。无论你的变动是还是不是爆发耳熟能详,树状图都会随处监测。

只要大家详细查看这么些页面包车型客车HTML和CSS,你会看出里边四个div加多了部分CSS效果。

图片 10

以此div有border-radius(圆角)和投影属性。当移除box-shadow属性,再观察FPS
meter在绘制时间的生成。

图片 11

哇!正如你从图纸可观察,页面绘制时间有三个令人关怀的变迁。通过轻松地将border-radius属性移除,就足以阐明这些改动能让页面包车型地铁绘图时间断定滑坡。当你更新或改换CSS属性时,那么些图片就当下下落。在同贰个因素上还要利用box-shadowborder-radius,会造成比较重的绘图肩负,那是因为浏览器不能够为之做出优化。假若有贰个要素要求屡屡的重新绘制,你应该在创立网页时时刻记住那一点。

那是二个很好的,在Google IO
网站上的录制,它更浓烈地论述绘制时间,并介绍一些减少网页“jank(卡顿)”的本领。

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

祝测量检验欢腾!

打赏帮忙本人翻译更加多好文章,多谢!

打赏译者

图片 12

近些日子,作者参与了在London进行的推特(Twitter)移动开辟者大会。在这里天时期,有过多的攀谈,但实在让自个儿关爱的是一场有关品质的,名叫“让m.facebook.com更快”的沟通会,它的主旨是关于推特(TWTR.US)如何不断大力校勘网页品质和从当中得出的经验。

图片 13

只要大家详细查看那些页面包车型地铁HTML和CSS,你拜候到在那之中贰个div增多了一些CSS效果。

因为大家要测量试验页面包车型大巴渲染质量,所以接纳“Enable continuous page
repainting
(页面持续重新绘制)“和 “Show FPS
meter(显示FPS仪表)”**。如果您关闭设置面板,查看你的网页,你应该拜候到上面包车型客车图片在页面右上角。

哇!正如你从图片可观望,页面绘制时间有贰个令人关怀的变迁。通过简单地将border-radius属性移除,就能够评释那个改造能让页面包车型地铁绘图时间鲜明滑坡。当您更新或改换CSS质量时,这一个图形就当下下跌。在同二个要素上同期选用box-shadowborder-radius,会招致超级重的绘图肩负,那是因为浏览器无法为之做出优化。假若有叁个成分供给频仍的重新绘制,你应当在制造网页时时刻记住这点。

点击后会呈现一个允许你转移设置的调整板。

祝测量检验欢娱!

想更上一层楼读书绘制时间的优化,看看那一个链接。

相关文章