How to optimize front-end performance?

How to optimize front-end performance?

In terms of content

1, reduce HTTP requests: merge files, CSS sprites, inline Image

2, Reduce DNS queries: The browser cannot download any files from this host until the DNS query is completed. Methods: DNS caching, distributing resources to the right number of hostnames, balancing parallel downloads and DNS queries

3, avoiding redirects: redundant intermediate access

4, Make Ajax cacheable

5, Delay loading of non-essential components

6, Preload required components in the future

7, reduce the number of DOM elements

8, put the resources in different domains: the browser downloads resources from one domain at the same time The number is limited, increasing the domain can increase the number of parallel downloads

9, reduce the number of iframes

10, don’t 404

Server aspect

1, use CDN

2, add Expires or Cache-Control response header

3, use Gzip compression for components

4, configure ETag

5, Flush Buffer Early

6, Ajax uses GET to make requests

7, avoid img tags with empty src

Cookie aspect

1, reduce the cookie size

2. The domain name of imported resources should not contain cookies

css

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

2, do not use CSS expressions

3, use @import

4, do not use IE’s Filter

Javascript aspect

1, put 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

Picture aspect

1. Optimize pictures: Select color depth and compression according to actual color needs

2, optimize css sprite

3, do not stretch the image in HTML

4, ensure that favicon.ico is small and cacheable

Mobile aspect

1, ensure that the components are less than 25k

2, Pack Components into a Multipart Document

The above is what I summarized Front-end performance optimization plan, if you have other good plans, please leave a message!

The above is the detailed content of How to optimize front-end performance?. For more information, please follow other related articles on the PHP Chinese website!