Features of mobile: Small screen, compatibility with new features, support for newer HTML5 and CSS3 features, interaction with Native applications, etc. However, the computing and network resources available on mobile are extremely limited, so it often takes more work to optimize on mobile.

Network loading class

The first screen data request is advanced

The first screen data request is in advance, so you don’t have to go to the back end to request data after the JavaScript is loaded. Data requests are usually the longest part of the critical path of page content rendering and cannot be parallel, so if you can advance data requests, you can greatly reduce the rendering time of page content.

First screen loading and on demand loading

The network resources of the mobile terminal are limited. To load the content on the first screen as soon as possible, ensure that the load resources on the first screen are minimum. Non-first screen content is loaded asynchronously in scroll mode. It is recommended that the delay for displaying data on the first screen of the mobile terminal should not exceed 3 seconds.

Inline first screen mandatory CSS and JavaScript

In order to have basic styling in the browser when the HTML is loaded, you need to use

Modular resources are downloaded in parallel

Try to ensure the parallel loading of JavaScript resources, mainly refers to the asynchronous loading of modular JavaScript resources, such as AMD’s asynchronous module, using the parallel loading mode can shorten the load time of multiple file resources.

Meta DNS prefetch Sets DNS prefetch

Configure DNS pre-resolution for file resources so that the browser resolves the IP address of the host that obtains static resources in advance. This prevents the browser from sending a DNS resolution request only when the request is received.

<meta http-equiv="x-dns-prefetch-control" content="on" >
<link rel="dns-prefetch" href="//cdn.domain.com" >
Copy the code

Resource preloading

The resources that may be used after the first screen of the mobile terminal is loaded must be loaded as soon as possible after the first screen is loaded to ensure that the resources are loaded before users need to browse.

Using the MTU Strategy

Generally, the Maximum Transmission Unit (MTU) of the TCP network is 1500B, that is, the Maximum amount of data that can be transmitted within a round-trip Time (RTT) is 1500 bytes. Therefore, in the development mode of front and back end separation, try to ensure that the HTML content of the page is less than 1KB, so that the entire HTML content request can be completed in a single RTT request, to maximize the speed of HTML loading.

The cache class

Use the browser cache

Use cache-Control, Expires, Etag, and last-Modified to set the HTTP Cache. You can also use localStorage to store the data returned from the interface. Alternatively, localStorage can be used to save CSS or JavaScript static resource content to implement offline mobile applications, minimize network requests, and ensure fast loading of static resource content.

Static resource offline solution

For mobile or Hybrid applications, you can set the offline file or offline package mechanism so that static resource requests can be read locally, speeding up resource loading and implementing offline update.

Try using AMP HTML

Use the elements in the AMP Component to render directly instead of the original page elements.

Class pictures

Image compression

Ensure that all images used in the page are compressed and optimized, and not used as original images.

Use smaller images and use Base64 embedded images wisely

Convert images smaller than 2KB into Base64 encoding and embed them in HTML pages or CSS files, reducing the number of HTTP requests to the page.

Images that use a higher compression ratio format

Use images with a high compression ratio format, such as WebP (which requires a degraded compatibility scheme), etc. In the case of the same picture quality, the high compression format is smaller than the image volume, can complete the file transfer faster, saving network traffic.

Lazy image loading

In order to minimize page content, speed up page rendering and save mobile network traffic as much as possible, lazy loading is recommended for image resources in the page, which dynamically loads images when the page is scrolling.

Use MediaQuery or srcset to load images of different sizes depending on the screen

Depending on the screen size and resolution of the mobile terminal, images or background images of different sizes can be output to save network traffic without reducing user experience and speed up the image loading of some models.

Use iconFont instead of the image icon

Use iconfont instead of image icon in the page as much as possible, because iconfont size is small, and is a vector image, so when zooming without distortion; You can also easily modify the image size and rendering color.

Define image size limits

It is recommended that the load of a single image not exceed 30KB, to avoid large image load time and block the download of other resources on the page.

The script class

Use id whenever possible

Try to use the ID selector when selecting the page DOM element, because id selector is the fastest.

Cache DOM objects properly

For DOM objects that need to be reused, set cache variables first to avoid having to look up the entire DOM tree each time you use them.

Use event proxies for page elements to avoid direct event binding

Using an event agent avoids binding every element and avoids memory leaks and event binding issues that require dynamic addition of elements, so try not to use event binding directly.

Use touchstart instead of click

There is a 300ms delay between the touchStart event and the click event on the mobile. If the page has no touchMove scrolling, you can use the TouchStart event instead of the element’s click event. Speed up page clicks and improve user experience. But we also need to be aware of the click-through problem of the touch action of the overlapping element on the page.

Avoid handling continuous touchMove and Scroll events

Set event throttling for events such as touchmove and scroll that may trigger call-back continuously. For example, set the event to be processed every 16ms (the frame interval of 60 frames is 16.7ms. Therefore, it can be reasonably set to 16ms).

Apply colours to a drawing class

Fixed screen rendering using Viewport

Setting the Viewport on the mobile side prevents zooming from rearranging and redrawing pages. The following is how to fix the Viewport setting on the mobile.

<! -- set viewport not to zoom --> <meta name="viewport" content="Width = device - width, initial - scale = 1.0, the maximum - scale = 1.0, user - scalable = no">
Copy the code

Avoid rearrangement and redrawing of various forms

Rearranging and redrawing pages is very performance intensive, so it is important to minimize rearranging and redrawing pages, such as changes in the size of the page image, changes in the position of elements, etc., which can cause rearranging and redrawing pages.

Use CSS3 animation to enable GPU acceleration

When using CSS3 animation, set Transform :translateZ(0) to enable GPU processing acceleration in mobile device browser, which makes the animation process more smooth. However, GPU acceleration in Native WebView may cause App Crash.

-webkit-transform:translateZ(0);
    -ms-transform:translateZ(0);
     -o-transform:translateZ(0);
        transform:translateZ(0);
Copy the code

Use Canvas and requestAnimationFrame properly

Choose a more efficient animation implementation such as Canvas or requestAnimationFrame, and try to avoid using setTimeout, setInterval and other methods to directly deal with continuous animation.

SVG instead of images

Consider using SVG instead of images for animation because the content is smaller in SVG format and the SVG DOM structure is easy to adjust.

Don’t abuse of float

During the layout rendering phase after DOM rendering tree generation, float element layout calculation is performance intensive, so the use of float is minimized, and fixed layout or flex-box elastic layout is recommended for page element layout.

Do not abuse Web fonts or excessive font-size declarations

Too many font-size declarations increase the size calculation of the font and are unnecessary.

Architecture Protocol class

Use server-side rendering

Server-side rendering can speed up the rendering of page content, avoid the appearance of blank pages, and solve the problem of mobile page SEO.

Performance disadvantages of using NativeView instead of DOM

We can try to use the MNV * development mode of NativeView to avoid the problem of slow PERFORMANCE of HTML DOM. At present, the MNV * development mode has been used to make the page content rendering experience close to the experience of the client Native application. However, frequent interactions between the JS Framework and native Framework should be avoided.