其实我今天所要说的并不是这两者在技术上的结合、合作来达到某种功用，而是切切实实地把这两个文件结合到一个文件中去。一次我在MSDN的BLOG上闲逛，看到了一个为Microsoft Office Live做优化的程序员的解决思路。当时就觉得很不错，最近正好在深入学习网站制作相关技术，就写了点测试的代码。
那这样做的好处是什么呢？缩短页面加载时间（page load time，PLT）， 首先毫无疑问的，以前要向服务器发送两次请求，现在就只要一次，其次在运行时这两种文件会被放到html里，动态生成网页内容时不需要再次加载生成。综合下省下了请求次数，服务器负担，带宽，当然从用户的角度出发，PLT的缩短会使他们的浏览体验更愉悦。
我主要写了这样几段代码：
index.php中的主要代码
This is the first test. Check if css does work.
原测试: 看css是否正常工作
”css” will be red if css file was imported successfully
jscss.php中的代码
< ?header(’Content-type: */*’);?>
< !– /*
window.onload=function(){
document.getElementById(”test1″).innerHTML=”
This tis the second test. If you can see me, it is meaning that Javascript can run correctly.
如果可以看见我说明Javascript< /strong>也可以用。
”;
}
< !– */
这到底是怎么实现的，请允许我暂且叫他注释法。你会发现在jscss.php里夹杂了两种注释方法，一种是<!–，还有一种是/**/，这到底是干嘛用的？
给一点提示：
- 当CSS解释器在解释CSS文档时遇到<!–这样的html注释符时，解释器会直接跳过不予理会。
- 当JS解释器在解释JS文档时遇到<!–，就会像处理//注释符（即单行注释符）一样处理。
所以像这种代码
< !– /*
function t(){}
在CSS解释器看来就是：
/*
function t(){}
*/
body { background-color: Aqua; }
此时，JS就跑到了注释里，不会影响到CSS。
而在JS眼里，代码就成了：
// /*
function t(){}
// */
// body { background-color: Aqua; }
不相干人等一律被注了，不就正是咱要的效果么！
所以这样一来我们只要在import的时候将css和js指向同一文件即可
如：
%MINIFYHTMLc833728139310fbeb6a4f5654581033e22%我把演示帖出来：http://www.conanblog.me/test/jscss/
演示用的代码文件我也已打包，可以在这里下载：http://www.conanblog.me/test/code/jscss.zip 。你同样也可以在演示页面下载。
那在我的演示中，第一和第三个框是index.php里就有的，而第二个框是用JS对DOM操作得到的。而如果你能够看到框和红色的字就说明CSS也是加载成功的，因为这些信息都是写在jscss.php这个文档里的。
顺便提几个友情提醒：
- 合并后的文件可以为任意后缀，不一定要局限于.css/.js，别说.php可以，就是写.jscss都没关系，如果可以你想做防非法访问处理就可以在php里加相关代码。
- 为了让Firefox在处理响应内容种类时将合并文件的内容当作angthing，要把Content-type:设置成*/*。
- 在加入CSS代码时，通常都是把CSS文件里的代码拷贝过来，但是拷贝之后请不要忘记在每行前加<!–，或者将CSS代码并成一行，就像我的演示中一样。否则将会影响Javascript的正常使用。
享受技术！
