hg888皇冠手机登录

Chrome开采者工具详解(3):Timeline面板

四月 17th, 2019  |  www.hg888.com

Web品质优化连串(二):剖析页面绘制时间

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

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

多年来,笔者在场了在London举行的推特(Twitter)移动开垦者大会。在那天时期,有成百上千的交谈,但确实让自家关爱的是一场有关性能的,名叫“让m.facebook.com更快”的交换会,它的宗旨是有关推特怎么着不断努力革新网页质量和从中得出的阅历。

Facebook支付团队是选拔Chrome
Cannry
来测试网页CSS性能的。Google Chrome
Canary
不无Chrome的摩登个性,并同意试用1些就要成为Chrome标准版本的,可行的前卫性子。考虑到Chrome
Canary作为三个为开辟者和尝鲜者专门布署的“预览版”,所以有时会因Chrome开拓团队的长足迭代而产生1些B
UG。就算如此,它还是有1对很棒的开采者工具扶助您测试网页性能

www.hg888.com 1

在那篇文章里,笔者展现怎样使用Chrome
Canary的开荒者工具去稳固你的CSS中的壹某个,那有个别CSS恐怕会招致页面滚动缓慢和潜移默化页面包车型地铁绘图时间。当浏览器加载和制图页面时,为了“绘制”并让内容映今后显示器上,须求遍历全数可知成分。由于那重视于布局和错综复杂的CSS,你也许会意识绘制时间会不长。那会促成网页看起来忽动忽停和响应较慢。那种缓慢滚动也称之为jank(jank是Android系统的多个专业术语,指的是荧屏上朗朗上口动态画面中断的卡顿现象)。在移动设备上滚动页面时,浏览器会努力地绘制复杂的CSS,那时那种景况特别显著。

就算页面包车型地铁加载时间不慢,也照样值得去研讨页面包车型地铁绘图时间。分歧装备对CSS属性有着不均等的反馈,但不管怎么着,能增进品质总是一件很好的事。为了进行测试,首先得去Google
Chrome
网址下载Chrome
Canary。一旦设置完结,就足以展开你想测试的网页。HTML5
Rocks
网址里有四个很好的案例网址,大家选用它来验证高耗电CSS属性的操作,会追加页面包车型客车绘图时间。

www.hg888.com 2

假设您张开到那几个网页,按下F12,会弹出Chrome的开垦者工具。然后在开垦者工具的底层右边点击设置按键,开启测试页面渲染质量的安装。

www.hg888.com 3

点击后会呈现2个允许你改动设置的调节板。

www.hg888.com 4

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

www.hg888.com 5

该表显示以皮秒为单位的日前页面绘制所需时间,而左侧突显了当前图表的纤维与最大值。其它,也出示了近来80帧的树状图。这一个图形的强硬之处是它不止试图重新绘制页面,使得页面好像是首先次加载。这允许你精鲜明位因CSS影响的绘图难题,而不用每一遍重复加载页面。无论你的退换是还是不是爆发影响,树状图都会没完没了监测。

万一大家详细查看这些页面包车型大巴HTML和CSS,你会看到在那之中叁个div增加了部分CSS效果。

www.hg888.com 6

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

www.hg888.com 7

哇!正如您从图纸可看到,页面绘制时间有多个令人关切的变型。通过轻巧地将border-radius属性移除,就能够证实那个改换能让页面包车型大巴绘图时间显明滑坡。当您更新或转移CSS天性时,那几个图片就立刻下跌。在同贰个要素上同时使用box-shadowborder-radius,会造成相当重的绘图负担,那是因为浏览器不能为之做出优化。倘诺有3个要素要求反复的重复绘制,你应有在确立网页时时刻记住那一点。

那是2个很好的,在Google IO
网站上的录像,它更深透地阐释绘制时间,并介绍1些滑坡网页“jank(卡顿)”的手艺。

想更进一步读书绘制时间的优化,看看那个链接。

祝测试欢悦!

打赏援助本身翻译更加多好文章,谢谢!

打赏译者

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

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

Chrome开辟者工具详解(三)-Timeline面板

