Have you done all of this optimization list?

The introduction

Today is the second day of the National Day. I didn’t go out during the holiday (don’t ask me why, imagine ~ 😭). A few days ago, I shared an article about the summary of the front end interview. In terms of performance optimization, we have sorted out some good points in the company’s project and shared them with you. If you have any misunderstanding, please correct it.

Optimize the generalization

1. First and foremost, CSS style sheets are placed in the page Head and the link is introduced, and javascript is placed at the bottom before the body closing tag to avoid blocking.

2, JS/HTML/CSS/images do compression merge, image preloading, lazy loading, is a cliche, here recommend a lossless limit compression tool, can press small 60 ~ 80% or so, the more troublesome is to manually operate every time – TinyPNG.

3. Reduce the number of DOM elements and DOM operations:

• Reduce the number of DOM elements, and make reasonable use of pseudo-classes such as :after and :before to avoid deep nesting of pages.
• Optimizing javascript performance and reducing DOM manipulation (or centralized manipulation) can effectively avoid pagesRedraw/rearrange;
• What is less? Sorry, there’s no way to give a standard accurate answer to this question, just optimize as much as possible, such as data pagination, first screen straight out, load on demand, etc.

4. CDN distribution of static resources:

• The intention of CDN is to reduce resources as much as possible to ensure the continuity of information under the circumstances of forwarding, transmission and link jitter.
• In popular termsCDNThe system can real-time according to network traffic and the connection of each node, load status and toUser distanceAnd response time to redirect the user’s request away from the userThe nearest service nodeOn — once people all say the distance produces the United States, changed later all say the distance produces small three, hereDistance produces the user running away, so enough to illustrate the CDNThe importance of;
• CDN using the mechanism of each node cache cache is very serious, when our project static resources (just before the resources stored in CDN) modified, if there is no update accordingly, CDN cache sees or old web pages, the solution is to refresh the cache, seven NiuYun, tencent cloud can be alone for a refresh file/directory;
• Advertising often said: XX wine is good, but do not drink oh, CDN hosting is also the same, reasonable use: pictures, commonly used JS components, CSS reset style, that is, not often changed files can go CDN, including some of the project introduction pages;
• The img tag sets the width and height, and in doing so it also reduces the page sizeRedraw/rearrange, the use ofWebPFormat images, it can compress the original (PNG) image nearly 98%, of course it is not perfect:

WebP was originally released in 2010, the goal is to reduce file size, support lossless, lossy compression, dynamic, static pictures, compression ratio is better than GIF, JPEG, JPEG2000, PNG and other formats, very suitable for the network and other picture transmission, now has been more and more browser support, Of course,WebP format also has its disadvantages. The algorithm is more complex than other formats, which will save traffic resources and occupy computing resources, causing a greater burden on the computer. The maximum number of pixels supported by WebP is 16383×16383. Lossy WebP supports only 8-bit YUV4:2:0 format. Lossless compression (reversible compression) WebP supports VP8L encoding and 8-bit ARGB color space. Both lossy and lossless compression support Alpha transparent channel, ICC color configuration, XMP interpretation data, caniuse.com

Advantage:

• It is almost no exaggeration to say that it is as small as it can be;
• Small and beautiful at the same time, but also good quality, almost indistinguishable from the original picture;
• GIF, JPEG compression used to be unclear, but now it is so easy.

Disadvantages/difficulties:

• Not all browsers currently support itWebPTherefore, it is necessary to solve the browser adaptation problem;
  
  
• For projects already online, adoptWebPIt’s too much work to replace a lot of images (not sure if the background program can handle it).

5, domain name split:

• What is split domain name? Many companies only apply for a domain name for the initial project construction, all the content of the site (HTML/PHP/JSP, JS, CSS, IMG, etc.), domain name splitting is mainly to increase the parallelism of browser resource requests, that is, concurrency problems, so that the browser can launch more requests at the same time. It also solves the problem of cookies carried by default in requests, reducing data transmission bytes;
• How to break it up? Taking the current separated development of front and back ends as an example, it is suggested to be divided into three categories:

• Front-end class – HTM, CSS, JS, ICONS/slices of the project business itself;
• Static class – namely the CDN resource class mentioned above;
• Dynamic classes – can be categorized as back-end API interface classes;

The following is the number of concurrent requests by browser, data from chorme search, cherish life, stay away from…… 🙏 :

Reduce the number of HTTP requests

• Yes, you read correctly, it is to reduce the number of HTTP requests, save the network request time, but you may ask, the previous is not split domain name? One is deployment split, one is to reduce the request, no problem oh;
• First let’s take a look at the HTTP request process (in a nutshell) :

