Front-end technology-front page optimization

Front-end page optimization

Where did the time go?

Only 10%-20% of the end-user response time is spent downloading HTML documents, while the remaining 80%-90% time is spent on the relevant components of the download page. such as: pictures, flash and so on.

So the main optimization:

Reduce HTTP Requests
Cache
Reduce file Size: Compress files + optimize code

Health optimization is based on the page loading process, the overall optimization process

First step, browser preprocessing

Query cache: Read the cache or send a 304 request

Step two, query DNS

Optimization rules--Reduce DNS lookups

DNS Caching
Browser DNS cache computer DNS cache server DNS cache (TTL)

Using the Keep-alive feature
Reduce DNS Lookups

When the client's DNS cache is empty, the number of DNS lookups is equal to the number of unique host names in the Web page. Reducing the number of unique host names can reduce the number of DNS lookups.
Fewer domain names to reduce DNS lookups (2-4 hosts)

The Domain Name System (DNS) provides the correspondence between the domain name and the IP, just like the name of the person in the phone book and their phone number. When you enter www.dudo.org in the browser address bar, the DNS resolution server returns the IP address of the domain name. The process of DNS parsing also takes time. In general, returning the IP address for a given domain name can take between 20 and 120 milliseconds. And in this process the browser will not do anything until DNS is found.
Caching DNS lookups can improve page performance. This cache requires a specific cache server, which typically belongs to the user's ISP provider or local LAN control, but it also generates a cache on the computer that the user is using. DNS information is maintained in the operating system's DNS cache (DNS Client Service in Microsoft Windows systems). Most browsers have their own caches that are independent of the operating system. Because the browser has its own cache record, it is not affected by the operating system in a single request.
Internet Explorer By default, the cache time for DNS lookup records is 30 minutes, and its key value in the registry is dnscachetimeout. Firefox's lookup record for DNS is cached for 1 minutes, and its option in the configuration file is network.dnscacheexpiration (fasterfox this option to 1 hours).
When the DNS cache in the client is empty (both the browser and the operating system are empty), DNS lookups are the same as the number of host names in the page. This includes host names such as URLs, pictures, script files, style sheets, flash objects, and so on in the page. Reducing the number of host names can reduce DNS lookups.
Reducing the number of host names can also reduce the number of concurrent downloads in the page. Reducing the number of DNS lookups can save response time, but reducing parallel downloads increases response time. My guiding principle is to divide the contents of these pages into at least two parts but not more than four parts. This result is a tradeoff between reducing the number of DNS lookups and maintaining a high degree of parallel downloads.

Step three, establish the connection

Optimization rules--Using content distribution networks

The full name of the CDN is the Content Delivery network, which is the contents distribution networks. The goal is to add a new layer of network architecture to the existing Internet, publish the content of the website to the closest user's network "Edge" (Edge server), so that users can get the content they need, solve the congestion of Internet network, and improve the response speed of users to visit the website. The problem of the slow response speed of the user visiting website caused by the small network bandwidth, the large number of users, and the uneven distribution of dot is comprehensively solved technically.

CDN Technology is the first and rapid development in the United States to solve the problem of poor Internet performance effective means. The basic idea is to avoid the internet can affect the speed and stability of data transmission bottlenecks and links, so that content transmission faster and more stable. By placing the node servers in the network, a layer of intelligent virtual network based on the existing Internet, the CDN system can re-direct the user's request to the nearest service node according to the network traffic and the connection of each node, the load condition and the distance and response time of the user.
optimization Rules--dividing page content by domain name

Divide the domain name by page content and store files on the appropriate resource server

Dividing the page content into sections allows you to maximize parallel downloads. Because of the impact of DNS lookups, you first need to make sure that the number of domain names you use is between 2 and 4. For example, you can put the HTML content and dynamic content used on the www.example.org, and the various components of the page (pictures, scripts, CSS) are stored on statics1.example.org and statics.example.org.
You can find more information about maximizing Parallel Downloads in the Carpool Lane at Tenni Theurer and Patty Chi co-author.

Fourth step, send request
Optimization rule--Reduce HTTP requests

80% of the end-user response time is used to download the content. This part of the time includes images on the download page, stylesheets, scripts, Flash, and so on. You can reduce the number of HTTP requests by reducing the elements in the page. This is a key step in improving the speed of your Web pages. The
way to reduce page components is to simplify page design. So is there a way to maintain the richness of the content of the page and to speed up response time? Here are a few techniques to reduce the number of HTTP requests and possibly keep the page content rich.
Merging files is a way to reduce the HTTP request by putting all the scripts in a file, such as simply putting all the CSS files into a stylesheet. When a script or style sheet is used in different pages, it may be a bit more cumbersome to make different changes, but even so, this approach is an important step in improving the performance of the page. The
CSS sprites is an effective way to reduce image requests. Put all the background images into a picture file, and then through the CSS Background-image and Background-position properties to display the different parts of the picture; the
Picture map integrates multiple images into a single image. Although the overall size of the file does not change, you can reduce the number of HTTP requests. Image maps can only be used when all parts of the picture are close together on the page, such as the navigation bar. Determining the coordinates of a picture may be cumbersome and error-prone, and using picture map navigation is not readable, so this method is not recommended; the
inline image is a method that uses Data:url scheme to load the image data into the page. This may increase the size of the page. Placing an inline image in a stylesheet (cacheable) reduces the HTTP request while avoiding increasing the size of the paging file. But inline images are not yet supported by mainstream browsers.
Reducing the number of HTTP requests on a page is one of the first steps you need to make. This is the most important way to improve the wait time for first-time access to users. As Tenni theurer his blog browser Cahe usage-exposed!, HTTP requests took up 40% to 60% of the response time without caching. Get a faster experience for those who visit your site for the first time!

