Number of Http requests
For the same domain name, different browser cores and different versions of browsers, most of the concurrent requests are 6;
Optimization:
a. Sprite image: CSS Sprite, also known as CSS sprite, is a CSS image merging technology. The method is to merge small icons and background images into one image, and then use CSS background positioning to display the image that needs to be displayed section.
b. Picture map: It is a paradigm of merging small pictures and large pictures. It is similar to Sprite. The difference is only in the realization principle. Sprite only presents a certain part of the picture through CSS, while the picture map is Control the display area from the html code.
c. JS&CSS merge: merge multiple small js, CSS into one big js, CSS file, indirectly achieve the purpose of reducing http requests.
Whether the component is compressed
Compression method: Set the received compression method in the http request, compress the Response resource on the server side and then send it to the browser. Generally use GZIP to set the content-Encoding field
Compression object: picture music does not need to be compressed; Js, CSS is compressed by removing spaces and carriage returns, and then compressed by GZIP;
Whether the image format and size are appropriate
Picture format: JPG is the most cost-effective;
Picture size: Common specifications are 480×800, 600×1024, 720×1280, 800×1280, etc., get the original picture instead of zooming in or out of the picture through code;
Image compression: compression tools such as TinyPNG, Smush.it can get better compression and the image quality remains unchanged;
CSS on top
CSS should be placed before the end of the head tag at the beginning of the html code, and placing it at the bottom may cause a bad experience of "flash screen";
JS at the bottom
When downloading js, the parallel download mechanism fails. The rendering engine will wait for the completion of the js download before starting to render, and finally load js to reduce page loading time;
JS & CSS compression
Compression method, such as:
//CC's compressed sample code function echo(stringA,stringB){ var hello = "你好"; alert("hello world");}The first step: "simplify", remove spaces, line breaks and comments in js, making the js code compact without losing its semantics. Such as:
function echo(stringA,stringB){var hello="你好"；alert("hello world")};The second step: "Confusion", the method name and variable name are expressed in a shorter way, such as a variable can be expressed by one character. Such as:
function echo(c,b){var a="你好",alert("hello world")};Finally, the compressed script file is compressed using the GZIP compression algorithm set on the server side;
Whether to add cache
Set expires and cache-control through HTTP META;
Avoid non-200 return values
If an http request returns a status code other than 200, we believe that this request is meaningless and occupies scarce network resources, so a non-200 return status code should be avoided;
Use CDN
Time-related: first screen time, first resource download time, total resource download time, user operation time;
WebView related: Memory: Memory changes before and after loading the page, which can indirectly reflect the number and size of resources in H5, such as the number of doms and the size of pictures;
CPU: When the resource style on the page is complicated and the visual effect is emphasized, the CPU usage can be observed to reflect the H5 drawing quality. If the CPU is at a high occupancy rate for a long time, consider reducing the visual effects of high computational complexity and other means;
FPS: The frame rate, especially in the H5 with video and animation effects, should be paid attention to to prevent serious jams from flowing out.
// For front-end learning training, video tutorials, learning routes, please add prestige: kaixin666haoyun}