[Change] HTTP debugging tool: fiddler Introduction 2

Learn how to build a faster website through Fiddler. In this article, we will use Fiddler to explore HTTP performance, cache, and compression.

If you have not installed or configured Fiddler, start with the first article.

 

HTTP Performance Overview

There is no doubt that users like to access fast websites. Users are very impatient, unless your website has no competitors.
It is monopolized. If your visitors come from all over the world, you must ensure that your website is efficient and even more standard. As an international network connection point
It is often under pressure from two aspects: High Access traffic and low bandwidth.

 

During the first crucial access, users must download each piece of content to generate pages, including JS, CSS, images, HTML, if your page is too difficult to load (including IIS receiving a request for execution and returning it to the client html), visitors may leave your page!

By exposing all HTTP Communication, Fiddler can easily show you which files are often used to generate a page,

Shift + Click can select multiple sessions in the session List on the Left Border of Fiddler to calculate the "Total page weight" of the selected sessions ". The number of bytes to be converted.

 

If you want to impress your customers during their first visit, the only way is to return fewer files to the customer (smaller I think is also an aspect ~ _~).

 

1. Use less (or smaller) pictures

2. compress all the CSS files to a CSS file.

3. compress all scripts into a JS file.

4. Optimize your page time (the time here is roughly the server's response time)

5. Use http compression (gzip)

 

If you have optimized the performance of your first visit, you can use the advantages of HTTP cache to make your website faster!

 

HTTP cache Introduction

 

Two ways to speed up your web application:

Reduce the number of round trips for requests and responses

Reduce the round-trip bytes of requests and responses.

 

HTTP cache is the best way to reduce the number of round-trips on the client server. Cache provides a mechanism to ensure the client
Or the proxy can store some things, which will be stored in the HTTP
Used in the response. (That is, the first request is sent to the client and cached. If you want to retrieve the JS file or CSS file next time on the page, do not go to the server. But you still have to go to the server.
The request must be compared with the etag value (note: the HTTP protocol specification defines etag as the "object Value of the requested variable ".
In other words, etag is a token that can be associated with web resources ). A typical web resource can be a Web page, but it may also be a JSON or XML document. In short, my understanding is to determine whether your cache is consistent with the resources on the server)

 

Cache-related request headers

 

To improve performance, Microsoft's IE and other web clients always try their best to maintain the local cache downloaded from the remote server.

When the client needs a resource (HTML, CSS. js ...), They have three possible actions:

1. Send a general HTTP request to the remote server to request this resource.

2. Send a conditional HTTP request to the server, if it is different from the local Cache version.

3. If the cached copy is available, local cache resources are used.

 

When sending a request, the customer may use the following headers:

 

Table 1. Client Cache Headers

Pragma: No-Cache	The Client is unwilling to accept any cached responses from caches along The route and the origin server must be contacted for a fresh copy The resource.
If-modified-since: datetime	The Server shoshould return the requested resource only if the resource has Been modified since the date-time provided by the client.
If-None-Match: etagvalue	The Server shoshould return the requested resource if the etag of the Resource Is different than the value provided by the client. An etag Is a unique identifier representing a particle version of a file.

 

1 Pragma: No-Cache indicates that the client is unwilling to accept cache requests. What it needs is the most immediate resource.

2 If-modified-since: datetime indicates that if the resource has been modified since it was last requested by the client, the server will return the latest one to the client.

3 if-None-Match: etagvalue if the etag value of the client resource is inconsistent with that of the server, the server returns the latest resource. Etag is a unique ID used to indicate a specific version of a file.

 

If these conditional requests contain if-modified-since or
If-None-matchheader request, the server uses HTTP/304 not modified
As a response, the client will know that the client cache can be used. Otherwise, the server returns a new response and the client discards the expired cache resources.

You can observe two consistent requests to request the same image, and you will find in Fiddler: In the first local cache
In version, the server returns a file containing etag and a file containing the last modification date. In this first request session, a local Cache version is ready for use. In this way
A conditional request is created. When you request the image again, it will respond to a locally cached file, provided that the etag value of the image cached for the first time or if-
If the modified-since value matches the value on the server, the server will respond to a 304 request to the client.

Session #1

 

GET/images/banks.jpg HTTP/1.1

HOST: www.bayden.com

 

HTTP/1.1 200 OK

Date: Tue, 08 mar 2006 00:32:46 GMT

Content-Length: 6171

Content-Type: image/JPEG

Etag: "40c7f76e8d30c31: 2fe20"

Last-modified: Thu, 12 Jun 2003 02:50:50 GMT

 

Session #2

 

GET/images/banks.jpg HTTP/1.1

If-modified-since: Thu, 12 Jun 2003 02:50:50 GMT

If-None-Match: "40c7f76e8d30c31: 2fe20"

HOST: www.bayden.com

 

HTTP/1.1 304 not modified

 

 

Because an HTTP 304 response only contains a header and has no body, it is much faster than carrying resources when traversing the Internet. However, HTTP/response requires a server round-trip, however, by carefully setting the response header, web programmers can eliminate this factor, or even conditional requests.

Cache Response Headers

 

The cache mechanism is usually controlled by the response header. The HTTP specification describes the header control cache, the optional cache-control, and expires (expired ).

The Expires header contains an absolute date. When this date is exceeded, it will not be considered to be updated.

 

Table 2. Common cache-Control headers

Value	Meaning
Public	The response may be stored in any cache, including caches shared among using users.
Private	The response may only be stored in a private cache used by a single user.
No-Cache	The response shoshould not be reused to satisfy future requests.
No-store	The Response shocould not be reused to satisfy future requests, and showould Not be written to disk. This is primarily used as a security measure For sensitive responses.
Max-age = # seconds	The response may be reused to satisfy future requests within a certain number of seconds.
Must-revalidate	The Response may be reused to satisfy future requests, but the origin Server shoshould first be contacted to verify that the response is still Fresh.

Parameter settings of the cache-control header:

The public response is cached and shared among multiple users.

Private responses can only be used as private caches and cannot be shared between users.

No-Cache response will not be cached

No-store response will not be cached and will not be written to the client disk. This is also used for some sensitive responses based on security considerations.

Max-age = # The seconds response will be cached within a specified number of seconds. Once the time passes, the response will not be cached.

The must-revalidate response will be reused to meet the next request, but it must go to the server side to verify whether it is still up-to-date.

 

Note:

If you want to configure cache in IIS, refer to the soft knowledge technical article:

· How to modify the cache-control HTTP header when you use IIS
.

You can learn more about using cache in Asp.net:

· How to cache in ASP. NET by using Visual C #. net
.

If you find that you often update files on your website but do not change the file name, you must set it with caution.
Your cache survival time. For example, if you want a thisyear.gif image file to display the current year on the website, you must ensure that the cache expiration time cannot exceed one day. Otherwise, a user
The correct date cannot be displayed on July 15, December 31 when you visit your website on July 15, January 1.

For some reason, the server may set: progma: No-Cache header, cache-control: No-Cache

Header parameter: vary is a cache signal. vary: User-Agent indicates that the current response is cached, but only when the same User-Agent header is sent. Command vary: * is equivalent to cache-control: No-cache.

Vary is equivalent to the cache parameter in Asp.net, which means caching based on what it means. If you know how to use the cache in Asp.net, it is easy to understand the meaning of this parameter.

 

Using the http session List, the fiddler user can see the HTTP cache header contained in the page.

 

Fiddler session List

If the response does not contain expires or cache-control, the client is forced to act as a conditional request to ensure that all resources are up-to-date.

 

Conditional requests and wininetcache

Ie uses Microsoft Windows Internet services to maximize the use of the cache service. Wininet allows you to configure the cache size and behavior, and set the cache to perform the following operations:

1 open IE

2. Select "Inrernet" as the tool option. In the general sub-options, click "set" in the Temporary Folder.

It is the four settings of the village selection:

 

Mark performance issues:

You can use the custom rules of Fiddler to mark some of your needs. For example, if a response is larger than 25 kb, you can mark the current session in red, which is more eye-catching. The following code is used in the onbeforeresponse event:

// Flag files over 25KB

   if (oSession.responseBodyBytes.length > 25000){

      oSession["ui-color"] = "red";

      oSession["ui-bold"] = "true";

      oSession["ui-customcolumn"] = "Large file";

   }

Similarly, you can mark the response as not indicating the cache information.

   // Mark files which do not have caching information

if (!oSession.oResponse.headers.Exists("Expires") &&

!oSession.oResponse.headers.Exists("Cache-Control")){

oSession["ui-color"] = "purple";

      oSession["ui-bold"] = "true";

   }

Introduction to HTTP Compression

All popular web servers and browsers currently Support HTTP compression. HTTP compression can be significantly reduced
Low client and server communication volume. Save more than 50% of HTML, XML, CSS, JS and other files. A browser sends a signal to the server, which can introduce the HTTP Compressed Content
And put the compression types supported by the client in the request header. For example, consider the following request:

GET / HTTP/1.1

Accept: */*

Accept-Language: en-us

Accept-Encoding: gzip, deflate

User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)

Host: search.msn.com

This accept-encoding header indicates that IE will be willing to accept compressed responses in gzip and deflate formats.

The response is as follows:

HTTP/1.1 200 OK

Content-Type: text/html; charset=utf-8

Server: Microsoft-IIS/6.0 --Microsoft-HTTPAPI/1.0

X-Powered-By: ASP.NET

Vary: Accept-Encoding

Content-Encoding: gzip

Date: Tue, 15 Feb 2006 09:14:36 GMT

Content-Length: 1277

Connection: close

Cache-Control: private, max-age=3600

You can use Fiddler to extract the data. Experiments show that HTTP compression can greatly reduce data round-trips,
A common CSS file can be reduced by up to 80%! Of course, compression is at the cost of CPU performance. Especially to compress dynamic files, but the general right is to compress static files such as JS and CSS.
Because they will be stored on the server after the first compression. If you want to compress Asp.net dynamic files, you must make a trade-off.

If you still cannot meet your program optimization requirements, you can refer to this article,

Ten Tips for writing High-Performance Web Applications

 

Note: Some modifications have been made after this article is reproduced.