当前位置:管家婆资料大全 > 新闻资讯 > Chrome开发者工具详解,剖析页面绘制时间

Chrome开发者工具详解,剖析页面绘制时间

文章作者:新闻资讯 上传时间:2019-09-09

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

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

本文由 伯乐在线 - 刘健超-J.c 翻译,sunbiaobiao 校稿。未经许可,禁止转发!
克罗地亚共和国(Republic of Croatia)语出处:www.deanhume.com。迎接插手翻译组。

如今,笔者在场了在London进行的推文(Tweet)移动开发者大会。在那天时期,有数不尽的交谈,但真正让本人关爱的是一场有关质量的,名字为“让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(卡顿)”的能力。

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

祝测验欢愉!

打赏匡助自身翻译愈来愈多好小说,感激!

打赏译者

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

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

任选一种支付办法

正版管家婆一句赢大钱 8 正版管家婆一句赢大钱 9

赞 2 收藏 评论

笔者:伯乐在线专栏笔者 - CharlieChu
点击 → 掌握什么踏向专栏撰稿人
如需转发,发送「转发」二字查看表达

关于作者:刘健超-J.c

正版管家婆一句赢大钱 10

前端,在路上... 个人主页 · 小编的篇章 · 19 ·     

正版管家婆一句赢大钱 11

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

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

Timeline面板

Timeline面板是总体面板里面最复杂的一个面板,涉及的东西相当多。能够使用那么些面板来记录和深入分析网页运营进度中的全体活动表现音讯。 你能够丰盛利用这几个面板来深入分析你的网页的顺序质量难题。

正版管家婆一句赢大钱 12

概述
下图是从谷歌官网中介绍Timeline面板的图贴到这里,该面板首要包罗4大块窗格(Pane):
Controls 摄像开关和决定摄像进程中供给记录哪些音信。

Overview 网页质量的概要音讯。

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

Details 当采取贰个钦命的轩然大波后,会议及展览示这几个事件的更加的多消息;当未有选取事件时,会显得内定的岁月帧消息。

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

正版管家婆一句赢大钱 13

其中第2块Overview呈现了网页性能相关的大要音信,能够透过鼠标恐怕区域边界上的黄褐滑块来拖出三个钦命区域限制,Flame Chart会随之有个别放大展现钦赐区域内的详细情况音信。
可以透过键盘上的W
,S
来放大和紧缩钦定区域,通过A
,D
来向左或向右移动钦命区域。

从谷歌(Google)把图贴到这里,那些窗格饱含了多少个图表:
FPS 每秒帧数(Frames Per Second)。青白柱状条越高,则每秒帧数越高。在FPS图表上方的新民主主义革命块是标记贰个长帧。

CPU 标识CPU能源的采取状态,这里的面积Logo志着费用CPU能源的各个事件。

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

正版管家婆一句赢大钱 14

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

NET图表柱状条三种颜色的意义:较亮的有些代表等待时间(当资源被呼吁时,直到第八个字节被下载的小运);较暗的部分代表传输时间(在首先个和结尾三个字节被下载之间的日子)。

网页录像详细情况

支撑三种网页录像操作:①录像网页加载,②录制网页交互。为了有助于分析,录像的时日不当太长、还要防止不要求的彼此操作、并禁用浏览器的缓存和插件。
当摄像实现后,在Flame Chart(火焰图)中式点心击左侧三角能够扩充详细情况,点击个中的风云大概空白处,能够在Details中间查看该事件或然总的概要音讯。这中间含有的新闻量不小,限于篇幅原因,后一次有机缘再作深远介绍,或许直接到Google上查看Timeline 伊夫nt Reference那个参考文书档案。

录像中开展JS深入分析

在录像在此之前点击Controls中的JS Profile复选框,能够在时间轴中捕获JavaScript的仓库新闻(会产生一定的性质消耗),并且在Flame Chart(火焰图)中会显示全数被调用的JavaScript函数消息。

正版管家婆一句赢大钱 15

录像中抓获截屏

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

正版管家婆一句赢大钱 16

绘图解析

在录像在此以前点击Controls中的Paint复选框,能够收获绘制事件的越来越多细节新闻(注意那会发出比比较多的本性消耗)。纵然要深刻摸底网页渲染方面包车型地铁新闻,能够点击DevTools右上角的美食指南,在More tools个中选中Rendering settings,那其中满含了如下设置项:

正版管家婆一句赢大钱 17

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

Layer Borders 显示Layer边界。

FPS Meter 每一秒的帧细节,帧速率的布满新闻和GPU的内部存款和储蓄器使用处境。

Scrolling Performance Issues 解析鼠标滚动时的质量难题,会展现使显示屏滚动变慢的区域。

Emulate CSS Media 仿真CSS媒体类型,查看区别的道具上CSS样式效果,也许的传播媒介类型采用有print
、screen

把上边的具有安装项勾选上,网页的显得效果如下:

正版管家婆一句赢大钱 18

询问钦命事件

您可以经过在DevTools上按Cmd+F(Mac)
调出查询框,来查看钦命时期区域限量内的钦点项目标风浪,点击Cmd+G(Mac)
或者Cmd+Shift+G(Mac)
能够按事件发生的一一来询问。

正版管家婆一句赢大钱 19

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

运行时品质剖判

地点大约介绍了Timeline面板上的相继职能菜单,那么怎么着去采纳该面板去深入分析和优化网页程序的运营质量呢,由于篇幅限制,就不在那边张开斟酌,感兴趣的读者间接到Google开垦者文书档案上查看,谷歌开采者文书档案有最上流最新的新闻。
参考文档
Analyze Runtime Performance

Diagnose Forced Synchronous Layouts

本文由管家婆资料大全发布于新闻资讯,转载请注明出处:Chrome开发者工具详解,剖析页面绘制时间

关键词: