Speeding up your web site front-end performance optimization rules (1)

Document directory

• Enable browser caching
• Reduce HTTP requests
• Reduce DNS lookup times
• Avoid rewrite
• Avoid 404
• Cache Ajax results
• Delay component loading
• Preload Components
• Reduce the number of DOM elements
• Separate components to different domain names
• Try not to use IFRAME

 

Last article: speeding up your web site front-end performance optimization

---------------------------------------------------------------------------

Enable browser caching

See http://www.cnblogs.com/forcertain/archive/2012/08/29/2662203.html

Reduce HTTP requests

In addition to its own HTML structure, our pages will contain various parts, styles, scripts, Flash, and other components. For us, all of these components send requests to the server and then the server responds, then output to the client, presented by the browser. If you can reduce the number of these requests, it will certainly increase the page loading speed. The most direct way to reduce the number of requests is to simplify the page design and reduce the number of page components. However, when a page with different requirements may always contain many components, we can: merge JS files, CSS files, and background images. Here we particularly mention the combination of JS. For the modern guiding ideology of modular, reusable, and flexible development, we may be more inclined to develop multiple highly functional JS files, A specific JS is referenced only on pages that are only needed to reduce unnecessary burden. On the other hand, for all JS files on most websites, except for the referenced jquery architecture, after compression, the file size is less than dozens of KB, and the load loss is not large. Normally, these static files will be set to a browser cache for a long time. The load after this is not much different, but JS modifications, separately, you can only re-load the modified Js in the browser. after merging any modification, you must re-load all the modified JS files. In addition, after merging and compressing the files, we increase the difficulty of troubleshooting, therefore, to merge JavaScript files, you must weigh the values based on the actual situation before making a decision.

Reduce DNS lookup times

DNS lookup means to resolve the domain name to an IP address. In common cases, we will separate JS, CSS, images, and dynamic programs to different servers and provide different domain names. Apart from server considerations, the browser improves the parallel download of browsers for different domain names (this is an optimization rule we will discuss below ). When loading a page, the browser encounters a new domain name. The first time it initiates a DNS lookup, it usually takes several milliseconds to several hundred milliseconds, during this period, all the component downloads of this domain name will start after the resolution is complete. Then, the browser will cache the resolution result, and the cache duration varies with the browser. Do not underestimate the resolution time of these tens of milliseconds. In this case, dozens of small files with the same domain name may have been downloaded. It does not mean that all components are under one domain name. According to Yahoo's suggestion, it is more appropriate to have at least two or four domain names.

Avoid rewrite

It is equivalent to finding a person, but we are told that we have already moved to a new address, so we have to go to the new address. In addition to performance, we also consider user experience. We should try to avoid rewrite orientation: Remove unnecessary redirection and switch to the server, use the HTTP header 3xx and location instead of using refresh or js to redirect and add client cache settings.

Avoid 404

This may be even more frustrating than targeting. You may create a superb 404 page to improve user experience, but this wastes server performance, especially for JS files, the server finds that the file does not exist after searching. During this period, parallel downloading of other components will be blocked. However, 404 of some components may cause page confusion or feature unavailability, And the impact will be extremely bad. Scan the page regularly to find 404 and process it in time.

Cache Ajax results

In addition to improving user experience, Ajax also saves server resources. However, poor control of Ajax may result in performance loss, in addition to the optimization of Ajax request application browser cache and gzip compression, we should have more reasonable control. For example, if Ajax is initiated by hover, we should determine whether the content to be requested already exists. If it exists, it will be displayed directly, instead of initiating a request every time the hover initiates a request.

Delay component loading

Check which pages must be loaded at the beginning and which can be postponed. In fact, most JS files can be loaded after the onload event is postponed. For example, if you are processing the drag or other special effects of JS, loading is meaningless before the page Dom loading is complete. In addition, images and even page content under the screen can be loaded as needed during user scrolling.

It is recommended that Google recommend loading JS Code:

<script type="text/javascript"> // Add a script element as a child of the body function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "deferredfunctions.js"; document.body.appendChild(element); } // Check for browser support of event handling capability if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload;</script>

There are many online plug-ins for loading images or Weibo data at a delay, which are not recommended here.

Preload Components

Ah, you have heard the error. I just mentioned the delay loading. Here we have preload, but this is not a conflict: delayed loading can be used to load files on demand or delay files with special effects, in contrast, pre-loading aims to make full use of the free time of the browser and load available files in advance. There are several forms of pre-loading: unconditional pre-loading. After the onload of the page is triggered, pre-loading is performed immediately; conditional pre-loading is performed to load files that may be used in advance based on user operations, for example, you can search for images and other files that may be used in the list. You can pre-load the expected files, such as your new channel or website, loading may be slow, because all files must be newly loaded without being retrieved from the browser cache, in this case, you can download the files from the new channel or website on other channels or when the old website is idle, in this way, new channels or websites can be cached in the browser without reloading.

Reduce the number of DOM elements

A complex page not only needs to download more content, but also reduces the JS Dom operation speed. For example, you can add an event handler to traverse 500 and 5000 elements, there will be a big difference. If many tabs are removed without affecting the actual content of the page, there are redundant DOM elements on your page. Do you only apply nested tables for layout? Isn't Div used to display meaningful content ?? In fact, this requires that we try to use tags to represent the actual content, rather than layout the style. You can use

document.getElementsByTagName('*').length

To view the number of DOM elements on the page.

Separate components to different domain names

See http://www.cnblogs.com/forcertain/archive/2012/09/03/2669034.html

Note that, as mentioned in reducing the number of DNS searches above, this is not the more the better, it is better to control 2 to 4.

Try not to use IFRAME

IFRAME allows us to reference another page in the parent page and understand its advantages and disadvantages, which can be used well.

The reference of third-party content on a page, such as an advertisement, can be very helpful, and can play a safe sandbox, without affecting the layout of the page and implementing parallel loading, but the cost is also very high, it will affect the loading of the entire page, that is, when the IFRAME page is loaded, the parent page will trigger onload, and it has no semantics, and the search engine is unfriendly.

 

Bytes ----------------------------------------------------------------------------------------

Next: speeding up your web site front-end performance optimization rules (2)