This is the second day of my participation in the August More text Challenge. For details, see:August is more challenging

Performance Optimization 2

Chapter 1 covered the process of getting from URL input to page display, and this section looks at how to detect the performance of a web page.

Web Performance Standards

This chapter mainly explains the following contents:

Performance measurement

Our focus on page performance mainly includes page rendering time and interaction smoothness. When the page rendering time is shorter and the interaction is smoother, we subjectively assume that the page will perform better.

Objectively, we need to detect performance from relevant indicators and make corresponding optimization according to the test results.

The Web Performance API, Performance, provides data support for the analysis of these metrics.

So where does Performance come from?

The Web Performance Working Group developed these standards. The definitions and instructions are provided in the documentation.

Status: Recommendation (REC) official release Proposed Recommendation (PR) Candidate Recommendation (CR) Candidate Recommendation (WD The earliest version of an editor's Draft may be subject to various changes, which are relatively variable. It is an unofficial activity, and it is Retired. Group notes are not recommendedCopy the code

High Resolution Time

The specification consists of three parts:

1. The Time Origin of the measured data is defined 2. High precision timestamp DOMHighResTimeStamp 3 is defined. Defines a Performance object, along with several properties and methods of the Performance object

Performance Timeline

The specification consists of three parts:

1. Add three methods to Performance

- getEntries()
- getEntriesByType()
- getEntriesByName()
Copy the code

Type and name can be found here

2. The PerformanceEntry object is defined

The PerformanceEntry object contains four properties: duration, entryType, name, and startTimeCopy the code

3. Defines the PerformanceObserver object

It is used to observe the performance timeline for notification when a new performance indicator is recorded, which is often used when collecting performance data. For example, in the following example, look at the performance data of type Resource and print it.

Resource Timing

This specification defines an API for accessing complete timing information about resources in the document, such as the start and end times of DNS, TCP, Request, and so on for requesting resources, which helps us gather load timelines, resource sizes, and resource types for static resources in the document.

Resource processing outbound

The specification defines three things:

1. DefinitionPerformanceResourceTimingobject

2. Add the following methods to the Performance object

• clearResourceTimings()
• setResourceTimingBufferSize()

3. Defines the Timing allow-Origin response header

Request for cross-domain resources, access to the object of PerformanceResourceTiming (time) of the attribute value, because the cross-domain restrictions, the browser will not provide the resources performance data to the user, the time value will be set to 0. If the server adds Timing- allow-Origin to the response header of the requested resource, the browser will expose the performance time value of the resource to the user. We can obtain performance data for all resources in the document by the following statement:

performance.getEntriesByType('resource');
Copy the code

Or specify resources:

performance.getEntriesByName('https://xxxxxx/img/logo_white.636ab47.png');
Copy the code

Navigation Timing

This standard defines a complete performance measure for document navigation, that is, the performance time of each phase of a document from the initiation of a request to the completion of loading.

Navigation Timing has two versions: 1.Navigation Timing Level 1 2

Navigation Timing Level 1

Added two attributes to performance, timing and navigation

1. The PerformanceTiming object is defined

Used to measure the page performance, we can pass through the window. The performance. The timing for the performance data of the page, the meaning of each field in the object returned can PerformanceTiming | MDN look up.

According to the event occurrence sequence, the performance data TimeLine is as follows:

2. PerformanceNavigation object was defined

Used to describe the load related operations, through the window. The performance. The navigation, the returned PerformanceNavigation object storage the two properties, they are said to trigger the cause of the page is loaded. These can be page redirects, forward and back buttons, or plain URL loading.

Related parameters can be found here: navigation

3. Define the window.performance property

Added performance properties to the Window object: Timing and navigation

Navigation Timing Level 2

Will replace Navigation Timing Level 1. The two properties performance. Timing and performance. Navigation defined in Navigation Timing Level 1 are deprecated.

1, defines the PerformanceNavigationTiming object

This object is used to measure the performance of the document. We can obtain the performance data of the document in the following ways. All Time values are measured from Origin Time.

window.performance.getEntriesByType("navigation");
Copy the code

The Processing Model has also been updated

2, define NavigationType enumeration value

NavigationType is an enumeration type with four values: Navigate, Reload, back_forward, and PRERender

Paint Timing

This specification defines an API to record performance measurements at key points during page loading, such as First Paint, First Contentful Paint.

This specification contains the following:

1. Defines the PerformancePaintTiming object

Used to describe performance metrics at key points during page loading, which can be viewed in the console with the following statement:

performance.getEntriesByType('paint');
Copy the code

The result is an array with each item of type PerformancePaintTiming, one for first-paint and the other for first-contentful paint.

2. Proposed some key time point definitions, such as First Paint, First Contentful Paint

First Paint, the time it takes to render the First pixel to the screen from the navigation to the browser, does not include the default background drawing, but does include non-default background drawing. This is the first critical moment when developers care about page loading — when the browser starts rendering the page. First Contentful Paint (FCP), when the browser renders the First piece of content from the DOM, gives the user the First feedback that the page is actually loaded. This is the first time users have started using page content. So now that you know what this specification defines, is it clear why the specification is called Paint Timing? This is because the specification defines an API to get performance data for Paint at critical points in time.

Performance indicators are covered in the next chapter.

User Timing

This specification defines an API that allows Web developers to measure performance.

1. Added several methods to the Performance object

- mark
- clearmark
- measure
- clearMeasures
Copy the code

The PerformanceMark is defined

The PerformanceMeasure object is defined

Server Timing

1. Defines the communication protocol with the Server: server-timing response header

The response header can be found at www.w3.org/TR/server-t… View the meaning of the response header

2. Defines the PerformanceServerTiming object, an interface that describes the performance metrics of the server

3, give added serverTiming PerformanceResourceTiming object attribute

Long Tasks API

When the user interacts with the page, both the application and the browser queue various events that the browser then executes, for example, the user agent schedules input events based on the user’s activity, and the application schedules callbacks for requestAnimationFrame and other callbacks. Once in the queue, these events are scheduled to be dequeued and executed one by one by the browser. However, some tasks may take a long time, and if that happens, the UI thread will be locked and all other tasks will be blocked. To the user, this is a page that is stuck and the browser is unable to respond to the user’s input, which is the main source of poor user experience on the Web today. This specification defines an API that can be used to detect the presence of these “Long tasks,” which monopolize the UI thread for extended periods of time and prevent other critical tasks, such as responding to user input, from being performed.

Long Tasks API

This specification contains the following:

1, defines the PerformanceLongTaskTiming object

Used to describe the Long Task information, the meaning of each field in object can be in Long | MDN Tasks API reference.

2, What is a Long Task

A Long Task is an event loop Task that exceeds 50ms.

Optimization strategy

Resource Hints – Load performance

This specification defines the rel attribute values for HTML elements, including DNS-prefetch, preconnect, prefetch, and prerender. We can use these resource prompts to have user agents help us preresolve DNS, prelink, preload resources, and preprocess resources to improve page performance.

There is currently only one version of this specification, which is still in the working draft stage.

Resource Hints

Here are four resource tips defined by this specification:

1, Resource Hints: DNS-prefetch (Resource Hints: DNS-prefetch)

<link rel="dns-prefetch" href="//example.com">
Copy the code

2, Resource Hints: preconnect

<link rel="preconnect" href="//example.com">
<link rel="preconnect" href="//cdn.example.com" crossorigin>

Copy the code

Resource Hints: prefetch: Hints

<link rel="prefetch" href="//example.com/next-page.html" as="document" crossorigin="use-credentials">
<link rel="prefetch" href="/library.js" as="script">
Copy the code

Resource Hints: prerender

Page Visibility – Saves resources

This specification provides an API for observing the visibility state of a page. For example, when the user minimizes a window or switches to another TAB, the API sends a VisibilityChange event to let listeners know that the page state has changed. We can detect the event and perform some action.

RequestIdleCallback API – Make full use of resources

Beacon – Data report

Address data reporting in asynchronous requests that occupy threads or miss offloads

window.addEventListener('unload', logData, false);

function logData() {
    navigator.sendBeacon("/log", analyticsData (url, data));
}
Copy the code