Experience in WEB front-end optimization

With the advent of the WEB2.0 era, unprecedented development has been brought to the network. Front-end user experience is becoming more and more important to make up for some of the shortcomings of poor user interaction in the B/S structure. However, this will bring about a problem, which is that it will increase the pressure on the client. For example, using a large amount of JS code, everyone will Knowing that JS code runs on the client will affect the parsing efficiency of the entire web page in the browser, which may also imply an increase in client traffic, so whether it is from the perspective of server load or the user's perspective, for It is particularly important to optimize the client code! This article mainly explains the methods of WEB front-end optimization from both internal and external aspects. I hope it can give readers some experience and inspiration.

First, let’s look at the http traffic data of http://yahoo.com through a Yahoo statistical chart:

We can find that from the first server request to a page being fully loaded on the client, reading the HTML code only accounts for 5% of the entire response time. This result applies to the vast majority of websites. In the sampled United States Among the top ten websites, only one has more than 5% but less than 20%. The remaining 80% of the time is used to read other content of the web page, that is to say, the front-end (original text is front-end, meaning does not include html The rest of the code can be pictures, scripts, flash, videos, various things). This is the key reason why we should focus on these things to improve display speed.

There are three main reasons why you should start with the front end :

1. There is potential for improvement and improvement here. If the volume can be reduced by half, the response time can be reduced by 40%.
2. Improving the front end requires less time and resources than improving the back end. (Improving the backend involves redesigning the application plan, code, finding ways to optimize the code, adding or changing hardware configurations, distributed databases, etc.)
3. Our golden rule is: optimize front-end performance first, these things consume 80% of the user-side response time.

1. Outside of code, we have the following three methods:

1. Use CDN technology

For specific methods, you can Google it. (The general principle seems to be to determine the visitor's location and accessed content to select the nearest server to handle the user's request)

2. Add a long-expired header

Expires: Thu, 15 Apr 2010 20:00:00 GMT

Browsers will use caching to reduce the number of http requests to speed up page loading time. If a long expiration time is added to the page header, the browser will always cache the elements in the page.
However, this will bring about a problem, that is, if the things on the page change, the name must be changed, otherwise the client will not actively refresh. In the Yahoo work group, the version number is used, such as yahoo_2.0.6.js

3.Gzip compression

Gzip is the most popular and effective compression method today. It was developed by GNU and standardized by RFC1952.
(Gzip compresses images, css, scripts, etc. on the server side, and then sends them to the client's browser to decompress them. This can increase the transmission speed, but the pressure on the server will increase. Generally, it is more appropriate to compress some elements.