【亚洲必赢官网】Chrome开发者工具详解,Chrome开发者工具详解

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

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

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

新近,我在场了在伦敦(London)举办的非死不可移动开发者大会。在那天时期,有好多的攀谈,但实在让自己关心的是一场关于性能的,名为“让m.facebook.com更快”的交换会,它的主旨是关于非死不可怎样不断努力改进网页性能和从中汲取的阅历。

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影响的绘图问题,而不用每一次重复加载页面。无论你的变动是或不是暴发影响,树状图都会持续监测。

【亚洲必赢官网】Chrome开发者工具详解,Chrome开发者工具详解。假如大家详细查看那么些页面的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 校稿。未经许可,禁止转发!
英文出处:www.deanhume.com。欢迎参与翻译小组。

【转载】
Chrome开发者工具详解(3):提姆eline面板

Chrome开发者工具详解(3)-提姆(Tim)eline面板

注:
这一篇紧要教授面板提姆eline,参考了谷歌(Google)的有关文档,主要用以公司内部技术分享。

注:
这一篇紧要教学面板提姆eline,参考了谷歌(Google)的相干文档,首要用于集团内部技术分享。

打赏协理我翻译更加多好作品,谢谢!

任选一种支付办法

亚洲必赢官网 8
亚洲必赢官网 9

赞 2 收藏
评论

近年来,我插足了在London举行的脸书移动开发者大会。在那天时期,有成百上千的交谈,但真正让自身关爱的是一场有关性能的,名为“让m.facebook.com更快”的调换会,它的大旨是关于脸谱怎么样不断大力改革网页性能和从中得出的经历。

作者:伯乐在线专栏小编 – CharlieChu
点击 →
明白怎么进入专栏小编
如需转发,发送「转发」二字查看表明

Timeline面板

提姆(Tim)eline面板是整整面板里面最复杂的一个面板,涉及的事物相比多。能够选拔那些面板来记录和剖析网页运行进程中的所有移动行为新闻。
您可以充足利用那一个面板来分析你的网页的先后性能问题。

亚洲必赢官网 10

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

亚洲必赢官网 11

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

亚洲必赢官网 12

Facebook支出社团是接纳Chrome
Cannry
来测试网页CSS性能的。Google Chrome
Canary
富有Chrome的新式特性,并同意试用一些将要成为Chrome标准版本的,可行的新型特性。考虑到Chrome
Canary作为一个为开发者和尝鲜者专门设计的“预览版”,所以有时会因Chrome开发社团的高效迭代而致使一些B
UG。固然如此,它依然有部分很棒的开发者工具协助你测试网页亚洲必赢官网,性能

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

概述

下图是从谷歌(Google)官方网站中介绍提姆(Tim)eline面板的图贴到此地,该面板首要包涵4大块窗格(Pane):

  1. Controls 录制开关和操纵录制进程中需求记录哪些音信。
  2. Overview 网页性能的概要音讯。
  3. Flame Chart
    CPU堆栈轨迹的可视化图表(火焰图)。在图片里面有1到3条虚竖线。
  4. Details
    当选拔一个点名的轩然大波后,会来得那几个事件的越来越多新闻;当没有接纳事件时,会突显指定的岁月帧音信。

Flame
Chart
中间的虚竖线含义:蓝色标记DOMContentLoaded事件;绿色标志第几遍的绘图时间点;红色代表load事件。

亚洲必赢官网 13

其中第2块Overview来得了网页性能相关的中校音讯,能够由此鼠标或者区域边界上的青色滑块来拖出一个点名区域限制,Flame
Chart
会随之有些放大突显指定区域内的详情新闻。

可以经过键盘上的W,S来加大和压缩指定区域,通过A,D来向左或向右移动指定区域。

从谷歌(Google)把图贴到那里,这一个窗格包涵了多个图表:

  1. FPS 每秒帧数(Frames Per
    Second)。灰色柱状条越高,则每秒帧数越高。在FPS图表上方的新民主主义革命块是符号一个长帧。
  2. CPU
    标记CPU资源的利用景况,那里的面积图标记着开销CPU资源的各样事件。
  3. NET
    种种颜色的柱状条分别呈现一种资源。柱状条越长,代表获取那一个资源的年月越长。

亚洲必赢官网 14

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

NET图片柱状条二种颜色的含义:较亮的一对代表等候时间(当资源被呼吁时,直到第四个字节被下载的小运);较暗的片段代表传输时间(在首先个和最后一个字节被下载之间的时日)。

亚洲必赢官网 15

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

网页录制详情

接济二种网页录制操作:①录制网页加载,②录制网页交互。为了方便分析,录制的时刻不当太长、还要幸免不必要的交互操作、并禁用浏览器的缓存和插件。

当录制完结后,在Flame
Chart
(火焰图)中点击左边三角可以举办详情,点击其中的轩然大波或者空白处,可以在Details里头查看该事件或者总的概要音讯。那其中含有的新闻量很大,限于篇幅原因,下次有机遇再作深切介绍,或者直接到Google上查看Timeline
Event
Reference其一参考文档。

