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

1. Number of parallel downloads by browsers

The limit on the number of concurrent requests for browsers is for the same domain name.

There is a limit on the number of requests under the same domain name at the same time, and requests exceeding the limit will be blocked.

So we can often see different static resources will have different domain names, such as pictures, JavaScript, CSS and so on.

HTTP1.1 and HTTP1.0, the number of restrictions is not the same.

1) HTTP1.1

Let's first take a look at the statistical results of the number limit on browserscope, which is much better than that of IE6 and IE7 at that time.

Next, make a comparison, one domain name and two domain names, load the picture respectively.

You can only have a maximum of 6 requests for one domain name and 10 requests for two domain names.

2) long connection

Because of persistent connections, HTTP1.1 recommends that each server establish a small number of connections.

If the browser supports keep-alive (persistent connection), it adds to the requested header:

The principle of a persistent connection is to use the same TCP connection to send and receive multiple HTTP requests / replies, rather than a method of opening a new connection for each new request / reply.

When the client sends another request, it uses the same connection. This continues until the client or server believes that the session has ended and one of the parties disconnects.

In the following figure, the left side will be disconnected after each request, and the right side will not be disconnected immediately after the request.

So you can downgrade to HTTP1.0 if you want high concurrency, but I haven't tried it yet.

3) Cookie-free Domains

There are 23 rules in YSlow, and the 20th is "Use Cookie-Free Domains for Components".

When requesting to download small static images and small static files, the browser will treat it as a normal request and attach cookie information to the header information of request.

If 1kB's cookie is attached to each header, then for a complex web page with 50 small files, the amount of 50kB transmission will be increased for nothing.

There are many related solutions on the Internet, you can try it.

Second, inline scripts block parallel downloads

The browser maintains the parsing order of css and js, and if you put the inline script after the stylesheet, it will significantly delay the download of resources (as a result, subsequent resources can not start downloading until the stylesheet download is complete and the inline script is finished).

This is because inline scripts may contain code that depends on styles in the stylesheet, such as document.getElementsByClassName ().

An inline script is to write the script directly into the HTML page.

Var content =''; for (iTun1; I LI {font-weight: bold;} # toc A {color: # 444;} * {font-family: Arial;} [href= "# index"] {font-style: italic;} [title~= "Index"] {font-style: italic;} A:hover {text-decoration: underline;}

To sum up, there are five kinds of selectors, elements, relationships, attributes, pseudo-classes, and pseudo-object selectors.

CSS selectors are matched from right to left, and several efficient CSS guidelines are introduced in MDN's "Writing efficient CSS."

1) Selector test structure

There are six written structures on the "Selector Tests" page and 1000 of that structure on the page.

1. Baseline sets the CSS class, but does not match

2. Tag has an A tag CSS setting.

3. Class sets the class property in A.

4. Child uses the subselector ">" in the relationship selector.

5. Descendant uses the inclusion selector in the relational selector

6. Universal uses wildcards

0001

...

one thousand

2) time-consuming recording

Baseline

Tag

ClassChildDescendantUniversalCSS class

.noclass0001 {

Background: # CFD

}

...

.noclass1000 {

Background: # CFD

}

A {

Background: # CFD

}

.noclass0001 {

Background: # CFD

}

...

.noclass1000 {

Background: # CFD

}

.class0001 {

Background: # CFD

}

...

.class1000 {

Background: # CFD

}

DIV > DIV > DIV > P > A.class0001 {

Background: # CFD

}

...

DIV > DIV > DIV > P > A.class1000 {

Background: # CFD

}

DIV DIV DIV P A.class0001 {

Background: # CFD

}

...

DIV DIV DIV P A.class1000 {

Background: # CFD

}

P.pclass0001 * {

Background: # CFD

}

...

P.pclass1000 * {

Background: # CFD

}

Time-consuming

85ms

63ms71ms101ms77ms501ms

Time-consuming

60ms

67ms479ms185ms444ms76ms

Time-consuming

59ms

1116ms64ms73ms67ms54ms

Time-consuming

69ms

62ms68ms67ms62ms83ms

Time-consuming

52ms

63ms68ms78ms68ms77ms

Time-consuming

60ms

62ms72ms87ms67ms81ms

After getting rid of the highest and lowest

Average time-consuming

62ms

63.75ms69.75ms84.75ms69.75ms79.25

There is also a "create your own" custom class:

It also comes with four selectors: "A.class DIV", "id > A", ".class [href]", "DIV:first-child".

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.