JS与CSS合并书写技巧：利用注释兼容性与MIME类型

JS与CSS合并书写的核心原理

通常为了减少HTTP请求，我们会将多个CSS文件或多个JS文件分别合并，但这至少需要两个文件。在MSDN博客中曾提到，实际上可以将JS和CSS合并到同一个文件中。具体实现方法如下所示。

window.onload=function(){

document.getElementById("test2").innerHTML="传说中滴JS测试者。如果你看到我，那<strong>JS</strong>也生效了";

<!-- #test1,#test2{border:3px #000 solid;padding:5px;color:#123456;background-color:#ccc;} strong{color:red;}

当CSS解析器遇到<!--时，会将其忽略；此时JS部分被视为CSS的注释/* js */。而当JS解析器处理时，会将<!--转换为//，即JS的单行注释。单行注释会屏蔽后续的/*和*/，同时也屏蔽了CSS代码。具体效果见演示示例。

服务端MIME类型配置要求

在Web环境中运行时，需要通过程序输出“*/*”作为MIME类型，否则部分浏览器可能无法正确执行。PHP实现方式如下：

<?header('Content-type: */*');?>

理论上，如果在服务器上指定某种后缀的MIME类型为“*/*”也能生效，但未经验证。这种将JS与CSS写入同一文件的方式特别适合第三方调用场景。虽然文件体积稍大，但请求数量减少了一半，效果显著。

自动化处理与缓存机制建议

当然，这种书写格式手动编写较为繁琐，但可以通过程序读取原有文件并进行处理后输出，从而既保持源文件便于维护，又通过合并输出节省请求。若进一步处理缓存机制，效果接近静态文件。此处提供一份C#版本的实现，据称是官方示例；我使用的是PHP版本，由于尚未加入缓存机制，暂不展示。其原理简单，具备编程能力者可快速实现。

实际上，我的初衷是寻找合并多份CSS文件的方法。合成单个文件并不困难，难点在于处理好各模块化的分离，同时确保客户端缓存及程序调用的便利性。由于CSS无法像JS那样在客户端异步调用，若有更好的方式，欢迎推荐。

传说中的测试

传说中的测试者一号。如果你看到我有边框跟颜色，那就是说CSS生效了。

传说中滴JS测试者。如果你看到我，那JS也生效了

使用同一份文件：jscss.php
<link type="text/css" rel="stylesheet" href="jscss.php" /><script type="text/javascript" src="jscss.php"></script>jscss.php的内容
<?header('Content-type: */*');?>
<!-- /*  
window.onload=function(){
document.getElementById("test2").innerHTML="传说中滴JS测试者。如果你看到我，那<strong>JS</strong>也生效了";
}  
<!-- */   
<!-- #test1,#test2{border:3px #000 solid;padding:5px;color:#123456;background-color:#ccc;} strong{color:red;}
Copyright © 2006-2007 aoao , Some Rights Reserved .