为了减少服务器连接数。
或者是为了确保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.jcs。[或其他任意文件名，引用的时候做对应修改就行了]
然后，将下面代码保存成任意文件。和他放在同一目录下即可！
或者是为了确保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解析时，它等价于下面这段代码2 function test(){alert("虽然使用性有待商榷。\n但想法值得称赞！");}
3 <!-- */
4 <!-- body { background-color: #f00; }
1 /*
2 function test(){alert("虽然使用性有待商榷。\n但想法值得称赞！");}
3 */
4 body { background-color: #f00; }
而JS解析时，他却等价于如下代码2 function test(){alert("虽然使用性有待商榷。\n但想法值得称赞！");}
3 */
4 body { background-color: #f00; }
1 ///* ----行注释
2 function test(){alert("虽然使用性有待商榷。\n但想法值得称赞！");}
3 //*/ ----行注释
4 //body { background-color: #f00; } ----行注释
问题是不是解决了呢？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标签虽然两次链接该文件。但是由于缓存的缘故，只会发一次请求！2 <script type="text/javascript" language="javascript" src="1.jcs"></script>
3 <input type="button" value="点我一下，看包含的函数是否可以执行" onclick="test()" />
当然，代价是增加了约等于“4*css行数”的冗于代码。正常情况下，这个冗于在1K以内！
来源：http://www.cnblogs.com/devweb/archive/2009/10/09/1579535.html
版权声明：《 把CSS和JS写在同一个文件里 》为王健原创文章，转载请注明出处！
最后编辑:2017-6-12 13:06:34