High-performance website construction

Compression

The browser uses the accept-encoding header to life it supports compression.

The server uses the Content-encoding header to confirm that the response has been compressed.

Persistent connections

Request:connection:keep-alive

Response:connection:keep-alive

Picture optimization

1. Use the image map to integrate multiple images into one image <map>

2.CSS Sprites multiple pictures merged into one, when used, through position development

The combined size is smaller than the sum of the individual pictures and reduces the HTTP request

3. Inline Picture Data:url

Add Expires Header

The browser uses caching to reduce the number of HTTP requests and to reduce the size of the HTTP response, making the Wweb page load faster.

The Web server uses the expires header to tell the Web client that it can use the current copy of a component until the specified time.

The HTTP specification briefly says that the header is "after this date/time, the response will be considered invalid."

Expires:thu, APR 20:00:00 GMT

Weakness:

The Expires header uses a specific time, which requires the server and client clocks to be strictly synchronized.

In addition, the expiration date needs to be checked frequently, and once the coming day arrives, a new date will need to be provided in the server configuration.

Cache-control with Max-age

Use Cache-control with Max-age to eliminate expires limitations

The Mod_expires Apache module allows you to set the date in a relative manner as max-age when using the Expires header.

This is done through the Expires-default command.

Last-modified/if-modified-since

If a component does not have a long expires header, the browser is still cached and in subsequent requests the browser checks the cache and discovers that the component has expired.

To be more efficient, the browser sends a GET request like the original server.

If the component does not change, the original server can avoid sending the entire data, but instead sends a small header (304) that tells the browser to use its cached components.

Last-modified: The last modification time the server sent to the client

If-modified-since: Server Last modified time for client records

Attention:

By revising the file name, the browser uses the data in the cache to no longer get the latest files when the project is republished, usually appending the project version number to the file name.

Compression components

Reduce the response time by reducing the size of the HTTP response.

If the response packet produced by the HTTP request is small, the transfer time is reduced because only a small package is passed from the server to the client.

Use gzip encoding to compress the HTTP response packet and thereby reduce network response time.

This is the simplest technique for reducing page size.

Starting with HTTP 1.1, Web clients can identify support for compression through the accept-encoding header in an HTTP request.

Accept-encoding:gzip, deflate

If the Web server sees this header in the request, it compresses the response using one of the methods listed by the client.

The Web server passes the content-encoding header in response to the Comrade client.

Conten-encoding:gzip

Compress What:

Html,script,css,xml,json ....

Image and PDF should not be compressed because they have been compressed, and then compression will only waste CPU resources.

Typically, files larger than 1KB or 2KB are compressed based on experience.

The mod_gzip_minimum_file_size command controls the minimum value of the file you want to compress, which is 500B by default.

Place style labels on top

To avoid a white screen, place the style sheet in the head at the top of the document.

This modified example site is called "CSS at tht Top", which resolves all errors.

The position of the style sheet in the page does not affect the download time, but it affects the rendering of the page.

If the style sheet is still loading, building the rendering tree is a waste because there is no need to draw anything until all the stylesheets are loaded and parsed. Otherwise, displaying content before it is ready encounters a "flicker without style content" issue.

Place the script at the bottom

It's a good idea to move the script from the top of the page to the bottom.

This allows the page to be progressively rendered, or to improve the degree of parallelism of the download.

Progressive rendering is blocked for document content below the bit and script.

Place the script in the lower part of the page, thinking that the more content can be presented gradually.

Parallel Download:

The HTTP 1.1 specification recommends that the browser download two components from each host name in parallel.

Many Web pages need to download all of the components from a host name.

Use DNS aliases to divide the components into multiple hosts.

It is recommended to use a host name for optimal efficiency.

Script Blocking Download:

The advantages of parallel download components are obvious, but parallel downloads are actually disabled when downloading scripts, and the browser does not start other downloads even if a different host name is used. (not only block script, other downloads will also block)

The reason the script blocks the download is primarily to ensure that the script is loaded in order.

