Ìá¸ßÒ³ÃæÏàÓ¦ËÙ¶È֮ѹËõÓÅ»¯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"/>
<!-- Ö¸¶¨ÎļþÃüÃ
Ïà¹ØÎĵµ£º
¼ò½é¡¡¡¡
ʲôÊÇCSS hack(http://www.cssplay.org.cn/css-hack/index.html)ÓÉÓÚ²»Í¬µÄä¯ÀÀÆ÷£¬±ÈÈçInternet Explorer 6,Internet Explorer 7,Mozilla FirefoxµÈ£¬¶ÔCSSµÄ½âÎöÈÏʶ²»Ò»Ñù£¬Òò´Ë»áµ¼ÖÂÉú³ÉµÄÒ³ÃæÐ§¹û²»Ò»Ñù£¬µÃ²»µ½ÎÒÃÇËùÐèÒªµÄÒ³ÃæÐ§¹û¡£
¡¡¡¡Õâ¸öʱºòÎÒÃǾÍÐèÒªÕë¶Ô²»Í¬µÄä¯ÀÀÆ÷ ......
Ò³ÃæÉϵÄcssÁ´½Ó ÈçÏÂ
<link href="../style/style.css" rel="stylesheet" type="text/css" />
µ±a.actionͨ¹ýÖØ¶¨Ïòredirect µ½ÁíÒ»¸öb.actionºó£¬½øÈëÏÂÒ»¸öjspÒ³Ãæ£¬´ËʱcssºÍÒ³ÃæµÄͼƬ¶¼Ê§Ð§¡£
ºóÀ´°ÑjspÀïÃæµÄcss·¾¶¡¢Í¼Æ¬Â·¾¶¸ÄΪ¾ø¶Ô·¾¶£¬¾Í°ÑÎÊÌâ½á¾ÖÁË¡£
<link href="/BookShop/style/style.css" ......
¼ÙÈçÎÒÃÇÏëͨ¹ýǰ̨×ÔÖ÷Ñ¡ÔñCSSÑùʽÀ´´ïµ½¸Ä±äÑÕÉ«¡¢·ç¸ñµÈÄ¿µÄµÄ»°£¬ÓÃJSµ÷ÓÃCSSÎļþ¾ÍOK¡£
ÏÈ×öÁ½¸ö£¨»ò¶à¸ö£©CSSÎļþ¡£
style_1.css¡¡´úÂ룺
body{background-color: #ccff66;}
......
style_2.css¡¡´úÂ룺
body{background-color: #ff0000;}
......
JS´úÂëÈçÏ£º
<link rel="stylesheet" rev="stylesheet" ......
ÍøÒ³ÖÆ×÷ÖУ¬ÎªÁË·½±ãÈÕºóÐ޸ĻòÐ×÷¿ª·¢£¬³£³£Òª¶ÔÒ³Ãæ½øÐÐÏàÓ¦µÄ×¢ÊÍ£¬ÄãÍøÒ³½á¹¹ÇåÎú£¬¿É¶ÁÐÔÔöÇ¿¡£ÒÔϽéÉܼ¸ÖÖ³£ÓõÄ×¢ÊÍ·½·¨£º
Ò»¡¢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. ......