在这篇小说里,我显得如何行使Chrome
Canary的开发者工具去稳定你的CSS中的一片段,这一部分CSS可能会造成页面滚动缓慢和影响页面的绘图时间。当浏览器加载和制图页面时,为了“绘制”并让内容突显在显示屏上,需求遍历所有可见元素。由于那着重于布局和复杂的CSS,你恐怕会发现绘制时间会很长。那会造成网页看起来忽动忽停和响应较慢。那种缓慢滚动也称为jank(jank是Android系统的一个专业术语,指的是显示屏上朗朗上口动态画面中断的卡顿现象)。在活动设备上滚动页面时,浏览器会极力地绘制复杂的CSS,那时这种处境尤其明白。

Timeline面板

提姆eline面板是百分之百面板里面最复杂的一个面板,涉及的事物相比多。可以动用这么些面板来记录和剖析网页运行进度中的所有移动行为新闻。
你可以足够利用那么些面板来分析你的网页的程序性能问题。

亚洲必赢官网 16

概述
下图是从谷歌(Google)官方网站中介绍提姆eline面板的图贴到此地,该面板首要包含4大块窗格(Pane):
Controls 录制开关和决定录制进度中需求记录哪些音信。

Overview 网页性能的准将新闻。

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

Details
当选用一个指定的轩然大波后,会来得那一个事件的更多信息;当没有选取事件时,会浮现指定的时刻帧信息。

Flame
Chart
内部的虚竖线含义:蓝色标记DOMContentLoaded事件;绿色标志第一遍的绘图时间点;红色代表load事件。

亚洲必赢官网 17

其中第2块Overview来得了网页性能相关的大意音讯,可以由此鼠标或者区域边界上的青色滑块来拖出一个点名区域限制,Flame
Chart
会跟着有些放大显示指定区域内的详情新闻。
可以通过键盘上的W
,S
来加大和压缩指定区域,通过A
,D
来向左或向右移动指定区域。

从谷歌把图贴到这里,那么些窗格包括了七个图表:
FPS 每秒帧数(Frames Per
Second)。红色柱状条越高,则每秒帧数越高。在FPS图表上方的新民主主义革命块是标志一个长帧。

CPU 标记CPU资源的行使情形,那里的面积图标记着开支CPU资源的各项事件。

NET
种种颜色的柱状条分别显示一种资源。柱状条越长,代表获取那些资源的时间越长。

亚洲必赢官网 18

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

NET图表柱状条二种颜色的意义:较亮的有的代表等待时间(当资源被呼吁时,直到首个字节被下载的小时);较暗的部分代表传输时间(在首先个和尾声一个字节被下载之间的光阴)。

录制中进行JS分析

在录制此前点击Controls中的JS
Profile
复选框,可以在时刻轴中抓获JavaScript的库房新闻(会生出一定的性能消耗),并且在Flame
Chart
(火焰图)中会展现所有被调用的JavaScript函数新闻。

亚洲必赢官网 19

即使页面的加载时间非凡快,也依然值得去啄磨页面的绘图时间。不相同装备对CSS属性有着不相同的反馈,但不管怎么着,能增长性能总是一件很好的事。为了进行测试,首先得去Google
Chrome
网站下载Chrome
Canary。一旦设置达成,就可以打开你想测试的网页。HTML5
Rocks
网站里有一个很好的案例网站,我们利用它来注解高耗能CSS属性的操作,会增添页面的绘图时间。

网页录制详情

协助二种网页录制操作:①录制网页加载,②录制网页交互。为了方便分析,录制的年华不当太长、还要幸免不要求的相互操作、并禁用浏览器的缓存和插件。
当录制已毕后,在Flame
Chart
(火焰图)中点击右侧三角可以举行详情,点击其中的风浪依旧空白处,可以在Details内部查看该事件依旧总的概要音信。那之中富含的新闻量很大,限于篇幅原因,下次有机遇再作深远介绍,或者直接到谷歌(Google)上查看提姆eline
伊芙nt Reference这几个参考文档。

录制中捕获截屏

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

亚洲必赢官网 20

亚洲必赢官网 21

录制中举办JS分析

在录制此前点击Controls中的JS
Profile
复选框,可以在时光轴中捕获JavaScript的库房音讯(会暴发一定的习性消耗),并且在Flame
Chart
(火焰图)中会突显所有被调用的JavaScript函数新闻。

亚洲必赢官网 22

制图解析

在录制以前点击Controls中的Paint复选框,可以赢得绘制事件的越多细节音讯(注意那会暴发众多的习性消耗)。倘使要深刻摸底网页渲染方面的音信,能够点击DevTools右上角的菜系,在More
tools
里头选中Rendering settings,那其间包罗了之类设置项:

