今晚开什么马:Web性能优化种类

作者: 前端技术  发布:2019-11-04

Web品质优化连串(2卡塔 尔(英语:State of Qatar):解析页面绘制时间

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

本文由 伯乐在线 - 刘健超-J.c 翻译,sunbiaobiao 校稿。未经许可,幸免转发!
乌克兰(УКРАЇНА卡塔尔国语出处:www.deanhume.com。招待参加翻译组。

前几天,笔者在场了在London进行的推特(Twitter)移动开拓者大会。在此天时期,有无数的攀谈,但确确实实让作者关切的是一场有关质量的,名叫“让m.facebook.com更快”的调换会,它的大旨是有关推特怎么样不断大力修正网页品质和从当中得出的经验。

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(卡顿)”的本事。

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

祝测量检验快乐!

打赏补助笔者翻译越来越多好作品,谢谢!

打赏译者

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

打赏帮助本身翻译更加多好小说,感激!

任选黄金时代种支付办法

今晚开什么马 8 今晚开什么马 9

赞 2 收藏 评论

方今,笔者加入了在London实行的Twitter移动开采者大会。在那天时期,有无数的攀谈,但着实让自家关怀的是一场关于品质的,名字为“让m.facebook.com更快”的调换会,它的核心是有关Facebook如何不断努力更正网页质量和从当中吸收的资历。

至于笔者:刘健超-J.c

今晚开什么马 10

前端,在路上... 个人主页 · 作者的散文 · 19 ·     

今晚开什么马 11

Facebook付出公司是利用Chrome Cannry来测量检验网页CSS性能的。Google Chrome Canary有着Chrome的新星性情,并允许试用一些将在成为Chrome规范版本的,可行的新颖性情。考虑到Chrome Canary作为八个为开拓者和尝鲜者特地陈设的“预览版”,所以一时会因Chrome开采公司的马上迭代而引致有的B UG。纵然如此,它依然有意气风发部分很棒的开荒者工具支持你测量试验网页性能

今晚开什么马 12

在这里篇小说里,小编出示什么利用Chrome Canary的开采者工具去稳固你的CSS中的大器晚成局地,那风度翩翩部分CSS大概会引致页面滚动缓慢和熏陶页面包车型地铁绘图时间。当浏览器加载和制图页面时,为了“绘制”并让内容呈现在显示器上,供给遍历全体可以知道成分。由于那信赖于布局和错综相连的CSS,你恐怕会发觉绘制时间会非常长。那会诱致网页看起来忽动忽停和响应比较慢。这种缓慢滚动也称之为jank(jank是Android系统的三个职业术语,指的是荧屏上朗朗上口动态画面中断的卡顿现象)。在活动器材上滚动页面时,浏览器会大力地绘制复杂的CSS,那个时候这种处境特别显眼。

不畏页面包车型客车加载时间非常快,也依旧值得去切磋页面的绘图时间。区别器材对CSS属性有着区别等的反响,但不管怎么着,能增高品质总是后生可畏件很好的事。为了扩充测量检验,首先得去Google Chrome网址下载Chrome Canary。风流倜傥旦设置完毕,就足以展开你想测验的网页。HTML5 Rocks网址里有多个很好的案例网址,大家接纳它来验证高耗电CSS属性的操作,会大增页面包车型地铁绘图时间。

今晚开什么马 13

假诺您展开到这些网页,按下F12,会弹出Chrome的开拓者工具。然后在开拓者工具的平底左侧点击设置按键,开启测量试验页面渲染质量的装置。

今晚开什么马 14

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

今晚开什么马 15

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

今晚开什么马 16

该表彰显以皮秒为单位的脚下页面绘制所需时间,而左侧呈现了当下图表的小小与最大值。其余,也出示了这段时间80帧的树状图。那么些图片的强硬之处是它不断试图再度绘制页面,使得页面好疑似第三遍加载。那允许你精确定位因CSS影响的绘图难点,而不用每便重复加载页面。无论你的订正是或不是发生影响,树状图都会不停监测。

倘使我们详细查看这些页面包车型客车HTML和CSS,你会见到里面多个div加多了一些CSS效果。

今晚开什么马 17

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

今晚开什么马 18

哇!正如您从图片可知到,页面绘制时间有贰个令人关切的改造。通过简单地将border-radius属性移除,就能够证实这些改造能让页面包车型地铁绘图时间显明收缩。当您更新或转移CSS属性时,那么些图形就立刻下跌。在同二个因素上同一时间使用box-shadowborder-radius,会形成超级重的绘图担任,那是因为浏览器不能够为之做出优化。如若有一个成分需求频频的双重绘制,你应当在创立网页时时刻记住这一点。

那是三个很好的,在Google IO 网站上的摄像,它更浓烈地演讲绘制时间,并介绍一些裁减网页“jank(卡顿)”的本事。

想更进一层学习绘制时间的优化,看看这个链接。

祝测量检验欢娱!

本文由今晚开什么码发布于前端技术,转载请注明出处:今晚开什么马:Web性能优化种类

关键词:

上一篇:没有了
下一篇:没有了