Web Development performance Optimization---UI interface Chapter

1, as far as possible div+css design
DIV+CSS Advantage layout compared to table:
A. Streamlining code

With div+css design, the page code is streamlined. It's for XHTML to know all about.

The direct advantages of code simplification are two points: one is to improve spider crawling efficiency, can crawl the entire page in the shortest time. This has a certain advantage in the quality of inclusion, second, because it can be efficient crawling, will be liked by spiders, so that the number of included has certain advantages.

B. Reduce the problem of spider crawling caused by nesting more

In order to achieve a certain visual effect, it is necessary to apply multiple tables using the normal table table schema. Assuming that the nested table is the core content, the spider crawls over the core of the page without crawling to it. This page is a similar page. Too many similar pages in the site will affect the ranking and Domain name Trust degree.

There is basically no such problem with the DIV+CSS layout. Technically, XHTML does not need to be too nested to control styles.

C. Easy to change and maintain

Because of the use of DIV+CSS production methods. It's easier to save time when changing pages. Based on the area content tag. To the CSS to find the corresponding ID, making it easier to change the page, and will not break the rest of the page layout style.

D. Loading the page faster
Because most of the page code is written in CSS. Makes the page volume capacity smaller. Relative to how the table is nested. DIV+CSS separate pages into a number of other areas, loading the pages in layers when they are opened. Rather than nesting in tables, the entire page is circled in a large table, making loading very slow.

2, the IMG label reasonable use
A, limit the size of the picture 20-100k can, try not to affect the time to minimize the display
B, title, alt attribute write complete
C, do not use in order to set the length of the HTML is larger than the actual need for pictures. Suppose you need:

then your picture (mycat.jpg) should be 100x100 pixels instead of reducing the use of a 500x500 pixel image.


3, less Use JS special effects display, avoid blind use JS special effects. Impact loading
The main or JS call, the direct page of the use of JavaScript statements. Still very much of the page volume, do not all the JS stacked on the page, for example, when you add an event handle in 500 and 5,000 dom elements of the loop effect is certainly not the same.


4, JS, CSS dynamic compression
A lot of JavaScript and CSS files are used in Web systems, such as the open source JavaScript framework prototype, jquery, Extjs-core, and so on. These JS frames. There are hundreds of k, and I've done a lot of projects before.
A lot of JS. Especially ExtJS, the function is really powerful, but also the largest volume of a JS frame.

Using a little inattentive very easy causes your system to reflect slowly. In order to improve the JS, CSS file download speed, so as to improve the response speed of the page, reduce the size of the file is the ultimate way.

I have written before:js, CSS Dynamic compression page code can be based on this method of code dynamic compression.


5. Avoid using dead links


6. Specify expires or Cache-control for the file header
This code contains two-part content:
For static content: Sets the file header expiration time expires value is "never expire" (perpetual only)
For dynamic content: Use the appropriate Cache-control file header to help the browser make a conditional request

7. Generate static pages

8, two level website domain name, picture domain name

9, Image delay loading

I wrote earlier article: Jquery.lazyload.js implementation of image lazy loading can be based on this method of image local delay loading.

10. cacheable Ajax


11, according to the Domain Name Division page Content
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.

Like what. 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 the statics1.example.org and statics.example.org.

12. Minimize the number of IFRAME
<iframe> Strengths: Address onboarding issues such as slow loading of third-party content and advertising. Security sandbox; Load scripts in parallel.

Disadvantages of <iframe>: Instant content is empty, loading also takes time; it prevents pages from loading; no semantics.

13. Place the style sheet on top
In the study of Yahoo! Performance, we found that placing the stylesheet inside the

14. Using external JavaScript and CSS
Very many performance rules are about how to handle external files.

However, before you take these measures you may ask a more important question: should JavaScript and CSS be placed in external files or placed within the page itself?
Using external files in real-world applications can improve page speed, as JavaScript and CSS files can generate caches in the browser.

JavaScript and CSS built into HTML documents are downloaded again in each request with an HTML document.

This even reduces the number of HTTP requests. The size of the HTML document was added. On the other hand, assuming that the JavaScript and CSS in the external file are cached by the browser, the size of the HTML document can be reduced at the same time as the number of HTTP requests are not added.
The key issue is that the frequency of external JavaScript and CSS file caches is related to the number of requests for HTML documents. Despite some difficulty, there are still some indicators that can measure it. Suppose a user in a session browses to multiple pages in your site. And the same scripts and stylesheets are used over and over again in these pages, and caching external files can be a great benefit.
Many sites do not have the capability to build these metrics.

