Some experience tips for WEB front-end optimization_html/css_WEB-ITnose

Quotation:

1. A slow page may cause the website to lose more users.

2. A slow page of 500ms means that 20% of users will abandon their visit. (google)

3. 100ms slow means 1% of users will abandon the transaction (amazon)

I accidentally saw two articles on the Internet about front-end optimization some time ago Most of the techniques in the article come from Yahoo's optimization principles. Here is an excerpt and summary of the two articles.

Reduce Http requests

Generally speaking, we divide data into two types in terms of variability, variable and unchanged. Then unchanged data can be cached, while changing data cannot be cached. This is common sense, which means that the goal of reducing the number of our http requests can be converted into dividing the data into changing and unchanged parts. Unchanged data does not need to be requested again, so the number of http requests is reduced. Below we describe the way to classify data in points.

1. Merge files

include scripts, style files and pictures. You can optionally merge some Js and css into one file. , some images can use css sprites technology. What is the reason for this? Anyone who has done web development knows that js and css are basically unchanged and are static files, as are pictures. So what will be the effect if the unchanged files are merged together appropriately? The number of requests changes from multiple times to one, so the number of http requests is reduced. After the merger, the file size became larger. Will it affect the speed? Answer: Definitely, but there is a trade-off here. For example, if I merge 100 static files into 10 copies or 1 copy, it depends on you. The specific situation.

2. Specify Expires or Cache-Control,
For static content: Set the file header expiration time Expires value to "Never expire" (never expire)
For dynamic pages, add in the code cache-control, indicating how long it will expire after, such as:
response.setHeader("Cache-Control", "max-age=3600");
If the Expires file header is used, when the page content changes The file name of the content must be changed. Usually the version number
is added after the file content. This is something that most people ignore. In the past, many people released their own small systems and demos on the forum. Ahuaxuan ran over and took a look. My god, there are a lot of them. There are piles of js and css that are neither properly merged nor expired. Every time you refresh the page, you have to re-download these piles of js and css. That’s a lot of http requests. It’s meaningless and the traffic is huge. This happened.

This also happens from time to time in enterprise application systems. For example, we use extjs as the front-end technology, which is more than 400k. Every time we open a page, we import and download this js, which is boring. . Then children may ask, why don't you use apache, lighttpd, etc. for static files? Answer, so what if you use it? If you don't set expire or max-age, it doesn't have to be downloaded. The best way is to write a filter , and then judge it in the filter. If the URL meets certain conditions (such as matching the regular expression in the configuration file), then set a max-age. This is OK. It is too simple. It can be done with just a few lines of code. It's quick.

3. Caching Ajax requests
The caching method is the same as that of dynamic pages. Ajax requests need to use the get method, and the url length is limited to 2k (ie) (post requests have two processes, 1 to send request headers, 2 to send Request data, according to the http specification, the get request will only send a tcp packet).--------This paragraph comes from yahoo, regardless of whether it is true or false, let's consider from another aspect why it is best to use get Method, let’s talk about something that ahuaxuan has experienced. There was a project that used the post method for ajax requests. Later, it was found that errors often occurred, and Squid errors were thrown. Because our website uses Squid, the problem lies here. From the http protocol, we can understand that method=post refers to submitting data to the server, so a feature of Squid is that it will not cache post requests (in fact, it really should not be cached, because this will violate the semantics of the http protocol) , after changing the ajax request to the get method, everything returned to normal.

4. Remove duplicate js
Duplicate js import may also cause IE to reload the script.

5. Avoid redirects
There is a jump phenomenon that is often ignored by web developers but often wastes response time. This phenomenon occurs when the URL should have a slash (/) but is ignored. At this time, a 301 status code will be returned, and then the browser will re-initiate a request. In enterprise applications, redirection is a commonly used technology in enterprise applications. However, you should be careful when using it on website projects, because it is usually The redirection is actually the server setting http status=302 in the response header. After the browser receives it, it determines that it is 302 and will resend a request. The target address is the address specified in the previous return. In the website project, if it can If you don’t need redirection, don’t use it. If you are doing enterprise application projects, ok, it doesn’t matter much, just feel free to “fix it”.