Front End Performance analysis

Front End Performance analysis

Recently read a classic book, "High Performance website Construction Advanced Guide".

Although the book has been published many years ago, but the content is still intriguing, this time, a good practice.

Paper on the end of the shallow, know this matter to preach, in practice will find some problems.

There is an official website "even Faster Web Sites", click "Run the Examples" button, you can enter the online demo.

On GitHub There is a project called Awesome-wpo, which records various aspects of the performance of resources, books, articles, tools and so on.

All of the following experiments are performed in the Chrome 49 browser.

First, the number of concurrent browser downloads

The number of concurrent requests for a browser is limited to the same domain name.

At the same time there are a limited number of requests for the same domain name, and requests that exceed the limit are blocked.

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

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

1) HTTP1.1

Take a look at the number of Browserscope online statistics results, than IE6, IE7 was a lot of progress.

Next do a comparison, is a domain name and two domain names, respectively, loading pictures.

When a domain name can only be up to 6 requests concurrently, and two domain names can concurrently 10 requests.

2) Long Connection

Due to the long connection relationship, HTTP1.1 recommends establishing a small number of connections per server.

If the browser supports keep-alive (long connection), it is added in the header of the request:

The principle of long connections is to use the same TCP connection to send and receive multiple HTTP requests/responses instead of opening a new connection method for each new request/reply.

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

The left side is disconnected after each request, and the right is not immediately disconnected after the request.

So it's possible to downgrade to HTTP1.0 for high concurrency, but I haven't tried it in detail.

3) Cookie-free Domains

There are 23 rules in YSlow, and 20th is "use cookie-free Domains to Components".

In the request to download static small images, static small files, the browser will treat it as a normal request, in the header information of the request to append cookie information.

If each header is attached with a 1kB cookie, then for a complex web page with 50 small files, the amount of 50kB of transmission is added in vain.

There are a lot of related solutions on the Internet, you can try it.

Two, in-line script blocking parallel download

The browser maintains the parsing order of CSS and JS, and if the inline script is placed behind the stylesheet, it will significantly delay the download of the resource (as a result of the completion of the stylesheet download and the execution of the inline script, the subsequent resources will not start downloading).

This is because inline scripts may contain code that relies on styles in the style sheet, such as Document.getelementsbyclassname ().

In-line scripting is simply writing the script directly to the HTML page.

