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

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

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

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

近年,笔者在场了在London实行的亚搏app官方网站 ,推特移动开拓者大会。在那天时期,有为数十分的多的交谈,但的确让小编关注备至的是一场关于品质的,名字为“让m.facebook.com更快”的沟通会,它的核心是关于Twitter如何不断大力革新网页品质和从中得出的经历。

Facebookwww.yabovip4.com ,支付团队是利用Chrome
Cannry
来测量试验网页CSS性能的。Google Chrome
Canary
有着Chrome的风行性格,并同意试用一些就要成为Chrome标准版本的,可行的新星性情。考虑到Chrome
Canary作为四个为开垦者和尝鲜者特地布署的“预览版”,所以不常候会因Chrome开荒集团的比非常的慢迭代而招致有些B
UG。就算如此,它依旧有一点很棒的开辟者工具协理您测量检验网页性能Web质量优化类别(2):剖判页面绘制时间。。

www.yabovip4.com 1

在那篇文章里,作者显示什么运用Chrome
Canary的开采者工具去稳定你的CSS中的一片段,那某些CSS恐怕会促成页面滚动缓慢和潜移暗化页面的绘图时间。当浏览器加载和制图页面时,为了“绘制”并让内容展现在显示屏上,需求遍历全数可知成分。由于那正视于布局和复杂性的CSS,你只怕会发觉绘制时间会十分短。那会招致网页看起来忽动忽停和响应异常的慢。这种缓慢滚动也堪当jank(jank是Android系统的一个专门的工作术语,指的是显示屏上朗朗上口动态画面中断的卡顿现象)。在移动道具上滚动页面时,浏览器会全力以赴地绘制复杂的CSS,那时这种气象更为综上可得。

Web质量优化类别(2):剖判页面绘制时间。就算页面包车型地铁加载时间拾分快,也照样值得去研商页面包车型客车绘图时间。差异器械对CSS属性有着分裂的反响,但不管怎么着,能增高品质总是一件很好的事。为了举办测量检验,首先得去Google
Chrome
网址下载Chrome
Canary。一旦设置到位,就足以展开你想测量试验的网页。HTML5
Rocks
Web质量优化类别(2):剖判页面绘制时间。网站里有一个很好的案例网址,大家应用它来证实高耗电CSS属性的操作,会追加页面包车型地铁绘图时间。

www.yabovip4.com 2

倘使你打开到那一个网页,按下F12,会弹出Chrome的开荒者工具。然后在开辟者工具的底层左侧点击设置按键,开启测量试验页面渲染质量的设置。

www.yabovip4.com 3

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

www.yabovip4.com 4

因为大家要测验页面包车型客车渲染品质,所以选拔Web质量优化类别(2):剖判页面绘制时间。“Enable continuous page
repainting
(页面持续重新绘制)“和 “Show FPS
meter(显示FPS仪表)”**。假若你关闭设置面板,查看你的网页,你应当会看出上面包车型大巴图纸在页面右上角。

www.yabovip4.com 5

该表呈现以微秒为单位的当下页面绘制所需时间,而左手展现了现阶段图表的蝇头与最大值。别的,也呈现了近年80帧的树状图。这么些图片的雄强之处是它不断试图重新绘制页面,使得页面好疑似率先次加载。那允许你准鲜明位因CSS影响的绘图难点,而不用每一次重复加载页面。无论你的改动是否发生震慑,树状图都会没完没了监测。

只要我们详细查看那一个页面的HTML和CSS,你会合到当中二个div增多了部分CSS效果。

www.yabovip4.com 6

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

www.yabovip4.com 7

Web质量优化类别(2):剖判页面绘制时间。哇!正如你从图纸可看到,页面绘制时间有三个让人关注的更换。通过轻松地将border-radius属性移除,就能够印证这几个更改能让页面包车型大巴绘图时间显著减弱。当您更新或转移CSS质量时,这么些图形就登时下落。在同贰个要素上同一时间接选举拔box-shadowborder-radius,会导致相当的重的绘图担任,那是因为浏览器无法为之做出优化。要是有多个要素需求反复的重新绘制,你应有在创设网页时时刻记住那一点。

那是三个很好的,在Google IO
网站上的录像,它越来越尖锐地演说绘制时间,并介绍部分削减网页“jank(卡顿)”的技艺。

想更进一步读书绘制时间的优化,看看那些链接。

祝测验欢腾!

打赏扶助笔者翻译更加多好小说,谢谢!

打赏译者

打赏扶助自身翻译越来越多好小说,多谢!

任选一种支付情势

www.yabovip4.com 8
www.yabovip4.com 9

赞 2 收藏
评论

至于我:刘健超-J.c

www.yabovip4.com 10

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

www.yabovip4.com 11

发表评论

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