Website Foreground performance Optimization Tutorial

Before a series of blog post introduced the database performance optimization, in fact, the front-end optimization is also very important. When the database fan speed up, there will still be slow page loading phenomenon, at this time, the site needs to optimize the front-end code.

About the front-end performance optimization of the tutorial is not much, finally found a textbook, "high-performance Web site Construction Guide," below to the content of this book as the main line, explain the front-end performance optimization method.

one, reduce the HTTP request

This is an important principle for improving front-end performance.

One less request can be a single time.

1. Use the image map

We know that an IMG tag will initiate a request for a picture to the server, so if you combine multiple images into one image, you can turn multiple requests into a single request, which is the image map.

Image map through the user click the location of different and corresponding events, this will make the foreground code becomes more complex, difficult to understand, personally feel not feasible.

2. Merging JavaScript and CSS files

A script tag or link tag also initiates a request to the server, so you must reduce the number of times the page references an external file. In general, a page with a JS and a CSS.

3. Avoid redirects

Redirects also issue HTTP requests.

Ii. use of the content publishing network

The system will automatically pick the server closest to the user.

third, using the cache

1. Specify the expire header

Using expire to specify the use of caching for components

You can also use cache-control:max-age=315360000 instead

2. Use external JS and CSS files

Built-in JS and CSS are usually not cached.

Four, compression components

Streamline your code. There is the JS code

The main method is to delete the space, the longer variable name with V_1, v_2 and the like instead

Tool: gzip

put the CSS file on top

This allows the page to gradually load the rendering, enhance the user experience, and prevent white screen.

VI. Place JavaScript files at the bottom

Prevents the download script from blocking the page display.

Javdroider ' s Blog welcomes criticism suggestions ~ ~

Website Foreground performance Optimization Tutorial