注:
那一篇重要教学面板Timeline,参考了谷歌(Google)的有关文书档案,首要用于集团里面本领分享。

注:
那1篇首要教授面板Timeline,参考了谷歌(Google)的相干文档,首要用以集团内部技能分享。

打赏匡助本人翻译更加多好小说,谢谢!

任选一种支付格局

www.hg888.com 8
www.hg888.com 9

赞 2 收藏
评论

近日,笔者加入了在London进行的Twitter移动开荒者大会。在那天期间,有成都百货上千的交谈,但着实让小编关怀的是一场有关质量的,名叫“让m.facebook.com更快”的调换会,它的宗旨是有关推特(Twitter)怎么样不断努力革新网页质量和从中得出的经历。

笔者:伯乐在线专栏撰稿人 – CharlieChu
点击 →
驾驭什么进入专栏撰稿人
如需转发,发送「转发」二字查看表明

Timeline面板

Timeline面板是任何面板里面最复杂的2个面板,涉及的事物相比多。能够使用这一个面板来记录和剖析网页运转进度中的全体移动表现新闻。
您能够足够利用那个面板来分析你的网页的次序品质难题。

www.hg888.com 10

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

www.hg888.com 11

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

www.hg888.com 12

Facebook支付协会是运用Chrome
Cannry
来测试网页CSS性能的。Google Chrome
Canary
怀有Chrome的风行性子,并同意试用一些将要成为Chrome标准版本的,可行的新星天性。思虑到Chrome
Canary作为2个为开采者和尝鲜者专门安顿的“预览版”,所以有时会因Chrome开采团队的飞跃迭代而变成壹些B
UG。就算如此,它依旧有一部分很棒的开垦者工具支持你测试网页性能

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

概述

下图是从谷歌(Google)官网中介绍Timeline面板的图贴到那里,该面板主要不外乎四大块窗格(Pane):

  1. Controls 摄像按钮和操纵录像进程中需求记录哪些新闻。
  2. Overview 网页品质的概况新闻。
  3. Flame Chart
    CPU旅社轨迹的可视化图表(火焰图)。在图纸里面有一到三条虚竖线。
  4. Details
    当采纳1个内定的事件后,会来得那一个事件的越来越多音信;当未有采取事件时,会展现钦赐的日子帧新闻。

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

www.hg888.com 13

其中第2块Overview突显了网页品质相关的准将音讯,能够因而鼠标或许区域界线上的樱草黄滑块来拖出三个钦命区域限量,Flame
Chart
会随之有个别放大展现内定区域内的详细情形音讯。

能够透过键盘上的W,S来放大和压缩内定区域,通过A,D来向左或向右移动内定区域。

从谷歌(Google)把图贴到那里,那几个窗格包罗了四个图表:

  1. FPS 每秒帧数(Frames Per
    Second)。天蓝柱状条越高,则每秒帧数越高。在FPS图表上方的新民主主义革命块是标识贰个长帧。
  2. CPU
    标志CPU能源的行使意况,这里的面积Logo识着耗费CPU财富的各个事件。
  3. NETwww.hg888.com,
    各样颜色的柱状条分别显示一种财富。柱状条越长,代表获取这一个能源的小运越长。

www.hg888.com 14

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

NET图形柱状条二种颜色的意思:较亮的片段代表伺机时间(当能源被呼吁时,直到第3个字节被下载的岁月);较暗的有的代表传输时间(在首先个和结尾一个字节被下载之间的光阴)。

www.hg888.com 1

Chrome 开辟者工具详解(二):Network
面板

网页摄像实际情况

支撑三种网页录像操作:一摄像网页加载,②录制网页交互。为了有利于分析,录像的时光不宜太长、还要幸免不须求的交互操作、并禁止使用浏览器的缓存和插件。

当录制完结后,在Flame
Chart
(火焰图)中式点心击左侧三角能够张开详细情况,点击个中的事件依然空白处,能够在Details内部查看该事件依然总的概要音信。那中间富含的消息量相当的大,限于篇幅原因,下次有机会再作深远介绍,也许直接到谷歌上查看Timeline
Event
Reference这一个参考文书档案。

