Front-end performance optimization and web Front-end performance optimization

Front-end performance optimization and web Front-end performance optimization

How to optimize front-end performance?

Content

1. Reduce HTTP requests: Merge files, CSS genie, and inline Image

2. Reduce DNS queries: the browser cannot download any files from this host until the DNS query is complete. Method: DNS cache, resource distribution to appropriate number of host names, balanced parallel download and DNS query

3. Avoid redirection: redundant intermediate access

4. Make Ajax cacheable

5. Delayed loading of non-essential components

6. Components pre-loaded in the future

7. Reduce the number of DOM elements

8. Place resources in different domains: the number of resources downloaded from one domain at the same time by the browser is limited. Increasing the number of domains can increase the number of parallel downloads.

9. Reduce the number of iframe

10, not 404

 

Server

1. Use CDN

2. Add an Expires or Cache-Control response header.

3. Use Gzip to compress Components

4. Configure ETag

5, Flush Buffer Early

6. Ajax requests with GET

7. Avoid empty src img labels.

 

Cookie

1. Reduce the cookie size

2. Do not include cookies in the domain name of the introduced resource

 

Css

1. Place the style sheet on the top of the page.

2. Do not use CSS expressions

3. Do not use @ import

4. Do not use IE Filter

 

Javascript

1. Place the script at the bottom of the page.

2. Introduce javascript and css from the outside

3. Compress javascript and css

4. Delete unnecessary scripts

5. Reduce DOM access

6. reasonably design the event listener

 

Image

1. Optimize the image: select the color depth and Compression Based on the actual color needs.

2. Optimize the css genie

3. Do not stretch the image in HTML.

4. Ensure that favicon. ico is small and can be cached

 

Mobile

1. Ensure that the component size is less than 25 KB

2. Pack Components into a Multipart Document

The above is my summary of the front-end performance optimization solution. If you have other good solutions, leave a message!