将Javascript 和 CSS 写进一个文件

原文：http://blog.istef.info/2007/05/05/combine-css-and-javascript-into-one-file/

我们在优化页面载入速度时，其中一个原则就是减少外部引用资源的数量。但是由于主流浏览器对于外部引用的 Javascript 和 CSS 都会有缓存，因此我们习惯于将他们分别存入单独的文件中。你有没有想过，这两种文件可以写进同一个文件中呢？让我们来看看具体的实现方法吧。via msdn blog

1. <!-- /*
2. function t(){} // 这里写入 Javascript
3. <!-- */
4. <!-- body { background-color: Aqua; }

上面这段代码即可实现这个神奇的效果。当它被当作 Javascript 载入时，它其中的 JS 代码就会被执行，CSS 代码都会被忽略；而当它被当作 CSS 载入时，结果恰好相反。

为什么会这样呢？其实原理很简单，这是由于当今主流浏览器（IE & Firefox）对于 JS 和 CSS 解释的方法。我们注意到，这段代码中多了很多不必要的 <!– 以及 /* */，其实这就是奥妙所在。当代码被当作 Javascript 载入时，所有的 <!– 都会被解释为 // 也就是 Javascript 的单行注释符号，所以，上面的代码变为：

1. // /*
2. function t(){} // 这里写入 Javascript
3. // */
4. // body { background-color: Aqua; }

CSS 被注释掉，而 Javascript 则被顺利的执行了。当代码被当作 CSS 载入时，所有的 <!– 都会被忽略，于是代码变为：

1. /*
2. function t(){} // 这里写入 Javascript
3.  */
4.  body { background-color: Aqua; }

/* */ 为 CSS 注释符，包含在之间的文字被认为是 CSS 注释。因此上面的代码中 Javascript 被注释掉了，只剩下正常的 CSS 可以被解释。

这段代码构思非常精巧，很好的利用了 Javascript 和 CSS 解释器的特性。但是我个人并不推荐将此方法推广，原因如下：1. 增加了代码的复杂度，阅读和修改都不是很方便；2. 多于的 <!– /* 会占用不少字节，实际上也是在浪费宝贵的带宽，延长载入时间。我个人还是推荐使用 Javascript 或 CSS 压缩的办法来提高效率。当然，如果您的应用确实需要尽可能少的载入文件的话，这倒不失为一个解决问题的好办法。