Web page Performance detection – Performance

In the last article, we talked about Performance monitoring in Chrome, but most of the time, we want to collect data from the client actively, and the browser debugging tool is not enough.

The window.performance object is recommended.

What is Performance

Allows Web pages to access certain functions to measure the performance of Web pages and Web applications, including Navigation Timing API and high-resolution temporal data.

Source: the MDN

Performance objects are essentially performance monitoring objects, with almost all of the performance parameter monitoring required by the common front-end built in.

Note: All apis for the Performance object are read-only.

Such as:

• To a specific time from the time you enter the address
• Parsing the DOM tree takes time
• Bad time
• Domready time
• Onload time
• Redirection Time
• Request Request Time

There are:

• All object statistics for the current page
• User behavior information

Ii. Compatibility with Performance

Performance’s monitor front end performance has been rolled out to make almost all browsers comfortable. (except Internet Explorer 9 below) and all browsers are doing their best to be backward compatible.

Don’t be blindly optimistic:

1. The return result of the performance built-in method varies with kernel browsers. For example, when obtaining a list of all HTTP requests, Firefox returns failed and successful requests, while Chrome returns only successful requests.

2. Many of performance’s built-in apis are browser-based implementations and therefore limited to mobile or client applications. (getEntries(), etc.)

Performance API

There are many apis for Performance, but a few are particularly useful.

1. Performance. Now () method

The performance. Now () returns the performance. NavigationStart to the current number of milliseconds. Performance. NavigationStart is below will be introduced to the measurement point can be said to be the browser to access the first time.

Two points worth noting:

• The initial measurement point is the moment when the browser accesses the initial measurement point, or is understood as the moment when you enter the URL in the address bar and press Enter.
• The return value is the number of milliseconds, but with the exact number of decimal places.

Test for loop execution time (ms) with performing.now ()

    var st = performance.now();
    for (var o = 0; o < 10000; o ++)  console.log(o)
    var end = performance.now();

    console.log(`fortime${end - st}`); // forTime is 1155.9950000373647Copy the code

2. Performance. Navigation attributes

Performance. Navigation records user behavior information and has only two properties.

console.log(performance.navigation);
// PerformanceNavigation {type: 1, redirectCount: 0}
Copy the code

• Type: indicates the loading source of the web page. There are four possible cases

  • 0: web pages are loaded by clicking links, entering address bars, submitting forms, and script operations, which is equivalent to a constant
  • 1: The page is loaded via the reload button or the location.reload() method
  • 2: The page is loaded through the “forward” or “back” buttons
  • 255: Loads from any other source

• RedirectCount: indicates the number of redirects to the current page.

3. Performance. Timing object

As one of the most important properties of Performance, Timing contains almost all time nodes. (1) attached

The common time point of collation is calculated as follows: Copy and paste directly.

window.onload = function() {
  var timing  = performance.timing;
  console.log('New page preparation time:' + timing.fetchStart - timing.navigationStart);
  console.log('Redirect Redirect time:' + timing.redirectEnd  - timing.redirectStart);
  console.log('Appcache time: ' + timing.domainLookupStart  - timing.fetchStart);
  console.log('Document Time before unload:' + timing.unloadEventEnd - timing.unloadEventStart);
  console.log('DNS query time: ' + timing.domainLookupEnd - timing.domainLookupStart);
  console.log('TCP connection time: ' + timing.connectEnd - timing.connectStart);
  console.log('Request Request time:' + timing.responseEnd - timing.requestStart);
  console.log('White screen Time:' + timing.responseStart - timing.navigationStart);
  console.log('Request completed until DOM load:' + timing.domInteractive - timing.responseEnd);
  console.log('Dom tree interpretation time:' + timing.domComplete - timing.domInteractive);
  console.log('Total time from start to load:' + timing.loadEventEnd - timing.navigationStart);
}
Copy the code

One important thing to note: the main reason for executing in window.onload is to get most of the Timing attributes after rendering, and can also be executed in a timer.

4. Performance. Mark (markName) method

Marked at custom time points, corresponding to peformance.clearmarks (markName)/performance.clearmarks (); The actual compatibility is not ideal… (Or maybe I’m using it wrong)

5. Performance. The memory properties

Performance. Memory Displays the current memory usage.

console.log(performance.memory);
/* MemoryInfo {
  totalJSHeapSize: 11735319,
  usedJSHeapSize: 9259919,
  jsHeapSizeLimit: 2197815296
} */
Copy the code

• UsedJSHeapSize indicates the memory occupied by JS objects (including objects in the V8 engine)
• TotalJSHeapSize Specifies the available memory
• JsHeapSizeLimit: Indicates the memory size limit

In general, usedJSHeapSize cannot be greater than totalJSHeapSize; if it is, there may be a memory leak.

6. The performance. However, () method

When the browser fetches a web page, it makes an HTTP request for each object in the page (script files, style sheets, image files, and so on). The Performance. GetEntries method returns an array of Performanceentries, time statistics for those requests, and as many members as there are requests.

Name: resource name, which is the absolute path of the resource or customized by calling mark method startTime: startTime duration: load time entryType: resource type. Object structures in arrays vary depending on the entryType. See initiatorType below: Who initiated the request, see below

EntryType value:

Also see: MDN

InitiatorType value:

2. The first item of the array returned by this method is the HTML page information

How to convey the message of Performance

1. sendBeaconmethods
2. dynamic<img>The label
3. web wroker

That’s all for later…

Reference:

1. Developer.mozilla.org/zh-CN/docs/…
2. Developer.mozilla.org/en-US/docs/…
3. Javascript.ruanyifeng.com/bom/perform…
4. www.cnblogs.com/bldxh/p/685…

Add 1: