当前位置:9992019银河国际 > 网络前端 > Web性能优化系列(2):剖析页面绘制时间

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

文章作者:网络前端 上传时间:2019-10-14

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

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

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

多年来,作者加入了在London进行的推文(Tweet)移动开采者大会。在此天期间,有许多的交谈,但确实让自家关怀的是一场有关品质的,名称叫“让m.facebook.com更快”的沟通会,它的宗旨是有关推特(Twitter)(TWT奥迪Q5.US)怎样不断努力立异网页质量和从当中得出的阅历。

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 校稿。未经许可,禁止转发!
乌Crane语出处:www.deanhume.com。款待参加翻译小组。

打赏帮助笔者翻译越来越多好小说,感谢!

任选一种支付办法

图片 8 图片 9

赞 2 收藏 评论

前不久,小编参加了在London举行的照片墙移动开拓者大会。在此天时期,有非常多的攀谈,但真正让自家关心的是一场关于品质的,名称为“让m.facebook.com更快”的交换会,它的核心是关于推文(Tweet)怎么着不断努力改进网页品质和从中吸收的经验。

关于小编:刘健超-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(卡顿)”的本领。

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

祝测量检验欢乐!

本文由9992019银河国际发布于网络前端,转载请注明出处:Web性能优化系列(2):剖析页面绘制时间

关键词: