菜单

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

2019年1月30日 - Json

有关小编:刘健超-J.c

图片 1

前端,在路上…http://jchehe.github.io
个人主页
·
我的篇章
·
19
·
    

图片 2

本文由 伯乐在线 – J.c 翻译,sunbiaobiao 校稿。未经许可,禁止转发!
英文出处:www.deanhume.com。欢迎加入翻译小组

打赏协理自己翻译更加多好小说,谢谢!

任选一种支付格局

图片 3
图片 4

赞 2 收藏
评论

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

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

2015/04/15 · CSS,
HTML5,
JavaScript ·
质量优化

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

近来,我出席了在伦敦进行的Facebook移动开发者大会。在那天时期,有广大的攀谈,但着实让自身关爱的是一场有关质量的,名为“让m.facebook.com更快”的交换会,它的宗旨是有关Facebook如何不断大力改正网页品质和从中得出的经验。

Facebook付出协会是拔取Chrome
Cannry
来测试网页CSS性能的。Google Chrome
Canary
富有Chrome的新星特性,并同意试用一些快要成为Chrome标准版本的,可行的新式特性。考虑到Chrome
Canary作为一个为开发者和尝鲜者专门陈设的“预览版”,所以有时会因Chrome开发集团的敏捷迭代而致使有的B
UG。固然如此,它照旧有部分很棒的开发者工具援救您测试网页性能

图片 5

在这篇小说里,我出示什么运用Chrome
Canary的开发者工具去稳定你的CSS中的一局地,那部分CSS可能会导致页面滚动缓慢和熏陶页面的绘图时间。当浏览器加载和制图页面时,为了“绘制”并让内容浮现在显示屏上,需要遍历所有可知元素。由于那爱慕于布局和复杂的CSS,你或许会意识绘制时间会很长。那会造成网页看起来忽动忽停和响应较慢。那种缓慢滚动也称为jank(jank是Android系统的一个专业术语,指的是显示屏上朗朗上口动态画面中断的卡顿现象)。在运动设备上滚动页面时,浏览器会努力地绘制复杂的CSS,那时那种状态越来越驾驭。

即使页面的加载时间越发快,也依然值得去商讨页面的绘图时间。不一样装备对CSS属性有着不同的感应,但无论如何,能拉长质量总是一件很好的事。为了举办测试,首先得去Google
Chrome
网站下载Chrome
Canary。一旦设置到位,就足以打开你想测试的网页。HTML5
Rocks
网站里有一个很好的案例网站,大家运用它来验证高功耗CSS属性的操作,会大增页面的绘图时间。

图片 6

万一你打开到这一个网页,按下F12,会弹出Chrome的开发者工具。然后在开发者工具的最底层左边点击设置按钮,开启测试页面渲染品质的装置。

图片 7

点击后会显示一个同意你改变设置的控制板。

图片 8

因为大家要测试页面的渲染性能,所以采纳“Enable continuous page
repainting
(页面持续重新绘制)“和 “Show FPS
meter(显示FPS仪表)”**。假若你关闭设置面板,查看你的网页,你应当会看出上边的图形在页面右上角。

图片 9

该表显示以皮秒为单位的当前页面绘制所需时日,而左侧突显了当下图表的小不点儿与最大值。其余,也显得了近日80帧的树状图。这一个图形的强有力之处是它不止试图重新绘制页面,使得页面好像是第五遍加载。那允许你精确定位因CSS影响的绘图难点,而不用每趟重复加载页面。无论你的变动是或不是爆发影响,树状图都会不停监测。

借使我们详细查看这几个页面的HTML和CSS,你会看出里边一个div添加了有些CSS效果。

图片 10

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

图片 11

哇!正如你从图片可观望,页面绘制时间有一个让人关怀的转变。通过简单地将border-radius属性移除,就足以表明这一个改变能让页面的绘图时间分明滑坡。当您更新或改动CSS属性时,这些图片就立马下跌。在同一个元素上同时拔取box-shadowborder-radius,会促成非凡重的绘图负担,那是因为浏览器不可能为之做出优化。如若有一个元素要求反复的重新绘制,你应该在创建网页时时刻记住那点。