• DNS domain name resolution n/A 1. Take out the phone and find the number of a contact.
• Initiate TCP three-way handshake –2.When connected:A)Hello, hello, this is Changjiang No.1, can you hear me?B)Hello this is Changjiang no.2 can you hear you can you hear meA)I can hear you. Let’s get down to business… ;
• Normal data transmission…… – 3. Having a good chat;
• End 4 waves of transmission break –4.Finished talking, ready to say goodbye:A), (can be a server, can also be a client) to say I have said, you see do;B)Good I also said;B)B then sent another message to A, goodbye.A)And then A received B, and B there has put down the phone to hang up, A wait to listen to B did not say what, also hung up (hang A hair ah, bitch ruthless, actor without justice, accompany you with that long, do not give A good comment ~ 😂);
• Of course, the current oneHTTP / 2.0The 2.0 process also hasTLS/SSLHTTP is a hypertext transfer protocol and information is transmitted in plaintext. HTTPS is a secure Certificate Authority (SSL) encrypted transmission protocol and a network protocol for identity authentication. Content is transmitted through integrity verification and symmetric encryption. The advantages of generating a unique encryption key for each connection and the inability of a third party to forge the identity of the server (client) are also disadvantages because there are more things to do and the time required for interfacing, which is the root cause of HTTPS being slower.
• Let me show you two pictures, just so you can see them clearlyTemporarily, but only the HTTP / 1.0, HTTP / 2.0 figure next time have time and again, there is a big show me oh, say this looks more SAO gas, everybody would prefer, ha ha ~ :

Conclusion: Given the complexity of each request, is it necessary to reduce the number of HTTP requests? The answer is yes, we will optimize in the following dimensions:

• mergeJS, CSS,File;
• Image/icon sprites merged, or usediconfontFont icon, orSVG Sprites;What is Svg Sprites?;
• React/Vue/Angular load resources on demand, i.e., load what the current page is using, avoid loading things unrelated to the current pageMVVMFramework, build and package tools based on Webpack, well done;
• Front-end data cache (such as: a list page, enter the details, and then return, the user interaction is very frequent, you can cache the list of data progress, do not have to load every return, such as 5 minutes update.

7, data set cache, tired to write not to move, HTTP cache Settings, before the summary of the interview 👉 how to set HTTP cache? ; 8, site server to enable Gzip compression, of course, you can also check out Brotli or Zopfli, Brotli is said to be more effective than Gzip and Deflate, interested students can check out;

9. Avoid redirects and minimize the use of iframes, which block rendering of the main page;

10. Avoid CSS Expression, also known as Dynamic properties;

Reasonable use of dnS-prefetch, prefetch, preload, defer, async:

• dns-prefetch: Use dns-prefetch to perform DNS pre-resolution for domain names used in the project, reducing DNS queries. BAT major giants are doing so, please see the picture below, DNS detailed parsing process today will not talk, code word code is not moving, write and share than overtime to do the project is tired, please understand ~;
• prefetch: is a very low priority resource loading flag that the browser will download during idle time (after the main process resource has loaded)prefetchThe identified resource is cached to disk and read directly from the cache when later modules use the file. This feature webpack has a plug-in that is automatically inserted into the page after configuration;
• preload: Yes, it is a property that can preload resources, see the official descriptionAPIUnder normal circumstances, we may pre-load the audio, IMG, font, script and other resources needed by the next business (even the next routing page oh), so that the page can be opened in 0 seconds!

• So much for now, welcome to add…

Conclusion:

• Active/passive monitoring tools, such as WebPagetest, Lighthouse, SpeedCurve, and New Relic, are all highly effective in helping us to analyze and identify problems and thus provide the right remedy.
• DNS pre-resolution is not important, it is a URL to resolve IP, to query the root server of a process, may be summed up next time to share, interested students can also learn about it first,
• To do a project well, every detail is very important. I hope today's sharing can bring some help to everyone's work. Thank you!

Article Sharing Plan:

Recently, I have been thinking about how to share the accumulation in the work in a regular way. During these days of National Day, I have also been reading many blogs written by great gods. Finally, I decided to try to write a series of # animation # articles based on my ability and time. The above is today’s share, the novice on the road, I will try to make themselves better, write better articles, there are wrong articles, please correct them. If you found this article helpful, please like it or follow us on our wechat account.

Author: Su Nan – Chief Pit filling officer

Communication group: 912594095, public account: honeyBadger8

This article is original, all copyright belongs to the author. Commercial reprint please contact @IT· Flathead brother alliance for authorization, non-commercial reprint please indicate the original link and source.