WEB Front-end optimization Guide

There are three main reasons to start from the front-end::

1. There is a potential for improvement. If we reduce the volume by half, we can reduce the response time by 40%.
2. It takes less time and resources to improve the frontend than to improve the backend. (To improve the backend, re-design the application planning, code, find methods to optimize the code, add or change hardware configurations, distributed databases, and so on)
3. Our golden rule is: first, optimize the front-end performance. These things consume 80% of the client response time.

I. There are three methods out of code:

1. Use cdn Technology

For more information, see Google. (The general principle is to determine the visitor's location and access content to select the nearest server to process user requests)

2. Add a long-expired Header

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

 

The browser uses cache to reduce the number of HTTP requests to speed up page loading. If a long expiration time is added to the page header, the browser will always cache the elements on the page.
However, this will bring about a problem, that is, if something on the page changes, you have to change the name. Otherwise, the user side will not take the initiative to refresh it. In the yahoo Working Group, the version number is used, for example, yahoo_2.0.6.js.

3. Gzip Compression

Gzip is currently the most popular and effective compression method. It was developed by GNU and standardized by RFC1952.
(Gzip compresses images, css, scripts, and so on the server end, and transfers the files to the browser on the client side before decompression, which can improve the transmission speed, but the pressure on the server will increase, generally, it is appropriate to select some elements for compression.

 

4. Avoid redirection

Redirection slows down the user experience and delays everything until it reaches a new page. One of the most wasteful redirection often happens, and our developers often ignore it, for example, using Alias, mod_rewrite, or DirectorySlash in Apache.
Redirection is often used to jump from an old website to a new website, and to connect different parts of a website and in some situations (such as different browsers, different user account types, and so on) user Guide. Redirection is simple and requires only a little extra code. Although redirection reduces developers' complexity in these cases, it reduces the user experience, the work und is to use Alias and mod_rewrite. If the two parts are on the same host, if they are caused by domain name changes, the work und is to create a CNAME through Alias or mod_rewrite (one DNS record, one Alias, pointing from one domain name to another)

5. Configure ETags

ETags (Entity tags) is a function of the server and the browser. It is used to determine whether the elements in the browser cache are consistent with those on the original server. ETags are more flexible than last-modified date. It uses a unique string to identify the version of an element.
The source server uses the ETag in the response header to specify the ETag of an element:

HTTP/1.1 200 OK
Last-modified: Tue, 12 Dec 2006 03:03:59 GMT
Etag: "10c24bc-4ab-457e1c1f"
Content-Length: 12195

Then, If the browser needs to verify this element, it will use the If-None-Match header to upload ETag back and forth to the source server. If yes, a 304 status code will be returned from the source server to the browser, which saves the overhead of transmitting specific data.

GET/I/yahoo.gif HTTP/1.1
HOST: us.yimg.com
If-modified-since: Tue, 12 Dec 2006 03:03:59 GMT
If-None-Match: "10c24bc-4ab-457e1c1f"
HTTP/1.1 304 not modified

 

The problem with Etags is that it will identify the specific server. If the server is changed, Etags will lose its original functions, but this is now too common on the network, because we often use Server clusters. By default, Apache and IIS embed data in Etag, which dynamically reduces the chances of successful verification.

The ETag format of Apache1.3 and 2.x is inode-size-timestamp. Although a file may be in the same directory of different servers, the same size, security level, timestamp, and so on, its inode will vary with the server.

IIS5.0 and 6.0 have something similar to Etags, called the timestamp: ChangeNumber (Change number). The change number is a counter used to track IIS configuration changes, changeNumber is different between different IIS servers.

The final problem is that the Etags produced by IIS and Apache cannot be matched between different servers, so that our browser cannot get the 304 response we expect, what we get is a normal 200 response and a normal data stream. It doesn't matter if your website has only one server. If it is a cluster and you use the default ETag configuration, your users will get a slower page, your server also has a higher load, consumes more bandwidth resources, and the proxy cannot efficiently cache your content, even if you have a long-expired header (: see the third rule.

If you don't want to take advantage of the elastic verification model provided by Etags, you 'd better turn it off. In Apache, you can turn it off by writing the following sentence in the Apache configuration file:
FileETag none

 

2. We will discuss the following methods from the aspect of code:

1. Reduce the number of http requests

Images, css, script, flash, and so on will increase the number of http requests. Reducing the number of these elements can reduce the response time.

CSS Sprites technology can reduce the number of image requests, put scattered small images together, and use background-position to change the location of the background image, provided that the HTML element defines the width and height in advance, in fact, it is like a mask. Moving the background will show different scenes.

Embedded images use the data: URL scheme method to directly embed the Image Content Code into HTML code, which increases the size of HTML code, the improved method is to embed embedded images into CSS (CSS is cached), which will effectively reduce the number of HTTP requests without increasing the size of HTML.

Many users access your website with no cache, so the first speed will become very important.

The first rule is the most important one.

2. Place the style sheet on the top

We found that placing CSS in the document header will make the webpage Load faster. In this way, the page can be loaded gradually.
The problem with placing a style sheet close to the bottom is that it prevents the gradual display of page elements. This will also cause the "flash of unstyled content" to display the page content in the form of no style before the style sheet is loaded. After the style is loaded, the page will be re-painted, the style is changed in a flash.

3. Put the script at the bottom

Put the script at the bottom of the page as much as possible. One reason is to gradually render the page, and the other is to achieve better parallel download.

For the script, the content below the script is blocked from being loaded gradually, because the following content will be downloaded only after the script is downloaded. the problem caused by the Second Script is to prevent parallel downloads. "HTTP/1.1 Specification" suggests that the browser can download no more than two domain names at the same time (by actual monitoring, more than two are found ), I used to allow IE to download 100 images in parallel. When the script is being downloaded, the browser will not start to download anything.

4. Avoid css expressions

CSS expressions is a powerful (and dangerous) Way to dynamically change CSS attributes. They have been supported since ie5. For example, CSS expressions can rotate the background color every hour. But is ignored by non-ie browsers.

Background-color: expression (new date (). gethours () % 2? "# B8d4ff": "# f08a00 ″);

 

The problem with expressions is that its computing frequency is definitely beyond our imagination. Even when we move the mouse, it will cause page re-painting!

The following is an example Page.

One way to reduce the number of css expressions is to use one-time expressions. When expression calculates a definite value for the first time, it makes the style equal to this value without changing. If the style attribute must be changed dynamically, use the time handle!

5. Extend scripts and styles

Should Javascript and CSS be external calls or embedded?
It is faster to use external call files because they can be cached. If they are embedded in pages, they cannot be cached! Think about it. If users want to view many pages on your website and use the same external script and style, once they are cached, they will no longer need to download them, this will bring you great potential benefits.

6. Reduce script volume

Two popular tools are used to reduce the script volume-JSMin and YUI Compressor. (Press: This compression is different from Gzip compression, Gzip is transmission compression, and this is code compression ).

The readers should select or use the above methods as appropriate. The principle of selecting the methods is to complete the client functions at the lowest cost.