把CSS和JS写在同一个文件里

为了减少 服务器连接数。
或者是为了确保JS执行时，所依赖 CSS 文件已经下载完成。
你是否想过要把CSS和JS写到一个文件里呢？


今天学了一招，正好 解决这个 问题！
[原作者的BLOG： http://blogs.msdn.com/shivap/archive/2007/05/01/combine-css-with-js-and-make-it-into-a-single-download.aspx]
这其实是利用了浏览器特性的一种HACK手法！
作者说在IE和FF下能正常使用。我用opera9.02测试过了，可以正常运行。

关键点：CSS和JS解析器在处理注释的区别
1.CSS解析器在碰到“<!--”的时候会直接抛弃
2.JS解析器在碰到“<!--”的时候，会把他当作"//"处理。也就是说把他当做行注释处理！

看看下面这个 代码片段：

1  <!--  /*
2  function test(){alert("虽然使用性有待商榷。\n但想法值得称赞！");}
3  <!--  */
4  <!-- body  {  background-color :  #f00 ;   }

CSS解析时，它等价于下面这段代码

1  /*
2  function test(){alert("虽然使用性有待商榷。\n但想法值得称赞！");}
3  */
4  body  {  background-color :  #f00 ;   }

而JS解析时，他却等价于如下代码

1  // /*                                              ----行注释
2  function  test(){alert( " 虽然使用性有待商榷。\n但想法值得称赞！ " );}
3  // */                                              ----行注释
4  // body { background-color: #f00; }                ----行注释

问题是不是解决了呢？
将这段代码，保存成1.jcs。[或其他任意文件名，引用的时候做对应修改就行了]
然后，将下面代码保存成任意文件。和他放在同一目录下即可！

1  < link  type ="text/css"  rel ="stylesheet"  href ="1.jcs"   />
2  < script  type ="text/javascript"  language ="javascript"  src ="1.jcs" ></ script >
3  < input  type ="button"  value ="点我一下，看包含的函数是否可以执行"   onclick ="test()"   />

link 和 script标签虽然两次 链接该文件。但是由于缓存的缘故，只会发一次请求！
当然，代价是增加了约等于“4*css行数”的冗于代码。正常情况下，这个冗于在1K以内！

转载于:https://www.cnblogs.com/devweb/archive/2009/10/09/1579535.html