How to improve website front-end performance in HTML5

1. Use web storage to replace cookies
The biggest problem with Cookie is that every request is followed by a Cookie. In HTML5, user data is directly stored on the client using sessionStorage and localStorage, which can reduce the data volume of HTTP requests. In addition, Web storage also provides APIs to operate data. Unlike cookies, you have to write data by yourself.

// If localStorage is present, use that
If ('localstore' 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;
}

2. Use CSS animation instead of JavaScript Animation
Use CSS animations instead of JS animations. Some machines can accelerate CSS animations by using GPU and reduce JS file requests.

Div. box {
Left: 40px;
-Webkit-transition: all 0.3 s outgoing-out;
-Moz-transition: all 0.3 s outgoing-out;
-O-transition: all 0.3 s outgoing-out;
Transition: all 0.3 s outgoing-out;
}
Div. box. totheleft {left: 0px ;}
Div. box. totheright {left: 80px ;}
3. Use the client database
Using client databases such as Web SQL database or IndexedDB can reduce the number of HTTP requests. To the region list, data such as the friend list can be directly stored on the client. Sometimes you can also use sessionStorage and localStorage, because in general, this type is faster.

4. directly use the new functions of JS
JS has developed a lot. For example, Array introduces many new methods, such as map, filter, and forEach. In addition, JSON is also directly embedded into the browser, and the json2.js file does not need to be introduced.

// 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,900 0]
 
// Create links to specs and drop them into # links.
['Html5', 'css3', 'webgl ']. forEach (function (value ){
Var linksList = document. querySelector ('# link ');
Var newLink = value. link ('HTTP: // google.com/search? BtnI = 1 & q = '+ value + 'spec ');
LinksList. innerHTML + = newLink;
});
 
// Return a new array of all mathematical constants under 2.
[3.14, 2.718, 1.618]. filter (function (number ){
Return number <2;
});
// [1.618]
 
// You can also use these extras on other collections like nodeLists.
[]. ForEach. call (document. querySelectorAll ('section [data-bucket] '), function (elem, I ){
LocalStorage ['bucket' + I] = elem. getAttribute ('data-bucket ');
});

5. cache HTML tags
Cache HTML files on the client. However, these cached HTML files only have structure and no content. The content needs to be written into the page through JSON object operations in JS. Such an HTML file is equivalent to a template.

6. Use hardware acceleration
Currently, GPU-level hardware acceleration has been enabled for leading browsing and can be enabled through some commands or hack. For example, you can enable GPU hardware acceleration by using 3D conversion or animation in CSS.

. Hwaccel {-webkit-transform: translateZ (0);} 7. CPU-consuming operations are completed using WebWorker.
To process time-consuming or CPU-consuming operations, use WebWorker, which is not only fast, but also in the background, does not affect normal browser interaction.

8. Use new features of form
HTML form adds many new attributes, elements, and verification functions. Using these new functions can reduce JS and CSS intervention.

9. Use CSS3 to replace CSS genie
CSS 3 can be used to achieve some CSS sprites. Maybe the CSS of about 100 bytes can replace the image sprites of 2 K, and the number of requests is greatly reduced.

Common special effects of CSS3 include: rounded corner, gradient, shadow, transparency, deformation, and mask.

10. For real-time applications, use WebSocket to replace XHR
WebSocket was first designed to replace Ajax polling. Its advantage over Ajax is that it is lightweight and uses less bandwidth. According to some reports, WebSocket is about 30% less than Ajax, and the transmission speed is about 35 times faster. Ericsson found that the ping command consumes 3 to 5 more time than WebSocket in testing WebSocket performance, so it is very suitable for real-time applications.