How to optimize the performance of HTML5 in 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 three seconds to render the first screen indicator.
3. Based on the second point, load the first screen in 3 seconds or use Loading.
4. Based on Unicom's 3G network average 338KB / s (2.71Mb / s), so the first screen resource 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, it is necessary to properly handle the code to reduce rendering losses.
7. Based on the second and fifth points, all code that affects the loading and rendering of the first screen should be placed in the processing logic.
8. Pay attention to the performance when the user uses it interactively after loading.
We discuss some of these 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 phones The optimization of other front-end elements of the station cannot be ignored.
1. Reduce HTTP requests. Since the mobile browser responds to 4 requests at the same time (4 for Android and 6 for iOS 5), it is necessary to reduce the number of page requests as much as possible. The recommended optimization points are the following 2 points:
1. Merge CSS and Java
2. Merge small pictures, use Sprite image
3, cache
Use 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 (long time cache resource updates can use time stamps).
1. Cache all cacheable resources
2. Use long Cache (use timestamp to update Cache)
3. Use external reference CSS, Java
3. Compress HTML, CSS, Java to reduce the size of resources can speed up the display speed of web pages, so HTML, CSS, Java, etc. code compression, and set GZip on the server side.
1. Compression (for example, extra spaces, line breaks and indentation)
2. Enable GZip
4.
Java without blocking written in the HTML header (no asynchronous), and Style written in HTML tags will block the rendering of the page, Therefore, CSS is placed at the head of the page and introduced in Link mode to avoid writing Style in HTML tags. Java is placed at the end of the page or loaded asynchronously.
5. Use the first screen to load
the quick display of the first screen, which can greatly improve the speed of the user on the page Perception, so it should be optimized for the fast display of the first screen.
6. On-demand loading
Put resources that do not affect the first screen and resources that are not used by the current screen resources into the user's needs before loading, which can greatly improve the display speed of important resources and reduce overall traffic.
1. LazyLoad
2. Rolling screen loading
3. Loading through Media Query
In addition, remind everyone: loading on demand will cause a lot of redrawing and affect rendering performance.
7.
The method of adding loading can be used to pre-load large heavy resource pages (such as games). The page is displayed after the resource loading is completed, but the loading time is too long, which will cause the loss of users.
1. Perceivable Loading (such
as loading into a space game) 2. Imperceptible Loading (such as loading the next page in advance)
3. Analysis of user behavior, you can load the next page of resources on the current page to increase speed.
8. Compress pictures
The picture is the most traffic-intensive resource, so avoid using it as much as possible. Choose the most suitable format when using it (under the premise of achieving requirements, judge by size), the appropriate size, and then use Zhitu compression, while using Srcset to code Display on demand.
1. Use Smart Map
2. Use other methods instead of pictures (use CSS3; use SVG; use IconFont)
3. Use Srcset
4. Choose the right picture (webP is better than JPG; PNG8 is better than GIF)
5. Choose the right size ( The first load is no more than 1014KB; based on the mobile phone screen, the general width is not wider than 640)
remind everyone: over-compressing the image size affects the image display effect.
9. Reduce cookies, avoid redirection and asynchronous loading of third-party resource
cookies will affect loading speed, so static resource domain names do not use cookies. In addition, the redirection will affect the loading speed, so the correct setting on the server to avoid redirection. In addition, uncontrollable third-party resources will affect the loading and display of the page, so the third-party resources must be loaded asynchronously.
Script execution optimization
script improper processing will block page loading and rendering, so you need to pay attention to the following points when using:
1. CSS is written in the head, Java is written in the tail or asynchronous.
2. Avoid empty Src such as pictures and iFrames. The empty Src will reload the current page, affecting speed and efficiency.
3. Try to avoid resetting the image size. Resetting the image size means 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 images. DataURL images will become larger if they do not use the compression algorithm of the image, and will be decoded before rendering. It takes a long time to load
CSS optimization
1. Try to avoid writing Style attributes in HTML tags.
2. Avoid CSS expressions. The execution of CSS expressions must jump out of the rendering of the CSS tree, so please avoid CSS expressions.
3. Remove empty CSS rules. The 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. Use the properties of Display correctly. The 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- should not be used after display: block align
(4), display: table- * should not use margin or float
5, do not abuse Float, Float calculation is relatively large when rendering, try to reduce the use.
6. Do not abuse Web fonts. Web fonts need to be downloaded, parsed, and the current page redrawn to minimize use.
7. Do not declare too much Font-size, too much Font-size triggers the efficiency of the CSS tree.
8. No unit is required when the value is 0. For browser compatibility and performance, do not bring units when the value is 0.
9. Standardize various browser prefixes
(1), no prefix should be placed at the end.
(2), CSS animation is only used (-webkit- no prefix) two.
(3) Other prefixes are "-webkit- -moz- -ms-no prefix" (the -o-Opera browser uses the blink kernel, so it is eliminated).
10. Avoid making selectors look like regular expressions.
Advanced selectors take a long time to execute and are difficult to read, so avoid using them.
Java performs 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 Dom selection must be calculated and cached.
3. Cache list .length, every time .length is calculated, use a variable to save this value.
4. Use event agents as much as possible to avoid batch binding events.
5. Use the ID selector as much as possible. The ID selector is the fastest.
6. TOUCH event optimization, use touchstart and touchend instead of click, because the speed affects the speed fast, but it should be noted that Touch response is too fast, and it is easy to cause misoperation.
Rendering optimization
HTML documents are transmitted between networks by 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 markup in the document. The client browser can only correctly render the page after determining the page encoding, so when drawing the page or executing any java code Previously, most browsers (except ie6, ie7, and ie8) buffered a certain byte of data to find encoding information from them. The number of pre-buffered bytes varies among different browsers.
1. HTML using Viewport
Viewport can speed up the rendering of the page, please use the following code:
2, reduce the number of Dom nodes
Dom nodes affect the rendering of the page too much, you should try to reduce the number of Dom nodes.
3. Animation optimization
(1), try to use CSS3 animation.
(2) Reasonably use requestAnimationFrame animation instead of setTimeout.
(3) Appropriate use of Canvas animation within 5 elements using CSS animation, more than 5 using Canvas animation (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 done at the correct time.
(2) Increase the time interval of response changes and reduce the number of redraws.
5. The
following attributes (CSS3 transitions, CSS3 3Dtransforms, Opacity, Canvas, WebGL, Video) in GPU accelerated CSS to trigger GPU rendering, please use them reasonably. (PS: Interim use will cause the phone's excessive power consumption to increase.)