Summary of various methods used in web standards to improve the performance of Web applications

When it comes to performance improvements in Web applications, developers may think of performance improvements based on a variety of existing technologies, such as JavaScript and DOM access. Recently, various performance improvement methods have been aggregated into a web standard.

This article provides a general introduction to the various Web application performance improvement methods contained in web standards.

1: Pre-read resources

By specifying the URL in the link tag, the next most likely Web page or resource in the page to read is pre-read. For example, for the "next" Page in the wizard page, the page loading performance can be greatly improved by reading pages or resource files such as the core files in the large-size JavaScript framework used in the main screen of the login page.

The techniques that you can use to implement pre-fetching are as follows:

• PreRender: Reads the entire page in advance.
• Prefetch: Pre-reading a single resource such as a JS file or an img file.
• Dns-prefetch: Enables pre-parsing of DNS.

Sample code

<!--pre-read the entire page--><link rel= "PreRender" href= "/?page=2"/><!--pre-read large size resource file--><link rel= "prefetch "Href=" https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js "/><!--DNS parsing in advance-->< Link rel= "Dns-prefetch" href= "http://example.com/"/>

Due to the fact that these technologies have been used in various smart devices, such as Android and Windows 8.1 outside of the iphone, are ignored in unsupported browsers and can significantly improve performance, it is expected to be widely used in 2014.

2. Control the reading order of resources

Resource-priorities (The priority reading order for resources) is the Web standard that specifies its priority reading order for resources that need to be loaded, such as CSS files and img files. When displaying Web pages, the current method is to defer reading of resources that cannot be displayed immediately on the page. In pages with more images, this approach does improve the initial display performance of the page. However, it is difficult to see the effectiveness of this method in a page with few images and is not conducive to debugging.

Currently, although the specified method of reading order for a resource is in the working draft state, some feasible methods have been built into the Chrome browser and IE browser (only support Lazyload).

• Lazyload: Read after delay of other resources
• Postpone: Starts reading after the page is fully displayed

Example 1: Specified in the element attribute

Example 2: specified in CSS style code

Img.hoge {resource-priorities:lazy-load;} Img.fuga {resource-priorities:postpone;}

Example 3: Specified in JavaScript script code

var img = new Image (); Img.setattribute (' lazyload '); img.src = "Hoge.png";

Due to the limited use of these technologies, it is recommended to use the Jquery.lazyload method if you want to postpone the display for elements such as IMG. For scripting code, it is recommended to use the defer attribute in HTML 5 (see the author's book, "HTML 5 and CSS 3 authoritative guide").

Using the resource cache

Application caching, a standard for controlling caching of Web page resources, can effectively reduce server-side and client traffic, improving page performance (see the author's authoritative guide to HTML 5 and CSS 3).

If the application cache cannot be used for reasons such as a browser, you can use the caching features that the browser has long supported. You can control the cache by specifying the keyword in the HTTP header. The keywords that can be used in the HTTP header are as follows.

• Expires: Specify cache Expiration
• Cache-control: Controlling client-side caching capabilities
• ETag: Determine if the last client request was modified on the server side

Determine the activation status of a Web page

By judging the activation state of a Web page, you can decide whether or not to perform some kind of action. The browser's label detects if the page is inactive, stops polling requests to the server, reduces background processing, and reduces hardware resource consumption, such as CPU or network, to improve performance.

Page Visibility API is the May 2013 1th Edition, October 2nd edition of the Web recommendation standard, starting from IE 10, at the same time be used in Chrome and Firefox and other mainstream browser in the high-availability of the Internet standards. The API can be used to determine the activation status of the page (see the author's "HTML 5 and CSS 3 authoritative guide" book).

Sample code

Document.addeventlistener (' Visibilitychange ', function () {    if (Document.hidden) {        //stop polling    }     else {        //Continue polling    }}, False);

Optimized processing after testing physical properties and loading times

There are already several JavaScript APIs that are used to detect page performance, as shown below.

• Performance Timeline
• Navigation Timing
• Resource Timing
• User Timing
• Timing Control for script-based animations
• Efficient Script yielding
• Display Performance API
• Asynchronous scrolling API
• Diagnostics API

Currently more than 10 browser and the latest version of the Chrome browser to support the above API, the latest version of the Firefox browser to support some of these browsers. The functionality of the above API is not limited to performance measurements, such as the "Timing Control for script-based animations" API can be leveraged in the frame processing of game development.

Optimized communication Protocol ★websocket/serversentevents

Used to optimize asynchronous communication processing from Web pages, currently supported by mainstream browsers (see the author's book, "The Authoritative guide to HTML 5 and CSS 3").

★spdy/http2.0

An improved protocol for defects in the HTTP 1 version protocol. Mainstream browsers are currently developing support for the SPDY protocol, IE has been supported since version 11.

★gzip

Used to compress content to reduce communication costs. has long been supported by mainstream browsers.

Summary of various methods used in web standards to improve the performance of Web applications