This post first appeared on my personal blog: teobler.com

Performance

Performance API

Sometimes we might want to test how much time a user takes to perform an action, but the average person does this:

const start = new Date().getTime();

// do your work

const end = new Date().getTime();
console.log(end - start); Copy the code

Using the Performance API, we can do this:

performance.mark("start");

// do your work

performance.mark("end");
performance.measure("your work name"."start"."end");  console.log(performance.getEntriesByType("measure")); Copy the code

We can then see this console information in the console

image-20200522145519948

Also in Chrome’s Performance TAB, if you record accordingly, a visual chart is generated under the User Timing heading

image-20200522145610966

Networking

The network panel

First of all, let’s introduce the panel:

image-20200522145644585
  • The section with milliseconds in the middle is a waterfall stream that shows how long each resource on the page took to load, with different colors marking the different loading stages
  • The table below details the information for each resource
    • The first column is the name of the resource
    • The second column is the load status of the resource, which is the status code of the network request
    • The third column is the type, which identifies the resource as Document/stylesheet/script…
    • The fourth column is the caller of the resource, where index refers to the resource that was called in index.html. Place your mouse over a resource and hold down Shift. Devtool identifies the caller of the resource in green, and identifies other resources that are called by the resource in red
    • The fifth column is the size, but notice that there are two sizes, the first is the actual size of the resource, and the second is the compressed size of the resource. If the resource comes from cache, cache is displayed here
    • The sixth column shows the time it took to load the resource, again before and after compression
    • The last column shows the detailed loading process for the resource

There are different colors in the last column, which represent different meanings:

  • White – The resource is in the queue, which usually indicates:
    • This resource is delayed by the rendering engine to make way for more important resources (such as styles and scripts), and usually the rendering of images is delayed
    • The port is in queue. Procedure
    • The browser’s TCP connections are full, so in the queue (in HTTP1 the browser can only make 6 connections at a time)
    • The time spent creating the disk cache is also marked as queue waiting
  • Gray – blocked:
    • Your request hasn’t been sent yet, either because of proxy lookup or because the queue is blocked for unknown reasons
    • The time spent connecting to the proxy server
  • Dark green – DNS lookup: Usually slightly longer when you access a domain you have never visited before because there is no cache
  • Orange – Connection initialization/Connection in progress: The time it takes to establish a connection, such as three handshakes/four waves for a TCP connection
  • Dark orange – SSL connection being established
  • Green – request has been sent/is sending/wait: this paragraph of time is a request for an instant to we receive to the clearance between the first byte, if unusual this time is long, usually our server network configuration or server itself has a problem, such as a SQL query is slow, so green this time will be very long
  • Blue – Resource download: Indicates the time between the start of the resource download and the completion of the download

The instance

Let’s take a look at a few examples of what these colors actually do:

image-20200522145708160

This image is obviously a huge download

image-20200522145721320

There might be something wrong with the back end of this picture

image-20200522145734992

The total time in this graph is not long, but it can be seen that all kinds of time is quite long. From the time of DNS search, it may be the first time to access a new domain name, resulting in a long time for all connections

image-20200522145750029

This graph shows that you are downloading too many resources at once, resulting in long queue waiting times

screenshots

In the network panel top there is a camera icon, click on the refresh the page after devtool would record in the process of loading web pages every redraw time point and screenshot, you can see the whole page load process, you can use this function to test your site if under the condition of the network environment more bad how to load, Is the user experience friendly and so on.

After the screenshot is taken you can double click on an image to zoom in and use the left and right arrows to see how your page is loading at different times.

You can also use this feature to improve minor performance issues such as how to load too many images. For example, when you load a large resource, if you block the loading of all other resources, can you consider delaying the loading of this resource? Otherwise, users will not be able to see the data on the web page.

Auditing

Auditing can be used to evaluate issues such as load time, SEO, user experience, etc.

In the Auditing panel, Google integrates Lighthouse, a tool developed by Google specifically for analyzing web issues (SEO, performance, best practices, etc.). It’s very simple to use. Open the Audit panel, go to the web page you want to test, check what you want to test, Click on the Generate Report button, and over time, Chrome will perform a series of analytics and ratings for your site, as well as suggest solutions to any problems with your site.

image-20200522145802055

At the top of the report, you can see the overall situation of the report. After clicking a score, you can jump to the corresponding section. Let’s take Performance as an example

image-20200522145813872

Click on the right button to get more information. Then click On Learn More to see some suggestions from Google. In general, this panel has a good effect on improving our website experience. You can use this tool to become more familiar with your site and see what can be improved and what is working well.

There is a similar site called Sonarwhal, which is similar to audit in DevTool

Node.js Profiling

When starting node Server, add –inspect to the command line, and you’ll see the node logo in The Console of Chrome. This will open devTool for Node, which you can do from Sources. In addition, there is a profile page, select the corresponding server and click the Start button, refresh the corresponding page, after the refresh and then click stop, Chrome will show you what your server did in the last refresh:

image-20200522145826064

The horizontal axis is the time and the vertical axis is the server side call stack for this page refresh. So what does this thing do? Profile is designed to provide developers with a visual view of their Node server calls. If a problem occurs, they can immediately see that a call is taking a long time, so that they can locate the code and see if the related call has an unexpected error and fix it in time. Clicking on the corresponding function in this profile will direct you to the corresponding source code.

If you like my article, please give me a thumbs up and follow my official account

This article is formatted using MDNICE