Shulou(Shulou.com)06/03 Report--

This article mainly introduces what are the golden rules for the construction of the website, which are introduced in great detail and have a certain reference value. Friends who are interested must finish reading them.

1. Minimize HTTP requests

When users load your page, 80% of the time is spent downloading items on the page, including pictures, styles, scripts, FLash, etc. So reducing the number of HTTP requests can improve response speed. For example: baidu, google, there is only one item.

As we all know, merge files, CSS Sprite, etc., what I want to say is: not to blindly pursue the reduction of requests, but to weigh the impact on other factors after doing so.

Merge files: the coupling is so large that it is impossible to distinguish each functional module at a glance.

CSS Sprite: a large number of integrated images will geometrically increase the difficulty of maintenance such as revision.

In addition, the super-large integrated picture will not be displayed where it is used until it is downloaded.

2. Reduce the number of DNS searches

Each independent domain name will have a corresponding IP address, that is, when you type www.baidu.com, the server will not know that you are looking for "baidu", but will resolve to the corresponding IP address and then access it. Just like you look up the phone book, the browser waits for the parsing process, which usually takes 20 to 120 milliseconds.

The number of DNS searches is the total number of different domain names, including subdomains, visited by downloading CSS, JS, pictures, etc. An external domain name that is different from the main domain name will take more time.

Solution: CSS to solve some picture styles, and JS animation (CSS3 NB place).

Place portable external domain resources under the subdomain name.

3. Avoid jumping

The jump is implemented using 301 and 302 codes, such as in the following HTTP request header:

HTTP/1.1 301 Moved Permanently

Location: http://example.com/newuri

Content-Type: text/html

The browser will direct the user to the URL specified in Location, where you need to specify Expires or Cache-Control for caching.

Although JS can jump, in order to ensure that the back button works, you should honestly use the 3XX status code.

This part seems to have nothing to do with the pure front end or not much contact, but sooner or later you have to master it in order to grow into a real NB front end.

4. Cachable AJAX

We all know what caching means to users, so there must be caching in ajax.

But what I want to say is to determine whether to cache or not according to the demand.

Where IE automatically adds caches, while chrome is not.

Here is a list of common ways to clear the cache:

Header ("Cache-Control:no-cache,must-revalidate") on the server side

Add xmlhttpObj.setRequestHeader ("If-Modified-Since", "0") before ajax sends the request

Add xmlhttpObj.setRequestHeader ("Cache-Control", "no-cache") before ajax sends the request

Add? t = "Math.random ()" after the URL parameter of ajax

5. Postpone loading content

The performance and behavior of the web page should be separated, first performance, then behavior. Therefore, the first priority is to render the page quickly, then some necessary functional interaction, and then some animation or enhance the fancy effect of the experience.

6. Preload

The goal of preloading: using asynchronous or browser idle time to load the content to be used in order to respond to user operations quickly.

For example:

In the page game, free time loads the required pictures for the next scene.

The JS in the page, using the img object to preload the js, and then execute it as needed.

7. Reduce the number of DOM elements

A complex page means that more data needs to be downloaded, and it also means that JavaScript traverses DOM more efficiently.

Solution: deeply understand the semantics of each tag and reduce the number of DIV listed for layout.

8. Divide the page content according to the domain name

When a page loads, it will download a lot of external resources, such as CSS, JS, IMG, etc., however, classifying them and distributing them under different subdomain names will improve the efficiency of DNS parallel downloads.

Because there is a limit to the maximum number of connections allowed by browsers and the maximum number of connections allowed per server.

9. Avoid 404

The consumption of HTTP is huge, and it is completely unnecessary for it to request a response of 404.

As an exception, it is also disadvantageous to the SEO of the site. Some websites should upload an empty file even if there is no limit on the rabots.txt. If not, it will let the engine crawler record a 404 of your site, thus reducing the weight of your site.

The above is all the contents of the article "what are the Golden rules for website Construction?" Thank you for your reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.