>

金沙澳门官网4166-4166am金沙登录-www.4166.com

热门关键词: 金沙澳门官网4166,4166am金沙登录,www.4166.com

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

- 编辑:金沙澳门官网4166 -

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

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。尽管如此,它仍然有一些很棒的开发者工具帮助你测试网页性能

金沙澳门官网4166 1

在这篇文章里,我展示如何使用Chrome Canary的开发者工具去定位你的CSS中的一部分,这部分CSS可能会导致页面滚动缓慢和影响页面的绘制时间。当浏览器加载和绘制页面时,为了“绘制”并让内容显示在屏幕上,需要遍历所有可见元素。由于这依赖于布局和复杂的CSS,你可能会发现绘制时间会很长。这会导致网页看起来忽动忽停和响应较慢。这种缓慢滚动也称为jank(jank是Android系统的一个专业术语,指的是屏幕上流畅动态画面中断的卡顿现象)。在移动设备上滚动页面时,浏览器会使劲地绘制复杂的CSS,这时这种情况更加明显。

即使页面的加载时间十分快,也仍然值得去研究页面的绘制时间。不同设备对CSS属性有着不一样的反应,但无论如何,能提高性能总是一件很好的事。为了进行测试,首先得去Google Chrome网站下载Chrome Canary。一旦安装完成,就可以打开你想测试的网页。HTML5 Rocks网站里有一个很好的案例网站,我们使用它来证明高耗能CSS属性的操作,会增加页面的绘制时间。

金沙澳门官网4166 2

一旦你打开到这个网页,按下F12,会弹出Chrome的开发者工具。然后在开发者工具的底部右侧点击设置按钮,开启测试页面渲染性能的设置。

金沙澳门官网4166 3

点击后会显示一个允许你更改设置的控制板。

金沙澳门官网4166 4

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

金沙澳门官网4166 5

该表显示以毫秒为单位的当前页面绘制所需时间,而右侧显示了当前图表的最小与最大值。另外,也显示了最近80帧的树状图。这个图表的强大之处是它不断试图重新绘制页面,使得页面好像是第一次加载。这允许你精确定位因CSS影响的绘制问题,而不用每次重新加载页面。无论你的改变是否产生影响,树状图都会持续监测。

如果我们详细查看这个页面的HTML和CSS,你会看到其中一个div添加了一些CSS效果。

金沙澳门官网4166 6

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

金沙澳门官网4166 7

哇!正如你从图表可看出,页面绘制时间有一个令人关注的变化。通过简单地将border-radius属性移除,就可以证明这个改变能让页面的绘制时间显著减少。当你更新或改变CSS属性时,这个图表就立即下降。在同一个元素上同时使用box-shadowborder-radius,会导致非常重的绘制负担,这是因为浏览器不能为之做出优化。如果有一个元素需要频繁的重复绘制,你应该在建立网页时时刻记住这点。

这是一个很好的,在Google IO 网站上的视频,它更深入地阐述绘制时间,并介绍一些减少网页“jank(卡顿)”的技巧。

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

祝测试愉快!

打赏支持我翻译更多好文章,谢谢!

打赏译者

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

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

翻译自:

打赏支持我翻译更多好文章,谢谢!

任选一种支付方式

金沙澳门官网4166 8 金沙澳门官网4166 9

赞 2 收藏 评论

最近,我参加了在伦敦举办的Facebook移动开发者大会。在那天期间,有很多的交谈,但真正让我关注的是一场关于性能的,名为“让m.facebook.com更快”的交流会,它的主题是关于Facebook如何不断努力改善网页性能和从中汲取的经验。

作者:伯乐在线专栏作者 - CharlieChu
点击 → 了解如何加入专栏作者
如需转载,发送「转载」二字查看说明

嗨,各位,又到了周末总结时间!得益于大量的 Grunt 和 Gulp 插件,我们可以轻松实现网站数据的可视化,虽然深入理解这些工具还比较困难,但分门别类的将它们列出来,也是很有帮助的。

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

金沙澳门官网4166 10

前端,在路上... 个人主页 · 我的文章 · 19 ·     

金沙澳门官网4166 11

Facebook开发团队是使用Chrome Cannry来测试网页CSS性能的。Google Chrome Canary拥有Chrome的最新特性,并允许试用一些即将成为Chrome标准版本的,可行的最新特性。考虑到Chrome Canary作为一个为开发者和尝鲜者专门设计的“预览版”,所以有时候会因Chrome开发团队的快速迭代而导致一些B UG。尽管如此,它仍然有一些很棒的开发者工具帮助你测试网页性能

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

