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