Preface
code is as follows:


<! PUBLIC DOCTYPE HTML "-///DTD/W3C XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<HTML XMLNS="http://www.w3.org/1999/xhtml" >
<Head>
<Meta HTTP - equiv="content-type" Content="text/HTML; charset=utf-8"/>
<Title> Test 1 - js import way </title>
<The script type="text/javascript" >
</script>
</head>
<Body>
<Ul>
<Li> <A href="" >Front page </a> </li>
<Li> <A href="" >Library </a> </li>
<Li>
<A href="" id=" mv ">MV
<Div class="" >
<A href="" >Recommended MV </a>
<A href="" >MV library </a>
<A href="" >Music scene </a>
<A href="" >MV project </a>
</div>
</li>
<Li> <A href="" >My music </a> </li>
<Li> <A href="" >Download the client </a> </li>
</ul>
</body>
</html>

  code is as follows:  


<! PUBLIC DOCTYPE HTML "-///DTD/W3C XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<HTML XMLNS="http://www.w3.org/1999/xhtml" >
<Head>
<Meta HTTP - equiv="content-type" Content="text/HTML; charset=utf-8"/>
<Title> Test 1 - js import way </title>
</head>
<Body>
<Ul>
<Li> <A href="" >Front page </a> </li>
<Li> <A href="" >Library </a> </li>
<Li>
<A href="" id=" mv ">MV
<Div class="" >
<A href="" >Recommended MV </a>
<A href="" >MV library </a>
<A href="" >Music scene </a>
<A href="" >MV project </a>
</div>
</li>
<Li> <A href="" >My music </a> </li>
<Li> <A href="" >Download the client </a> </li>
</ul>
<The script type="text/javascript" >
</script>
</body>
</html>

2 effect of js code to display when the mouse moved to the MV menu item menu options. The first code, as the browser parses to <Script> Label, plateaus, until all finished parsing, continue down again, when the video display, a move our mouse, sub menu will be displayed; And the second code, the browser parses the MV, then to <Script> , need to load the js until it is finished, the sub menu is displayed. Obviously, for this kind of important functional modules, more suitable for use for the first piece of code. I understand on this principle, do not know to have in the direction of the bias or error, garden friends have in-depth study of error correction, please.

6. The choice of the image file format. About this, taobao UED image format and design something that has a very in-depth discussion, personally I feel benefit a lot, but the article is too long, write too deep, impatient still see not bottom go to, really so later I again I summarized, you can refer to the three kinds of image file format. After summarizing the article at the time, work is performed in strict accordance with the above.

7. Sprites mapping technology. From the appearance it is a controversial technology, first, we need to open the ps, take many picture with rule in emissions; Second, we need to open the ps, it is best to 5 x magnification level two reference line vertically down again, then on to the scale, down left/top values, wrote in the CSS file; Third, sprites mapping technology and height, the line - height close, because they, second point positioning of the left/top will be inaccurate again, then you should have to set aside a certain space between the icon, or be careful displayed is half of the icon. I really don't have the energy to capture writing code to prove that I was right, this can have. I seem to put this technology is worthless, let Dave Shea what about me! Mapping technology is still widely used until now, I think the main reason is that it significantly reduces the number of requests and to a certain extent, reduces the volume of the image. Compared with these two points, I said earlier the disadvantages seem insignificant.

8. Progressive enhancement to page. The resolution, operating system, browser, combining the project of users against target group, created in the page based on the principle of progressive enhancement in the process. If the project user target group of widely used is 1024 * 768, Mac OS x, ie7 + browsers, so in the design page, width to do corresponding restrictions, best level does not appear scroll bar; Font also no longer choose to be, use other web security font; Next, we happy, because you can not consider ie6, feel suddenly became very happy work? Progressive enhancement, not only can be applied to large direction can also be specific to a single page in the module;
(figure 1)    (figure 2)
figure 1 and figure 2 is a li snippets from a list, figure 2 is the effect on the mouse moved to the li - display &other; Cancel the attention &throughout; . I will apply principles of progressive enhancement in this module: first, the need to consider ie6, then as ie6 doesn't support in addition to tag other than a hover effect, and &other; Cancel the attention &throughout; And is an important function, don't not line, so can only use js code to realize the mouse move out effect; Second, if you don't consider ie6, so suppose &other; Cancel the attention &throughout; Label as the span, can write so in CSS style list: li: hover span {display: block; }; Third, if &other; Cancel the attention &throughout; Into irrelevant words display function, such as time, according to the second point can be used as written, let the other browser display, ie6 does not display the influence also is not big.

9. Use fewer filters, expression, and hacks. This will be mentioned in many refactoring book, the project test have been carried out to filter, a photo wall in the past, use all filters, browser loads the page that slow ah, see this! Don't know. Hack to play in avoiding from the start, is almost never used, so no comment.

10. With the help of some external application to reduce the number of CSS, js file request. PHP application can be considered to minify the CSS and js together every page, then make calls in the page, this page is only request a CSS and js, many performance optimization.
I can think of is to write here for a while. Optimization on the front-end performance should be still has a lot of, these are all fur, slowly go deeper. Ok, kan something else again!

front and design staff


This concludes the body part