Web optimization-Reduce the number of requests for HTTP (front end)

Use image maps to replace multiple images with hyperlinks, which can be used to reduce HTTP requests. When actually used, it is quite a long time to find images loaded with image maps, and the client image map can be manipulated using the map tag.

<map>    <area shape= "rect" coords= "0,031,31" href= " home.html "title=" Home ">    <area shape=" rect "coords=" 30,0,66,31 "href=" gift.html "title=" Gift "></map >

CSS Sprites can also combine images, but are more flexible. CSS sprites is any HTML element that supports background images. Using the Background-position property of CSS, you can place HTML elements in the desired position in the background image.

<style= "Background-image:url (' a_sprites.gif '); background-position:-260px-90px; width:26px;height:24px; " >    </ Div >

CSS Sprites positioning

The image map can also be implemented using CSS sprites. Relative to the picture map, its picture is not necessarily contiguous.

By using Data:url mode, you can include pictures in a Web page without any additional HTTP requests. Because URLs are inline in a page, they are not cached when they span different pages. Do not inline company logo, because the coded logo will cause the page to become larger. In this case, it is wise to use CSS and put inline images as backgrounds. Place the CSS rule in an external style sheet, which means that the data can be slowed down within the stylesheet.

Merge scripts and style sheets. Merging these individual files into a single file reduces the number of HTTP requests and reduces the end-user response time.

A guide to high-performance website construction

Web optimization-Reduce the number of requests for HTTP (front end)