HTML5 best practices to make web apps faster

Introduction

This article focuses on how to make full use of HTML5 and CSS to make web apps run more smoothly.

Tip 1: Use web storage instead of cookies

The biggest drawback of cookies is that all cookie data that conforms to the rules will be carried in every HTTP request. This will increase the request response time, especially XHR requests. It is better to use sessionStorage and localStorage instead of cookies in HTML5.

This alternative method can store data locally in the user's local area permanently or with session time. The data will not be transferred with the HTTP request. So we give priority to using 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 Transition instead of JavaScript animation

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

Tip 3: Use client database instead of server request

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

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

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 guidance.

Tip 4: Use JavaScript native API

With the popularity of higher versions of JavaScript, many new APIs have been added, such as Array prototype, which 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');
});

Usually these native methods are faster than manually writing loops:

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. These functions are not in HTML5 and should be widely used.

Tip 5: Not only use cache manifest for offline apps, but also use it appropriately for online websites

Sites such as backend management systems can greatly improve performance by using cache.

Cache manifest has some advantages over setting Expires: it clearly declares the files that need to be cached, the browser can optimize them, and they may have been downloaded 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 the 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 claimed to implement hardware acceleration. Chromium has also added 3D transform acceleration for the window platform. Each browser will definitely support more and more hardware acceleration. The 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 redrawing the content. However, it should be noted that any operation that affects the page layout It will all reduce the speed.

Tip 7: Use web workers to perform operations that require a lot of CPU resources

Web workers have two benefits: 1) Fast 2) Does not block browser response. Click the web worker slide to view more information.

Some possible usage scenarios for web workers:

• Long text formatting

• 
  

• Syntax Highlighting

• 
  

• Image processing

• 
  

• Picture 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. Use native functions in browsers that support these functions, and use js plug-ins as a supplement .

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

​Click on the HTML5 form information to view 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. Commonly used attributes are as follows:

• linear and radial gradients

• 
  

• border-radius

• 
  

• box-shadow

• 
  

• rgba

• 
  

• transform

• 
  

• css mask

Common usage scenarios include: 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.

Original link: http://www.html5rocks.com/en/tutorials/speed/quick/

The above is the detailed content of HTML5 best practices to make web apps faster. For more information, please follow other related articles on the PHP Chinese website!