Web Performance Optimization 1

optimization rules for WEB foreground

One, minimizing HTTP requests

There are several common ways to effectively reduce HTTP requests:

1, merge scripts with style files, such as can be multiple CSS files to synthesize one, multiple JS files to synthesize one.

2, CSS Sprites use CSS background related elements for the absolute positioning of the background map, a number of images to synthesize a picture.

Second, use the browser cache

When users browse the different pages of the site, a lot of content is repeated, such as the same JS, CSS, pictures and so on. If we can suggest even forcing the browser to cache these files locally, it will greatly reduce the amount of traffic generated by the page, thus reducing page loading time.

Depending on the server-side response header, a file has several different cache statuses for the browser.

1, the server side tells the browser not to cache this file, each time to update the file on the server.

2, the server does not give any instructions to the browser.

3, in the last transmission, the server sent last-modified or etag data to the browser, the browser will submit the data to the server again, verify that the local version is up to date, if the latest server returns 304 code, tell the browser to use the local version directly, Otherwise, download the new version. In general, there are only static files, and the server side will give the data.

4, the server forces the browser to cache files, and set the expiration time. Before the cache expires, the browser will use the local cache file directly and will not generate any communication with the server side.

What we want to do is to try to force the browser to the fourth state, especially for JS, CSS, pictures and other changes less files.

Iii. Use of compression components

IE and Firefox browser support client gzip, before transmission, the use of gzip compression and then pass to the client, the client after receiving the browser decompression, so that although a little bit of the server and the client's CPU, but in exchange for a higher bandwidth utilization. For plain text, the compression rate is considerable. If each user saves 50% of the bandwidth, then the leased point of bandwidth can serve more customers, and shorten the transmission time of the data.

Iv. pre-loading of images and JS

The simplest way to preload an image is to instantiate a new image () object in JavaScript, and then pass in the URL of the image that needs to be loaded as a parameter.

function preloadimg (URL) {

var img = new Image ();

img.src = URL;

}

Can pre-load JS and pictures on the login page

Five, put the script at the bottom

The problem that the script puts on the top,

1. When using scripts, gradual rendering will be blocked for content that is below the script

2. Parallel downloads are blocked when downloading scripts

At the bottom there may be a JS error problem, when the script is not loaded, the user triggers the script event.

To consider the situation comprehensively.

VI. Place style files at the top of the page

If the stylesheet is loaded, building the rendering tree is a waste, and there are two possible scenarios where the style file is placed at the bottom of the page:

1, white screen

2. Flicker without style content

Vii. use of external JS and CSS

The inline JS and CSS are made into the external JS, CSS. Reduce the duplication of download inline JS and CSS.

Eight, cut a group to multiple domains

The main purpose is to improve the parallel download capability of the page component. But do not cross too many domain names, we recommend the use of 2 subdomains.

Nine, Concise JS

Can do two levels

1. Streamline: Remove unnecessary characters from your code to reduce their size.

2, confusion: in the simplification, but also rewrite the code, function, variable name is converted to a shorter string

You can use Shrinksafe to streamline JS http://shrinksafe.dojotoolkit.org/

X. Streamline CSS

Remove unnecessary characters from your code to reduce their size.

You can use CSS Compressor http://www.cssdrive.com/index.php/main/csscompressor/

Xi. streamlined images, Flash

For large pictures, Flash, to balance the effect and size.

Web Performance Optimization 1