Experience and skills in WEB Front-end Optimization

Experience and skills in WEB Front-end Optimization

Introduction:

1. Slow pages may cause the website to lose more users.

2. Slow 20% Ms means of users will give up accessing (google)

3. 1% Ms means that of users will abandon transactions (amazon)

 

Some time ago, I accidentally saw two articles on front-end Optimization on the Internet. Most of the skills are based on Yahoo's optimization principles. Here is an excerpt and summary of the two articles.

Reduce Http requests

In general, we divide the data into two types in terms of variability: Change and unchanged. it is common sense that the unchanged data can be cached and the changed data cannot be cached. In other words, to reduce the number of http requests, we can convert the data into two parts: change and no change. the unchanged data does not need to be requested again, so the number of http requests is reduced. Next we will describe the way to classify the data.

1. Merge files

Including scripts, style files, and images. You can choose to combine some Js and css into one file, and some images can use css sprites technology. What is the reason for this? People who have done web development know that js and css are basically unchanged, static files, and images are also similar. So what will happen if the unchanged files are properly merged? The number of requests has changed from multiple to one, reducing the number of http requests. After the merge, the file size increases, will it affect the speed? A: Yes, but here we need to weigh the balance. For example, if I merge 100 static files into 10 files or one copy, it depends on your situation.

2. Specify Expires or Cache-Control,
For static content: Set the file header expiration time to "Never expire" (Never expire)
On the dynamic page, add cache-control to the Code to indicate the expiration time, for example:
Response. setHeader ("Cache-Control", "max-age = 3600 ");
If the Expires file header is used, the file name of the content must be changed when the page content changes. Usually the version number is added after the File Content
This is ignored by most people. Many people have released their own small systems on the jar, as well as demos and ahuaxuan, javaScript and css are not properly merged and no expiration time is set. every time you refresh the page, you need to re-download this pile of js and css. there are many http requests. no traffic is needed.

This also occurs in enterprise application systems. for example, we use extjs as the front-end technology. It is boring to import and download this js every time we open a page. so the children may have to ask why static files do not need apache, lighttpd, etc. A: How about static files? download files without expire or max-age, the best way is to write a filter and then judge in the filter. If the url meets certain conditions (such as the regular expression in the configuration file), set a max-age, in this way, OK is too simple, and several lines of code can be done. kuaizai.

3. cache Ajax requests
The cache method is the same as that for dynamic pages. ajax requests must use the get method. The url length is limited to 2 k (ie) (the post request has two processes: 1 sending the request headers, 2 sending the request data, according to http specifications, get requests only send one tcp packet ). -------- this passage comes from yahoo. No matter whether it is true or false, let's take another consideration of why we 'd better use the get method to talk about What ahuaxuan has experienced, previously, a project's ajax request used the post method, and later found frequent errors, and threw out the squid error, because our website uses squid, the problem is here, as we can understand from the http protocol, method = post refers to the process of submitting data to the server, so one feature of squid is that it does not cache post requests (in fact, it really shouldn't be cached, because this will violate the semantics in the http protocol). After the ajax request is changed to the get method, everything will be restored as usual.

4. Remove duplicate js
Duplicate js imports may also cause ie to reload the script.

5. Avoid redirection
There is a jump that is often ignored by web developers but is often a waste of response time. This occurs when the URL should have a slash (/) but is ignored. At this time, a 301 status code is returned, and then the browser initiates a new request. in enterprise applications, redirection is a commonly used technology in enterprise applications, but you must be careful when using it on website projects, the normal redirection is because the server sets httpstatus = 302 in the response header. After the browser receives the message, it determines that it is 302 and then resends a request, the target address is the address specified in the previous response. if you do not need to redirect your website project, do not use it. if you are working on an enterprise application project, OK does not matter much, you can rest assured.