在这篇作品里,笔者出示怎么着使用Chrome
Canary的开采者工具去稳定你的CSS中的壹有个别,这壹部分CSS恐怕会形成页面滚动缓慢和影响页面包车型客车绘图时间。当浏览器加载和制图页面时,为了“绘制”并让内容浮现在荧屏上,须求遍历全部可知成分。由于那注重于布局和复杂性的CSS,你可能会发觉绘制时间会非常长。那会导致网页看起来忽动忽停和响应较慢。那种缓慢滚动也称为jank(jank是Android系统的三个专业术语,指的是显示器上朗朗上口动态画面中断的卡顿现象)。在运动装备上滚动页面时,浏览器会努力地绘制复杂的CSS,这时那种气象更为显明。

Timeline面板

Timeline面板是成套面板里面最复杂的3个面板,涉及的东西相比较多。能够运用这么些面板来记录和剖析网页运维进度中的全数移动作为信息。
你能够丰盛利用那几个面板来分析你的网页的主次品质难题。

www.hg888.com 16

概述
下图是从谷歌官网中介绍Timeline面板的图贴到此处,该面板首要归纳④大块窗格(Pane):
Controls 录像按键和调整摄像进度中要求记录哪些消息。

Overview 网页质量的大体音信。

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

Details
当选择2个钦定的轩然大波后,会显得这么些事件的越多音信;当未有选择事件时,会议及展览示钦点的时间帧音信。

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

www.hg888.com 17

其中第2块Overview展现了网页质量相关的中将消息,可以通过鼠标恐怕区域界线上的青古铜色滑块来拖出三个钦点区域限量,Flame
Chart
会随之有个别放大彰显钦命区域内的详细情况消息。
能够因而键盘上的W
,S
来松手和压缩钦定区域,通过A
,D
来向左或向右移动钦命区域。

从谷歌(Google)把图贴到这里,这些窗格包涵了八个图表:
FPS 每秒帧数(Frames Per
Second)。土黄柱状条越高,则每秒帧数越高。在FPS图表上方的新民主主义革命块是标识二个长帧。

CPU 标识CPU财富的利用情况,那里的面积Logo志着开销CPU财富的各个事件。

NET
种种颜色的柱状条分别突显壹种能源。柱状条越长,代表获取这一个能源的光阴越长。

www.hg888.com 18

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

NET图表柱状条二种颜色的意义:较亮的部分代表伺机时间(当能源被呼吁时,直到第2个字节被下载的年华);较暗的1些代表传输时间(在第陆个和最后一个字节被下载之间的时刻)。

录制中张开JS分析

在摄像以前点击Controls中的JS
Profile
复选框,可以在时光轴中捕获JavaScript的库房新闻(会生出一定的品质消耗),并且在Flame
Chart
(火焰图)中会突显所有被调用的JavaScript函数音信。

www.hg888.com 19

不怕页面包车型大巴加载时间尤其快,也照样值得去钻探页面包车型客车绘图时间。差异装备对CSS属性有着不等同的反射,但好歹,能增高质量总是一件很好的事。为了进行测试,首先得去Google
Chrome
网址下载Chrome
Canary。壹旦设置完成,就能够展开你想测试的网页。HTML5
Rocks
网址里有2个很好的案例网址,大家应用它来声明高耗电CSS属性的操作,会增添页面包车型客车绘图时间。

网页摄像实际情况

帮助二种网页录像操作:一录制网页加载,②录制网页交互。为了便于分析,录像的小运不当太长、还要制止不必要的互相操作、并禁止使用浏览器的缓存和插件。
当录像完结后,在Flame
Chart
(火焰图)中式点心击左侧三角能够开始展览实际情况,点击在那之中的轩然大波或然空白处,能够在Details内部查看该事件或然总的概要消息。那中间含有的音信量一点都不小,限于篇幅原因,下次有时机再作深入介绍,或许直接到谷歌上查看Timeline
伊夫nt Reference那一个参考文书档案。

摄像中捕获截屏

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

www.hg888.com 20

标签:, , , , , , , , ,

Your Comments

近期评论

    功能


    网站地图xml地图