使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能(Improving Web App Performance With the Chrome DevTools Timeline and Profiles)

Web应用开发 William 595浏览 0评论

使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能(Improving Web App Performance With the Chrome DevTools Timeline and Profiles)

We all want to create high performance web applications. As our apps get more complex, we may want to support rich animations and that ideal 60 frames a second that keep our apps responsive and snappy.  

Being aware of how to measure and improve performance can be a useful skill and in this short post, I’ll give you a quick refresher on how this can be done with the Chrome DevTools Timeline and Profiles.

Look! It’s a beautiful animated GIF. It’s a sign this post is going downhil from here : )

使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能(Improving Web App Performance With the Chrome DevTools Timeline and Profiles)

使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能(Improving Web App Performance With the Chrome DevTools Timeline and Profiles)

我们都希望创建高性能的Web应用程序。由于我们的应用程序变得越来越复杂,我们可能想要支持丰富的画面以及理想的60帧/秒,这能保证我们的应用程序响应灵敏生动流畅

知道如何衡量和提高性能,是一个有用的技能,在这短短的文章中,我会带您简单回顾关于如何通过
Chrome DevTools的 Timeline Profiles做到这一点。

看!这是一个美丽的GIF动画。这标志着这篇文章这里开始展开:)

使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能(Improving Web App Performance With the Chrome DevTools Timeline and Profiles)

Record

The Timeline panel provides an overview of where time is spent loading up your web application such as how long it takes to process DOM events, render page layouts or paint elements to the screen.

使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能(Improving Web App Performance With the Chrome DevTools Timeline and Profiles)

It allows you to drill down into three separate facets that can help discover why your application is slow: Events, Frames and actual Memory usage. To get started, navigate to your app and switch to the Timeline panel within the DevTools.

使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能(Improving Web App Performance With the Chrome DevTools Timeline and Profiles)

Timeline won’t display any data by default but you can begin a recording session with it by opening your app and clicking on the gray circle ? at the bottom of the pane – using the Cmd/Ctrl+E shortcut will also trigger a record. 

使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能(Improving Web App Performance With the Chrome DevTools Timeline and Profiles)

This record button will turn from gray to red and the Timeline will begin to capture the timelines for your page. Complete a few actions inside your app and after a few seconds, click the button again to stop recording.

Note:  will clear your current recording session so you can begin a new one.  will force V8 to complete a round of garbage collection, which is useful during debugging.  will filter the Details view to only display those records taking longer than 15ms to complete.

记录

Timeline工具栏提供了对于在装载你的Web应用的过程中,时间花费情况的概览,这些应用包括处理DOM事件, 页面布局渲染或者向屏幕绘制元素

使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能(Improving Web App Performance With the Chrome DevTools Timeline and Profiles)

它可以让你深入得到三个层面的数据,来帮助你明白问什么你的应用很缓慢:事件, 框架和实时的内存用量。开始,浏览你的应用,并在DevTools中切换到Timeline工具栏。

使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能(Improving Web App Performance With the Chrome DevTools Timeline and Profiles)

默认情况下Timeline不会显示任何数据,但是你可以这样开始一个记录会话,打开你的应用并点击灰色圆圈?,它在工具栏的底部——使用Cmd/Ctrl+E 快捷键也能开始一个记录。

使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能(Improving Web App Performance With the Chrome DevTools Timeline and Profiles)

这个记录按钮会从灰色变成红色,而Timeline将开始从你的页面获取时间线(timeline)。在你的应用中完成一些操作,记录到一些数据之后,再一次点击按钮来停止记录。

请注意:会清除你现有的记录会话,以便开始一个新的会话。将会强迫V8完成一轮的垃圾回收,在调试中它很有用。将会对显示的详细信息进行过滤,只显示那些完成耗时超过15ms的记录。

Examine

Next, we’re going to move onto examining the data recorded. Prioritize what your performance costs are. Is it your JavaScript? Is it your rendering? We’re going to first look at the Timeline Events mode, which can help answer these questions.

使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能(Improving Web App Performance With the Chrome DevTools Timeline and Profiles)

In this mode, the Summary view (at the top of the Timeline) displays horizontal bars representing the network and HTML parsing (blue), JavaScript (yellow), style recalculation and layout (purple) and painting and compositing (green) events for your page. Repaints are browser events invoked by responses to visual changes such as window resizes or scrolls.

检查

接下来,我们着手检查一下记录的数据。对影响性能的成本要素按优先级排序。是JavaScript吗?还是渲染?我们先看一看Timeline Events 模式,它能帮助回答这些问题。

使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能(Improving Web App Performance With the Chrome DevTools Timeline and Profiles)

