Front-end performance optimization can be achieved through Chrome DevTools. Use the Performance panel to record runtime performance, view main thread activities, FPS, network requests and memory usage; identify and reduce long tasks, split large functions, use Web Worker, and delay loading of non-critical logic; reduce unnecessary rendering and rearrangement, batch update styles, use transform and opacity animations, and use virtual scrolling reasonably; analyze loading performance, focus on FCP, LCP, and CLS metrics, compress pictures, enable cache, use lazy loading and preload/prefetch.

Front-end performance optimization seems complicated, but in fact, many times you only need to use Chrome DevTools to discover key problems. It not only provides an intuitive performance panel, but also helps you locate bottlenecks, analyze loading order, and view resource consumption. The following key points are the most practical parts in daily debugging.

Use Performance panel to record runtime performance

Open DevTools, switch to the Performance tab, click the Record button (a circle) in the upper left corner, then operate the page, and finally click to stop recording once again. A detailed performance report will be generated.

In this report, you can see:

• Main thread activity : JavaScript execution, rendering, style calculation, etc. time-consuming.
• FPS indicator : Is the frame rate stable and whether there are any frame drops.
• Network request : Timeline and time-consuming to load resources.
• Memory usage : Whether there is a memory leak or excessive consumption.

The key is to pay attention to the flame diagram under "Summary" , which can clearly show the execution order and time-consuming of each task. If you see that a certain segment of JS has a particularly long execution time, it may be the optimization point.

Identify and reduce long tasks (Long Tasks)

Long tasks refer to tasks whose main thread is blocked for more than 50ms. This type of task will directly affect the user's interactive experience, such as clicking the button without response, page stuttering, etc.

In the Performance panel, you can see which tasks are "long tasks" and they are usually marked with a red icon. Clicking on these tasks can further view the call stack and the specific executed functions.

Common optimization suggestions include:

• Split large functions : Split time-consuming synchronization operations into multiple small tasks, and delay execution with setTimeout or requestIdleCallback .
• Using Web Worker : Move compute-intensive tasks to the Worker thread to avoid blocking the main thread.
• Lazy loading non-critical logic : For example, some statistical scripts and non-first-screen functions can be delayed.

Reduce unnecessary rendering and reordering

The poor rendering performance of pages is often due to frequent layouts and redrawings. In the "Timings" or "Layout" section of the Performance panel, you can see the detailed process of page rendering.

If you find that the page scrolls or interacts frequently, check whether the following problems are:

• Modify DOM style in loop
• No requestAnimationFrame is used
• Inefficient CSS selectors (such as * , attribute selectors, etc.)

Optimization suggestions include:

• Batch update styles to avoid multiple modifications to DOM in loops
• Use transform and opacity to achieve animation effects to avoid posting changes
• Use Virtual Scrolling to handle long lists reasonably

Analyze loading performance and optimize resource loading

In the Network panel, you can see the loading timeline for each resource. Click the "Load" timeline below the "Performance" panel to also jump to the corresponding Network panel to view loading details.

Focus on the following indicators:

• FCP (First Contentful Paint) : First Contentful Paint time
• LCP (Largest Contentful Paint) : Maximum content drawing time
• CLS (Cumulative Layout Shift) : Layout Offset Score

Practical tips for optimizing resource loading include:

• Compress images, use WebP format
• Enable browser caching policy
• Load non-first-screen images and components using Lazy Load
• Use preload and prefetch rationally

Basically that's it. Although Chrome DevTools' performance analysis function is powerful, the key is to understand the meaning of various indicators and be able to make adjustments based on actual scenarios. Front-end performance optimization is not something that can be achieved overnight, but as long as you master these tools and ideas, you can quickly locate the problem.

The above is the detailed content of Frontend Performance Profiling with Chrome DevTools. For more information, please follow other related articles on the PHP Chinese website!