【118kjcom开奖现场直播】Web质量优化种类(2):

作者:118kjcom开奖现场直播

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

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

本文由 伯乐在线 - 刘健超-J.c 翻译,sunbiaobiao 校稿。未经许可,防止转发!
乌克兰(Ukraine)语出处:www.deanhume.com。款待参与翻译组。

不久前,笔者加入了在London进行的Facebook移动开垦者大会。在那天时期,有十分的多的攀谈,但确实让本人关怀的是一场关于品质的,名称叫“让m.facebook.com更快”的交换会,它的主旨是关于推文(Tweet)(TWTRAV4.US)怎么样不断大力革新网页质量和从中得出的阅历。

Facebook付出团队是运用Chrome Cannry来测量检验网页CSS性能的。Google Chrome Canary不无Chrome的风靡特性,并同意试用一些快要成为Chrome标准版本的,可行的新星性情。思量到Chrome Canary作为三个为开垦者和尝鲜者特意规划的“预览版”,所以偶然会因Chrome开采公司的短平快迭代而招致有个别B UG。即使如此,它还是有一部分很棒的开辟者工具帮忙你测量检验网页性能

118kjcom开奖现场直播 1

在那篇文章里,笔者出示怎么样接纳Chrome Canary的开拓者工具去牢固你的CSS中的一部分,这一部分CSS恐怕会产生页面滚动缓慢和震慑页面包车型大巴绘图时间。当浏览器加载和制图页面时,为了“绘制”并让内容彰显在显示器上,须求遍历全部可知成分。由于那正视于布局和复杂性的CSS,你恐怕会发觉绘制时间会相当长。那会导致网页看起来忽动忽停和响应异常的慢。这种缓慢滚动也称为jank(jank是Android系统的一个职业术语,指的是显示器上朗朗上口动态画面中断的卡顿现象)。在活动道具上滚动页面时,浏览器会不遗余力地绘制复杂的CSS,那时这种景象尤为分明。

哪怕页面包车型客车加载时间十三分快,也如故值得去商量页面包车型大巴绘图时间。分裂道具对CSS属性有着不平等的感应,但无论如何,能拉长质量总是一件很好的事。为了拓宽测量检验,首先得去Google Chrome网站下载Chrome Canary。一旦设置完结,就能够展开你想测量检验的网页。HTML5 Rocks网址里有贰个很好的案例网址,大家采取它来证实高耗电CSS属性的操作,会追加页面包车型大巴绘图时间。

118kjcom开奖现场直播 2

只要您张开到这些网页,按下F12,会弹出Chrome的开采者工具。然后在开拓者工具的底层右边点击设置按键,开启测验页面渲染性能的安装。

118kjcom开奖现场直播 3

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

118kjcom开奖现场直播 4

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

118kjcom开奖现场直播 5

该表展现以微秒为单位的眼下页面绘制所需时间,而右边展现了当前图表的十分的小与最大值。别的,也出示了不久前80帧的树状图。那些图形的强硬之处是它不独有试图重新绘制页面,使得页面好疑似首先次加载。那允许你精确定位因CSS影响的绘图难题,而不用每一趟重复加载页面。无论你的改变是不是暴发影响,树状图都会没完没了监测。

假使大家详细查看那一个页面包车型客车HTML和CSS,你拜谒到个中三个div增多了有的CSS效果。

118kjcom开奖现场直播 6

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

118kjcom开奖现场直播 7

哇!正如您从图纸可观望,页面绘制时间有三个让人关怀的转换。通过简单地将border-radius属性移除,就足以表明那一个更动能让页面包车型大巴绘图时间明显收缩。当您更新或改换CSS品质时,那一个图片就立马下跌。在同多少个因素上同有时间接选举用box-shadowborder-radius,会促成相当重的绘图担当,那是因为浏览器不能为之做出优化。借使有一个因素须求频仍的再度绘制,你应当在确立网页时时刻记住那点。

那是五个很好的,在Google IO 网站上的摄像,它越来越尖锐地阐释绘制时间,并介绍部分削减网页“jank(卡顿)”的才干。

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

祝测量试验欢欣!

打赏协理作者翻译越来越多好小说,多谢!

打赏译者

打赏支持本人翻译越多好文章,多谢!

任选一种支付情势

118kjcom开奖现场直播 8 118kjcom开奖现场直播 9

赞 2 收藏 评论

有关我:刘健超-J.c

118kjcom开奖现场直播 10

前端,在路上... 个人主页 · 笔者的篇章 · 19 ·     

118kjcom开奖现场直播 11

本文由118kjcom最快开奖现场发布,转载请注明来源

关键词: