Chrome开辟者工具详解,分析页面绘制时间

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

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

本文由 伯乐在线 –
刘健超-J.c
翻译,sunbiaobiao
校稿。未经许可,禁绝转发!
印度语印尼语出处:www.deanhume.com。接待参与翻译组。

近年来,作者在场了在London实行的Twitter移动开采者大会。在这天时期,有无数的交谈,但真正让笔者关怀的是一场有关质量的,名字为“让m.facebook.com更快”的调换会,它的核心是有关Facebook(照片墙)怎么着不断努力立异网页质量和从当中摄取的经历。

Facebook开采公司是使用Chrome
Cannry
来测验网页CSS性能的。Google Chrome
Canary
具有Chrome的新式性格,并允许试用一些将在成为Chrome标准版本的,可行的新型脾气。思索到Chrome
Canary作为二个为开采者和尝鲜者特意安插的“预览版”,所以有时候会因Chrome开拓团队的长足迭代而致使有的B
UG。尽管如此,它还是有部分很棒的开垦者工具支持你测量试验网页性能

亚洲城ca88手机版注册 1

在这篇文章里,小编体现怎么样行使Chrome
Canary的开荒者工具去牢固你的CSS中的一片段,那部分CSS恐怕会招致页面滚动缓慢和熏陶页面包车型客车绘图时间。当浏览器加载和制图页面时,为了“绘制”并让内容映以往显示屏上,供给遍历全数可知成分。由于那信任于布局和目眩神摇的CSS,你或者会发觉绘制时间会不短。那会促成网页看起来忽动忽停和响应一点也不快。这种缓慢滚动也叫做jank(jank是Android系统的一个专门的工作术语,指的是显示屏上朗朗上口动态画面中断的卡顿现象)。在运动装备上滚动页面时,浏览器会尽力地绘制复杂的CSS,这时这种气象更为明显。

固然页面包车型客车加载时间相当慢,也照样值得去商量页面的绘图时间。差异器材对CSS属性有着不等同的影响,但无论怎么着,能抓好质量总是一件很好的事。为了举行测验,首先得去Google
Chrome
网址下载Chrome
Canary。一旦设置到位,就足以展开你想测验的网页。HTML5
Rocks
网址里有二个很好的案例网站,我们接纳它来表明高功耗CSS属性的操作,会加多页面包车型客车绘图时间。

亚洲城ca88手机版注册 2

一旦您张开到那几个网页,按下F12,会弹出Chrome的开拓者工具。然后在开辟者工具的平底右边点击设置按键,开启测验页面渲染质量的设置。

亚洲城ca88手机版注册 3

点击后会显示多个同意你转移设置的控制板。

亚洲城ca88手机版注册 4

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

亚洲城ca88手机版注册 5

该表展现以皮秒为单位的当下页面绘制所需时间,而右边手展现了现阶段图表的纤维与最大值。另外,也浮现了如今80帧的树状图。那个图形的兵不血刃之处是它不仅试图重新绘制页面,使得页面好疑似第一遍加载。那允许你正分明位因CSS影响的绘图难题,而不用每一趟重复加载页面。无论你的变动是或不是发生震慑,树状图都会随处监测。

只要我们详细查看那个页面包车型地铁HTML和CSS,你拜见到在那之中八个div增多了有些CSS效果。

亚洲城ca88手机版注册 6

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

亚洲城ca88手机版注册 7

哇!正如你从图片可观察,页面绘制时间有一个令人关切的转移。通过轻易地将border-radius属性移除,就可以表明这些改造能让页面包车型大巴绘图时间显明收缩。当你更新或改换CSS本性时,这一个图形就随即下落。在同一个要素上还要利用box-shadowborder-radius,会招致相当重的绘图担负,那是因为浏览器不能够为之做出优化。假诺有一个要素须要一再的再一次绘制,你应有在确立网页时时刻记住这一点。

那是一个很好的,在Google IO
网站上的录制,它越来越尖锐地论述绘制时间,并介绍一些裁减式网球页“jank(卡顿)”的技巧。

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

祝测验欢愉!

打赏帮忙我翻译越来越多好小说,感谢!

打赏译者

【转载】
Chrome开垦者工具详解(3):Timeline面板

打赏帮衬自个儿翻译越来越多好作品,谢谢!

任选一种支付格局

亚洲城ca88手机版注册 8
亚洲城ca88手机版注册 9

赞 2 收藏
评论

作者:伯乐在线专栏撰稿人 – CharlieChu
点击 →
掌握哪些踏入专栏小编
如需转发,发送「转载」二字查看表达

至于小编:刘健超-J.c

亚洲城ca88手机版注册 10

前端,在路上…
个人主页 ·
作者的稿子 ·
19 ·
    

亚洲城ca88手机版注册 11

Chrome
开辟者工具详解(1):Elements、Console、Sources面板

Chrome 开荒者工具详解(2):Network
面板

Timeline面板

Timeline面板是一得体板里面最复杂的五个面板,涉及的事物比比较多。能够动用那个面板来记录和剖判网页运营过程中的全部移动行为新闻。
你能够充足利用那一个面板来分析你的网页的次第品质难题。

亚洲城ca88手机版注册 12

