Reduce the number of HTTP requests

Reduce the number of HTTP requests

The golden rule of performance: only 10%-20% of the end-user response time is spent on receiving the requested HTML document, and the remaining 80%-90% of the time is spent on all the components referenced by the HTML document (img, script, css, flash) Etc.) on the HTTP request.

How to improve: The easiest way to improve response time is to reduce the number of components, and thereby reduce the number of HTTP requests

The overhead caused by the HTTP connection: domain name resolution-TCP connection-sending request-waiting-downloading resources-resolution time

Question: DNS cache, it takes time to look up the DNS cache. If multiple caches are searched multiple times, the cache may be cleared; Keep-Alive, HTTP1.1 protocol stipulates that requests can only be sent serially, and the previous request can only be started after the completion of the previous request. Next request

Ways to reduce HTTP requests: Picture map: allows multiple URLs to be associated with a picture. The choice of the target URL depends on which position the user clicks on the picture. The hyperlink is located by the location information and the HTTP request can be reduced to one. To ensure the completeness of the design and the completeness of functions, use map and area tags;

Insert picture description here

CSS Sprites: CSS sprites, through the use of combined images, by specifying the background-image and background-position of CSS to display elements. The response time of the image map and the css sprite is basically the same, but it is more than 50% faster than using separate images

Combining scripts and style sheets: Use external js and css file references, because it has better performance than writing directly on the page; a separate js is faster than a page composed of multiple js files to load 38 %; Combine multiple scripts into one script, combine multiple style sheets into one style sheet

The picture uses base64 encoding to reduce the number of page requests: the base64 encoding method is used to embed the picture directly into the web page instead of loading it from the outside

Guess you like

Origin blog.csdn.net/xghchina/article/details/114634736