Shulou(Shulou.com)06/03 Report--

This article will explain in detail the example analysis of resource consolidation and compression for Web front-end performance optimization. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

Two purposes of resource consolidation and compression

Reduce the number of http requests

Reduce the size of the requested resources

Google homepage case study

Html compression

Css compression

Compression of js

File merging

Turn on gzip

I. html compression

Figure 1 shows that the home page of Sina is not compressed, while that of Google in figure 2 is compressed.

HTML code compression is to compress the meaning of these characters in a text file, but characters that are not displayed in HTML, including spaces, tabs, newline characters, etc., as well as some other characters, such as

HTML comments can also be compressed.

How to compress html

Use online sites for compression

Nodejs provides html-minifier tools

Back-end template engine rendering compression

II. Html compression

Invalid code deletion

Css semantic merging

How to compress html

Use online sites for compression

Use html-minifier to compress css in html

Use clean-css to compress css

III. Js compression and confusion

Deletion of invalid characters

Culling comment

Reduction and optimization of code semantics

Code protection

How to compress and confuse js

Use online sites for compression

Use html-minifier to compress js in html

Use uglifyjs2 to compress js

III. File merging

Comparison between file merging and non-merging

There is an uplink request for insertion between the file and the file, which adds 1 network delay to NMUI.

It is more seriously affected by packet loss.

May be disconnected after passing the proxy server

Problems with file merging:

The problem with the first screen rendering

Cache invalidation problem

Resolve problems with file merging:

Common library merge

Merging of different pages

Act according to the opportunity and improvise.

How to compress and confuse js

Use online sites for compression

Merge using nodejs

Picture-related optimization

Differences between png8/png24/png32

Png8-256colors + support transparency

Png24-- 2 ^ 24 colors + does not support transparency

Png32-- 2 ^ 24 colors + support transparency

Each picture format has its own characteristics, so it is important to choose different picture formats for different business scenarios.

Business scenarios commonly used for pictures in different formats

Jpg-most business scenarios that do not require transparent pictures

Png supports transparency and good browser compatibility.

The compression degree of webp is better, and there is compatible jaundice in ios webview.

Svg vector graphics, code embedded, relatively few, relatively simple picture style of the scene

Business scenarios commonly used for pictures in different formats

Jpg-most business scenarios that do not require transparent pictures

Png-most business scenarios that require transparent pictures

Webp-all Android

Svg Vector Diagram-- A business scenario with relatively simple picture style

Compress the picture

For the real picture, give up some relatively insignificant color information

CSS Sprite

Integrate some of the pictures used on your website into a single picture.

Advantages

Reduce the number of HTTP requests on your site

Shortcoming

When the integrated picture is relatively large, it is slow to load at one time.

Image inline

Embed the content of the picture into html to reduce the number of HTTP requests on your website

Use webp on Android

The advantage of WebP is that it has a better image data compression algorithm, can bring smaller picture volume, and has no difference in image quality recognized by the naked eye; at the same time, it has the characteristics of lossless and lossy compression mode, Alpha transparency and animation, and the conversion effect on JPEG and PNG is very excellent, stable and unified.

On the "Web front-end performance optimization of resource consolidation and compression example analysis" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.