Website Optimization-static files in iis7

During website development, we usually perform operations on static website files, such as image files, CSS files, and JS files. In fact, we have previously written similarArticleNow, let's just make a targeted summary.

JS File Processing:

In terms of website optimization, we put it at the end of the webpage for loading, because JS files are a blocking mode, when a thread downloads a JS file, it needs to wait until it downloads the file before loading the following content. If the JS file is placed in the header of the webpage, there will be a blocking download. If the network speed is slow, the following webpage content cannot be displayed, so the user experience is poor. Maybe some users will think that the website cannot be opened? But sometimes the UI processing, especially the processing of the website function menu, has to be placed in front of the website. What should I do?

Solution:

1. Compress JS files. There is a lot of compression work on the Internet. Remove spaces in the JS files, remove unnecessary analysis, and write JS as a line, by reducing the JS file size, the network transmission traffic is reduced to save transmission time.

2. Enable static File compression on the server, that is, compress the JS file before the reqeust response. The CPU operation will be added, but this can be solved through the following methods, reduce the number of CPU compression times to achieve

Improves the CPU availability. The iis7 operation is as follows. Start static compression.

3. We are not enough to address the above optimization. First, each time a user accesses the same user, the same JS file will be loaded. We need to use the user's browser in full order to reduce requests to the same file, by reducing file requests, you can reduce the number of File compression operations performed by the CPU. We only need to add the expiration time to the static file. Of course, we also need to add etag. An expiration time alone is not enough to completely solve the problem of expiration. For the role of etag, refer

{

The server returns the following static files:
Cache-control header
And
Etag/last-modified Header
Is two completely different cache methods.

The former tells the browser that you cache this resource for a certain period of time. During this period, if other pages call this resource again, you can directly use the version you saved this time, no more HTTP requests need to be sent to the server.

The latter tells the browser that you can permanently cache this resource and the corresponding Hash (that is, etag) or the last modification time of the resource. But! If other pages call this resource in the future, you still need to send the hash or last modification time that I returned to you through a new request. The server verifies whether the hash/last modification time is the same as the latest version on the server. If the hash/last modification time is the same, 304 is returned without returning the actual content, tell the browser that you can use the previously cached content. If they are inconsistent, the new version is returned.

The difference between the two methods is that one has a time limit and the other does not; the other does not send any new HTTP requests when the cache conditions are met, each time, a new HTTP request is sent to verify whether the cache has expired.

We recommend that you use the first caching method. If only the cache-control header is used, the server cannot return 304 in any case.

Because the browser traditionally imposes a maximum of two concurrent requests on a server, the cache-control header cache effect is much better than using etag. A non-content HTTP request may also cause blocking.

The cache-control Max-age example is only 10 minutes, which does not seem to have obvious results. Even if the browser caches the resource, after 10 sub-types, or when the user browses again the next day, all the static resources have to be downloaded again.

For static resources, I usually put Max-age for a few years. As long as the cache space on the client is large enough, all static resources on the website will be requested only once.

Etag/last-modified header IIS automatically adds static files by default without any settings. I am trying to use it on a dynamic page. Before the dynamic page is output, calculate an MD5 value based on the string content in the Response Buffer, and insert it into the response header as the etag. The next time the client accesses the same page, it will send the received etag back. Before flush response, the page first checks whether the etag sent by the client is consistent with the generated response text MD5. If the etag is consistent, the complete response content is not returned, and a 304 error is directly returned. The page generation time will not be reduced, but the transmission time will be greatly reduced when the page content remains unchanged (the user clicks the homepage to see if there are any updates. However, this means that the time on the page cannot be displayed in the past format. Otherwise, the MD5 results will be different for each time the user refreshes the page.
}

Iis7 operations are as follows:

Select HTTP Response Header> set common header items

Note: The "Keep HTTP Connection" option indicates that when a user requests this file, the HTTP link will not be disconnected, and the time is 300, it is equivalent to adding a keep-alive in the HTTP header. This is a function for the HTTP 1.1 protocol.

If the content expires, it depends on your actual business needs. Generally, the expiration time can be extended if the changes are relatively small.

Image File Processing:

For website applicationsProgramWe know that we should minimize the number of HTTP requests and the size of files loaded at one time. however, there seems to be some conflict between the two aspects. To reduce the file size, you have to cut a large image into multiple small images and download it.

However, this will increase the number of HTTP requests. What should I do?

For some background images, we can use CSS to process and load only one image, but we can use CSS to locate them in different places. another way is to add the expiration time to the image just like the JS processing above. another method is to assign an Independent Application to separate requests for processing images from the main site.

Streaming Media File Processing:

The same is true for Flash files because they are stored on the client during the first loading, and the cache on the client must be fully utilized. static files such as flash players can set the expiration time to a long time. special sites are used for playback. it is equivalent to providing multi-process components on the server to serve users' requests.

For more information about dynamic content optimization, see

Http://www.cnblogs.com/Leung/archive/2009/10/26/1590091.html