6 Principles, 50 tricks to improve HTML5 application and website performance

Jatinder Mann, a project manager for Microsoft Internet Explorer products, at build 2012, he made a "50 secrets to improve HTML5 applications and website performance" (Performance tricks to make Your HTML5 apps and sites faster) "gave a lot of tips on how to speed up Web applications.

Mann's recommendations are organized according to the following six principles.

1. Respond to network requests quickly.

Avoid redirection. Of the top 1000 sites, 63% used redirects. If you do not perform a redirect, the page speed can be increased by 10%.

Avoid Meta-refresh. 14% of the world's URLs use Meta-refresh.

Minimize server response time by locating users with CDN as much as possible.

Download resources from different domains to maximize the application of concurrent connections.

Multiplexing connections. Do not close the connection when responding to the request.

Ensure that page loading is not delayed by the data provided by the partner site.

Understand time-consuming network components such as redirection, caching, DNS, requests, and responses. In IE 9 and 10, you can use the navigation Timing API to measure the time that the browser spends on each operation.

2. Minimize the number of bytes downloaded.

When loading a page, try to minimize the amount of data downloaded. On average, the amount of data to download per page is up to 777KB, with 474KB images, 128KB scripts, and 84KB of Flash.

Request gzip-compressed content.

Save the resource in a local package, such as the package Resource index file generated for the Windows Store app. This can be easily obtained when these resources are needed.

Cache dynamic Resources Using the HTML5 APP cache. APP cache will download only one resource at a time to avoid multiple network trips. When the version number of the app changes, it automatically re-downloads the appropriate resource.

Try to use the "Expires" field in the response to provide cacheable content.

Use a conditional request by setting the If-modified-since field for the request.

Cache data requests, such as HTTP, XML, and JSON, because approximately 95-96% requests do not change throughout the day. While this idea is reasonable, the actual cache of requests received by the site accounts for less than 1% of the share.

Standardize the naming of files in uppercase. While servers may treat icon.jpg as icon.jpg, they are different resources for the Web platform and correspond to different network requests.

For IE, use the latest tagging standard because it is the fastest. IE 10 also recognizes the early IE6-IE9 markup style, but it is not as fast as the new markup style.

Specific business web apps may need to force IE to run in traditional mode, instead of HTML tags using the HTTP header field "X-ua-compatible:ie=emulateie7", which can be faster.

To render smoothly, the stylesheet should be linked at the top of the page

Never link the style sheet at the bottom of the page. Otherwise, flashing may occur when the page loads.

For hierarchical styles, do not use "@import" because it is synchronous, blocking the creation of CSS data structures and screen drawing.

Avoid embedding and inline styling because it forces the browser to switch context between HTML and CSS parsers.

Only the necessary styles are included. Do not download and parse styles that are not available.

Link JavaScript only at the bottom of the page. This ensures that resources such as pictures and CSS are loaded when the script executes, without waiting, and by avoiding context switching.

Do not link JavaScript at the beginning of the page. If some scripts must be loaded at the beginning, use the "defer" property.

Do not inline JavaScript, so you can avoid context switching.

Use the "Async" property to load JavaScript so that the entire script can be loaded and executed asynchronously.

Avoid redundant code. 52% of the world's Web pages contain 100 lines or more of redundant code, such as a JavaScript file that has been linked two times.

Standardize a JS framework, whether it is jquery,dojo,prototype.js or other frameworks. There is no need for browsers to load more basic frameworks with the same functionality.

Don't load scripts for websites like FB and Twitter, just look cool and they'll compete for resources.

4. Optimize the use of multimedia resources.

Images are the most commonly used resource, and each page will download an average of 58 images.

Try to avoid downloading too many pictures, depending on the page load time to control the maximum number of pictures between 20-30.

Use image sprites to combine multiple pictures into one. This technology reduces the number of network connections, reduces the number of bytes downloaded, and saves GPU processing cycles.

Create the image Sprites manually, because the tools created may leave a large void, which increases the amount of data that needs to be downloaded and also requires more GPU processing cycles.

Using a PNG-formatted picture, this format provides a perfect compromise between download size, decoding time, compatibility, and compression ratio. The JPEG format can be used for photos.

Use the original image resolution, which avoids the need to download unnecessary data and the CPU processing required for scaling.

Use CSS3 gradient as much as possible instead of pictures.

Use CSS3 border radius instead of images whenever possible.

Use CSS3 transform to create movement, rotation, and tilt effects.

For small, single images, you can use the data URI. This saves the amount of download for a single image.

Avoid complex SVG because they extend download and processing time.

When you include HTML5, specify a preview picture. This way the browser does not have to download the entire video file to determine the preview image.

Use HTML5 instead of flash, Silverlight, or QuickTime. HTML5 is faster, and several other forms of runtime plug-ins consume system resources.

Proactively download rich media resources in an asynchronous manner and save them in the app cache.

5. Write fast JavaScript.

Use integral types as much as possible in JavaScript for mathematical operations. The floating-point operation of JavaScript is much more time consuming than the corresponding integer operation. Use Math.floor and Math.ceil to convert floating-point numbers to integers when you are doing mathematical operations, especially computationally intensive operations.

Reduce the amount of JavaScript code, not only to reduce the amount of data downloaded, but also to provide better runtime performance.

Initialize JS on demand. Dynamically load JS when needed.

The DOM interaction is minimized by caching variables such as document and body.

Use built-in DOM code, such as Element.firstchild or node.nextsibling. The code is highly optimized and provides better performance than a third-party library.

When accessing a large number of DOM elements, use Queryselectorall.

Use. innerHTML to build dynamic pages.

Bulk tag changes.

Maintaining a small and robust dom--controls the number of elements within 1000.

JSON is faster than XML.

Use the JSON native method of the browser.

Do not misuse regular expressions.

6. Know what your app is doing.

Understand JavaScript timers and learn about settimeout and clearinterval. Do not start the timer unless you are sure you want to use the timer to complete some functions. The same is true for combination timers.

If the monitor's refresh rate is 60Hz, adjust the timer for the explicit frame to 16.7 Ms.

In IE 10, Chrome, and Firefox, use the Requestanimationframe animation function for graphics processing. Its drawing is implemented through callbacks, so no timers are required.

Use the Visibility APIs (Document.hidden and Visibilityhange) to determine the visible state of the application, and if the page is hidden, close the activity. This can save CPU and battery life.

Mann recommends using Windows performance tools in IE to test the performance of Web pages and to optimize for the purpose of reducing CPU time and increasing concurrency.

6 Principles, 50 tricks to improve HTML5 application and website performance