So we talked about how to rollup code, how to get the data, so in this video, we’re going to talk about what data is used for, right

Previously on:

  • Performance analysis (I) Foreplay: package a JS-SDK with rollup
  • Performance analysis (2) The fun begins: Where the data comes from

Setting standards

To return to our theme, performance analysis, both analysis, then there must be split standards, analysis is not subjective I think, I think, more not I want to I think.

Since we set standards, we don’t just think about it. To formulate scientifically, there must be theoretical basis, so I checked a lot of official materials.

Noun explanation

If you don’t know where these terms come from, can I give you a portalPerformance analysis (2) The fun begins: Where the data comes from

domInteractive

DomInteractive is the time before the user agent sets the current document ready to interactive as follows:

  • The browser has parsed all the HTML, and the DOM build is complete
  • The browser starts processing page face resources

This is often referred to as page interactivity time

domContentLoaded

DomContentLoaded is the key point where both DOM’s are ready and there are no stylesheets preventing JavaScript from executing

  • This event is usually flagged when both DOM and CSSOM are ready
  • Means you can now build the render tree
  • If there is no parser that blocks JavaScript, DOMContentLoaded will fire immediately after domInteractive

This is often referred to as DOM ready time, and domContentLoaded is usually executed immediately after domInteractive

domComplete

DomComplete is the time before the user agent sets the current document ready to done

  • It simply means that the page and all its child resources are ready
  • All processing is done, all resources (images, etc.) on the page are downloaded, and the chrome loop stops

This is often referred to as DOM fully ready time

New noun formulation

Bad time

Here tohttps://juejin.im/timeline/followingNuggets focus page screenshot analysis

FAST 3G Status FAST 3G status of the FAST

That’s what the page was in about 4000ms ago, so how do you get 4000ms?

There’s a lot of controversy here, and a lot of people will define it differently. Here are three options:

  1. By the end of thedomInteractive
  2. By the end of thedomContentLoadedEventEnd
  3. By the end of theperformance.getEntries()In the{ name: 'first-contentful-paint' }The time of

Let’s start with the third, and the third is what the performanceAPI gives us, which is the time that Chrome thinks it’s at a valid content rendering time, which is the time that a portion of the page has been rendered.

The first one is similar to the second one. I personally recommend using domInteractive as the white screen time.

The browser has parsed all the HTML, and the DOM build is complete

So at this point, the document is over, the solution is a resource problem, if our page does not contain any external resources, then the page is going to start rendering immediately, so this point in time, is exactly the point in time for the white screen edge.

Of course, you can also think of first-Contentful-paint as the end of the white screen, since this is the time point Chrome proposes. To be clear, Chrome doesn’t think this is the end of white screen time, and First-paint does too, but as you can see from the picture, it’s totally wrong.

DOM full ready time

This is the domComplete, but I won’t go into details.

Second open rate

Now that we have defined the white screen time, we can set the first standard based on the white screen time — the second opening rate

White screen time in 1s — second open rate

What is the significance of this statistic? This is called a metric, and in general, performance is described as objectively as possible.

“Why don’t you take a survey and ask people what they think of MarkDown as a document editor?”

That’s a very subjective question, what would people do in this situation? First, we need to develop some criteria:

  • Do you think Markdown is more convenient for editing documents than Using Word?
    • Very/occasionally/poorly/resistant
  • Do you think Markdown supports all the formats you need when editing documents?
    • Very/occasionally/poorly/resistant
  • .

We try to do this by describing subjective problems as objectively as possible, and objective descriptions, ideally, are based on numbers

Going off topic, getting back to our topic, so we need to try to set objective criteria, and the rate of opening per second is one of them.

95 value (or N value, N ∈ [0, 100])

The 95 value refers to the 95th percentile of all data, which is usually taken as a baseline. For example, 95% of the screen time is 100ms, indicating that 95% of all users can already complete the screen within 100ms. This number is concrete and real. We can not take care of all users, network environment/special circumstances will lead to junk data in your data, so how much coverage do we need?

Initially, we can lower the bar. For example, we can start at 80 and work our way up to 85,90,95, or even 99. If you reach 99, your page is already great!

Drawing a graph

So far we’ve got several criteria and more criteria. I look forward to your reply in the comments.

Hang time | DOM completely ready time

Single data analysis

Through the reported data, we can reduce the dimension of storage every day, and finally in the form of 95 values.

Total User Volume Analysis

We can categorize the scope by user click access.

Second open rate

We can track the data from day to day and form a curve, which shows more variation.

This summary

In this installment we’ve covered what some of the terms mean and how some of the standards are developed, and you’ve learned a little bit about performance analysis.

Next up

In the next installment (or several later installments) I’ll go into more detail:

  1. Which aspects can be optimized to improve the above indicators
  2. How to track and optimize business processes in a business environment
  3. [Temporarily confidential]

I am iHAP technology black hole, welcome to like and reward, also please pay attention to our public account, IHAP technology black hole.

reference

varvy.com/performance