Shulou(Shulou.com)06/03 Report--

This article is about how to use HTML5 and CSS to make web app run more smoothly. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Tip 1: use web storage instead of cookie

The biggest disadvantage of cookie is that it carries all the cookie data that conforms to the rules in every HTTP request. This increases request response time, especially XHR requests. It is better to use sessionStorage and localStorage instead of cookie in HTML5.

This alternative method can store data locally either permanently or in session time. The data is not passed along with the HTTP request. So we give priority to using web storage and only use cookie as an alternative.

/ / if localStorage is present, use thatif (('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 [xss_clean]'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=/'; [xss_clean] = cookiestr;} Tip 2: use CSS Transition instead of JavaScript animation

CSS Transition can lead to higher performance, less code, and easier to maintain and understand.

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

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

LocalStorage and sessionStorage are faster than client-side databases in simple data storage, and can be used to achieve some simple state and schedule saving.

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

Tip 4: using JavaScript native API

With the popularity of later versions of JavaScript, a lot of new API like 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, 8900] .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 (' http://google.com/search?btnI=1&q=' + value + 'spec')); LinksList [XSS _ clean] = 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');})

In general, these native methods are faster than writing loops manually:

For (var I = 0, len = arr.length; I < len; + + I) {}

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

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

Tip 5: not only use cache manifest for offline app, but online websites can also be used appropriately

The use of caching at sites such as background management systems can greatly improve performance.

Cache manifest has some advantages over setting up Expires: explicitly declare files that need to be cached, and browsers can optimize them, probably downloading them locally before you use them.

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

Check application cache tutorial for detailed instructions.

Tip 6: enable hardware acceleration to enhance visual experience

Some browsers may use GPU acceleration to make high-speed animation smoother. Firefox Minefield, IE9, Safari have claimed hardware acceleration. Chromium also adds 3 D transform acceleration to the window platform. The support of various browsers for hardware acceleration is sure to get better and better.

When hardware acceleration is supported and enabled, animation, rotation, scaling, and opacity will certainly be smoother. All practical operations take place in GPU without the need for redrawing of the content. It is important to note, however, that any operation that affects 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 response. Click web worker slide for more information.

Some possible usage scenarios for web worker:

Long text formatting

Syntax highlighting

Picture 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, time, number, range, color and so on. Native features are used in browsers that support these features, supplemented by the js plug-in.

Such as placeholder, required, pattern can greatly improve page usability, and performance.

Click the HTML5 form profile for more information.

Tip 9: use CSS3 to reduce the use of pictures

Reducing the number of images reduces HTTP requests, reduces page size, and is easier to maintain. Common attributes are as follows:

Linear and radial gradients

Border-radius

Box-shadow

Rgba

Transform

Css mask

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

Tip 10: use WebSocket instead of XHR to provide faster interaction and less bandwidth

WebSockets is designed for Comet. Using it to implement Comet does bring more benefits than XHR.

Thank you for reading! This is the end of the article on "how to use HTML5 and CSS to make web app run more smoothly". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.