Mobile HTML5 performance optimization

HTML5 performance optimization on mobile
[Introduction] Thanks to the popularity of smartphones and the Internet+ movement in all walks of life, the market share of mobile terminals has grown wildly. E-commerce data for 2015 released in January 2016 showed that China’s mobile online shopping transaction volume surged by 123.2% year-on-year in 2015, accounting for 55% of the total online shopping transaction volume for the first time, surpassing that of the PC side.
Technically, HTML5 is very popular:
1: Data shows that as of 2015, 80% of apps are fully or partially based on HTML5.
2: Google Chrome will no longer support automatic playback of Flash from September 1st.
3: All advertisements on Amazon’s websites (including the Amazon.com portal) will no longer use flash. In the foreseeable future, flash ads will be replaced by HTML5 ads.
Mobile terminal + HTML5, this combination is a big challenge for front-end engineers: How to make the developed pages have a better experience? This is the topic we are discussing today: mobile HTML5 page front-end performance optimization.
PHP Chinese website HTML5 training, how to optimize the performance of HTML5 on mobile settings, first need to clarify the following principles:
1. PC optimization methods are also applicable on the mobile side.
2. On the mobile side, we propose a three-second rendering completion indicator for the first screen.
3. Based on the second point, the first screen should be loaded in 3 seconds or use Loading.
4. Based on the average 338KB/s (2.71Mb/s) of China Unicom’s 3G network, the first screen resource should not exceed 1014KB.
5. On the mobile side, due to the configuration of the mobile phone, in addition to loading, rendering speed is also the focus of optimization.
6. Based on the fifth point, the code must be processed reasonably to reduce rendering loss.
7. Based on the second and fifth points, all codes that affect the loading and rendering of the first screen should be placed behind the processing logic.
8. After loading is complete, users also need to pay attention to performance when using interactively.
We discuss several representative solutions:
Loading Optimization
For mobile web pages, the loading process is the most time-consuming process, which may account for 80% of the total time, so it is the focus of optimization. Of course, the optimization of other front-end elements of the mobile site cannot be ignored.
1. Reduce HTTP requests
Because the mobile browser responds to 4 requests at the same time (Android supports 4, iOS 5 can support 6), so it is necessary to reduce the number of requests for the page as much as possible. The number of simultaneous requests for the first load cannot be If there are more than 4, the following optimization points are recommended:
1. Merge CSS and Java
2. Merge small pictures and use Sprite images
2. Cache
Using cache can reduce the number of requests to the server and save loading time. Therefore, all static resources must be cached on the server side, and try to use long cache (time stamps can be used to update long cache resources).
1. Cache all cacheable resources
2. Use long Cache (use timestamp to update Cache)
3. Use external references to CSS, Java
3. Compress HTML, CSS, Java
Reducing resource size can speed up Web page display speed, so code compression should be performed on HTML, CSS, Java, etc., and GZip should be set on the server side.
1. Compression (for example, extra spaces, newlines and indents)
2. Enable GZip
4. Non-blocking
Java written in the HTML header (no asynchronous), and Style written in the HTML tag It will block the rendering of the page, so put the CSS at the head of the page and use the Link method to introduce it. Avoid writing Style in the HTML tag. Java is placed at the end of the page or loaded asynchronously.
5. Use first-screen loading
First-screen loading Fast display can greatly improve the user's perception of page speed, so you should try to optimize the fast display of the first screen.
6. On-demand loading
Loading resources that do not affect the first screen and resources that are not used on the current screen until the user needs them can greatly improve the display speed of important resources and reduce the overall traffic.
1. LazyLoad
2. Scroll loading
3. Loading through Media Query
In addition, I would like to remind everyone: on-demand loading will cause a large number of redraws and affect rendering performance.
7. Preloading
Large-scale resource-heavy pages (such as games) can use the method of adding Loading. The page will be displayed after the resources are loaded. However, if the Loading time is too long, it will cause user loss.
1. Perceptible Loading (such as loading into a space game)
2. Invisible Loading (such as loading the next page in advance)
3. Based on user behavior analysis, the next page of resources can be loaded on the current page to increase speed.
8. Compressed pictures
Pictures are the resource that accounts for the most traffic, so try to avoid using them. When using them, choose the most appropriate format (judge by size based on the premise of meeting the needs), the appropriate size, and then use Zhitu Compression , and use Srcset in the code to display it on demand.
1. Use smart pictures
2. Use other methods to replace pictures (use CSS3; use SVG; use IconFont)
3. Use Srcset
4. Choose appropriate pictures (webP is better than JPG; PNG8 is better than GIF)
5. Choose the appropriate size (the first load should not be larger than 1014KB; based on the mobile phone screen, the width is generally not wider than 640)
Remind everyone: excessive compression of image size affects the image display effect.
9. Reduce cookies, avoid redirects and asynchronous loading of third-party resources
Cookies will affect the loading speed, so static resource domain names do not use cookies. In addition, redirection will affect the loading speed, so set it correctly on the server to avoid redirection. Also, uncontrollable third-party resources will affect the loading and display of the page, so third-party resources must be loaded asynchronously.
Script execution optimization
Improper handling of scripts will block page loading and rendering, so you need to pay attention to the following points when using it:
1. CSS is written in the head, and Java is written in the tail or asynchronously.
2. Avoid empty Src for images, iFrames, etc. Empty Src will reload the current page, affecting speed and efficiency.
3. Try to avoid resizing the image. Resizing the image refers to resizing the image multiple times in the page, CSS, Java, etc. Resizing the image multiple times will cause the image to be redrawn multiple times, affecting performance.
4. Try to avoid using DataURL for images. If DataURL images do not use the image compression algorithm, the file will become larger and must be decoded before rendering, which makes loading slow and time-consuming.
CSS Optimization
1. Try to avoid writing the Style attribute in HTML tags.
2. Avoid CSS expressions. The execution of CSS expressions needs to jump out of the rendering of the CSS tree, so please avoid CSS expressions.
3. Remove empty CSS rules. Empty CSS rules increase the size of CSS files and affect the execution of the CSS tree, so empty CSS rules need to be removed.
4. Use the Display attribute correctly. The Display attribute will affect the rendering of the page. It is recommended that webmasters use it reasonably.
(1), width, height, margin, padding and float should not be used after display:inline
(2), float should not be used after display:inline-block
(3), display:block should not be used anymore Margin or float should not be used after using vertical-align
(4) and display:table-*
5. Do not abuse Float. Float requires a large amount of calculation during rendering, so use it as little as possible.
6. Do not abuse Web fonts. Web fonts need to be downloaded, parsed, and redrawn on the current page. Use them as little as possible.
7. Do not declare too much Font-size. Too much Font-size will cause the efficiency of the CSS tree.
8. When the value is 0, no unit is required. For browser compatibility and performance, no unit is required when the value is 0.
9. Standardize various browser prefixes
(1), no prefix should be placed at the end.
(2), only use two types of CSS animations (-webkit- without prefix).
(3), other prefixes are "-webkit- -moz- -ms-no prefix" (-o-Opera browser uses blink kernel instead, so it is eliminated).
10. Avoid making selectors look like regular expressions.
Advanced selectors take a long time to execute and are difficult to understand, so avoid using them.
Java execution optimization
1. Reduce redrawing and reflow
(1), avoid unnecessary Dom operations
(2), try to change Class instead of Style, use classList instead of className
(3), avoid using document.write
(4) Reduce drawImage
2. Cache Dom selection and calculation. Every time Dom is selected, it must be calculated and cached.
3. Cache list .length, .length must be calculated every time, and use a variable to save this value.
4. Try to use event proxies to avoid batch binding of 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 of the fast impact, but it should be noted that Touch response is too fast, which can easily lead to misoperation.
Rendering Optimization
HTML documents are transmitted between networks in a data stream containing document encoding information. The encoding information of the page is generally specified in the header information of the HTTP response or in the HTML markup within the document. The client browser can only The page can be rendered correctly only after the page encoding is determined. Therefore, before drawing the page or executing any java code, most browsers (except ie6, ie7, ie8) will buffer a certain number of bytes of data to find encoding information. Different The number of bytes pre-buffered varies among browsers.
1. HTML uses Viewport
Viewport can speed up the rendering of the page, please use the following code:
2. Reduce Dom nodes
Too many Dom nodes affect the rendering of the page, so you should try to reduce Dom nodes as much as possible.
3. Animation optimization
(1) Try to use CSS3 animation.
(2). Reasonably use requestAnimationFrame animation instead of setTimeout.
(3). Use Canvas animation appropriately. Use CSS animation within 5 elements, and use Canvas animation for more than 5 elements (webGL can be used for iOS8).
4. High-frequency event optimization
Touchmove and Scroll events can cause multiple renderings.
(1). Use requestAnimationFrame to monitor frame changes so that rendering can be performed at the correct time.
(2). Increase the time interval for responding to changes and reduce the number of redraws.
5. GPU acceleration

The following properties in CSS (CSS3 transitions, CSS3 3Dtransforms, Opacity, Canvas, WebGL, Video) trigger GPU rendering, please use them reasonably. (PS: Excessive use will cause the phone to consume more power.)

Related articles:

Remove the white background and border of the input box on the mobile HTML5 page (compatible with Android and ios)

How to mobile HTML5 Development? What is the difference from the PC version?

Mobile HTML5 applications, do users really need them? If so, what are the demand scenarios?