那是一个很好的,在Google IO
网站
上的视频,它更尖锐地演说绘制时间,并介绍一些滑坡网页“jank(卡顿)”的技巧。

想更进一步深造绘制时间的优化,看看这一个链接

祝测试快乐!

打赏支持我翻译更加多好小说,谢谢!


打赏译者

图片 12

在那篇小说里,我出示什么使用Chrome
Canary的开发者工具去稳定你的CSS中的一有的,那有的CSS可能会促成页面滚动缓慢和震慑页面的绘图时间。当浏览器加载和制图页面时,为了“绘制”并让内容显示在显示器上,要求遍历所有可知元素。由于这器重于布局和复杂的CSS,你恐怕会发现绘制时间会很长。那会导致网页看起来忽动忽停和响应较慢。那种缓慢滚动也号称jank(jank是Android系统的一个专业术语,指的是屏幕上朗朗上口动态画面中断的卡顿现象)。在运动设备上滚动页面时,浏览器会极力地绘制复杂的CSS,那时那种场所更是显明。

图片 13

哇!正如您从图纸可观看,页面绘制时间有一个令人关切的变通。通过简单地将border-radius属性移除,就可以印证那几个改变能让页面的绘图时间明确裁减。当你更新或转移CSS属性时,这些图形就应声下落。在同一个元素上还要使用box-shadowborder-radius,会造成极度重的绘图负担,那是因为浏览器无法为之做出优化。借使有一个元素须要频繁的再度绘制,你应当在创造网页时时刻记住这一点。

图片 14

多年来,我参预了在London举办的脸谱移动开发者大会。在那天时期,有众多的交谈,但确确实实让自家关切的是一场关于质量的,名为“让m.facebook.com更快”的沟通会,它的焦点是关于脸书怎么着不断大力改革网页品质和从中得出的经历。

图片 15

借使您打开到这几个网页,按下F12,会弹出Chrome的开发者工具。然后在开发者工具的平底右边点击设置按钮,开启测试页面渲染品质的安装。

祝测试开心!

点击后会突显一个同意你改变设置的控制板。

即便页面的加载时间万分快,也照样值得去商量页面的绘图时间。不相同装备对CSS属性有着不雷同的反射,但无论如何,能增长质量总是一件很好的事。为了进行测试,首先得去Google
Chrome
网站下载Chrome
Canary。一旦设置已毕,就可以打开你想测试的网页。HTML5
Rocks
网站里有一个很好的案例网站,大家选用它来验证高功耗CSS属性的操作,会追加页面的绘图时间。

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

图片 16

该表显示以阿秒为单位的脚下页面绘制所需时日,而右边呈现了近来图表的纤维与最大值。此外,也浮现了近期80帧的树状图。那几个图片的精锐之处是它不断试图再度绘制页面,使得页面好像是第三次加载。这允许你精确定位因CSS影响的绘图难题,而不用每一遍重复加载页面。无论你的改动是不是暴发影响,树状图都会没完没了监测。

图片 17

假定我们详细查看那些页面的HTML和CSS,你会师到里边一个div添加了一部分CSS效果。

图片 18

那是一个很好的,在Google IO
网站
上的视频,它更透彻地解说绘制时间,并介绍一些滑坡网页“jank(卡顿)”的技术。

因为大家要测试页面的渲染品质,所以拔取“Enable continuous page
repainting
(页面持续重新绘制)“和 “Show FPS
meter(显示FPS仪表)”**。假设您关闭设置面板,查看你的网页,你应有会看到下边的图纸在页面右上角。

Facebook付出公司是利用Chrome
Cannry
来测试网页CSS性能的。Google Chrome
Canary
拥有Chrome的风行特性,并同意试用一些快要成为Chrome标准版本的,可行的最新特性。考虑到Chrome
Canary作为一个为开发者和尝鲜者专门安排的“预览版”,所以有时候会因Chrome开发公司的飞跃迭代而致使有的B
UG。尽管如此,它依然有一对很棒的开发者工具支持你测试网页性能

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图