posts - 36, comments - 419, trackbacks - 0, articles - 0
            BlogJava :: 首頁 :: 新隨筆 :: 聯系 :: 聚合  :: 管理

          把JS和CSS合并到1個文件

          Posted on 2010-04-18 18:56 BearRui(AK-47) 閱讀(10701) 評論(6)  編輯  收藏 所屬分類: WEB
          合并JS文件和CSS文件很多人都知道,也用過,目的是為了減少請求數。但有時候我們覺的把JS合并到1個文件,CSS又合并到另外1個文件也是浪費,我們如何能把CSS和JS一起合并進1個文件了?

          這里需要使用1個常見的注釋符<!-- 主要是利用css,js解析器對<!-- 進行不同的解析來實現JS和CSS合并的。

             1. CSS解析器 會忽略<!--符號,
             2. JS解析器會把<!--當作注釋符號,與// 注釋相同。

          看看下面的列子:   
           <HEAD>
            <TITLE>test</TITLE>
            <style type="text/css">
             <!--.d{color:red;}
            </style>
            <script>
              <!-- function showMsg(m){alert(m);}
            </script>
           </HEAD>
           <BODY>
             <div class='d'>顏色變成紅色</div>
             <input type="button" value="不會彈出" onclick="showMsg('js');" />
           </BODY>
            
          運行上面的代碼,會發現CSS是正常的,而JS確失效了,因為上面的代碼等價于: 
            <style type="text/css">
             .d{color:red;}
            </style>
            <script>
              // function showMsg(m){alert(m);}
            </script>

          利用這個特性,我們就可以實現把js和CSS合并到1個文件中:
            
            test.jscss 文件
            <!-- /* 
             function showMsg(m){
              alert(m);
            }
            <!-- */ 

            <!-- .d{color:red;} 

          index.html
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml">
             <head>
              <title>test</title> 
              <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
              <script type="text/javascript" language="javascript"  src="test.jscss"></script>
              <link rel="stylesheet" rev="stylesheet" type="text/css" href="test.jscss" />
            </head>
           <body>
             <div class='d'>顏色變成紅色</div>
             <input type="button" value="不會彈出" onclick="showMsg('js');" />
           </body>
          </html>

           上面代碼的JS和CSS都能正常運行,雖然test.jscss被鏈接了2次,但因為緩存的原因,其實只會下載一次。

              注:上面代碼中chrome中運行有問題,這是因為chrome中下載同1個文件之后只解析一次,比如你先用<script 加載了test.jscss,chrome就會使用js解析器來解析test.jscss,而當你再用link加載test.jscss文件的時候,chrome會直接把用js解析器解析后文件傳遞給link,而不會使用css解析器再解析一次,這就導致上面的代碼只有js生效,而css無效,如果把link標簽放在前面,則js會失效。目前還沒找到很好的解決版本,雖然可以在第二次加載的時候在url后帶1個參數解決,但這樣又變成2次請求了。希望有知道的朋友指點下。


          [作者]:BearRui(AK-47)
          [博客]: http://www.aygfsteel.com/bearrui/
          [聲明]:本博所有文章版權歸作者所有(除特殊說明以外),轉載請注明出處.
          英雄,別走啊,幫哥評論下:  

          精彩推薦 好文要頂 水平一般 看不懂 還需努力

          評論

          # re: 把JS和CSS合并到1個文件  回復  更多評論   

          2010-04-18 19:24 by FFF
          有點意思

          # re: 把JS和CSS合并到1個文件  回復  更多評論   

          2010-04-19 18:00 by HiMagic!
          挺有新意的用法,原創?

          # re: 把JS和CSS合并到1個文件  回復  更多評論   

          2010-04-19 20:57 by BearRui(AK-47)
          @HiMagic!
          呵呵,其實發現使用<!--來合并JS和CSS的并不是我,大概2,3年前就看到過文章使用這個來合并JS和CSS,不過一直沒去實踐過,最近實際使用了下,發現在chrome中有點問題,就順便寫出來。

          # re: 把JS和CSS合并到1個文件[未登錄]  回復  更多評論   

          2010-04-23 15:35 by john
          可以用來玩玩

          # re: 把JS和CSS合并到1個文件  回復  更多評論   

          2011-01-11 11:12 by tt
          不錯呀,但這個好像不能通用

          # re: 把JS和CSS合并到1個文件  回復  更多評論   

          2014-08-30 22:42 by 唐輝
          不建議優先利用bug做功能
          主站蜘蛛池模板: 称多县| 嵊泗县| 北安市| 四会市| 申扎县| 资中县| 阿勒泰市| 大荔县| 福海县| 镇原县| 沿河| 西安市| 沙河市| 岱山县| 临西县| 古交市| 静安区| 盘山县| 萝北县| 文水县| 镇沅| 万宁市| 神农架林区| 开鲁县| 汕头市| 滁州市| 万全县| 上犹县| 廉江市| 页游| 蕲春县| 文安县| 赤峰市| 海盐县| 瓮安县| 达尔| 南丰县| 连江县| 平顶山市| 四川省| 尼玛县|