Optimization rules-optimize CSS Spirite
Arrange your images horizontally in the spirite, and the vertical arrangement will slightly increase the file size;
Spirite The combination of the color closer together can reduce the number of colors, the ideal condition is less than 256 colors in order to apply the PNG8 format;
Easy to move, do not leave a large gap in the middle of the spirite image. While this is unlikely to increase the file size, it requires less memory for the user agent to decompress the image into a pixel map. 100x100 's picture is 10,000 pixels, while 1000x1000 is 1 million pixels.

Optimization rules – Avoid 404 errors

HTTP request time consumption is very large, so using an HTTP request to get a useless response (for example, 404 does not find the page) is completely unnecessary, it will only reduce the user experience without a little benefit.
Some sites change the 404 error response page to "Are you looking for * * * *", which improves the user experience but also wastes server resources (such as databases, etc.). The worst case scenario is a link to an external JavaScript that has a problem and returns 404 code. First, this load destroys parallel loading, and second, the browser will try to find something useful in the returned 404 response content as JavaScript code to execute.

Rule optimization – Do not use frameset, use less IFRAME

Search engine unfriendly, instant content empty, loading also takes time, will prevent page loading
It is forbidden to use IFRAME to introduce external resources, excluding Allyes ads, excluding empty pages of About:blank.

The Ifrmae element can insert a new HTML document in the parent document. It is important to understand the work of the IFRAME before you can use it more effectively.

IFRAME Advantages:

Address loading issues such as slow loading of third-party content and ads
Security Sandbox
Parallel Load Scripts
Disadvantages of IFrame:

Instant content is empty, loading also takes time
Prevents the page from loading
No semantics.

Fifth step, waiting for response

Optimization rules-Avoid redirects

After the redirect is complete and the HTML download is complete, nothing is displayed to the user.

Involves server load, data query, server-side cache, etc.

The

Jump is implemented using 301 and 302 code. The following is an HTTP header with a response code of 301:
http/1.1 301 Moved permanently
Location:http://example.com/newuri
Content-type:text The/html
Browser points the user to the URL specified in the location. All information in the header file is required in a single jump, and the content section can be empty. Regardless of their name, the 301 and 302 responses are not cached unless you add an additional header option, such as expires or Cache-control, to specify it for caching. <meat/> Element Refresh tags and javascript can also implement URL jumps, but if you have to jump, the best way is to use the standard 3XXHTTP status code, mainly to ensure that the "back" button can be used correctly.
But remember to skip the transfer to reduce the user experience. Adding a jump between the user and the HTML document will delay the display of all the elements in the page, because any files (images, flash, etc.) will not be downloaded until the HTML file is loaded. The
has a jump phenomenon that is often overlooked by web developers and often wastes response time. This behavior occurs when the URL should have a slash (/) that is ignored. For example, when we want to access http://astrology.yahoo.com/astrology, we actually return a jump with a 301 code that points to http://astrology.yahoo.com/astrology/ (note the trailing slash). Alias or mod_rewrite or the Directoryslash can be used in Apache server to avoid.
Connecting new sites and old sites is another scenario where jump functionality is often used. In this case, it is often to connect different content of the site and then jump based on the different types of users (such as browser type, user account type). It is easy to switch between two Web sites using jumps, and the amount of code required is not much. Although using this approach can reduce complexity for developers, it also reduces the user experience. An alternative approach is to use alias and mod_rewrite and implementation if both are on the same server. If you are using a jump because of a different domain name, you can replace it by using alias or Mod_rewirte to create a CNAME (a DNS record that holds the relationship between a domain name and another domain name).

The