在这个模式中,Summary视图(在Timeline的顶部)显示了一些水平的栅栏,分别代表页面中的网络和HTML解析(蓝色),JavaScript(黄色),样式重计算和布局(紫色)以及绘画和合成(绿色)事件。重绘是浏览器事件,是为响应诸如窗口大小改变或者滚动之类的视觉变化而调用的。

Recalculations occur due to modifications of CSS properties whilst Layout events (or reflows) are due to changes in element position. Don’t worry if you can’t remember these as the legend lower down in the Timeline panel covers these.

使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能(Improving Web App Performance With the Chrome DevTools Timeline and Profiles)

Below the Summary view is the Details view, which includes detailed records for these categories after a session has been recorded.

使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能(Improving Web App Performance With the Chrome DevTools Timeline and Profiles)

Each record has a title describing it to the left and timeline bars to the right. Hovering over a record will display an extended tooltip with details about the time taken to complete it – these have so much useful information in there, so do pay attention to them, especially the Call Stack.

CSS属性的修改会对样式重新进行计算,而布局事件(即重排)是由元素位置的改变引起的。别担心记不住这些,在Timeline面板下方有图例告诉你。

使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能(Improving Web App Performance With the Chrome DevTools Timeline and Profiles)

在Summary视图下面是Details视图,包含了某个会话被记录后,相关类别的记录的详细内容。

使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能(Improving Web App Performance With the Chrome DevTools Timeline and Profiles)

每一个记录在左侧有用于说明的标题,右侧是时间轴区域。鼠标移到一个记录之上,会显示更多的提示信息,其中包括从开始录制到结束的时间 – 这非常有用,有必要多关注一下,特别是其中的调用栈信息。

使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能(Improving Web App Performance With the Chrome DevTools Timeline and Profiles)

Clicking on Call Stack or location hyperlinks within these tooltips will take you to the exact line of JavaScript responsible for the behaviour. If you find that a browser event takes an excessive amount of time to complete (which you can determine from the ‘Duration’ in the details tooltip), you may want to investigate further as to why this is.

使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能(Improving Web App Performance With the Chrome DevTools Timeline and Profiles)

Back to records, whilst clicking on a record expands it, providing further records about the events it was composed of.

使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能(Improving Web App Performance With the Chrome DevTools Timeline and Profiles)

If you’re only interested in a specific section of data, click and drag within the Summary view to select a range to zoom into.

使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能(Improving Web App Performance With the Chrome DevTools Timeline and Profiles)

使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能(Improving Web App Performance With the Chrome DevTools Timeline and Profiles)

点击调用栈(Call Stack)或者气泡提示中的超链接,会跳转到相应的Javascript代码行。如果你发现一个浏览器时间花费了过多的时间(可以从详细的气泡提示中的‘Duration’知道),你也许会进一步去研究其原因。

使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能(Improving Web App Performance With the Chrome DevTools Timeline and Profiles)

回到记录列表,点击某个记录将其展开,可以看到更进一步的记录,描述了这个记录是由哪些事件组成的。

使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能(Improving Web App Performance With the Chrome DevTools Timeline and Profiles)

如果你只对某个特段的数据感兴趣,在Summary视图中通过点击和拖拽可以选择放大的区域。

使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能(Improving Web App Performance With the Chrome DevTools Timeline and Profiles)

Improving frame rate, animations and responsiveness

Frames mode gives you insight into the tasks Chrome had to perform to generate a single frame (update) of your application for presentation on the screen.

使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能(Improving Web App Performance With the Chrome DevTools Timeline and Profiles)

For a really smooth experience, you want some consistency with the frame rate you’re achieving – ideally want to be hitting 30-60fps and if you’re hitting much lower than this then your application is going to appear janky or jittery as frames are being missed. 

改善帧率、动画及响应性能

Chrome把你的应用展示到屏幕上需要生成每一幅帧,而帧模式 可以让你可以深入到每一帧生成的内部细节。

使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能(Improving Web App Performance With the Chrome DevTools Timeline and Profiles)

作为平滑的体验,你看到的帧率最好一直保持在30-60fps,如果太低了,你的应用就会因为丢帧看上去 混乱 或者抖动。

In Frame mode, the shaded vertical bars correspond to recalculating styles, compositing and so on. The transparent areas of each vertical bar correspond to idle time, at least, idle on the part of your page. For example, say your first frame takes 15ms to execute and the next takes 30ms. A common situation is that frames are synchronized to refresh rate and in this case, the second frame took slightly longer than 15ms to render. Here, frame 3 missed the "true" hardware frame and was rendered upon the next frame, hence, the length of the second frame was effectively doubled. 

使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能(Improving Web App Performance With the Chrome DevTools Timeline and Profiles)

