Ò׽ؽØÍ¼Èí¼þ¡¢µ¥Îļþ¡¢Ãâ°²×°¡¢´¿ÂÌÉ«¡¢½ö160KB

Ìá¸ßÒ³ÃæÏàÓ¦ËÙ¶È֮ѹËõÓÅ»¯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"/>
    <!-- Ö¸¶¨ÎļþÃüÃ


Ïà¹ØÎĵµ£º

zend framework ͼƬÒÔ¼°css·¾¶ÎÊÌâ

¸Õ¿ªÊ¼Ñ§Ï°zend framework £¬¶ÔÓÚ·¾¶ÎÊÌ⻹ÊÇûŪÃ÷°×£¬ÒÔÖÁÓÚͼƬ²»ÄÜÕý³£ÏÔʾ£¬ËѱéÁËGoogleÖÕÓÚÕÒµ½Ò»¸ö½â¾ö°ì·¨¡£¾ßÌå½â¾ö°ì·¨ÈçÏ£º
ÔÚ.htaccessÖÐÓÃÏÂÃæÕâ¶Î´úÂë´úÌæÔ­ÓдúÂë
# Zend Framework rewrite¹æÔò
RewriteEngine on
RewriteCond
%{REQUEST_FILENAME} !-f
RewriteRule .* index.php
#
°²È«ÐÔ¿¼ÂÇ£ ......

DIV CSSÍøÒ³²¼¾Ö¼æÈÝÐÔµÄÒªµãÓë¾÷ÇÏ×Ü

IE vs FF
CSS ¼æÈÝÒªµã£ºDOCTYPE Ó°Ïì CSS ´¦Àí
FF: div ÉèÖà margin-left, margin-right Ϊ auto ʱÒѾ­¾ÓÖÐ, IE ²»ÐÐ
FF: body ÉèÖà text-align ʱ, div ÐèÒªÉèÖà margin: auto(Ö÷ÒªÊÇ margin-left,margin-right) ·½¿É¾ÓÖÐ
FF: ÉèÖà padding ºó, div »áÔö¼Ó height ºÍ width, µ« IE ²»»á, ¹ÊÐèÒªÓà !important ¶àÉèÒ» ......

×îºÃµÄcssÖØÐ´´úÂë

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 ......

¡¾DIV+CSSÈëÃŽ̡̳¿Îå¡¢CSSÑ¡ÔñÆ÷

ÉϽڿÎÎÒÃǽ²ÁËÒ»ÏÂCssͨ¹ýʲô·½Ê½È¥¿ØÖÆÒ³Ãæ
£¬Èç¹û²»¼ÇµÃ£¬ÎÒÀ´°ï´ó¼Ò»ØÒäһϣ¬×ܹ²ÓÐËÄÖÖ·½Ê½ÐÐÄÚ·½Ê½¡¢ÄÚ
Ƕ·½Ê½¡¢Á´½Ó·½Ê½¡¢µ¼È뷽ʽ£¬´ó¼Òͨ¹ýÕâËÄÖÖ·½Ê½¾Í¿ÉÒÔʵÏÖCSS
¶ÔHTML
Ò³ÃæÑùʽµÄ¿ØÖÆ£¬Èç¹ûÒªÈÃÕâЩÑùʽ¶ÔHTMLÒ³ÃæÖеÄÔªËØÊµÏÖÒ»¶ÔÒ»£¬Ò»¶Ô¶à»òÕß¶à¶ÔÒ»µÄ¿ØÖÆ£¬Õâ¾ÍÐè
ÒªÓõ½CSSÑ¡ÔñÆ÷£¬HTMLÒ³ÃæÖеÄÔ ......

JS/CSSѹËõ¹¤¾ß YUI Compressor

YUI Compressor ÊÇÒ»¸öÓÃÀ´Ñ¹Ëõ JS ºÍ CSS ÎļþµÄ¹¤¾ß£¬²ÉÓÃJava¿ª·¢¡£
ʹÓ÷½·¨£º
//ѹËõJS
java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -v src.js > packed.js
//ѹËõCSS
java -jar yuicompressor-2.4.2.jar --type css --charset utf-8 -v src.css > packed.css ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