Jump is implemented using 301 and 302 code. The following is an HTTP header with a response code of 301:
http/1.1 301 Moved permanently
Location:http://example.com/newuri
Content-type:text The/html
Browser points the user to the URL specified in the location. All information in the header file is required in a single jump, and the content section can be empty. Regardless of their name, the 301 and 302 responses are not cached unless you add an additional header option, such as expires or Cache-control, to specify it for caching. <meat/> Element Refresh tags and javascript can also implement URL jumps, but if you have to jump, the best way is to use the standard 3XXHTTP status code, mainly to ensure that the "back" button can be used correctly.
But remember to skip the transfer to reduce the user experience. Adding a jump between the user and the HTML document will delay the display of all the elements in the page, because any files (images, flash, etc.) will not be downloaded until the HTML file is loaded. The
has a jump phenomenon that is often overlooked by web developers and often wastes response time. This behavior occurs when the URL should have a slash (/) that is ignored. For example, when we want to access http://astrology.yahoo.com/astrology, we actually return a jump with a 301 code that points to http://astrology.yahoo.com/astrology/ (note the trailing slash). Alias or mod_rewrite or the Directoryslash can be used in Apache server to avoid.
Connecting new sites and old sites is another scenario where jump functionality is often used. In this case, it is often to connect different content of the site and then jump based on the different types of users (such as browser type, user account type). It is easy to switch between two Web sites using jumps, and the amount of code required is not much. Although using this approach can reduce complexity for developers, it also reduces the user experience. An alternative approach is to use alias and mod_rewrite and implementation if both are on the same server. If you are using a jump because of a different domain name, you can replace it by using alias or Mod_rewirte to create a CNAME (a DNS record that holds the relationship between a domain name and another domain name).

Jumps are implemented using the 301 and 302 codes. The following is an HTTP header with a response code of 301:
http/1.1 301 Moved Permanently
Location:http://example.com/newuri
Content-type:text/html
The browser points the user to the URL specified in the location. All information in the header file is required in a single jump, and the content section can be empty. Regardless of their name, the 301 and 302 responses are not cached unless you add an additional header option, such as expires or Cache-control, to specify it for caching. <meat/> Element Refresh tags and javascript can also implement URL jumps, but if you have to jump, the best way is to use the standard 3XXHTTP status code, mainly to ensure that the "back" button can be used correctly.
But remember to skip the transfer to reduce the user experience. Adding a jump between the user and the HTML document will delay the display of all the elements in the page, because any files (images, flash, etc.) will not be downloaded until the HTML file is loaded.
There is a jump phenomenon that is often overlooked by web developers and often a waste of response time. This behavior occurs when the URL should have a slash (/) that is ignored. For example, when we want to access http://astrology.yahoo.com/astrology, we actually return a jump with a 301 code that points to http://astrology.yahoo.com/astrology/ (note the trailing slash). Alias or mod_rewrite or the Directoryslash can be used in Apache server to avoid.
Connecting to new sites and old sites is another case where jump functionality is often used. In this case, it is often to connect different content of the site and then jump based on the different types of users (such as browser type, user account type). It is easy to switch between two Web sites using jumps, and the amount of code required is not much. Although using this approach can reduce complexity for developers, it also reduces the user experience. An alternative approach is to use alias and mod_rewrite and implementation if both are on the same server. If you are using a jump because of a different domain name, you can replace it by using alias or Mod_rewirte to create a CNAME (a DNS record that holds the relationship between a domain name and another domain name).

Seventh step, receive data

Optimization rules--Compression components

How text response compression works for HTML documents, scripts, and style sheets, XML, and JSON
Compression can typically reduce the amount of data in response by nearly 70%

Optimization rules-streamline JavaScript and CSS

Remove unnecessary characters from your code to reduce their size and load time.

Rule rule – Reduce page size as much as possible

Page must be less than 150K (no picture)
A) whether the static file is gzip
b) is the picture compressed optimized

Eighth step, read the cache

Optimization rules-add expire or Cache-control

Apply to components that do not change frequently, including scripts, stylesheets, flash components, pictures
Expires and Cache-control

Rule rules-Use external JS and CSS files

Use external JS and CSS as much as possible, because most of our current JS and CSS have done gzip and cache technology to make the most of it.

Nineth step, handling elements

Do not gzip compress binary files such as image and PDF

Tenth step, Render element

Optimization rules--put style sheets on top

The interface prototype page must place the style sheet at the top of the page, and the developer must put the style sheet on top for no special reason.

In the past, most of the masterpage reasons were not able to pin all stylesheets, and when modified masterpage, as far as possible according to the principle of design.

Optimization Rules – We recommend placing the script at the bottom

General browsers can allow concurrent downloads, depending on the number of hosts, bandwidth, etc.

(By default, IE is 2 and FF is 8)

Parallel downloads are actually disabled when downloading scripts.

Optimization rules--Removing duplicate scripts

Optimization rules--Avoid CSS expressions

affect browser rendering time

Optimization Rules – Optimizing images

Use GIF and PNG as much as possible

Try to use png/gif format pictures, PNG pictures First, but must note that if you want to be compatible with IE6, PNG use must pay attention to the transparency problem.

The picture must first be optimized with tool compression (PNG, JPG)

--------------------------------------------------------------------------------------------------------------- ----------------------

Finish

Reproduced must be reproduced in the words, the original author and the original post address.

Read MORE:

Http://www.cnblogs.com/dolphinX/p/3508657.html

Http://www.cnblogs.com/fullhouse/archive/2012/01/05/2312956.html

Http://www.php100.com/html/webkaifa/javascript/2012/0619/10568.html

Http://www.cnblogs.com/zhengyun_ustc/archive/2013/05/09/frontendoptimize.html

Http://www.cnblogs.com/and/p/3390676.html

Front-end technology-front page optimization