在帧模式下,带阴影的竖条对应正在重计算样式、正在组合等等情况。每个竖条的透明区域对应于空闲时间,至少对于你的页面是空闲的。例如,假设第一帧用了15ms,下一帧用了30ms。通常每一帧都会按刷新率进行同步,这个例子中第二帧的渲染多花了15ms,导致第三帧错失了”真正“的硬件帧的时间,直接跳到下一帧的渲染。这样,第二帧的实际生效时间就加倍了。

使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能(Improving Web App Performance With the Chrome DevTools Timeline and Profiles)

As Andrey Kosyakov mention on the Chromium blog, even if your app doesn’t have a lot of animation in it, the idea of frames is useful as the browser has to perform a repeated sequence of actions while processing input events. When you leave enough time to process such events in a frame, it makes your app more responsive, meaning a better user experience.

使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能(Improving Web App Performance With the Chrome DevTools Timeline and Profiles)

When we target 60fps, we have a max of 16.66ms to do everything. That’s not a lot of time and so squeezing as much performance out of your animations as possible is important.

Again, by zooming into frames that aren’t hitting your target frame rate in the Summary view, you can discover what browser (and application behaviour) is causing you pain.

使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能(Improving Web App Performance With the Chrome DevTools Timeline and Profiles)

正如Andrey Kosyakov Chromium 的博客中提到的,即使你的程序没有很多动画,帧的概念也是有用的,因为浏览器在处理输入事件时会生成重复动作的序列。如果你在一帧中留有足够的时间处理这些事件,就会使你的程序看上去有更好的响应性,这意味着更好的用户体验。

使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能(Improving Web App Performance With the Chrome DevTools Timeline and Profiles)

如果我们的目标是60fps, 那么最多有 16.66ms 去做所有的事情。这个时间并不多,所以尽可能从动画中挤出时间来提高性能还是很重要的。

让我们再次放大Summary视图,看一下那些不满足帧率的帧,你就会发现浏览器(以及程序的行为)对此的影响了。

使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能(Improving Web App Performance With the Chrome DevTools Timeline and Profiles)

For example, we recently used Frames (and Events) view to discover that in one of our apps there were an excessive number of image decodes occurring because the browser was constantly having to rescale our images on the fly.

By instead using prescaled images of the dimensions we actually needed, we avoided this overhead and managed to hit 60fps, which was a lot more smooth for the end-user.

Related tip: You can enable a real-time FPS counter from within the DevTools by going to the Settings menu and enabling Show FPS meter.

This will display a meter as follows in the top right corner of your application, meaning you can get a visual feedback loop on when your frame rate is dropping below your desired target rates.

举个例子,最近我们使用帧视图(以及事件视图)发现我们的程序有过多的图像解码,这是因为浏览器需要不断的实时的调整图片的大小。

作为替代方案,为图片预先准备好所有需要的尺寸,我们就避免了这些开销,从而达到60fps的目标,对于最终用户来说更为平滑。

相关提示:通过在Settings菜单打开Show FPS meter选项,你可以在DevTool中打开实时的FPS计数器

这可以在程序的右上角显示一个仪表盘,像下面这样,这使得你可以在程序的帧率低于预期的时候看到直观的反馈。

Mobile

Note that on mobile, as Paul demonstrated in the Breakpoint Ep 4, animations and frame rate are very different than on desktop by several orders of magnitude. Achieving a higher frame-rate is difficult there and tools like the Timeline Frame mode (coupled with remote debugging) can help you diagnose what your bottlenecks are.

Long-paints are difficult

Diagnosing paints that take a while can be another challenge. If you find yourself wanting to know why the paint for a specific element is slow, set parts of the DOM todisplay:noneto remove it from Layout/Reflow andvisibility:hiddento remove from Paint. You can then measure it by taking a Timeline recording and noting paint times, then viewing the (experimental) paint rate in Force Repaint Mode (thanks to Paul for that tip!).

移动端

注意在移动端,如同Paul在Breakpoint Ep 4 演示 的那样,动画和帧率都与桌面上大不一样,可以差几个数量级。要达到更高的帧率要更困难一些,而像Timeline的帧模式这样的工具(通过 远程调试 连接)可以帮你发现瓶颈所在。

检查耗时的绘制,是困难的

要想检查一段时间内的绘制(paint)是另一个挑战。如果你打算知道为什么某个特定的元素绘制的比较慢,你可以把DOM树中的部分元素设置成display:none将它们从布局/内容树中移除,并且设置visibility:hidden不让它们绘制。然后你可以用Timeline进行录制以便测量,看一下绘制时间,在强制重绘模式中可以观察(实验性的)绘制率(感谢Paul提供的窍门)。

转载请注明:AspxHtml学习分享网 » 使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能(Improving Web App Performance With the Chrome DevTools Timeline and Profiles)

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址