Reading notes: Building a high-performance website

Chapter One reducing HTTP requests

• Use a picture map: When the navigation bar contains multiple pictures, you can combine them into one picture and trigger different links by calculating locations
• CSS Sprites: Merge icons, introduce a background map, control their position via CSS
• Inline Picture: Encode the image and then put it behind data. The image file can be encoded using PHP's Base64_encode.
• Merging scripts and Style files: Ideally a page a CSS file

Chapter II using CDN (Content Delivery Networks)

CDN refers to a content distribution network CDN, which is the disadvantage of distributing the build to other servers:

• Response times may be affected by other sites
• Inability to directly control the special hassles of component servers
• Work metrics will be impacted by CDN performance degradation

Chapter III Adding a long expires header to the component

The Expires property sets the time that the page is cached before it expires. If the user returns to the same page before the page expires, the cached version is displayed.

Fourth. Compressing scripts and style sheets

Reduce response time by compressing files to reduce HTTP response size

The fifth chapter puts the style sheet on top

Placing a style sheet at the top of the page loads to ensure the rendering of the basic content of the page

The sixth chapter puts the script file at the bottom

Placing the script at the bottom loads can achieve a gradual rendering of the page and increase the degree of parallelism of the download.

If your script uses document.write to insert content into a page, you cannot move it to the back position in the page. But if a script can delay loading, it must be moved to the bottom of the page to load.

Seventh chapter Avoid CSS expressions

CSS expressions are a powerful (but dangerous) way of dynamically setting CSS properties. If you use a CSS expression, you can switch the background color every one hours:

background-color: expression((new Date()).getHours()%2?"#FFFFFF": "#000000" );

The problem with expressions is that they are evaluated at a higher frequency than people expect. They are not only evaluated when the page is rendered and resized, but when the page scrolls and even the user's mouse moves out of the page. If you must use a CSS expression, there are two techniques to avoid the problem of CSS expressions: > * Create one-time expressions > * Replace CSS expressions with event handlers

The eighth chapter uses external JavaScript and CSS

If your site is inherently capable of providing users with high full cache rates, the benefits of using external files are even greater. Inline is a better choice if the full cache is unlikely to be generated. If you use the same JavaScript and CSS for every/many pages in your site, using external files can increase the reuse rate of these components.

Nineth Chapter Reducing DNS lookups

The Internet uses an IP address to locate the server. Because the IP address is difficult to remember, it is usually replaced with a URL that contains a host name, but the IP address is still required when the browser sends its request. This is the role that DNS (Domain Name System) is located in. DNS maps hostnames to IP addresses, just as phone books map names to their phone numbers. When you type github.com in the browser, the DNS resolver that connects to the browser returns the IP address of the server.

DNS lookups can be cached to improve performance

Tenth Chapter Streamline JavaScript

Refinement is the practice of removing unnecessary characters from your code to reduce file size and thus improve load times. After the code is streamlined, all comments and unnecessary whitespace characters (spaces, line breaks, and tabs) will be removed. For JavaScript, this can improve response time efficiency because the downloaded file size is reduced.

The 11th chapter avoids redirection

Redirection is used to reroute a user from one URL to another. Nothing is displayed to the user until the redirect is complete and the HTML document is downloaded. Redirection will slow down your page

Add a slash "/" to the end of the URL

12th Chapter Removing duplicate scripts

• Containing the same script multiple times in a page slows down the page
• In IE, additional HTTP requests are generated if the script is not cached or when the page is reloaded
• In Firefox and IE, the script is evaluated multiple times

13th. Configuring or removing the ETag

Entity Tag,etag is a mechanism that Web servers and browsers use to confirm the validity of a cache component.

The 14th chapter enables Ajax to be cached

Ensure that AJAX requests follow performance guidance, especially with long expires headers.

Original link: http://www.aintnot.com/2014/12/28/read-high-performance-web-sites/

Reading notes: Building a high-performance website