The use of the timeline tool for chrome rendering analytics

Posted on June 27, 2014 by Admin | Leave A reply Overview

This tool is really powerful, and the Timeline toolbar provides an overview of the time spent loading your web app, including handling DOM events, page layout rendering, or drawing elements to the screen. Timeline can monitor Web pages through events, frames, and real-time memory usage in 3 ways, and with this data we can easily find the place where there are problems in the page.

Timeline Panel

Open the Chrome developer tool and switch to the Timeline tab with the following interface:

A lot of features, very complex is not, the corresponding e-ask bad classmate, really is impossible, fortunately there are translation tools, the following we step-by-step to uncover the mysterious veil of this tool.

It is highly recommended to use this tool in browser incognito mode and disable all extraneous plugins, as these plugins will affect the results of the test.

Tool by default is not open record, if you want to analyze the page, click the Circular Record button, the button turns red can start to record the various events of the page, this time can do a variety of operations on the page, Timeline tool will be detailed record of various events. It is recommended not to record too long, too many will increase the difficulty of analysis.

Properties of the color

The timeline tool uses 4 colors to represent different categories of events:

Blue: Load;
Yellow: script;
Purple: Rendering;
Green: Drawing

Filter

The filter panel can filter the different types of events and spend time, very useful:

Event mode

In this mode, the summary view (at the top of the timeline) shows a number of horizontal fences, representing the network and HTML parsing (blue), JavaScript (yellow), rendering (purple), and drawing (green) events in the page, respectively. Redrawing is a browser event that is called in response to visual changes such as window size changes or scrolling.

We can select the range of records to view at the top gray time node where it is dragged, such as:

In the details panel, you can view the time overhead for various types of events within that record range:

other means that the time spent on other events, idle indicates the free time , or you can view the time cost of a single record in the details panel, as follows:

Noun Explanation:

Send Request	Send Request	Evaluate script	Evaluation script	Parse HTML	Parsing HTML	Recalculate style	Recalculate display styles
Layout	Calculate layout	Paint Setup	Draw settings "prepare to draw"	Paint	Draw	Composite layers	Composite Layer
Timer fired	Trigger Timer	Function call	Function call	Receive data	Receive data	Receive response	Receive response
Finish loading	End Load	GC Event	Browser garbage Collection	Pevaluate Script	Evaluation script	Rasterize	Rasterization

Frame mode

Frame mode gives us a deep understanding of the rendering performance of the page, and "frame" represents the work that the browser must do to render content to a single frame, such as running JavaScript, handling events, updating the DOM, and changing the style, layout, and drawing.

Most of the current display of the refresh rate is 60Hz, then our page can be drawn at a frequency of 60 frames per second is the best, because the software frame and hardware refresh frequency consistent, the page can give a very smooth feeling, otherwise you will feel very card, so we have about 16.6ms (1000/ 60) to complete the rendering of each frame, which is what many people call "16.6ms" Optimization .

The gray area is a bit difficult to understand, you can understand is the browser internal C + + some work, this part may and the front-end JS and rendering does not matter. "Chen Zisun"

Select a frame range to view some data for frames within this range, as follows:

Memory mode

The memory view displays the memory used by your page over time through a chart, and you can view the memory usage for each time period and identify performance issues.

Conclusion

PS: This article from Huihuixiao published in the Department blog content, feel very valuable so reproduced out, in this thank Huihui hard pay!

It is helpful to analyze the page's performance bottleneck by timeline to observe the change of the page rendering. Timeline is a very good tool, next time will explain the use of "Rendering", through Timeline + Rendering Basic can analyze the rendering performance of the page. This is very useful on the mobile side.

Reference documents

Https://developers.google.com/chrome-developer-tools/docs/timeline

Http://www.qingdou.me/3719.html

Http://www.w3cfuns.com/article-1248-1.html

Posted in Web front-end technology. Tagged Chrome, rendering optimized.

The use of the timeline tool for chrome rendering analytics