Below is a look at the following through the Chrom tool:
Take a look at the details of the ui.png request, you can refer to Google's documents, but you need to flip to see.
Stalled: The browser gets the command to issue this request, to the wait time that the request can be issued, typically the agent negotiation, and the time that waits for the reusable TCP connection to be released, excluding DNS queries, establishing TCP connections, and so on.
Request sent: The time after which the first byte is sent before the last byte is sent, that is, the upload time.
Waiting (TTFB): The time it takes to receive the first byte of the response after the request has been issued, in times to a byte.
Content Download: The first byte to receive the response, the time to accept the last byte, is the download time.
There was a delay download, and I removed the "Script" tab and saw that it was actually downloaded in parallel.
Third, image optimization
Usually you will do image optimization, such as the production of Sprite diagrams. Here is an introduction to the compressed picture.
About the principle of compression, involving some algorithms, can be online query.
Netizen Jia in the "Picture principle and optimization" said:
The common format of JPG, PNG, GIF also belong to bitmaps, so their data structure is roughly the same, but each image format has a different compression algorithm, different scanning methods, but the optimization method has a common point, all around the color value of each pixel to start.
1) Tools
The company is now developing with gulp building tools, there is a plug-in "Gulp-image", with this tool to press the PNG image, can press off a lot, jpg is not much.
For building tools, refer to the front End automation build Tool Gulp Records
There are many online tools available on the Internet, such as tinypng abroad and domestic Tuhaokuai.
From the Tinypng network, the National treasure Panda helped me to compress the quality of 54%, but this site I had a long time to go up.
2) WebP
WebP is a picture file format that supports lossy compression and lossless compression, derived from the image Encoding format VP8.
According to Google's tests, lossless compressed WebP has a 45% less file size than PNG files, and WebP can reduce the file size by 28% even after the PNG files are compressed by other compression tools.
compatibility, Android compatibility is good, after all, it is their own things, but iOS Safrai is not supported at all, the display in China's browser has reached 67.37%.
Iv. iframe
An IFRAME that wrote a basic concept years ago, called "Some Records of the IFRAME."
have been able to see the various shortcomings of the IFRAME, but not through the data expressed, this time with the data explained.
1) Block OnLoad event
In "Iframes Blocking" This page, through the iframe load a page, the page will be loaded after 4 seconds, the direct result of the parent page will also take 4 seconds to load successfully.
2) script in front of IFRAME
In the script before IFrame page, the script tag is written before the IFRAME.
The red box in the picture is the content in the IFRAME, and it is really blocked.
And then we tried again. Placing the CSS before or after the IFRAME is not blocked.
3) Connection Sharing in IFrame
In the "Parent and IFRAME Connections" page, both the parent page and the page in the IFRAME contain 5 pictures.
These five images are not downloaded in parallel, but in sequential order, and the pictures in the red boxes come from the IFRAME.
Five, CSS selectors
Here are the CSS selectors:
#toc {margin-left:20px;}. Chapter {Font-weight:bold;} A {text-decoration:none;} H1 + #toc {margin-top:40px;} #toc > 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;}
There are 5 types of selectors, elements, relationships, attributes, pseudo-classes, and pseudo-object selectors.
CSS selectors are matched right -to-left, and several high-performance CSS guidelines are described in "writing efficient CSS" in MDN.
1) Selector test structure
In the "Selector Tests" page There are 6 kinds of written, 1000 of the structure of the page.
1. Baseline sets the CSS class, but does not match
2. Tag has a more a tag CSS settings
3. Class sets the class attribute in a
4. Child uses the sub-selector ">" in the relationship selector
5. Descendant uses the include selector in the relationship selector
6. Universal uses wildcard characters
<div>  <div>    <div> <p> <a id= ' id0001 ' class= ' class0001 ' >0001</a> </p > </div> ...    <div> <p> <a id= ' id1000 ' class= ' class1000 ' >1000</a> </p> </div>  
2) time-consuming records

 
 

  
  
 
   
 
    
 
    
Baseline
 
    
Tag
 
    
Class
 
    
Child
 
    
Descendant
 
    
Universal
 
   
 
   
 
    
CSS Classes
 
    
. 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;
}
 
   
 
   
 
    
Take
 
    
85ms
 
    
63ms
 
    
71ms
 
    
101ms
 
    
77ms
 
    
501ms
 
   
 
   
 
    
Take
 
    
60ms
 
    
67ms
 
    
479ms
 
    
185ms
 
    
444ms
 
    
76ms
 
   
 
   
 
    
Take
 
    
59ms
 
    
1116ms
 
    
64ms
 
    
73ms
 
    
67ms
 
    
54ms
 
   
 
   
 
    
Take
 
    
69ms
 
    
62ms
 
    
68ms
 
    
67ms
 
    
62ms
 
    
83ms
 
   
 
   
 
    
Take
 
    
52ms
 
    
63ms
 
    
68ms
 
    
78ms
 
    
68ms
 
    
77ms
 
   
 
   
 
    
Take
 
    
60ms
 
    
62ms
 
    
72ms
 
    
87ms
 
    
67ms
 
    
81ms
 
   
 
   
 
    
Remove the highest and lowest post-
Average time-consuming
 
    
62ms
 
    
63.75ms
 
    
69.75ms
 
    
84.75ms
 
    
69.75ms
 
    
79.25
 
   
 
  
 
 
There is also a "Create your own" custom class:
4 selectors were also included: "A.class DIV", "ID > A", ". class [Href]", "Div:first-child".
Inline Script Blocking parallel download Demo:
http://download.csdn.net/download/loneleaf1/9519133
Resources:
What is the number of concurrent request resources allowed by the browser?
HTTP Persistent Connection
Chrome's timeline problem?
Understanding non-blocking loading JavaScript scripting technology
Lossless compression of pictures on websites
Picture principle and optimization
Picture format and design that thing.
Clever PNG Optimization Techniques
The road of WebP exploration
Enhance the user experience of the site-WEBP efficient use of images
Front End Performance analysis