Web性能优化系列(2):剖析页面绘制时间

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

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

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

多年来,笔者加入了在London进行的脸谱移动开拓者大会。在这里天时期,有点不清的交谈,但真的让本身关怀的是一场有关品质的,名称为“让m.facebook.com更快”的交换会,它的主旨是有关推特(Twitter)如何不断大力创新网页品质和从当中得出的经验。

Facebook支出团队是使用Chrome Cannry来测验网页2138acom太阳集团app,CSS性能的。Google Chrome Canary怀有Chrome的流行性子,并同意试用一些将要成为Chrome规范版本的,可行的风靡个性。思念到Chrome Canary作为多少个为开辟者和尝鲜者特地规划的“预览版”,所以一时会因Chrome开垦公司的急速迭代而产生一些B UG。就算如此,它如故有部分很棒的开荒者工具扶持您测量试验网页性能

2138acom太阳集团app 1

在这里篇作品里,笔者呈现怎样行使Chrome Canary的开垦者工具去稳固你的CSS中的一片段,这有个别CSS只怕会招致页面滚动缓慢和潜濡默化页面包车型大巴绘图时间。当浏览器加载和制图页面时,为了“绘制”并让内容显示在屏幕上,要求遍历全部可以预知成分。由于那依赖于布局和目迷五色的CSS,你可能会发觉绘制时间会相当长。那会形成网页看起来忽动忽停和响应不快。这种缓慢滚动也叫做jank(jank是Android系统的二个职业术语,指的是显示器上朗朗上口动态画面中断的卡顿现象)。在活动设备上滚动页面时,浏览器会用尽了全力地绘制复杂的CSS,那时这种气象更为简明。

尽管页面包车型大巴加载时间十一分快,也照例值得去钻探页面包车型大巴绘图时间。不一致器材对CSS属性有着差异等的影响,但无论怎样,能抓实质量总是一件很好的事。为了举办测验,首先得去Google Chrome网站下载Chrome Canary。一旦设置到位,就足以展开你想测量检验的网页。HTML5 Rocks网址里有二个很好的案例网址,大家使用它来注解高功耗CSS属性的操作,会增添页面包车型客车绘图时间。

2138acom太阳集团app 2

假令你张开到这么些网页,按下F12,会弹出Chrome的开辟者工具。然后在开辟者工具的尾巴部分左边点击设置按键,开启测量试验页面渲染质量的安装。

2138acom太阳集团app 3

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

2138acom太阳集团app 4

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

2138acom太阳集团app 5

该表呈现以微秒为单位的此时此刻页面绘制所需时日,而侧边展现了这段日子图表的小小与最大值。别的,也出示了这段时间80帧的树状图。那个图形的有力之处是它不断试图再度绘制页面,使得页面好疑似首先次加载。那允许你正鲜明位因CSS影响的绘图难题,而不用每一趟重复加载页面。无论你的变动是或不是发生影响,树状图都会不断监测。

假若我们详细查看这一个页面包车型地铁HTML和CSS,你拜访到在那之中三个div加多了某些CSS效果。

2138acom太阳集团app 6

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

2138acom太阳集团app 7

哇!正如您从图纸可观看,页面绘制时间有一个令人关切的生成。通过轻巧地将border-radius属性移除,就能够印证那些改换能让页面包车型地铁绘图时间确定滑坡。当您更新或转移CSS属性时,那一个图片就及时下跌。在同三个因素上同不日常候使用box-shadowborder-radius,会导致相当重的绘图担任,那是因为浏览器不能够为之做出优化。要是有四个因素要求频仍的双重绘制,你应当在创建网页时时刻记住那点。

那是叁个很好的,在Google IO 网站上的录像,它越来越深切地解说绘制时间,并介绍部分缩减网页“jank(卡顿)”的才具。

想更上一层楼深造绘制时间的优化,看看那些链接。

祝测验欢腾!

打赏补助笔者翻译越多好小说,多谢!

打赏译者

本文由 伯乐在线 - J.c 翻译,sunbiaobiao 校稿。未经许可,禁止转发!
斯洛伐克(Slovak)语出处:www.deanhume.com。款待参与翻译小组。

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

