1, try to use div+css layout
Div+css comparison vs. table layout Benefits:
A. Code refinement
With the Div+css layout, the page code is streamlined, and this is known about XHTML. The direct benefits of code simplification are two points: one is to improve spider crawling efficiency, in the shortest possible time to climb the entire page, so that the quality of the inclusion of certain benefits; second, because it can be efficient crawling, it will be liked by spiders, so that the number of included has certain advantages.
B. Reducing the number of nesting problems that affect spider crawling
In order to achieve a certain visual effect, it is necessary to apply multiple tables using the normal table table schema. If the nested table is the core, the spider crawls over the core of the page without grabbing it, and the page becomes a similar page. Too many similar pages in the site can affect rankings and domain trust. The div+css layout basically does not have such a problem, from a technical point of view, XHTML does not require too many nesting in the control style.
C. Easy to modify and maintain
Thanks to the Div+css authoring method, it is easier to save time when modifying a page. Depending on the area content tag, the corresponding ID is found in the CSS, which makes it more convenient to modify the page and does not break the layout style of other parts of the page.
D. Make the page load faster
Because most of the page code is written in CSS, the page volume size becomes smaller. Relative to the way the table is nested, DIV+CSS will separate the page into more areas and load it up and down when the page is opened. Instead of nesting in tables, the entire page is circled in a large table, making it slow to load.
2, the IMG label reasonable use
A, limit picture size 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 needs of the picture. If 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 effect, affect loading
The main or JS call, the direct page of the use of JavaScript statements, or the volume of the Web page, do not put JS stacked on the page, such as when you add an event handle in the 500 and 5,000 dom elements of the loop effect is certainly not the same.
4, JS, CSS dynamic compression
The web system is unavoidable to use a large number of JavaScript and CSS files, such as open-source JavaScript framework prototype, jquery, Extjs-core, and so on, these JS framework, less than hundreds of K, I have done a lot of projects, have used
A lot of JS. Especially ExtJS, the function is really powerful, but also the largest volume of a JS frame. A little inattention in use can easily cause 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.
The article I wrote earlier:js, CSS Dynamic compression page code You can dynamically compress code based on this method.
5. Avoid using dead links
6. Specify expires or Cache-control for the file header
This code includes two elements:
For static content: Sets the file header expiration time expires value is "never expire" (never expires)
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 site domain name, picture domain name
9, picture delay loading
I wrote earlier article: Jquery.lazyload.js implementation of the 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. 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.
12. Minimize the number of IFRAME
<iframe> Advantages: Solve loading problems of slow loading third-party content and advertisements; Security sandbox; parallel load scripts.
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
Many performance rules are about how to handle external files. However, before you take these steps you may ask a more basic 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 because both JavaScript and CSS files can generate caches in the browser. JavaScript and CSS built into HTML documents are re-downloaded in each request with an HTML document. This reduces the number of HTTP requests, but increases the size of the HTML document. On the other hand, if the JavaScript and CSS in the external file are cached by the browser, you can reduce the size of the HTML document without increasing the number of HTTP requests.
The key issue is that the frequency of external JavaScript and CSS file caches is related to the number of requests for HTML documents. Although there are some difficulties, there are still some indicators that can measure it. If a user in a session browses to multiple pages in your site, and the same scripts and stylesheets are reused on those pages, caching external files can be a greater benefit.
Many sites do not have the functionality to build these metrics. The best way to resolve these sites is to refer to JavaScript and CSS as external files. The exception to using built-in code is the homepage of the site, such as Yahoo! Home and my Yahoo! The home page has fewer (and perhaps only one) views in a session, and you can see that built-in JavaScript and CSS 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 them is the built-in JavaScript and CSS on the homepage, but when the page is downloaded, the external files are downloaded dynamically, and when they are used in the sub-pages, they are cached in the browser.
15. Avoid using filters
The IE exclusive properties AlphaImageLoader is used to correct the translucent effect of displaying PNG images in the following versions of 7.0. 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 every element (not just the picture) it will operate once, increasing memory costs, so its problems are manifold.
The best way to avoid using alphaimageloader completely is to use the PNG8 format instead, which works well in IE. If you do need to use AlphaImageLoader, use the underscore _filter and make it invalid for users IE7 or later.
16. Place the script at the bottom of the page
The problem with scripting is that it blocks parallel downloads of pages. The http/1.1 specification recommends that there be no more than two concurrent downloads for each host name in the browser. If your picture is placed on multiple host names, you can download more than 2 files at a time in each parallel download. However, when the script is downloaded, the browser does not download other files at the same time, even if the host name is different.
In some cases it may not be easy to move the script to the bottom of the page. For example, if the script uses document.write to insert the page content, it cannot be moved down. There may also be a scope problem here. In many cases, this problem will be encountered.
A frequently used workaround is to use deferred scripting. The DEFER property indicates that the script does not contain document.write, which tells the browser to continue displaying. Unfortunately, Firefox does not support the defer property. In Internet Explorer, scripts can be delayed but not as expected. If the script can be delayed, it can be moved to the bottom of the page. This will make your page load 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 Coockie in the request, the server does not use any of these coockie. So they just create network transmissions because of some negative factors. All you should be sure is that requests for static content are non-Coockie requests. Create a subdomain and use it to store all of the static content.
If your domain name is www.example.org, you can have static content on the static.example.org. However, if you are not on www.example.org but have set up Coockie on the top-level domain example.org, all requests for static.example.org include Coockie. In this case, you can re-purchase a new domain name to have static content, and to keep the domain name is not coockie. Yahoo! uses ymig.com, YouTube uses ytimg.com, Amazon uses images-anazon.com, and so on.
Another benefit of having static content with a Coockie domain name is that some proxies (servers) may deny caching of Coockie content requests. A related suggestion is that if you want to be sure that you should use example.org or www.example.org as your home page, you have to take into account 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 sub-domain translator Dudo Note) There is no other choice, so 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 in the root directory of the server. It must exist, because even if you don't care if it's useful, 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, the Favicon will
Downloaded before the external content is loaded.
20. Keep single content less than 25K
This limitation is mainly because the iphone cannot 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 paper summarizes the personal experience and actual work experience, please give valuable advice, thank you.
Web Development Performance Optimization---interface Chapter
