Mobile HTML5 performance optimization

[Introduction] Thanks to the popularity of smartphones and the movement of Internet + in all walks of life, the market share of mobile terminals has grown wildly. The 2015 e-commerce data released in January 2016 shows that in 2015, China's mobile online shopping transaction volume soared by 123 2% year-on-year, and the proportion of the total online shopping transaction volume exceeded the PC terminal for the first time to reach 55%.



Technically, HTML5 is popular:



1: According to data, as of 2015, 80% of apps are based on HTML5 in whole or in part.



2: Google Chrome no longer supports auto-play Flash since September 1.



3: All advertisements on Amazon's websites (including the Amazon.com portal) will no longer use flash. Flash ads will be replaced by HTML5 ads for the foreseeable future.



Mobile + 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: front-end performance optimization of mobile HTML5 pages.



Brothers 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 to the Mobile side.



2. On the Mobile side, we propose three-second rendering to complete the first screen indicator.



3. Based on the second point, the first screen loading is completed in 3 seconds or using Loading.



4. Based on the average 338KB/s (2.71Mb/s) of China Unicom's 3G network, the first screen resources should not exceed 1014KB.



5. Due to the configuration of the mobile phone, the rendering speed is also the focus of optimization in addition to loading.



6. Based on the fifth point, the code should be handled 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, users should also pay attention to performance when interacting with them.



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, mobile phone The optimization of other front-end elements of the site cannot be ignored.



1. Reduce HTTP requests.



Because the mobile browser responds to 4 requests at the same time (Android supports 4 requests, and iOS 5 can support 6 requests), the number of page requests should be reduced as much as possible. The number of simultaneous requests for the first load cannot exceed 4. The suggested optimization points are the following 2 points:



1. Combine CSS and Java



2. Combine small images and use sprite images



2. Cache



Using cache can reduce the number of requests to the server and save loading time, so all static resources must be set on the server side Cache, and try to use long cache (updates of long cache resources can use timestamp).



1. Cache all cacheable resources



2. Use long Cache (update Cache with timestamp)



3. Use external reference CSS, Java



3. Compress HTML, CSS, Java



to reduce resource size can speed up web page display, so it is necessary to Code compression for HTML, CSS, Java, etc., and GZip is set on the server side.



1. Compression (eg, extra spaces, newlines, and indentation)



2. GZip enabled



4. Non-blocking Java



written in the HTML header (no async), and Style written in the HTML tag will block the rendering of the page, Therefore, CSS is placed at the head of the page and introduced in Link mode, avoiding writing Style in HTML tags, and placing Java at the end of the page or using asynchronous loading



. 5. Use the first screen to load



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



6. On-demand loading Resources



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



1. LazyLoad



2. Scrolling loading



3. Loading through Media Query



In addition , I would like to remind everyone that on-demand loading will cause a lot of redraws and affect rendering performance.



7. Preloading



Large resource-heavy pages (such as games) can use the method of increasing Loading, and display the page after the resource is loaded, but the loading time is too long, which will cause user loss.



1. Perceptible Loading (such as loading into a space game)



2. Imperceptible Loading (such as loading the next page in advance)



3. Analysis of user behavior, the resources of the next page can be loaded on the current page to improve the speed.



8. Compressed pictures



Pictures are the resources that occupy the most traffic, so try to avoid using them. When using them, choose the most suitable format (judging by the size under the premise of achieving the requirements), the appropriate size, and then use Zhitu to compress, and at the same time in the code Use Srcset to display on demand.



1. Use Smart Map



2. Use other methods to replace pictures (use CSS3; use SVG; use IconFont)



3. Use Srcset



4. Choose an appropriate image (webP is better than JPG; PNG8 is better than GIF)



5. Choose an appropriate size ( The first load is not larger than 1014KB; based on the general width of the mobile phone screen, it is not wider than 640)



to remind everyone: over-compressing the size of the picture will affect the display effect of the picture.



9. Reducing cookies, avoiding redirection and asynchronously loading third-party resource



cookies will affect the loading speed, so static resource domain names do not use cookies. Also, redirects can affect loading speed, so set them correctly on the server to avoid redirects. In addition, uncontrollable third-party resources will affect the loading and display of the page, so the third-party resources should 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 them:



1. CSS is written at the head, and Java is written at the tail or asynchronously.



2. Avoid empty Src for images and iFrames. 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 resetting the image size multiple times in the page, CSS, Java, etc. Resetting the image size multiple times will cause multiple redraws of the image and affect performance.



4. Try to avoid using DataURL for pictures. If DataURL pictures do not use the compression algorithm of pictures, the file will become larger, and it needs to be decoded and then rendered, which will take a long time to load.







CSS optimization

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



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 the empty CSS rules. The empty CSS rules increase the size of the CSS file and affect the execution of the CSS tree, so it is necessary to remove the empty CSS rules.



4. Correct use of Display properties. Display properties will affect the rendering of the page. It is recommended that webmasters use them 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), vertical-align should not be used after display:block



(4), margin or float



5 should not be used after display:table-*, and Float should not be abused. Float has a large amount of calculation during rendering, so try to reduce the use of .



6. Do not abuse Web fonts. Web fonts need to be downloaded, parsed, and redrawn on the current page to minimize their use.



7. Do not declare too much Font-size, too much Font-size leads to the efficiency of CSS tree.



8. No unit is required when the value is 0. 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), CSS animation only use (-webkit- no prefix) two.



(3) The other prefixes are "-webkit--moz--ms-no prefix" (-o-Opera browser uses the blink kernel instead, so it is eliminated).



10. Avoid making selectors look like regular expressions.



Avoid using advanced selectors that are time-consuming and difficult to read.







Java implementation optimization

1, reduce redraw 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, each time .length is calculated, use a variable to save this value.



4. Try to use event proxy to avoid batch binding events.



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



6. TOUCH event optimization, use touchstart and touchend instead of click, because the speed is fast, but it should be noted that the touch response is too fast, which is easy to cause misoperation.







Rendering-optimized

HTML documents are transmitted between networks in the form of data streams containing document encoding information. The encoding information of the page is generally indicated in the header information of the HTTP response or in the HTML tags in the document. The page can only be rendered correctly after the page is encoded, so before drawing the page or executing any java code, most browsers (except ie6, ie7, ie8) will buffer a certain byte of data to find the encoding information. Different browsers The number of bytes pre-buffered in the processor is different.



1. HTML uses Viewport



Viewport to speed up page rendering, please use the following code:





2. Reduce Dom



nodes Too many Dom nodes affect page rendering, and Dom nodes should be minimized.



3, animation optimization



(1), try to use CSS3 animation.



(2) Reasonable use of requestAnimationFrame animation instead of setTimeout.



(3) Appropriately use Canvas animation Use CSS animation within 5 elements, and use Canvas animation for more than 5 elements (iOS8 can use webGL).



4. High-frequency event optimization



Touchmove and Scroll events can cause multiple renderings.



(1) Use requestAnimationFrame to monitor frame changes so that rendering is performed at the correct time.



(2) Increase the time interval for responding to changes and reduce the number of redraws.



5. The following properties in GPU-accelerated



CSS (CSS3transitions, CSS3 3Dtransforms, Opacity, Canvas, WebGL, Video) are used to trigger GPU rendering, please use them reasonably. (PS: Over-use will lead to increased power consumption of the mobile phone.)