6 principles, 50 by improving HTML5 application and web site performance


　　Jatinder Mann is a project Microsoft Internet Explorer product manager, at the BUILD 2012 conference, he did a problem to be "increase 50 by HTML5 application and web properties (50 performance tricks to make your HTML5 apps and sites faster)" speech, introduced a lot of applications for Web speed skills.

　　Mann's advice is in accordance with the following six principles of organization.

　　1 rapid response network requests.

　　Avoid redirects. Of the top 1000 sites, 63% used to redirect. If you don't perform a redirect it, page speed can be increased by 10%.

　　Avoid Meta-refresh. 14% of the world's URL using Meta-refresh.

　　As far as possible through the CDN location of the user, the server response time minimization.

　　The resource is downloaded from a different domain, maximize the usage of concurrent connections.

　　Multiplex connection. Do not close the connection when responding to requests.

　　Ensure that the page loading does not provide for the partner site data and delay.

　　The understanding of network components such as time-consuming, redirection, cache, DNS, request and response. In the IE 9 and 10 to measure the browser is spent on each operation using the Navigation Timing API time.

　　2 to minimize the number of bytes downloaded.

　　When the page loads, to minimize the amount of data downloaded. On average, the amount of data downloaded each page to 777KB, including 474KB images, 128KB script and 84KB Flash.

　　Gzip compressed content request.

　　Resources will be saved in the local package, such as packet resource index Windows store application generated (Package Resource Index) file. So when you need these resources can be very easy to get.

　　Use the HTML5 App Cache cache dynamic resource. App Cache will download only one resource, so as to avoid multiple network travel. When the application's version number changes, it will automatically re download the corresponding resources.

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

　　The If-Modified-Since field set the request to use a conditional request.

　　Cache data request, such as HTTP, XML and JSON, because the request not about 95-96% day change. Although the idea is reasonable, but the actual cache receives requests site accounts for the proportion is less than 1%.

　　Use uppercase file naming standard. Though the server may use Icon.jpg as icon.jpg, but for Web platform, they are different resources, corresponding to different network requests.

　　3 the organization efficient marker.

　　For IE, please use the new marking standard, because it is the fastest. IE 10 will also be able to identify the early IE6-IE9 Tag style, but the speed is not as good as new markers of style.

　　Certain business Web applications may need to force the IE to run from the traditional mode, use the HTTP header field "X-UA-Compatible: IE=EmulateIE7" instead of a HTML tag, it will be faster.

　　In order to smooth rendering, style sheets should link in the top of the page

　　Never linked at the bottom of the page style sheet. Otherwise, when the page loads may be flashing.

　　For layered style, don't use "@import", because it is synchronous, can block the CSS data structure creation and drawing on the screen.

　　Avoid embedded and inline styles, because it will force a context switch between HTML and CSS parser browser.

　　Include only the necessary style. Don't download and analysis were not used to style.

　　Only at the bottom of the page the link JavaScript. This will ensure that the script executes the pictures and CSS resources have been loaded, without waiting for, but also to avoid the context switch.

　　Don't start of page link JavaScript. If some scripts must be loaded at the beginning, please use the "defer" attribute.

　　Don't inline JavaScript, this can avoid context switching.

　　Use the "async" attribute to load the JavaScript, so that the entire script can load and execute.

　　To avoid redundant code. 52% of the world's Webpage consists of 100 lines or more redundant code, such as linking a JavaScript file two.

　　A framework of JS standard, whether it is jQuery, Dojo, Prototype.js or other framework. The browser without the framework necessary for loading multiple functions are basically the same.

　　Don't load the FB and Twitter sites such as script, just looks cool, they compete for resources.

　　The use of 4 optimization of multimedia resources.

　　The picture is the most commonly used resources, each page will download 58 pictures.

　　Avoid downloading too many pictures, according to the page loading time will be the maximum number of picture control between 20-30.

　　Use Image Sprites to combine multiple images into a. The technology can reduce the number of network connections, will also reduce the number of bytes downloaded and save GPU processing cycle.

　　To create the Image Sprites manual, because the tools may leave large empty, this will increase the need to download the data quantity, also need more GPU cycles.

　　The use of PNG format, the format of the best compromise between download size, decoding time, compatibility and compression ratio. JPEG format can be used for photo.

　　Use the native image resolution, which can avoid the CPU download unnecessary data and for scaling.

　　Use CSS3 Gradient instead of the picture as far as possible.

　　Use CSS3 border radius instead of the picture as far as possible.

　　Use CSS3 Transform to create a mobile, rotating and tilting effect.

　　For small single images, you can use the Data URI. Download this can save a picture.

　　To avoid the complexity of SVG, because they will extend the downloading and processing time.

　　When including HTML5, specify a preview picture. Thus the browser will not have to download the entire video file to determine the preview picture.

　　Use HTML5 instead of Flash, Silverlight or QuickTime. HTML5 is faster, and the plug-in runtime consumes system resources.

　　Take the initiative to download rich media asynchronously and save it in the App Cache.

　　5 write fast JavaScript.

　　As far as possible the use of integer mathematical operations in the JavaScript. JavaScript floating point operations than the corresponding integer operation time much more. In mathematics, especially for computationally intensive operations, use the Math.floor and Math.ceil floating point number is converted to an integer.

　　Reduce the amount of JavaScript code, such not only can reduce the amount of data downloaded, and can provide better runtime performance.

　　According to the need to initialize the JS. When the dynamic loading JS when needed.

　　By caching variables (such as document and body) minimize DOM interactions.

　　Use the built-in DOM code, such as element.firstChild or node.nextSibling. They are highly optimized, compared to the third party libraries can provide better performance.

　　Access to a large number of DOM elements, the use of querySelectorAll.

　　Using.InnerHTML to build dynamic pages.

　　Batch labeling changes.

　　Maintain a small and robust DOM— — the number of elements within the control of the 1000.

　　JSON is faster than XML.

　　Use the browser's JSON native methods.

　　Don't abuse the regular expression.

　　6 know what your application is doing.

　　Understanding the JavaScript timer, understand setTimeout and clearInterval. Unless you use a timer to complete some function, do not start the timer or. So is the combination of timer.

　　If the refresh rate of the monitor is 60Hz, please send explicit frame timer is adjusted to 16.7 MS.

　　In IE 10, Chrome and Firefox, graphics processing use requestAnimationFrame animation function. It is drawn through the callback implementation, therefore does not need the timer.

　　Use the visibility API (document.hidden and Visibilityhange) to determine the application visible state, if the page is hidden, then close the activity. This can save a life of CPU and battery.

　　Mann recommends the use of Windows Performance Tools in IE to test the performance of Web pages, and to reduce the CPU time and increase concurrency optimization as the goal.


Posted by Caroline at December 16, 2013 - 10:07 PM