HTML5 Front End (mobile site) Performance Tuning Guide

HTML5 is a universal model of the latest published Web page architecture, the front-end technical framework for building a data-driven web that is more valuable to programs and users, and its value lies in the integration of Css/javascript/flash and many other front-end development technologies, More in the understanding of interaction and the restoration of visual design.

HTML5 Framework can improve the speed of Web site access, by optimizing the front-end response time to speed up, so that the user's waiting time is reduced, the so-called front-end refers to the client through the browser sent a request, remove the background system user requests, execute data query and the results of the organization of the time required to process consumption, In emerging technologies, JavaScript and a new set of APIs, pure scripting, are the HTML5 core, and there are many ways in which JavaScript can be used to detect HTML5 's support capabilities.

For the visit of large sites, the optimization of the front-end is necessary, even if the size of the optimization 1KB is also very large, the following Ma Haixiang to take a look at the mobile phone platform HTML5 front-end optimization, perhaps to you to help and inspiration.

First, HTML5 front-end performance optimization overview

Today mobile internet has accounted for half of the entire network traffic, and with the introduction of HTML5 standards, as the front-end engineers need to study how to optimize the performance of HTML5 in mobile settings, first we need to clear the following several principles:

1, the PC optimization method is also applicable on the mobile side.

2, on the mobile side we put forward three seconds of rendering complete the first screen indicator.

3, based on the 2nd, the first screen load 3 seconds to complete or use loading.

4, based on China Unicom 3G Network average 338kb/s (2.71mb/s), so the first screen resources should not exceed 1014KB.

5, mobile side due to mobile phone configuration, in addition to load rendering speed is also the focus of optimization.

6, based on the 5th, to reasonably deal with the code to reduce rendering loss.

7, based on the second and 5th, all the code that affects the first screen loading and rendering should be placed in the processing logic.

8. After loading, users should pay attention to the performance when they interact with each other.

Second, loading optimization

For mobile Web pages, the loading process is the most time-consuming process, which may take up 80% of the time, so it is the focus of optimization, of course, the other front-end elements of the mobile station optimization can not be ignored.

1. Reduce HTTP Requests

Because the phone browser in response to the request is 4 requests (Android support 4, IOS 5 can support 6), so to minimize the number of page requests, the first load of simultaneous requests can not exceed 4, Ma Haixiang recommended optimization points for the following 2 points:

(1), merge CSS, JavaScript

(2), merging small pictures, using Sprite chart

2. Cache

Using caching can reduce the number of requests to the server and save load time, so all static resources are set up on the server side, and as far as possible use long cache (the time stamp is used for updates of long cache resources).

(1), cache all resources that can be cached

(2), use long cache (update cache with timestamp)

(3), using an external reference CSS, JavaScript

3. Compress HTML, CSS, JavaScript

Reducing the size of your resources can speed up the display of your Web pages, so code compression for HTML, CSS, JavaScript, and so on, and set up gzip on the server side.

(1), compression (for example, extra spaces, line breaks, and indents)

(2), enable gzip

4, non-blocking

JavaScript written on the HTML header (no async), and the style written in the HTML tag block the rendering of the page, so the CSS is placed on the page header and introduced using link, to avoid writing style in HTML tags, JavaScript is placed at the end of the page or loaded asynchronously

5. Use the first screen to load

The fast display of the first screen can greatly improve the user's perception of the speed of the page, so it should be optimized for the quick display of the first screen as much as possible.

6. Load on Demand

The resources that do not affect the first screen and the resources used by the current screen resources are loaded when the user needs them, which can greatly improve the display speed of important resources and reduce the overall traffic.

(1), lazyload

(2), rolling screen loading

(3), loading via media query

In addition, Ma Haixiang reminds you that loading on demand can cause a lot of repainting, affecting rendering performance.

7. Pre-loading

Large heavy resources pages (such as games) can be used to increase the loading method, the resource load is completed and then display the page, but the loading time is too long, will cause user churn.

(1), can sense loading (such as Enter the space game loading)

(2), imperceptible loading (such as loading the next page in advance)

(3), the user behavior analysis, the current page can load the next page of resources, improve speed.

8. Compress Pictures

The picture is the most traffic resource, so try to avoid using him, when using the most appropriate format (to achieve the premise of the requirements, size judgment), the appropriate size, and then use the smart image compression, and in the code with Srcset to display on demand.

(1), using the Smart map

(2), using other means instead of pictures (using CSS3; using SVG; using Iconfont)

(3), using Srcset

(4), select the appropriate picture (WEBP better than Jpg;png8 gif)

(5), select the appropriate size (first load not more than 1014KB; Based on the phone screen general width is not wider than 640)

In addition, Ma Haixiang remind everyone: excessive compression of the image size affects the image display effect.

9. Reduce cookies

Cookies affect loading speed, so static resource domain names do not use cookies.

10. Avoid redirection

Redirection affects the load speed, so the server is set up correctly to avoid redirection.

