当前位置: 58彩票app下载 > 前端应用 > 正文

解析页面绘制时间

时间:2019-09-18 11:14来源:前端应用
Web性能优化体系(2):剖判页面绘制时间 2015/04/15 · CSS,HTML5,JavaScript ·性子优化 本文由 伯乐在线 -刘健超-J.c翻译,sunbiaobiao校稿。未经许可,禁止转发! 土耳其语出处:www.deanhume.com。

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

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

本文由 伯乐在线 - 刘健超-J.c 翻译,sunbiaobiao 校稿。未经许可,禁止转发!
土耳其语出处:www.deanhume.com。迎接插手翻译组。

前段时间,作者在场了在London举行的照片墙移动开荒者大会。在那天时期,有成都百货上千的交谈,但着实让本人精细入微的是一场有关品质的,名字为“让m.facebook.com更快”的交换会,它的主题是有关推特(Twitter)如何不断大力革新网页质量和从中得出的阅历。

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(卡顿)”的手艺。

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

祝测量检验欢悦!

打赏扶助自身翻译更多好小说,谢谢!

打赏译者

打赏扶助小编翻译愈来愈多好小说,多谢!

任选一种支付办法

图片 8 图片 9

赞 2 收藏 评论

关于我:刘健超-J.c

图片 10

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

图片 11

编辑:前端应用 本文来源:解析页面绘制时间

关键词: