We use Chrome Dev Tools a lot for development and debugging, but we only use a little bit of it. Chrome Dev Tools is absolutely front-end performance optimization in performance analysis of a sharp tool, and this function because we usually also relatively little use, today is to use Chrome Dev Tools for page performance analysis skills to share with you. Hopefully, you’ll be more comfortable optimizing your own project performance

Panel and dismantling

The commonly used

  • Elements – Element panel: You can freely manipulate the DOM and CSS

  • Console – Console panel: Also known as the Console, used to print application output information and input code to be executed.

  • Sources – Source Panel: List of resources to use to view web applications and view and debug JS code.

  • Network-network panel: displays information about various resource requests on the page, including the resource name, status, protocol used (HTTP1 /http2), resource type, resource size, and resource timeline

Can be used for performance analysis

  • Performance – Performance panel: Displays the flame chart of Performance indicators on the page, including white screen time, FPS, resource loading timeline, and memory change curve

  • Memory – Memory panel: Records the Memory status of a page at a time. It is used to analyze Memory leaks

  • Layers – Displays the layering in the page

Performance analysis using Chrome Dev Tools

The preparatory work

  • Incognito mode opens Chrome to eliminate plug-ins and other factors that affect page performance.

  • Remove page caching

Understand performance modules

  1. Record over a period of time

  2. Restart the page and record the entire page loading process. More commonly used

  3. Clear all records that can be recorded at one time

  4. Upload performance data recorded on the page

  5. Download page performance recorded data

  6. You can select the performance record to be displayed for multiple recordings

  7. Whether to capture a screenshot of the page loading process

  8. Whether to record memory changes

  9. Garbage collection, click on a garbage collection

Experience page performance differences

Google performance test address

Googlechrome. Making. IO/devtools – sa…

You can choose to reduce performance by a factor of 4 or CPU performance by a factor of 6 to better simulate low devices

Perform performance analysis

Network Panel Analysis

Optimal point

  • In the case of more images, use HTTP2, multiplexing, speed up resource loading

  • Small images can be base42

Performance Panel Analysis

Record a page load for performance analysis

No hurry. We’ll take it one step at a time

The Performance panel has the following four panes:

  1. Control button.

  2. The overview. Advanced summary of page performance (FPS: frame rate, CPU:CPU usage, NET: network requests)

  3. Flame diagram (mainly in Main)

  4. Data statistics. Summarize data in the form of charts

Let’s look at some important charts

1. Fps

FPS: Refers to the number of frames per second on a page, which is the main performance metric used to analyze animations. FPS = 60. Excellent performance

The area highlighted in blue is the information recorded by the FPS

If you zoom in, an FPS is made up of two parts:

  • Red: means that the frame count has dropped to the point where it affects the user experience. Chrome has helped mark this

  • Green: This is the Fps index, the higher the height of all the green columns, the better the performance

Part of the FPS curve is marked red, indicating some render lag on the page

The screen snapshot area records the screen frame by frame to help observe the state of the page and analyze the first screen rendering speed. It also helps estimate how long the page loads white screen.

It was observed that the main cause of FPS drop was image loading. The overall render stutter lasts longer, but affects the first screen render time is shorter.

2. Cpu

Cpu resources This area indicates the type of event that consumes Cpu resources, and the colors represent the amount of time that the Cpu has spent processing various resources during that time period.

If a particular process is taking a lot of time, this can be a clue to a performance bottleneck.

3. Frames

You can view the FPS of a particular frame, hover to view the data, and click to view the detailed data and the view portrait of the key frame

  • 16.24ms is the time interval of a frame, that is, the interval between page refreshes

  • Duration: indicates that the current frame waits from 16.24ms and renders after 16.24ms+1.64s

  • FPS: 1000ms/16.24ms = 60.9 FPS, or about 61fps

4. NetWork

Each colored bar represents a resource. The longer the bar, the longer it takes to retrieve the resource. The light-colored part of each bar represents the wait time (from the time the resource is requested to the time the first byte is downloaded). The color representation: HTML files are blue, scripts are yellow, style sheets are purple, media files are green, and other resources are gray

Figure 5. Flames of fire

In the Main panel, you can analyze the time taken by specific functions

Skull pain. Let’s narrow down the time frame and zoom in

Main shows the flame diagram, which is a stack fire of function calls. The X-axis shows the time, the top one is where the event is triggered, and the line is the longest. The Y-axis shows the functions that are called, and the functions that are called in sequence get smaller as you go down (waterfall).

Different colors represent different event types. The following describes common event types

Parse HTML (blue) : Chrome parses HTML

Event Script (orange) : Javascript events (such as mousedown)

Layout (pink) : Style calculation and Layout, i.e. rearrangement

Recalculate Style (pink) : Style calculation and layout, i.e. rearrangement

Paint (green) : The composite layer is drawn into an area of the display

Composite (green) : Chrome’s rendering engine composes the image layers

When Task is selected in the fire chart, other information related to the event is displayed in the statistics area Summary: Statistical report that displays the elapsed time of each event phase. Bottom-up: Indicates the sequence of events consumed by each event. (self-time: the event itself takes time. Total-time: indicates the time from start to end of sub-events.) Call-tree: Call stack. If you select an Event in Main, you can see the Call stack of the entire Event (from the top to the bottom, instead of only the current Event). Event Log: Event Log. (There is an extra start time, which indicates how many milliseconds the event starts. Event description is displayed on the right.

The color of the Sumarry graph indicates:

Loading: Network communication and HTML parsing

Scripting: JavaScript execution

Rendering: Style calculation and layout, rearrangement

Painting: redrawn

System: Time taken by other events

Idle: indicates the Idle time

Identification problem: red Triangle

There are a lot of tasks in the panel, and if the Task takes a long time, it will have a red triangle in the upper right corner, which is chrome’s automatic help to identify the part that has a problem. Click on any task to see its specific information in the following statistics area

Common factors affecting performance

JavaScript computations, especially those that trigger a large number of visual changes, can degrade application performance. Don’t let poorly timed or long-running JavaScript interfere with user interaction

The problem

example

The solution

Large overhead input handlers affect responses or animations

Touch, visual scrolling

Let the browser handle touch and scroll, or as late as possible binding to monitor (see calendar.perfplanet.com/2013/the-ru…).

Poorly timed JavaScript programs affect responses, animation, and loading

The user scrolls the page after loading and animates it through setTimeout/setInterval

Developers.google.com/web/fundame… Use requestAnimationFrame instead of setTimeout or setInterval

Long-running JavaScript affects the response

Processing complex data

Processing complex data

Style changes are expensive, especially DOM changes that affect more than one element. As soon as the style is applied to the element, the browser must determine the impact on all related elements, recalculate the layout, and redraw

The following is where styles affect performance

Minimize the impact of Recalculate Style in development

Learning links

CSS Triggers: Learn which CSS properties trigger layout, redraw, or composition, respectively. These attributes have an impact on rendering performance

Avoid large, complex layouts

conclusion

I hope you learn to understand the above surface, can seize the real culprit affecting page performance in minutes!

Soul Torture: Is there an easier way to analyze performance?

Audits Tools to analyze page performance

Audits run through a series of rules that evaluate and analyze pages and ultimately produce an evaluation report.

Audits typically rate web pages in five different ways. After you select the options to evaluate, click on Run Audits and you get a report.

Well, it’s kind of sad. Let’s see what the report says

  • First Contentful Paint: The content is drawn for the First time.

  • Time to Interactive: the Time required for most network resources on a page to complete loading and for the CPU to remain idle for an extended period of Time. You can expect the CPU to be idle and ready to process user interactions in a timely manner.

  • Speed Index: The Speed Index is a page-loading performance indicator that shows you how quickly the content of the page is visibly filling. The lower the score, the better.

  • Total Blocking Time Cumulative Blocking Time. A smaller TBT indicates that the page can respond to user events more quickly.

  • Largest Contentful Paint: Maximum content rendering time, representing how long the main content of the current page will be displayed

  • Cumulative Layout Shift Indicates the Cumulative Layout change. The lower the CLS score is, the higher the page Layout stability is. Usually, the lower the CLS score is, the better the page stability is.

Performance indicator optimization, each of which can be expanded to see detailed explanation

  • Opportunities can be optimized

  1. Reduce JavaScript execution time

  2. Use images of appropriate size

  3. Preload the maximum drawing picture

  4. Delays block the loading of rendered resources

  5. Reduces the CSS execution time

  6. Using HTTP / 2

  7. Establish connections ahead of time

  • Diagnostics Diagnostics item manually

  • Passed audits the checks that are Passed

Other several are interested in you can go to know

Common Chrome debugging tips

Common commands and debugging

1. Shortcut command panel: Command + Shift + P

Control Panel => Command + Shift + P To call out the shortcut command panel, type the command you want to find in the bar or enter “? Number to view all available commands.

2. Hide a node

Select the node and press the keyboard H to display/hide the element directly, without manually typing the style. The effect is the same as visibility: hidden, which takes up the space of the box model

Control Panel => Elements => press H + to tap the icon of the element to expand

3. Expand all child nodes

When debugging DOM node elements, we need to expand and view each node. If we just click the child elements under the target element one by one to expand, it will take time. You can try the following shortcut ~

Control Panel => Elements => Press Option + to click the icon of the element to expand

4. Scroll elements to the view

When debugging the DOM element, we have focused on the relevant DOM structure, but the corresponding element is not displayed in the visual window, so we can quickly scroll it to the visual window.

Control Panel => Elements => Right-click the selected DOM node => Scroll into View

5. Preset devices

We don’t have that much equipment, or that extreme size of equipment, at the time of debugging. Well, everybody gets it. We can only use debugging tools to simulate. You can customize the required devices.

Control Panel => Setting icon => Devices => Add Custom Device…

6. Set the network status

We need to take into account the status of requests, prompts, and page displays on different networks. In addition to using Charles to simulate weak web, we can also use Chrome to customize web conditions without affecting other pages.

Control panel => Setting icon => Throttling => Add Custom Profile…

7. Capture a snapshot

Often used in general use of chat tools can be screenshots. The downside is that it’s not generic enough to support long graphs. You can do flexible screenshots with Chrome

Example Capture a full-screen snapshot

Control Panel => Command + Shift + P => Capture Full size screenshot

Capturing a local snapshot

Control Panel => Review elements => Command + Shift + P => Capture node screenshot

Capture a custom snapshot

Control Panel => Review elements => Command + Shift + P => Capture Area Screenshot

Capture the current screen snapshot

Control Panel => Review Elements => Command + Shift + P => Capture Screenshot

8. Customize Snippets

Save and run a section of JAVASCRIPT code in Chrome, used with direct js modification for debugging. Such as night mode debugging. Disadvantages: Refresh does not save (not a disadvantage, a feature)

Control panel – Sources Snippets

9.

Perfect solution to modify something after a refresh nothing embarrassing. There are many uses to explore

Control panel – Sources Overrides

10. Fancy the console

  1. State the print

  1. Print the table: console.table()

Suitable for printing arrays and objects

  1. Group console: console.group()

  1. Test execution efficiency: console.time()

  1. Print the object

Print not just variables, but objects. Surround variables with curly braces ({}). This has the advantage of printing not only the value of the variable, but also the variable name.

11. Preserve Log

When we debug the page, we often encounter the situation that the page jumps or refreshes. At this time, the printed output will be refreshed 😭, and the desired data cannot be seen. Click on the rightmost gear to see the Preserve Log option, which saves the last printed output