为了减少服务器连接数。
或者是为了确保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。[或其他任意文件名,引用的时候做对应修改就行了]
然后,将下面代码保存成任意文件。和他放在同一目录下即可!
当然,代价是增加了约等于“4*css行数”的冗于代码。正常情况下,这个冗于在1K以内!
或者是为了确保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以内!