• The script blocks rendering of the content behind it
• Divisions will block the download of the components behind it

Dynamic inline Javascript/css

Using cookies as an indicator, if cookies are not present, inline JavaScript and CSS, when the page is loaded, load external JavaScript and CSS files dynamically in the Load event (load into the hidden iframe, implement the cache external file, And does not affect the current page).

When a user accesses a page for the first time, the server discovers that there is no cookie and generates an inline component page.

The server then adds JavaScript to dynamically download external files (and set cookies) after the page loads.

Reduce DNS Lookups

Thin JavaScript

Streamline

Confuse

Avoid redirects

301 Redirect, redirect address in the location of the response header information, representing the permanent transfer.

302 Redirect, redirect address in the location of the response header information, represents a temporary transfer (obsolete).

303 Redirect, for a 302 supplement, you must use a GET request to obtain a resource for the new location.

307 redirects, for a 302 supplement, the next method of requesting a resource is to use get in the same way as the current interaction instead of all.

304 Not Modified, notifies the browser that a copy in the cache can be used directly.

ETag

Problems in a clustered environment

Configure or remove

To make Ajax cacheable

Handling of pictures

1. Image map, css sprites, inline picture

2. Using the cache

3. Make the original size of the picture, do not enlarge the picture, reduce the picture

4. Use JPEG for photos, animate using GIF, other PNG, and use PNG8 as much as possible

5. Picture Lazzy Loading

Create a fast-responding web App

The cost of scripting is low, and processing CSS is the biggest overhead. Understanding the mysteries of the DOM and reducing its effect is better than trying to speed up the script.

When the user operates, the browser uses a single thread to pull events from the queue and then process the event itself or execute JavaScript.

What's fast enough?

The user's sense limit for objects in the direct manipulation UI is 0.1 seconds.

If it cannot be completed within 0.1 seconds, it must be completed in 1 seconds, and within 0.2 to 1 seconds of processing time, the user will feel the computer is being processed.

Delay of more than 1 seconds to prompt the user that the computer is solving this problem, such as the shape of the cursor changes.

Any operation over 10 seconds requires a percent complete indicator, and a method that is user-friendly and clearly identified.

Analyze JavaScript code performance using the Firebug plugin.

Timer

Using timers to simulate multi-threaded applications, it is simple to split long-running computations into separate chunks.

Memory optimized

Use the Delete keyword to remove JavaScript objects that are no longer needed from memory.

Removing a node that is no longer necessary from the DOM tree of a Web page.

Comet

Low-latency data transfer technology, which is the basis of comet: Polling, long polling, permanent frames, xhr streams,WebSocket.

1. Polling

Simple polling, where a Web site or application makes a request every X milliseconds to check for updates to be rendered to the user interface.

Eg:settimeout

Polling is possible with information generated by the server at a known interval of time

Simple polling is the least efficient but simplest comet technology.

2. Long polling

The browser sends a request to the server, and the server responds only if new data is available.

In support of long polling, the server has to completely maintain a large collection of all unresponsive requests and their corresponding connections.

The server maintains these request connections by returning a transfer-encoding:chunked or connection:close response.

That is, through the XHR to establish a connection with the server, when the service side of the data changes, through the XHR notification browser, at this time to send the request data connection.

The client establishes a persistent connection with the server until the server has data sent over, the server disconnects, and the client finishes processing the pushed data, again initiating a persistent connection that repeats itself.

3. Permanent Frames

4.XHR Stream

IE7 the following browsers do not support

Http://www.cnblogs.com/hoojo/p/longPolling_comet_jquery_iframe_ajax.html

Simplifying CSS Selectors

CSS selectors are matched from right to left.

Avoid using wildcard rules as much as possible

Do not qualify the ID selector

Instead of qualifying the class selector with a specific tag, extend the class name according to the actual situation

For child selectors and descendant selectors as much as possible with a specific class to represent

The browser's reflow must match all CSS selectors again