概述
下图是从Google官网中介绍Timeline面板的图贴到此地,该面板首要回顾4大块窗格(Pane):
Controls 摄像开关和调整摄像进程中须求记录哪些新闻。

Overview 网页质量的大约音讯。

Flame Chart
CPU仓库轨迹的可视化图表(火焰图)。在图纸里面有1到3条虚竖线。

Details
当选拔三个点名的事件后,会显得那个事件的越多音信;当未有采用事件时,博览会示钦点的时日帧音信。

Flame
Chart
其间的虚竖线含义:蓝色亚洲城ca88手机版注册,标记DOMContentLoaded事件;绿色标记第一遍的绘图时间点;红色代表load事件。

亚洲城ca88手机版注册 13

其中第2块Overview来得了网页品质相关的中校新闻,能够通过鼠标恐怕区域界线上的青黄滑块来拖出叁个钦点区域限量,Flame
Chart
会跟着有个别放大显示钦命区域内的详细情况音讯。
能够由此键盘上的W
,S
来松开和紧缩钦点区域,通过A
,D
来向左或向右移动钦赐区域。

从谷歌(Google)把图贴到这里,这几个窗格满含了八个图表:
FPS 每秒帧数(Frames Per
Second)。莲灰柱状条越高,则每秒帧数越高。在FPS图表上方的革命块是符号贰个长帧。

CPU 标志CPU能源的使用状态,这里的面积Logo志着成本CPU财富的各类事件。

NET
各个颜色的柱状条分别展现一种财富。柱状条越长,代表获取这一个能源的年月越长。

亚洲城ca88手机版注册 14

CPU面积图中各颜色的含义:蓝色代表HTML文件;黄色代表脚本文件;紫色代表样式文件;绿色代表媒体文件;灰色表示任何杂项文件。

NET图表柱状条两种颜色的意义:较亮的一对代表等候时间(当资源被呼吁时,直到第多个字节被下载的小时);较暗的一部分代表传输时间(在首先个和最后三个字节被下载之间的年华)。

网页摄像详细的情况

帮衬二种网页摄像操作:①摄像网页加载,②录制网页交互。为了便利深入分析,摄像的时光不当太长、还要幸免不要求的相互操作、并禁止使用浏览器的缓存和插件。
当摄像实现后,在Flame
Chart
(火焰图)中式茶食击左侧三角能够扩充详细情况,点击个中的风云或许空白处,能够在Details里面查看该事件依然总的概要新闻。这里面含有的消息量比非常的大,限于篇幅原因,后一次有空子再作深刻介绍,恐怕直接到Google上查看Timeline
伊夫nt Reference这些参考文书档案。

录像中开展JS分析

在摄像以前点击Controls中的JS
Profile
复选框,能够在时间轴中抓获JavaScript的旅舍音信(会爆发一定的本性消耗),何况在Flame
Chart
(火焰图)中会展现全部被调用的JavaScript函数音讯。

亚洲城ca88手机版注册 15

录像中抓获截屏

在摄像在此之前点击Controls中的Screenshots复选框,能够在录像进程中捕获截屏,鼠标在Overview上从左向右移动则足以看见录制的卡通片。

亚洲城ca88手机版注册 16

绘图深入分析

在录像在此以前点击Controls中的Paint复选框,能够获得绘制事件的更加多细节音讯(注意那会生出不菲的质量消耗)。假如要浓厚精晓网页渲染方面包车型客车音信,能够点击DevTools右上角的菜单,在More
tools
其间接选举中Rendering settings,那其间包涵了之类设置项:

亚洲城ca88手机版注册 17

Paint Flashing 高亮展现网页中要求被重绘的一对。

Layer Borders 显示Layer边界。

FPS Meter 每一秒的帧细节,帧速率的遍及音讯和GPU的内部存款和储蓄器使用境况。

Scrolling Performance Issues
深入分析鼠标滚动时的习性难点,会显得使荧屏滚动变慢的区域。

Emulate CSS Media
仿真CSS媒体类型,查看分歧的设备上CSS样式效果,只怕的媒体类型接纳有print
、screen

把上边包车型地铁有着安装项勾选上,网页的显得效果如下:

亚洲城ca88手机版注册 18

查询钦赐事件

你能够透过在DevTools上按Cmd+F(Mac)
调出查询框,来查看指按期期区域限定内的钦命项指标事件,点击Cmd+G(Mac)
或者Cmd+Shift+G(Mac)
能够按事件发生的次第来询问。

亚洲城ca88手机版注册 19

图中查询到了4个革命标志着的Parse HTML
事件,点击Cmd+G
热门会在那4个事件移动。

运作时质量深入分析

上边大约介绍了Timeline面板上的逐个职能菜单,那么什么样去选拔该面板去深入分析和优化网页程序的运营品质呢,由于篇幅限制,就不在那边张开研讨,感兴趣的读者直接到谷歌(Google)开荒者文档上查看,谷歌开拓者文书档案有最高雅最新的音讯。
参照文书档案
Analyze Runtime Performance

Diagnose Forced Synchronous Layouts

This entry was posted in 亚洲城ca88手机版注册 and tagged . Bookmark the permalink.

发表评论

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