"Front-end small white learning Road" HTML5 Best Practices Web App

Introduction
This article focuses on how to make the Web app run more smoothly with HTML5 and CSS.

TIP 1: Use Web Storage instead of cookies
The biggest drawback of cookies is that every HTTP request carries all the rules-compliant cookie data. This increases the request response time, especially the XHR request.
It sessionStorage localStorage is a better practice to use and replace cookies in HTML5.

This method can store data either permanently or in session time locally. The data is not passed along with the HTTP request. So we use Web Storage as a priority, using only cookies as an alternative.

//if Localstorage is presentif(' Localstorage 'inchwindow) && window.localstorage!==NULL) {  //Easy object property APIlocalstorage.wishlist= ' [' Unicorn ', ' narwhal ', ' deathbear '] '; } Else {  //without Sessionstorage We have the use of a far-future cookie //With Document.cookie ' s awkward API varDate =NewDate (); Date.settime (Date.gettime ()+ (365 * 24 * 60 * 60 * 1000)); varexpires =date.togmtstring ();varcookiestr = ' wishlist=[' unicorn "," Narwhal "," deathbear "]; ' + ' expires= ' + expires + '; path=/'; Document.cookie=cookiestr;}

TIP 2: Use CSS transition instead of JavaScript animations

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

Tip 3: Use a client database instead of a server request

Web SQL Database and INDEXEDDB allow the browser to have the ability to store databases. Many scenarios can be migrated to the client database to reduce the number of server requests.

localStorageand sessionStorage in simple data storage is faster than the client database, can be used to implement some simple state, progress save.

When a component needs to manage hundreds of data (such as a buddy list) while supporting user search, filtering, and sorting, the client database stores one copy of the data to effectively reduce the number of HTTP requests. View Web SQL Database Tutorial for detailed instructions.

TIP 4: Using the JavaScript native API

With the popularity of later versions of JavaScript, many new APIs like array prototype can be used directly in most browsers. For example:

//give me a new array of all values multiplied by[5, 6, 7, 8, 900].map (function(value) {returnValue * 10;});//[A, 9000] //create links to specs and drop them into #links.varLinkslist = Document.queryselector (' #links ');varLinks = []; [' 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) {returnNumber < 2;}); //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 ');});

Typically, these native methods are faster than writing loops manually:

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

JSON.parse()the use of native ratio json2.js is more efficient and safer.

Native is String.prototype.trim also a good example, these functions are not HTML5, but also should be widely used.

Tip 5: Not only for offline apps using cache manifest, but also for online site sites to be used appropriately

A site such as a background management system that uses caching can greatly improve performance.

The cache manifest has some advantages over setting expires: explicitly declaring the files that need to be cached, the browser can be optimized, and may have been downloaded locally before you use them.

The basic structure of the page can be viewed as a template, and the content displayed will be cached through cache.manifest with data changes, and content can be updated after the JSON data is fetched from the server side.

View 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, Safari has claimed hardware acceleration. The chromium also increases the 3D transform acceleration of the window platform. The support for hardware acceleration for each browser will certainly be getting better.

With hardware acceleration supported and started, animations, rotation, scaling, opacity will definitely be smoother. All actual operations occur on the GPU without the need for redrawing of the content. However, it is important to note that any operations that affect the layout of the page will slow down.

TIP 7: Use Web worker to perform operations that require a lot of CPU resources

Web worker has two benefits: 1) Fast 2) does not block browser responses. Click Web Worker slide to see more information.

Some possible usage scenarios for Web worker:

Long text formatting syntax highlighting image processing picture synthesis Large Array processing

Tip 8:HTML5 Form properties and input type

HTML5 added a series of input type, including,,,,,,,,, search tel url email datetime date month week c16/>,, number range , color et. Use native functionality in browsers that support these features, and add the JS plugin as a supplement.

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

Tip 9: Use CSS3 to reduce the use of images

Reducing images reduces HTTP requests, reduces page size, and is easier to maintain, often with the following properties:

linear and radial gradientsborder-radiusbox-shadowrgbatransformcss Mask

Common usage scenarios are: Polished buttons via gradients, replicate many other effects

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

WebSockets was designed for comet. Using it to achieve comet does bring more benefits than XHR.

Reference: http://mp.weixin.qq.com/s/U8FRxmcHAQIGKpfWjAm-7w

"Front-end small white learning Road" HTML5 Best Practices Web App