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

Editor to share with you how to optimize the performance in the front-end launch, I believe most people do not know much about it, so share this article for your reference. I hope you will learn a lot after reading this article. Let's go and learn about it!

Content aspect

1. Reduce HTTP requests: merge files, CSS sprites, inline Image

2. Reduce DNS queries: browsers cannot download any files from this host until the DNS query is complete. Method: DNS cache, distribute resources to the appropriate number of hostnames, balance parallel downloads and DNS queries

3. Avoid redirects: redundant intermediate access

4 to make Ajax cacheable

5, delayed loading of non-essential components

6. Preload the required components in the future

7, reduce the number of DOM elements

8, put resources under different domains: browsers can download resources from a domain at the same time is limited, increasing the domain can increase the number of parallel downloads

9, reduce the number of iframe

10, not 404

Server aspect

1, use CDN

2. Add Expires or Cache-Control response headers

3, use Gzip compression for components

4, configure ETag

5,Flush Buffer Early

6Jing Ajax uses GET to make requests

7. Avoid empty src img tags

Cookie aspect

1, reduce the size of cookie

2. Do not include cookie in the domain name of the imported resource.

Css aspect

1, put the style sheet at the top of the page

2, do not use CSS expressions

3, whether to use @ import

4. Do not use Filter of IE

Javascript aspect

1, put the script at the bottom of the page

2, bring in javascript and css from the outside

3, compress javascript and css

4. Delete unwanted scripts

5. Reduce DOM access

6. Reasonable design of event listeners

In terms of pictures

1. Optimize the image: select the color depth and compression according to the actual color needs.

2. Optimize the css wizard

3, do not stretch the picture in HTML

4. Make sure favicon.ico is small and cacheable.

Mobile aspect

1, make sure that the component is less than 25k

2,Pack Components into a Multipart Document

The above is all the contents of the article "how to optimize the performance in the front-end launch". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.