11. Loading third-party resources asynchronously

Non-control of third-party resources affects page loading and display, so third-party resources are loaded asynchronously.

Third, script execution optimization

Improper script handling can block page loading and rendering, so there are a few things to keep in mind when using it:

1, CSS written in the head, JavaScript written in the tail or asynchronous.

2, avoid images and IFRAME, such as empty src, empty src will reload the current page, affecting speed and efficiency.

3, try to avoid resetting the image size, resetting the image size refers to the page, CSS, JavaScript, etc. to reset the size of the picture multiple times, resetting the image multiple times will cause the picture to redraw multiple times, affecting performance.

4, picture as far as possible to avoid the use of Dataurl,dataurl pictures without using the image compression algorithm file will become larger, and to decode and then render, loading slow time-consuming.

Four, CSS optimization

1. Try to avoid writing the style attribute in the HTML tag.

2, avoid the CSS expression, the execution of the CSS expression needs to jump out of the CSS tree rendering, so please avoid the CSS expression.

3, remove the empty CSS rules, empty CSS rules increase the size of the CSS file, and affect the execution of the CSS tree, so you need to remove the empty CSS rules.

4, the correct use of display properties, display properties will affect the rendering of the page, so Ma Haixiang suggest that the webmaster should be reasonable use.

(1), Display:inline should not use width, height, margin, padding and float

(2), Display:inline-block should not use float after

(3), Display:block should not be used after vertical-align

(4), after display:table-* should not use the margin or float

5, do not misuse float,float in the rendering of a large amount of calculation, to minimize the use.

6, do not misuse the Web fonts, Web fonts need to download, parse, redraw the current page, minimize the use.

7, do not declare too much font-size, too much font-size to trigger the efficiency of the CSS tree.

8, the value of 0 does not require any units, for browser compatibility and performance, the value is 0 do not bring units.

9. Standardize various browser prefixes

(1), no prefix should be put in the last.

(2), CSS animation only use (-webkit-without prefix) two can.

(3), the other prefix is "-webkit--moz--ms-no prefix" Four kinds (-o-opera browser instead of blink kernel, so obsolete).

10. Avoid making selectors look like regular expressions.

Advanced selector execution takes a long time and is difficult to read and avoids use.

V. JavaScript execution optimization

1. Reduce repainting and reflow

(1), avoid unnecessary DOM operations

(2), try to change class instead of style, use classlist instead of classname

(3) Avoid the use of document.write

(4), reduce drawimage

2, cache Dom selection and calculation, each DOM selection to calculate, cache him.

3. Cache list. length, each time. Length is calculated, and a variable is used to save the value.

4. Use event proxies as much as possible to avoid bulk binding events.

5, try to use the ID selector, the ID selector is the fastest.

6, Touch event optimization, use Touchstart, touchend instead of click, because fast impact speed, but should pay attention to touch response too fast, easy to trigger misoperation.

Six, rendering optimization

HTML documents are transmitted across the network in a way that contains the document's encoded information, and the page's encoded information is generally indicated in the header of the HTTP response or in the HTML markup within the document, and the client browser can render the page correctly only after the page encoding has been determined. So before you draw a page or execute any JavaScript code, most browsers (except IE6, IE7, IE8) buffer certain bytes of data to find the encoded information, and the number of bytes pre-buffered in different browsers is not the same.

1, HTML use viewport

Viewport can speed up the rendering of the page, use the following code:

<meta name= "viewport" content= "Width=device-width, initial-scale=1″>

2. Reduce DOM nodes

Too many DOM nodes affect the rendering of the page, and you should minimize the DOM nodes.

3. Animation optimization

(1), try to use CSS3 animation.

(2), reasonable use requestanimationframe animation instead of settimeout.

(3), appropriate use of Canvas animation 5 elements within the use of CSS animation, more than 5 using canvas animation (IOS8 can use WebGL).

4, high-frequency event optimization

Touchmove, scroll events can cause multiple renderings.

(1), using requestanimationframe monitoring frame changes, so that at the right time to render.

(2), increase the time interval of response change, reduce the number of redraw.

5. GPU Acceleration

The following properties in CSS (CSS3 transitions, CSS3 3D transforms, Opacity, Canvas, WebGL, Video) to trigger GPU rendering, please use it properly.

In addition, the use of the transition will cause mobile phone over-consumption increased.

HTML5 is just a method and means, and not omnipotent, thinking how to meet the mobile device in particular yes, but the premise must be based on the PC station frame structure and content, to ensure that the consistency of the content is the only way to solve the HTML5 pain point, this time everyone to understand "what is suitable for mobile display site" is not to stand at the high point to understand, should stand at the lowest point, how to display the mobile interface, while meeting a part of the mobile user experience and needs.

Reproduced in original text to: http://www.csstop.com//mobile_opt/20151105/4942.html

HTML5 Front End (mobile site) Performance Tuning Guide