亚洲必赢官网 23

  • Paint Flashing 高亮显示网页中需求被重绘的一部分。
  • Layer Borders 显示Layer边界。
  • FPS Meter 每一秒的帧细节,帧速率的遍布消息和GPU的内存使用状态。
  • Scrolling Performance Issues
    分析鼠标滚动时的性能问题,会显示使屏幕滚动变慢的区域。
  • Emulate CSS Media
    仿真CSS媒体类型,查看区其余装备上CSS样式效果,可能的媒体类型选取有printscreen

把地方的富有安装项勾选上,网页的来得效果如下:

亚洲必赢官网 24

若果你打开到那些网页,按下F12,会弹出Chrome的开发者工具。然后在开发者工具的平底右侧点击设置按钮,开启测试页面渲染性能的安装。

录制中捕获截屏

在录制以前点击Controls中的Screenshots复选框,可以在录制进程中抓获截屏,鼠标在Overview上从左向右移动则足以看看录制的动画片。

亚洲必赢官网 25

询问指定事件

你可以因此在DevTools上按Cmd+F(Mac)调出查询框,来查看指定时间区域限量内的指定项目的轩然大波,点击Cmd+G(Mac)或者Cmd+Shift+G(Mac)可以按事件发生的依次来询问。

亚洲必赢官网 26

图中查询到了4个灰色标志着的Parse HTML事件,点击Cmd+G节骨眼会在那4个事件移动。

亚洲必赢官网 27

绘图解析

在录制从前点击Controls中的Paint复选框,能够得到绘制事件的更加多细节音信(注意那会暴发众多的习性消耗)。假如要深刻了然网页渲染方面的音信,可以点击DevTools右上角的菜单,在More
tools
中间选中Rendering settings,这里面包罗了如下设置项:

亚洲必赢官网 28

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

Layer Borders 显示Layer边界。

FPS Meter 每一秒的帧细节,帧速率的遍布音讯和GPU的内存使用状态。

Scrolling Performance Issues
分析鼠标滚动时的特性问题,会突显使显示器滚动变慢的区域。

Emulate CSS Media
仿真CSS媒体类型,查看差其余装置上CSS样式效果,可能的媒体类型选用有print
、screen

把地点的具有安装项勾选上,网页的呈现效果如下:

亚洲必赢官网 29

运转时性能分析

下边几乎介绍了Timeline面板上的逐一职能菜单,那么如何去拔取该面板去分析和优化网页程序的运作性能呢,由于篇幅限制,就不在那边展开商量,感兴趣的读者直接到谷歌(Google)开发者文档上查看,谷歌(Google)开发者文档有最上流最新的音信。

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

询问指定事件

您能够由此在DevTools上按Cmd+F(Mac)
调出查询框,来查阅指定时间区域范围内的指定项目标风云,点击Cmd+G(Mac)
或者Cmd+Shift+G(Mac)
可以按事件爆发的各样来询问。

亚洲必赢官网 30

图中查询到了4个藏灰色标志着的Parse HTML
事件,点击Cmd+G
节骨眼会在那4个事件移动。

参照文档

  • Analyze Runtime
    Performance
  • Diagnose Forced Synchronous
    Layouts

亚洲必赢官网 31

运作时性能分析

地方大约介绍了Timeline面板上的相继职能菜单,那么什么样去选取该面板去分析和优化网页程序的运行性能呢,由于篇幅限制,就不在那边展开研商,感兴趣的读者直接到谷歌(Google)开发者文档上查看,谷歌开发者文档有最权威最新的音讯。
参照文档
Analyze Runtime Performance

Diagnose Forced Synchronous Layouts

个体博客

自家的私有博客

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

亚洲必赢官网 32

该表突显以毫秒为单位的当前页面绘制所需时日,而左侧突显了脚下图表的小不点儿与最大值。此外,也出示了多年来80帧的树状图。那么些图形的精锐之处是它不断试图重新绘制页面,使得页面好像是首回加载。那允许你精确定位因CSS影响的绘图问题,而不用每便重复加载页面。无论你的改动是或不是暴发潜移默化,树状图都会随处监测。

一旦大家详细查看这些页面的HTML和CSS,你会看出里边一个div添加了一些CSS效果。

亚洲必赢官网 33

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

亚洲必赢官网 34

哇!正如您从图片可看出,页面绘制时间有一个令人关切的转变。通过简单地将border-radius属性移除,就可以讲明这一个改变能让页面的绘图时间肯定减少。当你更新或改变CSS特性时,那个图形就马上下降。在同一个元素上还要利用box-shadowborder-radius,会招致万分重的绘图负担,那是因为浏览器不可能为之做出优化。即使有一个元素需求反复的重复绘制,你应该在建立网页时时刻记住那点。

那是一个很好的,在Google IO
网站上的录像,它更深远地演讲绘制时间,并介绍部分缩减网页“jank(卡顿)”的技能。

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

祝测试欢腾!

网站地图xml地图