This is the 19th day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021

In the toolbar of Chrom, there is a panel called Performance. After clicking on it and operating it, you will see a bunch of colorful charts, but what exactly is it

The Performance panel is Chrome’s performance analysis tool, which should be related to the page, so let’s start with the page performance direction

Page performance affected by what

I feel that the direction of page performance is related to: network condition, server, front-end rendering efficiency, client hardware, etc., and I’ll look at these directions in detail

network

The network is often a critical place for page performance. Problems with domain name resolution, switches, routers, and Internet service providers (ISPs) or slow response will result in bad experience

The server

Because we send HTTP requests, the request is ultimately handled by the server, and the performance of the page can be directly affected by the server handling it incorrectly, failing to respond, or responding too slowly

Front-end rendering efficiency

A process in which a browser parses static resources, such as HTML, CSS, and images, and presents them to users

After the user interacts with the page, the browser recalculates what needs to be rendered, and then redraws the page

These processing efficiencies are also important factors affecting performance

The user hardware

Computer hardware resources are consumed in the process of initiating network requests, parsing network responses, and page rendering. Therefore, the shortage of computer resources, especially CPU and GPU resources, will also affect page performance

The Chrome toolbar tools each have their own focus. The Network tool has detailed information about the pull order of resources, which focuses on analyzing the impact of the Network

The Performance tool focuses on the front-end rendering process. It has modules such as frame rate bar charts, CPU usage area charts, resource waterfall charts, and mainline flame charts, which are closely related to rendering and can be used to see the entire rendering phase clearly.

Do not tangle with these keywords, because the later will be detailed to everyone

Start performance analysis

First of all, the following link is a small demo found on the Internet, around which we will conduct performance analysis

Googlechrome. Making. IO/devtools – sa…

After opening demo, open your browser’s console

Generally, the CPU performance of the mobile terminal is much higher than that of the computer, so we chose the scenario with lower performance to perform the calculation

Simulate the CPU of a mobile device

  • Click the Performance TAB
  • Make sure Screenshots are selected
  • Click the Settings button, which contains Settings related to capturing performance metrics
  • For the CPU option, select 4x Slowdowns to make the CPU throttle 4 times slower than usual

Because each person’s computer performance has certain differences, so this demo can be customized

  • Continue clicking Add 10 until the blue block moves significantly slower than before
  • Click Optimize and the blue box should move faster and more smoothly
  • Click un-optimize and the blue box should move slower and more sluggish

Note: If you don’t see a significant difference between the optimized and non-optimized versions, try clicking Subtract 10 a few times and then try again

I’ll stop here and continue in the next article

And problems welcome criticism and correction oh ~