For these sites, the best way to resolve this is to refer to JavaScript and CSS as external files. The exception to using built-in code is the site's home page, such as Yahoo! Home and my Yahoo! The home page has fewer (and perhaps only one) views in a single session, and you can see that built-in JavaScript and CSS can speed up response times for end users.

For home pages with larger views, there is a technology that balances the benefits of reducing HTTP requests from built-in code with caching by using external files. One of these is the built-in JavaScript and CSS on the homepage, but downloading the external files dynamically after the page has been downloaded. When you use these files in a child page. They are already cached in the browser.


15. Avoid using filters
The IE exclusive attribute AlphaImageLoader is used to correct the translucent effect of PNG images displayed in the version number 7.0 below.

The problem with this filter is that when the browser loads the image it terminates the rendering of the content and freezes the browser. In each element (not but the picture) it will operate once and add memory expense, so its problems are manifold.
The best way to avoid using alphaimageloader completely is to replace it with the PNG8 format, which works very well in IE.

Assuming you do need to use AlphaImageLoader, use the underscore _filter and make it invalid for users of the IE7 or above version number.


16. Place the script at the bottom of the page
The problem with scripting is that it blocks parallel downloads of pages. http/1.1 specification recommendations. The browser does not have more than two concurrent downloads for each host name. Assuming your picture is placed on multiple hostnames, you can download more than 2 files at the same time in each parallel download. But when the script is downloaded. The browser will not download other files at the same time, even if the host name is not the same.

In some cases it may not be easy to move the script to the bottom of the page.

Suppose, for example, that document.write is used in a script to insert page content. It can't be moved down. There may also be a scope problem here.

Very many cases. Will encounter problems in this area.
A frequently used alternative is to use deferred scripting. The DEFER property indicates that the script does not include document.write, which tells the browser to continue displaying. Unfortunately, Firefox does not support the defer property.

In Internet Explorer. The script may be delayed but the effect will not be as we would expect.

Assuming the script can be delayed, it can be moved to the bottom of the page. This will allow you to load the page a little faster.


17. Reduce Cookie Volume


18. Use no Coockie domain name for page content
When the browser requests a static picture and sends the Coockie at the same time in the request. The server does not do anything for these coockie to use. So they are simply the network transmissions created by some negative factors.

All you should be sure that the request for static content is a Coockie request. Create a subdomain and use it to store all of the static content.
Assuming your domain name is www.example.org, you can have static content on the static.example.org. However, let's say you're not on www.example.org, but you set up Coockie in the top-level domain example.org. Then all requests for static.example.org include Coockie. In this case, you can buy a new domain name again to have static content, and to keep the domain name is non-Coockie. Yahoo! is using the ymig.com. YouTube is using ytimg.com, Amazon is using images-anazon.com and so on.

Another advantage of having static content with a Coockie domain name is that some agents (servers) may deny caching of Coockie content requests. A related suggestion is that if you want to determine whether you should use example.org or www.example.org as your home page, consider the impact of Coockie.

Ignore the WWW will make you in addition to the Coockie set to *.example.org (* is the pan domain name resolution, representing all the sub-domain translator Dudo Note) There is no other choice. Therefore, for performance reasons it is best to use a subdomain with WWW and set coockie on it.


19, Favicon.ico to be small and cacheable
Favicon.ico is a picture file located under the Server root folder. It must be there. Because even if you don't care if it's practical, the browser makes a request for it, so it's best not to return a 404 Not Found response
。

Because it is on the same server, it is sent once every time Coockie is requested. This image file also affects the download order. For example, in IE, when you request additional files in onload, Favicon will
Downloaded before the content is loaded.


20. Keep single content less than 25K

This limitation is mainly due to the inability of the iphone to cache files larger than 25K. Note that this refers to the size after decompression. Because simple GIZP compression may not be required, it is important to streamline files.

This article for the individual by the actual work experience and collection summary collation, can not write the place please give valuable advice, thank you.

I Sina Weibo: http://weibo.com/i/1741159542

Copyright notice: This article Bo Master original articles, blogs, without consent may not be reproduced, pay attention to a lot of other technology blog mussels: Http://blog.csdn.net/fuyifang

Web Development performance Optimization---UI interface Chapter