任选一种支付格局

2138acom太阳集团app 8 2138acom太阳集团app 9

赞 2 收藏 评论

近年,小编在场了在London进行的脸谱移动开辟者大会。在这里天时期,有成都百货上千的攀谈,但真的让小编关注的是一场关于质量的,名叫“让m.facebook.com更快”的沟通会,它的核心是关于推特(TWTR.US)怎么样不断努力改进网页品质和从当中吸收的阅历。

有关我:刘健超-J.c

2138acom太阳集团app 10

前端,在路上... 个人主页 · 小编的稿子 · 19 ·     

2138acom太阳集团app 11

Facebook支付协会是运用Chrome Cannry来测量检验网页CSS性能的。Google Chrome Canary负有Chrome的风尚本性,并同意试用一些就要成为Chrome规范版本的,可行的风行天性。思考到Chrome Canary作为二个为开采者和尝鲜者特意陈设的“预览版”,所以一时会因Chrome开拓团队的快捷迭代而变成一些B UG。尽管如此,它还是有点很棒的开垦者工具扶植你测量检验网页性能

2138acom太阳集团app 12

在这里篇文章里,我展现怎么着运用Chrome Canary的开荒者工具去牢固你的CSS中的一局部,那部分CSS可能会招致页面滚动缓慢和熏陶页面包车型大巴绘图时间。当浏览器加载和制图页面时,为了“绘制”并让内容体今后显示器上,须求遍历全体可以预知元素。由于那信任于布局和复杂的CSS,你可能会意识绘制时间会相当长。那会促成网页看起来忽动忽停和响应相当慢。这种缓慢滚动也称之为jank(jank是Android系统的多少个专门的学问术语,指的是显示器上朗朗上口动态画面中断的卡顿现象)。在移动道具上滚动页面时,浏览器会全力地绘制复杂的CSS,那时这种情状特别分明。

正是页面包车型大巴加载时间相当慢,也依旧值得去研商页面包车型客车绘图时间。不一样器具对CSS属性有着不均等的反馈,但不管如何,能加强品质总是一件很好的事。为了拓宽测量试验,首先得去Google Chrome网址下载Chrome Canary。一旦设置到位,就足以张开你想测量检验的网页。HTML5 Rocks网站里有三个很好的案例网址,大家运用它来验证高功耗CSS属性的操作,会追加页面包车型大巴绘图时间。

2138acom太阳集团app 13

要是您张开到这一个网页,按下F12,会弹出Chrome的开垦者工具。然后在开辟者工具的底层左侧点击设置开关,开启测量检验页面渲染质量的安装。

2138acom太阳集团app 14

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

2138acom太阳集团app 15

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

2138acom太阳集团app 16

该表呈现以皮秒为单位的近些日子页面绘制所需时日,而侧面展现了当前图表的矮小与最大值。此外,也出示了前段时间80帧的树状图。那个图形的强硬之处是它不断试图重新绘制页面,使得页面好疑似第叁遍加载。那允许你正明确位因CSS影响的绘图难题,而不用每回重复加载页面。无论你的改换是不是爆发震慑,树状图都会穷追猛打监测。

譬如我们详细查看这几个页面包车型客车HTML和CSS,你会见到里面二个div加多了有的CSS效果。

2138acom太阳集团app 17

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

2138acom太阳集团app 18

哇!正如您从图纸可观察,页面绘制时间有贰个令人关注的改动。通过轻松地将border-radius属性移除,就足以印证那几个改动能让页面包车型客车绘图时间鲜明滑坡。当您更新或转移CSS性未时,那个图形就立刻下跌。在同贰个要素上还要使用box-shadowborder-radius,会形成比较重的绘图担当,那是因为浏览器无法为之做出优化。要是有叁个要素供给反复的双重绘制,你应有在确立网页时时刻记住这一点。

那是四个很好的,在Google IO 网站上的摄像,它越来越深远地阐释绘制时间,并介绍一些减小网页“jank(卡顿)”的技能。

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

祝测量检验欢喜!

本文由2138acom太阳集团app发布于太阳集团2138备用网址,转载请注明出处:Web性能优化系列(2):剖析页面绘制时间

相关阅读