9 Methods to accelerate HTML5 applications

Web developers are often looking for new methods to continuously improve the speed and performance of pages. Many of HTML5's new features can be implemented to give users a better experience, here we have sorted out the simple and easy-to-implement HTML5 skills in 9, which may be helpful to you.

1. Use HTML5 forms and input boxes

HTML5 introduces many brand neW fOrm attributes and input box types. Although not all browsers support them, they are indeed useful:

• autofocusAfter the page is loaded, the system automatically sets the input focus for an input box.
• placeholderAllows you to set the default text for the input box and clear it automatically when getting the focus
• requiredThe attribute must be filled in to submit the form.
• patternYou can use a regular expression to specify the content that can be entered in the input box.

Because these functions are built-in and do not need to be implemented using JavaScript, the first is to save development time and make the page better adaptive.

2. Use CSS to convert the effect

The CSS conversion effect can be used to replace JavaScript to speed up the conversion of page elements in two states.
Totheleft and totheright you can quickly move a box. For example:

View Source

Print?

01

div.box {

02	left:50px;

03	//for webkit browsers

04	-webkit-transition: all 0.3s ease-out;

05	//for mozilla

06	-moz-transition: all 0.3s ease-out;

07	//for opera

08	-o-transition: all 0.3s ease-out;

09	//other browsers

10	transition: all 0.3s ease-out;

11

}

12

13	div.box.totheleft {

14	left: 0px;

15

}

16

17	div.box.totheright {

18	left: 80px;

19

}

First, the CSS method can reduce the amount of Page code, and the animation execution is faster.

3. Use HTML5 web Storage

However, when you need to store some data in a browser, you may first consider cookies, which are included in each browser request. The more effective method of HTML5 is local storage-web storage.

There are two web storage objects:sessionStorageAndlocalStorageThe stored data will not be transmitted through the HTTP request, so it will not affect the request time parameter. The following is a short sample code:

View Source

Print?

1	//check to see if localstorage is present (browser supports HTML5)

2	if (('localStorage' in window) && window.localStorage !== null) {

3	//store items

4	localStorage.wishlist = '["Bear", "Cow", "Pig"]';

5

}

From the code above, we can see that it is simpler than the cookie method, without specifying the expiration time.

4. Use Web workers

Web workers is one of the HTML5 specifications and is used to provide support for running background scripts. This is equivalent to a multi-threaded processing environment. Sample Code:

View Source

Print?

1	var worker = new Worker('doWork.js');

2

3	worker.addEventListener('message', function(e) {

4	console.log('Worker said: ', e.data);

5	}, false);

6

7	worker.postMessage('Hello World'); // Send data to our worker.

Web workers can be used in many scenarios, such as Slice Processing, text format and receiving and processing of large files.

5. Use Web sockets

Web sockets is used to achieve dual-channel communication with remote hosts. For example, it is a lightweight communication architecture between Web browsers and remote servers. The bandwidth usage and performance are reduced by 3 to 3 compared with standard HTTP ~ 5 times.

Because Web sockets must use port 80, Web sockets is used not only to create fast communication interfaces, but also to implement advanced dual-channel communication over HTTP.

6. Use application Cache

Application cache allows you to create Web applications that fully support offline browsing, reducing server load and faster user experience. You can specify the file to be cached through the cached manifest file. manifest is just a simple text file. The following is an example:

View Source

Print?

01	CACHE MANIFEST

02	# 2011-06-18:v3

03

04	# Explicitly cached entries

05

index.htm

06

style.css

07

08	# offline.htm will be displayed if the user is offline

09

FALLBACK:

10	/ /offline.htm

You need to enable cache on the HTML page

View Source

Print?

1	<html manifest="http://www.example.com/example.appcache">

2

...

3

</html>

Manifest cache files can define any file extension in the cache, but you need to set the corresponding MIME type on the Web server, for example on Apache:

View Source

Print?

1	AddType text/cache-manifest .appcache

Using the application cache, you can create offline Web applications in just a few steps. The access speed is very fast and suitable for processing some static files that are not updated frequently.

7. Use CSS to replace Images

Using CSS special effects instead of images is a simple method to speed up the web page, because you do not need to re-open the HTTP request to get the image, and the size of the image is generally much larger than several lines of CSS code, below are some CSS effects that you can use to replace images:

• CSS masks
• Box-shadow
• Transforms
• Rgba/Alpha opacity
• Border-radius
• Linear and radial gradients

8. Use hardware acceleration

Currently, hardware acceleration is not widely supported by browsers. If your application has animation or 3D effects, enabling hardware acceleration to directly process the GPU will greatly increase the animation and 3D speed. To use hardware acceleration, you need to use the HTML5 canvas.

9. Use the client database

Currently, mainstream browsers have not yet reached an agreement on client database support, except for Web SQL database and indexeddb. By using databases, You can greatly increase the client data storage speed, rather than sending data back to the server. This not only reduces HTTP requests, but also greatly reduces server load.

Unfortunately, most browsers support web SQL dB, but Mozilla only supports indexeddb, which is a problem you must consider.

As you can see, HTML5 brings many powerful new features that can help you speed up web development and response, and provide a better user experience. Are you ready?

Original English, oschina Original translation