dns-prefetch

Look at other sites often see code like this < link rel = “DNS – prefetch” href = “https://fonts.googleapis.com/” >, the DNS – prefetch what’s the use?

Dns-prefetch is an attempt to resolve a domain name before requesting a resource. It is only valid for DNS lookups across domains. Dns-prefetch helps developers mask DNS resolution delays

When a browser requests resources from a (third-party) server, the cross-domain name must be resolved to an IP address before the browser can make the request. This process is called DNS resolution. DNS caching can help reduce this delay, while DNS resolution can cause requests to add significant delays. For sites that have opened connections to many third parties, this delay can significantly reduce load performance. Dns-prefetch helps developers mask DNS resolution delays

Defer and async properties for the script tag

When the browser encounters a Script tag while loading THE HTML, it waits for the script script to complete execution before loading the following DOM elements, which blocks the page. Defer and async properties solve this problem

Here are three ways to load a page without blocking it

Defer and Async also have dynamic create scripts

Next, the life cycle of an HTML page

DOMContentLoaded, load, beforeunload, unload

beforeunload

window.onbeforeunload = function (e) { e = e || window.event; // Compatible with IE8 and Firefox 4 prior to if (e) {e.turnValue = 'Close prompt '; } // Chrome, Safari, Firefox 4+, Opera 12+, IE 9+ return 'close prompt '; };Copy the code

unload

Suppose we collect data about page usage: mouse clicks, scrolling, areas of the page viewed, etc. We want to use the Unload event to save data to our server when the user is leaving

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

    function logData() {
        navigator.sendBeacon("/log", analyticsData);
    }

Copy the code

The use of the navigator. SendBeacon

Use to asynchronously transfer small amounts of data to a Web server over HTTP.

To meet the needs of statistical and diagnostic code, this code typically tries to send data to a Web server before unloading a document. Sending data too early may result in missed data collection opportunities. To solve this problem, statistical and diagnostic code typically initiates a synchronous XMLHttpRequest in the Unload or beforeUnload (EN-US) event handler to send the data. Synchronous XMLHttpRequest forces the user agent to delay unloading the document and makes the next navigation appear later. The next page can do nothing about this poor load performance.

But the sendBeacon() method will allow the user agent to asynchronously send data to the server when the opportunity presents itself, without delaying the page unload or affecting the load performance of the next navigation. This solves all the problems of submitting analysis data: the data is reliable, the transfer is asynchronous, and the next page load is not affected

  1. Requests are sent in POST mode.
  2. We can send not only strings, but also forms and other forms of data
  3. The data size is limited to 64kb.

# reference

Useful. Javascript. The info/onload – run…

Useful. Javascript. The info/script – asyn…