CDN 可以帮你把网站的资源分发到世界各地,有助于提高网站的响应速度,当然,这对于那些特殊地区的用户是收效甚微的。

金沙澳门官网4166 12

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

CloudFlare

CloudFlare 的强大之处在于它可以成为你的 DNS 服务器(CDN 只是它所有服务的一个组成部分),这样对你的网站发起的所有请求都会经过它。

CloudFlare 的 CDN 在过去十五年的设计和发展中,并没有一味的守旧和固步自封。我们的专利技术中充分利用了最新的技术进步,包括并不限于硬件、web 服务器和网络路由。换言之,我们创新的建设了下一代的 CDN。新的 CDN 配置简单、价格低廉,其性能也一定比你使用过的任何传统 CDN 都要优秀。

在这篇文章里,我展示如何使用Chrome Canary的开发者工具去定位你的CSS中的一部分,这部分CSS可能会导致页面滚动缓慢和影响页面的绘制时间。当浏览器加载和绘制页面时,为了“绘制”并让内容显示在屏幕上,需要遍历所有可见元素。由于这依赖于布局和复杂的CSS,你可能会发现绘制时间会很长。这会导致网页看起来忽动忽停和响应较慢。这种缓慢滚动也称为jank(jank是Android系统的一个专业术语,指的是屏幕上流畅动态画面中断的卡顿现象)。在移动设备上滚动页面时,浏览器会使劲地绘制复杂的CSS,这时这种情况更加明显。

Timeline面板

Timeline面板是整个面板里面最复杂的一个面板,涉及的东西比较多。可以利用这个面板来记录和分析网页运行过程中的所有活动行为信息。 你可以充分利用这个面板来分析你的网页的程序性能问题。

金沙澳门官网4166 13

概述
下图是从Google官方网站中介绍Timeline面板的图贴到这里,该面板主要包括4大块窗格(Pane):
Controls 录制开关和控制录制过程中需要记录哪些信息。

Overview 网页性能的概要信息。

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

Details 当选择一个指定的事件后,会显示这个事件的更多信息;当没有选择事件时,会显示指定的时间帧信息。

Flame Chart里面的虚竖线含义:蓝色标记DOMContentLoaded事件;绿色标记第一次的绘制时间点;红色代表load事件。

金沙澳门官网4166 14

其中第2块Overview显示了网页性能相关的概要信息,可以通过鼠标或者区域边界上的灰色滑块来拖出一个指定区域范围,Flame Chart会跟着局部放大显示指定区域内的详情信息。
可以通过键盘上的W
,S
来放大和缩小指定区域,通过A
,D
来向左或向右移动指定区域。

从Google把图贴到这里,这个窗格包含了三个图表:
FPS 每秒帧数(Frames Per Second)。绿色柱状条越高,则每秒帧数越高。在FPS图表上方的红色块是标记一个长帧。

CPU 标记CPU资源的使用情况,这里的面积图标记着消耗CPU资源的各类事件。

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

金沙澳门官网4166 15

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

NET图表柱状条两种颜色的含义:较亮的部分表示等待时间(当资源被请求时,直到第一个字节被下载的时间);较暗的部分表示传输时间(在第一个和最后一个字节被下载之间的时间)。

MaxCDN

CSS-Tricks 当前就在使用 MaxCDN 托管所有的静态资源。它可以无缝地融合 WordPres 和 W3 的所有缓存资源,所以我们无需做什么特别处理,即可将资源移入 CDN,并能保证链接的准确性。

金沙澳门官网4166 16对于一个博客来说,考虑到其中的大文件主要是 JavaScript、CSS 和图片,而不是视频等类型,这带宽占用的可真多。

我们的 CDN 服务同样是一个网站加速器和实时控制中心。创建它,就是为了让网站的用户和运维都能从下一代 CDN 中获得最大收益。

即使页面的加载时间十分快,也仍然值得去研究页面的绘制时间。不同设备对CSS属性有着不一样的反应,但无论如何,能提高性能总是一件很好的事。为了进行测试,首先得去Google Chrome网站下载Chrome Canary。一旦安装完成,就可以打开你想测试的网页。HTML5 Rocks网站里有一个很好的案例网站,我们使用它来证明高耗能CSS属性的操作,会增加页面的绘制时间。

网页录制详情

支持两种网页录制操作:①录制金沙澳门官网4166,网页加载,②录制网页交互。为了便于分析,录制的时间不宜太长、还要避免不必要的交互操作、并禁用浏览器的缓存和插件。
当录制完成后,在Flame Chart(火焰图)中点击左侧三角可以展开详情,点击其中的事件或者空白处,可以在Details里面查看该事件或者总的概要信息。这里面包含的信息量很大,限于篇幅原因,下次有机会再作深入介绍,或者直接到Google上查看Timeline Event Reference这个参考文档。

CloudFront

亚马逊网络服务版本的 CDN。

亚马逊 CloudFront 是一个内容分发网络服务。它可以无缝融合入其他的亚马逊网络服务产品,为开发者和企业分发内容到最终用户手中提供了一种简单的方式,整个过程都具有低延迟、高转换速度的特点,也没有最小使用量的强制要求。

金沙澳门官网4166 17

录制中进行JS分析

在录制之前点击Controls中的JS Profile复选框,可以在时间轴中捕获JavaScript的堆栈信息(会产生一定的性能消耗),并且在Flame Chart(火焰图)中会显示所有被调用的JavaScript函数信息。

金沙澳门官网4166 18

CDNperf

上述的 CDNs 并不能托管你任意的资源,它们往往只是托管最频繁用到的文件。虽然对于线上产品来说将资源和服务器托管到私有的 CDN 上并不是最好的方式,但这种方式对于分发资源来说仍然是快速和简单的。

CDNperf 可以帮你找出最快和最可信赖的 JavaScript CDNS,让你的网站更快更有朝气。

金沙澳门官网4166 19cdnperf

下面的这些性能测试工具,使用了量化的方式测试了网站中诸如首字节加载时间(time to first byte)或者渲染时间等表现。有些工具还会检查特别检查资源是否被缓存,多个 CSS 或 JS 文件是否值得合并。

一旦你打开到这个网页,按下F12,会弹出Chrome的开发者工具。然后在开发者工具的底部右侧点击设置按钮,开启测试页面渲染性能的设置。

录制中捕获截屏

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

金沙澳门官网4166 20

WebPagetest

WebPagetest 是性能测试的黄金标准,它提供了多方面的量化指标用于性能测试,比如有一个基本的评分,用于评价当前页面优化的水平;有一个截图,显示页面加载后的视觉效果;还有一个浏览器加载资源的瀑布流...

根据用户浏览器真实的连接速度,在全球范围内进行网页速度测试,并提供详细的优化建议。

金沙澳门官网4166 21webpagetest

通过使用 API wrapper,也可以将 WebPagetest 的相关服务添加到 NPM 模块和命令行工具中。

  • webpagetest-mapper:将 WebPageTest 的测试数据转换为可读的文档格式。
  • WPT Bulk Tester:使用 Google Docs 测试多个 URLs(如果你拥有 API key,也可以使用 webpagetest.org 来做这件事,或者其他公开可访问的实例)。

金沙澳门官网4166 22

绘制解析

在录制之前点击Controls中的Paint复选框,可以获取绘制事件的更多细节信息(注意这会产生很多的性能消耗)。如果要深入了解网页渲染方面的信息,可以点击DevTools右上角的菜单,在More tools里面选中Rendering settings,这里面包含了如下设置项:

金沙澳门官网4166 23

Paint Flashing 高亮显示网页中需要被重绘的部分。

Layer Borders 显示Layer边界。

FPS Meter 每一秒的帧细节,帧速率的分布信息和GPU的内存使用情况。

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

Emulate CSS Media 仿真CSS媒体类型,查看不同的设备上CSS样式效果,可能的媒体类型选项有print
、screen

把上面的所有设置项勾选上,网页的显示效果如下:

金沙澳门官网4166 24

Yslow

Yslow 基于 Yahoo 的高性能网页教条,分析网页的性能并给出响应缓慢的原因。

点击后会显示一个允许你更改设置的控制板。

查询指定事件

你可以通过在DevTools上按Cmd+F(Mac)
调出查询框,来查看指定时间区域范围内的指定类型的事件,点击Cmd+G(Mac)
或者Cmd+Shift+G(Mac)
可以按事件发生的顺序来查询。

金沙澳门官网4166 25

图中查询到了4个红色标记着的Parse HTML
事件,点击Cmd+G
焦点会在这4个事件移动。

Google PageSpeed

PageSpeed 根据网页最佳实践分析和优化测试的网页。

