How to use Edge's performance analysis tools? Open the Developer Tools (F12 or Ctrl Shift I / Cmd Option I), switch to the Performance panel, click the Record button to perform the operation and stop generating a report. When interpreting, focus on the Summary, Flame chart, and Bottom-up areas to identify time-consuming tasks and functions. Optimization suggestions include reducing main thread load, avoiding re-painting, merging DOM operations, using throttling and anti-shake, lazy image loading, etc.
Edge's Performance Detector is not an independent tool, but a series of functions integrated into the Edge Developer Tools (F12 Tools), mainly used to analyze performance issues during web page loading and running. It can help you find problems such as page stuttering, slow loading, and excessive resources. Although there is no button called "Performance Detector", we can use the Performance panel in DevTools to achieve similar functionality.

Here are some practical suggestions to help you better use Edge's performance analysis tools.
How to open the Performance panel
To start analyzing page performance, first open the developer tools:

- Shortcut keys:
F12
orCtrl Shift I
(Windows)/Cmd Option I
(Mac) - Then click Performance in the top tab
In this panel, you can record various performance data during the page loading or interaction process, such as loading time, function call stack, rendering frame rate, etc.
How to record a performance analysis
In the Performance panel, click the circular recording button (like a video logo) in the upper left corner, and then perform the actions you want to test, such as refreshing the page, clicking a button, or scrolling the page.

After recording is completed, click the stop button again and you will see a detailed performance timeline.
Some key points to pay attention to:
- You can check the "Screenshots" option before recording, which will generate screenshots to facilitate viewing the changes of each frame of the page.
- It is more accurate to clear the cache and then test it to avoid the results of static resources being affected by the cache.
- If you only want to see JS execution, you can turn off the "Network" panel to save interference.
How to interpret performance reports
After recording is complete, you will see several main areas:
- Summary : Shows the task that takes the longest time on the main thread, and you can see which functions are executed for too long.
- Flame chart: Shows the timeline of each task. The wider the time it takes, the longer it takes.
- Bottom-up (bottom-up): Lists specific functions and their calling paths, suitable for finding specific bottlenecks.
If you find that a certain segment of JS takes up a lot of CPU time, you can click in to see which function caused the lag.
In addition, pay attention to whether there are Forced Synchronous Layouts or Long Tasks, which are key points in performance optimization.
Common optimization suggestions
Based on the results of performance analysis, you can take some common steps to improve performance:
- Reduce main thread work and move complex calculations into Web Worker
- Avoid frequent triggering of re-arrangement and re-painting, merge DOM operations
- Use throttle and debounce to handle high-frequency events such as scrolling and resize
- Lazy image loading, reducing initial loading pressure
- Prioritize loading of critical CSS and JS, delaying non-critical resources
For example, doing too much in a scrolling event will cause frame drops. You can use requestAnimationFrame
to optimize animation updates.
Basically all that is it. Although Edge's Performance panel looks complicated, as long as you master the basic processes and key indicators, you can quickly locate performance issues. Practice a few more times and you will find that it is actually quite intuitive.
The above is the detailed content of How to use the performance detector in Edge. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Microsoft Edge's drag-and-drop feature allows you to easily open links or text on web pages, which is both practical and time-saving. To use this feature, just drag and drop the link or text anywhere on the page. This article will show you how to enable or disable Super Drag and Drop mode in Microsoft Edge. What is Super Drag and Drop mode in Microsoft Edge? Microsoft Edge has introduced a new feature called "Super Drag and Drop" that allows users to simply drag and drop links to quickly open them in a new tab. Just drag and drop the link anywhere in the Edge browser window. Edge will automatically load the link in a new tab. In addition, users can also

What to do if edge pops up that Microsoft respects your privacy? Recently, some users have reported that the edge browser they use often pops up the message "Microsoft respects your privacy." Even if they click I accept, it will still appear next time they open the browser. So how do you close this annoying pop-up window? This problem should occur because the edge browser does not accept the cookie of the msn.cn website. The following editor will show you how to solve the problem that Microsoft respects your privacy pops up in edge. Try it and see if it helps. How to solve the problem that Microsoft respects your privacy when Microsoft respects your privacy in edge

When we use the Edge browser, sometimes incompatible software attempts to be loaded together, so what is going on? Let this site carefully introduce to users how to solve the problem of trying to load incompatible software with Edge. How to solve an incompatible software trying to load with Edge Solution 1: Search IE in the start menu and access it directly with IE. Solution 2: Note: Modifying the registry may cause system failure, so operate with caution. Modify registry parameters. 1. Enter regedit during operation. 2. Find the path\HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Micros

When you use the Edge browser to access web pages, have you ever encountered a prompt that your connection is not a dedicated connection, causing web browsing to fail? How is this going? Many friends don’t know how to deal with this problem. You can take a look at the following three solutions. Method 1 (simple and crude): In the edge browser, you can try to solve the problem of the website being inaccessible by entering the settings and turning off the security function, and then blocking location permissions in the website permissions. It is important to note that the effectiveness and duration of this approach may vary, and specific effects cannot be determined. After restarting your browser, you can try visiting the website to see if the issue is resolved. Method 2: Adjust the keyboard to English input

What should I do if the new tab page in Edge is blank? Edge browser is the browser that comes with the computer. Many users find that their new tab page is blank when using it. Let this site carefully introduce to users that the new tab page of Edge is blank. Let’s analyze the problem. Analysis of the problem that the Edge new tab page is blank 1. When we open the new version of the Microsoft edge browser, we find that the opened new tab page is blank, with the title and address bar in the upper right corner, or the page only displays the address bar and search box. , Microsoft icon, etc. 2. This may be because we have set "open new tab page" at startup, and we will modify it.

What should I do if I can't open the webpage even after edge repair and restart? Users can try to close all Edge windows or restart the computer, clear the cache, etc. Let the editor carefully introduce the specific operation methods for users. Analysis of the problem that the webpage cannot be opened even after edge repair and restart 1. Close all Edge windows: Make sure you close all running Microsoft Edge windows, and then try to open the browser again. 2. Restart your computer: Sometimes, the problem may be related to other aspects of the operating system. Try restarting your computer and opening Edge again. 3. Clear browser cache and data: After opening Edge

Microsoft has added a new feature to the Edge browser on Windows 11/10 in the latest stable version, namely "Mobile Upload". Users can now upload files directly from their phones through the Edge browser, and the feature works on almost all websites without file format restrictions. The introduction of this feature provides users with a more convenient upload method, making it more efficient to manage and share files when using the Edge browser. How to use the "Mobile Upload" feature: Open the Edge browser, click the "Upload" option on any website, and select "Upload from mobile" in the file picker. Use your phone camera to scan the QR code. Click "Confirm" to pair the device in the Edge browser. Click on the "Upload File" option

After updating the Edge browser, many users found that there were a lot of advertisements on the interface. For example, at the bottom of the new tab page, there were links to multiple websites and the word advertisements were marked, which looked very annoying. Is there any way to turn off personalized ads in Edge browser? The editor has searched many methods on the Internet, and I will share with you a little trick to turn off ads. How to turn off ads in the new version of Edge? 1. Open the Edge browser. 2. Click [???] in the upper right corner. 3. Click [Settings]. 4. Click [Privacy, Search and Services]. 5. Turn off the switch on the right side of "Personalize your web experience" to turn off the personalization pushed by Microsoft.
