js与css文件合并

Js和css文件混合方法

现在如果你是一名从事网页加载性能优化的人员，你应该知道每次下载都会浪费大量的资源，在页面中你引入了越多的外部文件你的页面加载速度就会越慢。

很典型的web页面都会引入很多的js和css文件，这些都会导致资源的浪费，现在最好的办法就是指引入一份的js文件和一份css文件。毫无疑问，这可以很好的帮助你启动PLT（页面加载时间）。

但是如果您认为，两份文件仍然不够理想，那么现在我们将看到一个技巧将js和css混合成一份文件。我是在搞ms的msn live 的页面优化时发现这个小技巧的。

这个技巧依赖于ie或是ff如何去解读css和js的行为。

当css解析器遇到一个html的注释标记<! - -在一个css文件里面，这个标记会被忽略掉。

当js的解析器遇到这个标记时，他会将它看成是//,因此后面的所有代码都会被当作注释。

好了，看看下面的代码：

<! --  /*

function show(){

       alert(‘hello’)

}

<! --      */

<! – body{ background-color:red}

这段代码我们看看，分别由css解析和js解析之后的结果。

Css:

/*

function show(){alert(‘hello’)}

*/

Body {…}

Js:

// /*

function show(){…}

// */

//body{…}

真是不错啊，在js和css 解析里面都能够得到他们自己想的内容，而不被其他内容所混淆，挺讨巧的一个方法。以后你就可以这样引用了：

<link type="text/css" rel="stylesheet" href="test.jscss" />
<script type="text/javascript" language="javascript" src="test.jscss"></script>

这个test.jscss文件就是你需要的。还有一点就是response的content type应该设置成 */*否则ff里面有可能把它当成其他任何东西。

注意：js代码中要取消掉多行注释。

以上为翻译内容，如果不当还请各位指点。

其实最有意思的是下面的老外们的回复，有的说，我可以直接的js文件中对对象的style属性(cssText)进行定义，也就不需要这种技巧了，还有地说，我直接把这些都写在html文件中不是更好，就只用请求这个页面，都不需要引入外部的什么jscss文件了。有的大批特批说这样会造成代码的混乱不堪，甚至是无法维护。作者也对此发表了自己的看法：keep the js, css files separate on disk and combine them at runtime。(运行时混合文件，平时分开保存)，还有什么这样写的标准问题，安全问题(xss attack)，通过缓存解决这类问题等等。不过好像看起来，更多感觉象是种奇技巧淫，没什么人说这个好。。。。。