金沙澳门官网4166 26google pagespeed

PageSpeed 也有一个 CLI(Command Line Interface)工具:PSI(PageSpeed Insights with reporting)

在构建进程中,可以使用 PSI 测试移动端和桌面端的性能,最终得到可读性良好的测试结果。

金沙澳门官网4166 27google pagespeed

金沙澳门官网4166 28

运行时性能分析

上面大致介绍了Timeline面板上的各个功能菜单,那么如何去利用该面板去分析和优化网页程序的运行性能呢,由于篇幅限制,就不在这边展开讨论,感兴趣的读者直接到Google开发者文档上查看,Google开发者文档有最权威最新的信息。
参考文档
Analyze Runtime Performance

Diagnose Forced Synchronous Layouts

我的网站都开销到哪里去了?

评估网站在世界各地为每个移动端用户支出的维护成本。

金沙澳门官网4166 29what does my site cost?

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

Pingdom 网站速度测试

输入 URL 地址,即可测试页面加载速度,分析并找出性能瓶颈。

金沙澳门官网4166 30pingdom

金沙澳门官网4166 31

SpeedCurve

SpeedCurve 既可以让你追踪竞争对手的性能表现,也可以追踪自己的性能表现。使用 SpeedCurve 时,你可以查看某个因素在不同站点的速度表现。对于移动用户来说,他们希望网站在手机上加载起来要快于电脑,如果感到加载迟缓,往往会迅速关上网页,所以,网站的响应速度对他们很重要。

金沙澳门官网4166 32speedcurve

该表显示以毫秒为单位的当前页面绘制所需时间,而右侧显示了当前图表的最小与最大值。另外,也显示了最近80帧的树状图。这个图表的强大之处是它不断试图重新绘制页面,使得页面好像是第一次加载。这允许你精确定位因CSS影响的绘制问题,而不用每次重新加载页面。无论你的改变是否产生影响,树状图都会持续监测。

Calibre

Calibre 可以帮你追踪页面的加载时间,以及页面大小。问题页面(Janky page)?是的,Calibre 会直接告诉你哪些页面有问题。

金沙澳门官网4166 33image

如果我们详细查看这个页面的HTML和CSS,你会看到其中一个div添加了一些CSS效果。

GT Metrix

GT Metrix 结合了 Google PageSpeed 和 YSlow,帮助开发者创建快速、高效和全面优化的网页浏览体验。

金沙澳门官网4166 34image

金沙澳门官网4166 35

perf.js

在开发过程中,将性能的时序情况显示在页面上。

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

perf bar

一种简单的方式,用于快速收集和查看网页性能,提供预置的量化标准,也支持自定义的量化标准。

金沙澳门官网4166 36

grunt-perfbudget

用于评估性能的 Grunt task。 grunt-perfbudget 使用 WebPagetest 的公有或私有实例在特定的 URL 进行测试。它会将测试结果和你预期的性能期望做比较,如果小于预期,那么这个 task 就顺利完成了,如果超过了你预期的性能期望,那么就会报告失败,并且会帮助你分析超出预期的原因。

哇!正如你从图表可看出,页面绘制时间有一个令人关注的变化。通过简单地将border-radius属性移除,就可以证明这个改变能让页面的绘制时间显著减少。当你更新或改变CSS属性时,这个图表就立即下降。在同一个元素上同时使用box-shadowborder-radius,会导致非常重的绘制负担,这是因为浏览器不能为之做出优化。如果有一个元素需要频繁的重复绘制,你应该在建立网页时时刻记住这点。

Sitespeed

Sitespeed.io 是一个基于最佳实践以及一些加载时序等量化标准的开源工具,有助于开发者分析网页的加载速度和渲染性能。它会从开发者的站点收集多个页面的数据,根据最佳实践等规则来分析这些网页,并将结果以 HTML 的形式输出,或者以数值的形式发送到 Graphite。

这是一个很好的,在Google IO 网站上的视频,它更深入地阐述绘制时间,并介绍一些减少网页“jank(卡顿)”的技巧。

speedgun

该网站允许你使用 Speedgun.js 收集任意公开站点的性能数据。它会运行五次,并显示一个友好的示图,帮助开发者了解当前页面的加载过程。

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

gulp size

显示项目大小。

金沙澳门官网4166 37image

祝测试愉快!

Chrome 开发者工具

在 Chrome 的开发者工具中,对于评估性能有两个非常有用的标签:Audits 和 Network。

