新萄京娱乐场.2959.com 11

剖判页面绘制时间

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

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

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

前不久,我出席了在London举行的Instagram移动开辟者大会。在这天期间,有为数十分的多的交谈,但确确实实让本身关心的是一场有关品质的,名称为“让m.facebook.com更快”的调换会,它的大旨是有关Twitter怎么着不断大力改进网页质量和从中得出的经历。

Facebook支付公司是应用Chrome
Cannry
来测量试验网页CSS性能的。Google Chrome
Canary
具有Chrome的时尚天性,并同意试用一些就要成为Chrome标准版本的,可行的风行天性。思念到Chrome
Canary作为一个为开荒者和尝鲜者特地设计的“预览版”,所以不经常会因Chrome开发组织的高速迭代而产生一些B
UG。就算如此,它依旧有部分很棒的开拓者工具援助你测量检验网页性能

新萄京娱乐场.2959.com 1

在那篇小说里,笔者显得怎么着运用Chrome
Canary的开采者工具去稳固你的CSS中的一局地,那某个CSS只怕会招致页面滚动缓慢和熏陶页面包车型客车绘图时间。当浏览器加载和制图页面时,为了“绘制”并让内容映今后显示屏上,供给遍历全部可知元素。由于那重视于布局和复杂的CSS,你或者会开掘绘制时间会很短。那会促成网页看起来忽动忽停和响应比较慢。这种缓慢滚动也称之为jank(jank是Android系统的叁个专门的学问术语,指的是显示器上朗朗上口动态画面中断的卡顿现象)。在活动道具上滚动页面时,浏览器会全力地绘制复杂的CSS,那时这种景况极度旗帜显明。

尽管页面包车型客车加载时间十一分快,也依然值得去钻探页面包车型客车绘图时间。分歧道具对CSS属性有着不均等的影响,但无论怎样,能升高性能总是一件很好的事。为了拓展测验,首先得去Google
Chrome
网址下载Chrome
Canary。一旦设置到位,就足以打开你想测量试验的网页。HTML5
Rocks
网址里有多个很好的案例网址,我们使用它来验证高耗电CSS属性的操作,会大增页面包车型客车绘图时间。

新萄京娱乐场.2959.com 2

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

新萄京娱乐场.2959.com 3

点击后会展现四个同意你转移设置的调整板。

新萄京娱乐场.2959.com 4

因为大家要测量检验页面包车型地铁渲染质量,所以选拔“Enable continuous page
repainting
(页面持续重新绘制)“和 “Show FPS
meter(显示FPS仪表)”**。若是您关闭设置面板,查看你的网页,你应有会看到上面包车型客车图纸在页面右上角。

新萄京娱乐场.2959.com 5

该表展现以纳秒为单位的当下页面绘制所需时日,而右边手呈现了脚下图表的矮小与最大值。别的,也出示了不久前80帧的树状图。那些图形的庞大之处是它不断试图重新绘制页面,使得页面好疑似第一遍加载。这允许你正鲜明位因CSS影响的绘图难点,而不用每一遍重复加载页面。无论你的退换是不是发生耳闻则诵,树状图都会四处监测。

设若我们详细查看那么些页面包车型客车HTML和CSS,你会看出里面多少个div增多了有的CSS效果。

新萄京娱乐场.2959.com 6

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

新萄京娱乐场.2959.com 7

哇!正如您从图片可观望,页面绘制时间有三个令人关心的成形。通过轻巧地将border-radius属性移除,就能够表明这么些更改能让页面包车型客车绘图时间料定滑坡。当您更新或改造CSS天性时,那个图片就立刻下落。在同四个要素上同一时候使用box-shadowborder-radius,会导致比较重的绘图负责,那是因为浏览器不可能为之做出优化。借使有二个要素要求反复的再度绘制,你应有在确立网页时时刻记住那一点。

那是三个很好的,在Google IO
网站上的摄像,它更加深入地论述绘制时间,并介绍部分精减网页“jank(卡顿)”的手艺。

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

祝测量检验高兴!

打赏帮助我翻译越多好文章,多谢!

打赏译者

打赏支持本身翻译越来越多好小说,多谢!

任选一种支付形式

新萄京娱乐场.2959.com 8
新萄京娱乐场.2959.com 9

赞 2 收藏
评论

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

新萄京娱乐场.2959.com 10

前端,在路上…
个人主页 ·
小编的小说 ·
19 ·
新萄京娱乐场.2959.com ,    

新萄京娱乐场.2959.com 11

发表评论

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