High performance website construction guide 14 principles of performance improvement

scanned the High Performance Web Sites today. The Chinese version of this book is a guide to building high performance websites. This book also has an advanced chapter on "Even Faster Web Sites" in depth exploration of individual problems. This book presents 14 principles for web performance improvement, each of which is independent and has an example. Most of these principles are very practical, suitable for site architects, front end engineers. Among them, the front-end engineer means more. I saw the original edition this time. I Web development for lack of experience, and look in a hurry, so there may be missing, express inappropriate, hope that the majority of users willing.

principle 1 reduces the number of HTTP requests

requires time to construct requests and wait for responses, so the fewer requests, the better. The general idea of reducing requests is to merge resources and reduce the number of files required to display a page.

1., Image, Map

by setting < img> the usemap attribute of the tag and the use of < map> the tag can cut out a number of regions on a picture and point to different links. Constructing links reduces the number of requests compared to using multiple images.

2., CSS, Sprite (CSS mapping, integration / texturing, blending / texturing)

does so by setting the element’s background-position style. Generally used for interface icons. Typically, you can refer to the small buttons above the TinyMCE editor. Many small graphs essentially cut from a unified large image by different offsets, so that many buttons on the loading interface actually reduce the number of HTTP requests as long as they are requested once (larger requests once).

3., Inline, Image (inline picture)

does not specify the URL of the external picture file in the < img> SRC, but puts the picture information directly. For example, "src=", "data:image/gif", "Base64", "R0lGODlhDAAMAL…" are useful in some special cases (for example, a small picture is only used on the current page).

principle 2 uses multi line CDN

provides your site with multiple lines (such as domestic, telecom, Unicom, mobile) and multiple geographical locations (northern, southern, and Western), enabling all users to access quickly.

principle 3 takes advantage of HTTP Cache

adds longer Expi> to resources that are not frequently updated (for example, static diagrams)