Ìá¸ßÒ³ÃæÏàÓ¦ËÙ¶È֮ѹËõÓÅ»¯jsºÍcssÎļþ
Steve SoudersÔÚËûµÄ¡¶High Performance Web Sites¡·Ò»ÊéÖÐÌá³öÌá¸ßÍøÒ³Ð§ÂʵÄ14Ìõ×¼Ôò£¬ÕâЩ¿ÉÒÔʹÓÃYahoo! YSlowÀ´½øÐÐÒ»¸ö±È½ÏÐÎÏóµÄ¼ì²â¡£
ÕâÀïÖ÷ÒªÀ´ËµÒ»ÏµÚÒ»Ìõ×¼Ôò£ºMake Fewer HTTP Requests£¬Òâ˼¾ÍÊǾ¡¿ÉÄܵļõÉÙHTTPÇëÇó¡£µ±Ê±Òª´ïµ½Õâ¸öÄ¿µÄÓкܶàÖÖ·½·¨£¬ÆäÖÐ×îÖØÒªµÄÒ»µã¾ÍÊǽ«CSSÎļþºÍJavascriptÎļþ·Ö±ð½øÐÐѹËõºÍºÏ²¢£¬ÕâÑù¾ÍÔںܴó³Ì¶ÈÉϼõÉÙÁËä¯ÀÀÆ÷¶Ô·þÎñÆ÷µÄHTTPÇëÇó´Ë´¦£¬ÁíÍâÒ»µ©±»ä¯ÀÀÆ÷ÏÂÔØµ½±¾µØ¿ÉÒԶԴ˽øÐлº´æ£¬´Ó¶øÌá¸ßÁ˼ÓÔØËÙ¶È¡£
ÓйØÓÚÕâ·½ÃæµÄ¹¤¾ß×îÓÅÐãÇÒʹÓÃ×îΪ¹ã·ºµÄ¿ªÔ´Èí¼þ·ÇYUI CompressorĪÊôÁË¡£µ«ÊÇYUICompressorÖ»ÄÜʹÓÃÃüÁîÐÐÒ»¸ö¸ö¶Ôjs»òcssÎļþ½øÐÐѹËõ£¬ÏÖÔÚÎÒÃǾÍͨ¹ýʹÓÃant½Å±¾À´´ïµ½ÅúÁ¿Ñ¹ËõºÏ²¢¶à¸öÎļþµÄÄ¿µÄ¡£
ÏÂÃæÒÔѹËõjsÎļþΪÀý½øÐÐ˵Ã÷¡£
Ê×ÏÈ×öÒ»¸ö¹ØÓÚjsÎļþ±àÂë¹æ·¶µÄÔ¼¶¨£ºËùÓеÄÔʼÎļþ¾ùΪ .source.js£¬¾¹ýѹËõ´¦ÀíºóÎļþ±äΪ.js£¬½«¶à¸öѹËõºóµÄÎļþºÏ²¢ºóµÄÎļþÃû³ÆÎªall-min.js¡£
½ÓÏÂÀ´¿ÉÒÔдÏÂÃæµÄant½Å±¾£º
<!-- ¶ÔYUICompressorµÄÒýÓà -->
<property name="js.dir" value="${web.dir}/scripts" />
<property name="js.release.name" value="all-min.js"/>
<!-- ɾ³ý֮ǰѹËõºÏ²¢¹ýµÄÎļþ -->
<delete>
<fileset dir="${js.dir}" includes="${js.release.name}"/>
</delete>
<!-- Ö´ÐÐ yuicompressor ѹËõJS
-- parallel="false"£º¶ÔfilesetÖеÄÿ¸öÎļþ¶¼Ö´ÐÐÒ»´Îexecutable²ÎÊýµÄÃüÁî
-- dest Ö´ÐÐĿ¼
-->
<apply executable="java" parallel="false" verbose="true" dest="${js.dir}">
<fileset dir="${js.dir}">
<include name="**/*.source.js"/>
</fileset>
<arg line="-jar"/>
<arg path="${yuicompressor}"/>
<!-- ÉèÖôý´¦ÀíÔ´Îļþ¼°´¦ÀíºóÊä³öÎļþµÄ±àÂë¸ñʽ -->
<arg line="--charset utf-8"/>
<srcfile/>
<arg line="-o"/>
<!-- Ö¸¶¨ÎļþÃüÃ
Ïà¹ØÎĵµ£º
Eric Meyer’s CSS Reset
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, fo ......
µÚÒ»Õ£ºÓ¦ÖªµÀ
1.1 DIV+CSS
µÄ½Ð·¨ÊDz»×¼È·µÄ
ÎÒÏë·²ÊÇÀ´µ½“Õâ¸öרÌ┵Äͬѧ£¬ºÜ´ó²¿·ÖÊdzå×ÅDIV+CSSÀ´µÄ£¬Ä¿µÄ¾ÍÊÇѧϰ
DIV+CSSµÄ£¬ËµµÄÔÙÖ±½ÓһЩ¾ÍÊÇѧϰÈçºÎÓÃDIV+CSS²¼¾ÖÒ³Ãæ£¬ÈçºÎ´ÓÒ»ÕÅÍ¼Æ¬ÖÆ×÷³É±ê×¼µÄDIV+CSSÒ³Ãæ¡£
Èç¹ûÄã¿´ÍêµÚÒ»¶Î»¹Ã»Óз¢ÏÖ´íÎóµÄ»°£¬ÄÇÄã¾ÍºÜÓб ......
¹æ·¶µÄÃüÃûÒ²ÊÇWeb±ê×¼
ÖеÄÖØÒªÒ»Ï±ê×¼µÄÃüÃû¿ÉÒÔ¸üºÃµÄ¿´¶®´úÂ룬ÎÒÏë´ó¼ÒÓ¦¸Ã¶¼ÓÐÕâÖÖ¾Àú£¬Ä³ÈÕ·³ö×Ô¼º¹ýȥдµÄ´úÂë
¾ÓÈ»¿´²»¶®ÁË£¬ºÇºÇ£¬ÎªÁ˱ÜÃâÕâÖÖÇé¿öÎÒÃǾÍÒª¹æ·¶»¯ÃüÃû£¬ÔÙ˵ÁË£¬ÏÖÔÚÒ»¸öÏîÄ¿²»ÊÇÒ»¸öÈ˾ͿÉÒÔÍê³ÉµÄ£¬ÊÇÐèÒª´ó¼Ò»¥ÏàºÏ×÷µÄ£¬Èç¹ûûÓй淶»¯ÃüÃû£¬±ð
È˾ÍÎÞ·¨¿´¶®ÄãµÄ´úÂ룬´ó´ó½µµÍÁ˹¤× ......
ÍøÒ³ÖÆ×÷ÖУ¬ÎªÁË·½±ãÈÕºóÐ޸ĻòÐ×÷¿ª·¢£¬³£³£Òª¶ÔÒ³Ãæ½øÐÐÏàÓ¦µÄ×¢ÊÍ£¬ÄãÍøÒ³½á¹¹ÇåÎú£¬¿É¶ÁÐÔÔöÇ¿¡£ÒÔϽéÉܼ¸ÖÖ³£ÓõÄ×¢ÊÍ·½·¨£º
Ò»¡¢HTMLµÄ×¢ÊÍ·½·¨
<!-- html×¢ÊÍ:START -->
ÄÚÈÝ
<!-- html×¢ÊÍ:END -->
¶þ¡¢CSSµÄ×¢ÊÍ·½·¨
<style type="text/css">
/* css×¢ÊÍ*/
</style>
ÔÚµ¥¶À ......
<html>
<head>
<mce:style type="text/css"><!--
div.container
{
width:100%;
margin:0px;
border:1px solid gray;
line-height:150%;
}
div.header,div.footer
{
padding:0.5em;
color:white;
background-color:gray;
clear:left;
}
h1.header
{
padding:0;
margin:0;
}
div. ......