HTML5 best practices to make Web App faster

[[136286]]

Tip 1: Use web storage instead of cookies

The disadvantage of cookie encryption is that all cookie data that meets the rules will be carried in each HTTP request, which will increase the request response time, especially XHR requests. It is a better practice to use sessionStorage and localStorage instead of cookies in HTML5.

This alternative method can store data locally in the user's local storage or session time. The data will not be passed with the HTTP request, so we prefer web storage and only use cookies as an alternative.

 // if localStorage is present, use that  
 if (( 'localStorage' in window) && window.localStorage !== null ) {
 // easy object property API  
 localStorage.wishlist = '["unicorn", "Narwhal", "deathbear"]' ;
 } else {
 // without sessionStorage we'll have to use a far-future cookie  
 // with document.cookie's awkward API  
 var date = new Date();
 date.setTime(date.getTime() + ( 365 * 24 * 60 * 60 * 1000 ));
 var expires = date.toGMTString();
 var cookiestr = 'wishlist=["unicorn", "Narwhal", "deathbear"];' +
 ' expires=' + expires + '; path=/' ;
 document.cookie = cookiestr;
 }

Tip 2: Use CSS Transitions instead of JavaScript animations

CSS Transition can bring higher performance, less code, easier maintenance and understanding.

Tip 3: Use client-side database instead of server requests

Web SQL Database and IndexedDB give browsers database storage capabilities. Many application scenarios can be migrated to client-side databases to reduce the number of server requests.

LocalStorage and sessionStorage are faster than client databases for simple data storage and can be used to implement some simple states and progress saving.

When a component needs to manage hundreds of pieces of data (such as a friend list) and support user search, filtering, and sorting, storing a copy of the data in the client database can effectively reduce the number of HTTP requests. See the Web SQL Database tutorial for detailed instructions.

Tip 4: Use JavaScript native API

With the popularity of higher versions of JavaScript, many new APIs, such as Array prototype, can be used directly in most browsers. For example:

 // give me a new array of all values ​​multiplied by 10  
 [ 5 , 6 , 7 , 8 , 900 ].map(function (value) {
 return value * 10 ;
 });
 // [50, 60, 70, 80, 9000]  
 // create links to specs and drop them into #links.  
 var linksList = document.querySelector( '#links' );
 var links = [];
 [ 'html5' , 'css3' , 'webgl' ].forEach(function (value) {
 links.push(value.link( 'http://google.com/search?btnI=1&q=' + value + ' spec' ));
 });
 linksList.innerHTML = links.join( '' );
 // return a new array of all mathematical constants under 2  
 [ 3.14 , 2.718 , 1.618 ].filter(function (number) {
 return number < 2 ;
 });
 // you can also use these extras on other collections link nodeLists  
 [].forEach.call(document.querySelectorAll( 'section[data-bucket]' ),
 function (elem, i) {
 localStorage[ 'bucket' + i] = elem.getAttribute( 'data-bucket' );
 });

These native methods are usually faster than writing loops manually:

 for (var i = 0 , len = arr.length; i < len; ++i) {
 }

Using native JSON.parse() is more efficient and safer than json2.js.

The native String.prototype.trim is also a good example of features that are not in HTML5 and should be widely used.

Tip 5: Use cache manifest not only for offline apps, but also for online websites

Using cache for sites like backend management systems can greatly improve performance.

Cache manifest has some advantages over setting Expires: By explicitly declaring the files that need to be cached, the browser can optimize them and may download them locally before you use them.

The basic structure of the page can be regarded as a template. The displayed content changes with the data. The templateable HTML structure is cached through cache.manifest, and the content is updated after obtaining JSON data from the server.

See the application cache tutorial for detailed instructions.

Tip 6: Enable hardware acceleration to enhance the visual experience

Some browsers may use GPU acceleration to make high-speed animations smoother. Firefox Minefield, IE9, and Safari have already claimed to have achieved hardware acceleration. Chromium has also added 3D transform acceleration for the window platform. The support for hardware acceleration in various browsers will definitely get better and better.

When hardware acceleration is supported and enabled, animation, rotation, scaling, and opacity will definitely be smoother. All actual operations occur on the GPU without the need to redraw the content. However, it should be noted that any operation that affects the page layout will slow down the speed.

Tip 7: Use web workers to perform CPU-intensive operations

Web workers have two benefits: 1) they are fast and 2) they don't block the browser. See the web worker slide for more information.

Some possible use cases for web workers:

Long text formatting

Syntax highlighting

Image Processing

Image synthesis

Large array processing

Tip 8: HTML5 form attributes and input types

HTML5 adds a series of input types, including search, tel, url, email, datetime, date, month, week, time, number, range, color, etc. In browsers that support these functions, use native functions and js plug-ins as supplements.

Like placeholder, required, pattern can greatly improve the usability and performance of the page.

Click HTML5 form for more information.

Tip 9: Use CSS3 to reduce the use of images

Reducing images can reduce HTTP requests, reduce page size, and make maintenance easier. Common properties are as follows:

linear and radial gradients

border-radius

box-shadow

rgb

transform

CSS Mask

Common usage scenarios include: polished buttons via gradients, replicate many other effects.

Tip 10: Use WebSocket instead of XHR for faster interactions and less bandwidth

WebSockets is designed for Comet, and using it to implement Comet does bring more benefits than XHR.