Audit 面板用于分析加载的页面。它可以提供优化建议,减少页面加载时间,加快页面的响应速度。

金沙澳门官网4166 38image

Network 面板以动态的方式实时地展示了资源的请求和下载。虽然辨析和定位这些请求会比纯粹的加载页面多花一些时间,但这些消耗对于指导页面的性能优化是非常重要的。

金沙澳门官网4166 39image

火狐开发者浏览器

该浏览器是为开发者而创造的,专注于服务开发者的工作流。这是有史以来第一次,将构建、测试和扩展等服务集中于一体。

更多信息请查看 MDN 上的 Network Monitor。

Page performance

这个扩展插件应用于 Chrome 浏览器,可以开速分析当前页面的性能。如果浏览器打开了多个标签,那么该插件会自动分析当前页面的性能表现。

金沙澳门官网4166 40image

PerfAudit

我们审查页面的加载和渲染性能。对于令人反感的响应缓慢和问题页面,我们有义不容辞的使命提供快速、稳定和准确的页面。

Perfmonkey

PerfMonkey 让追踪页面的渲染性能变得无比简单。

ImageOptim

ImageOptim 是一个免费的应用,它在减少图片体积、提高加载速度的同时,还不会牺牲图片质量。它优化了压缩参数、移除了无用的头信息和非必要的颜色配置信息。

金沙澳门官网4166 41image

它也可以被集成到 Grunt 和 Gulp 中。

SVGO

SVG Optimizer 是一个基于 Nodejs 的 SVG 矢量图形优化工具。

如果你需要的是交互界面的操作,而不是 CLI,那么可以下载这个 APP。

SVGOMG

SVGOMG 是 SVGO's Missing GUI 的缩写,旨在揭露 SVG 文件的主要问题,而不具有 SVGO 的完整可配置项。

金沙澳门官网4166 42image

手动优化 SVGs

类似于其他的图形文件,SVG 也应该在上线前被优化。虽然有许多类似 Raymond 的工具可以帮你做这种优化,但最好的方式还是深入理解其细节并做一些手动的优化。

Triamge

Triamge 是一个扩平台的 GUI 和 CLI 工具,用于优化网站的图片文件。它组合使用 optipng、pngcrush、advpng 和 jpegoptim,并根据文件类型做优化(最新版本中,已经支持 PNG 和 JPG)。

金沙澳门官网4166 43image

CSS Triggers

该网站用于展示哪些 CSS 属性可以影响浏览器的布局、渲染和其他组合操作。

金沙澳门官网4166 44image

更多有关 CSS-triggers 的消息,可以点击这里查看。

CSS Stats

该网页应用以可视化的形式展示了开发者项目中有关 CSS 的统计信息。

金沙澳门官网4166 45image

CSS Shrink

CSS 压缩工具。由于 CSS 是页面渲染的核心文件,所以必须保持轻巧,便于快速响应和渲染。

uncss

UnCSS 是一个用于移除脚本中无用 CSS 的工具。它可以审查多个文件,也可以审查由 JavaScript 注入的 CSS。

它也可以被集成到 Grunt 和 Gulp 中。

Critical path

提取和整合 HTML 中关键的 CSS。

HTMLMinifier

HTMLMinifier 是一个高度可配置、经过完善的测试、基于 JavaScript 的 HTML 压缩工具,并且内置了代码审查类的工具。

gulp-htmlmin

用于压缩 HTML 的 gulp 插件。

grunt-contrib-htmlmin

用于压缩 HTML 的 grunt 插件。

uglifyjs

JavaScript 解析器、混淆、压缩和美化工具集。

它也可以被集成到 Grunt 和 Gulp 中。

你也许并不需要某些 jQuery 插件

jQuery 及其附属工具都是非常优秀的项目,使用它们往往使开发工作轻松而又快捷。

另一方面,如果你正在开发一个库,那么你需要思考一下是否真的需要依赖于 jQuery。也许你只需要引入几行代码,就可以放弃引入一个库实现某些功能。如果你的库只是针对于高级浏览器,那么可能直接调用浏览器的内置函数就可以实现相关功能了。

金沙澳门官网4166 46image

  • Usertiming API
  • Jank Free
  • Scrolling performance
  • Mobile web performance auditing
  • Gone in 60 frames per second
  • Udacity course on rendering performance

本文由计算机网络发布,转载请注明来源:Chrome开发者工具详解(3):Timeline面板