合并JS文件和CSS文件很多人都知道，也用過(guò)，目的是為了減少請(qǐng)求數(shù)。但有時(shí)候我們覺(jué)的把JS合并到1個(gè)文件，CSS又合并到另外1個(gè)文件也是浪費(fèi)，我們?nèi)绾文馨袰SS和JS一起合并進(jìn)1個(gè)文件了？
這里需要使用1個(gè)常見(jiàn)的注釋符<!-- 主要是利用css，js解析器對(duì)<!-- 進(jìn)行不同的解析來(lái)實(shí)現(xiàn)JS和CSS合并的。
1. CSS解析器 會(huì)忽略<!--符號(hào)，
2. JS解析器會(huì)把<!--當(dāng)作注釋符號(hào)，與// 注釋相同。
看看下面的列子：
<HEAD>
<TITLE>test</TITLE>
<style type="text/css">
<!--.d{color:red;}
</style>
<script>
<!-- function showMsg(m){alert(m);}
</script>
</HEAD>
<BODY>
<div class='d'>顏色變成紅色</div>
<input type="button" value="不會(huì)彈出" onclick="showMsg('js');" />
</BODY>
運(yùn)行上面的代碼，會(huì)發(fā)現(xiàn)CSS是正常的，而JS確失效了，因?yàn)樯厦娴拇a等價(jià)于：
<style type="text/css">
.d{color:red;}
</style>
<script>
// function showMsg(m){alert(m);}
</script>
利用這個(gè)特性，我們就可以實(shí)現(xiàn)把js和CSS合并到1個(gè)文件中：
test.jscss 文件
<!-- /*
function showMsg(m){
alert(m);
}
<!-- */
<!-- .d{color:red;}
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" language="javascript" src="test.jscss"></script>
<link rel="stylesheet" rev="stylesheet" type="text/css" href="test.jscss" />
</head>
<body>
<div class='d'>顏色變成紅色</div>
<input type="button" value="不會(huì)彈出" onclick="showMsg('js');" />
</body>
</html>
上面代碼的JS和CSS都能正常運(yùn)行，雖然test.jscss被鏈接了2次，但因?yàn)榫彺娴脑颍鋵?shí)只會(huì)下載一次。
注：上面代碼中chrome中運(yùn)行有問(wèn)題，這是因?yàn)閏hrome中下載同1個(gè)文件之后只解析一次，比如你先用<script 加載了test.jscss，chrome就會(huì)使用js解析器來(lái)解析test.jscss，而當(dāng)你再用link加載test.jscss文件的時(shí)候，chrome會(huì)直接把用js解析器解析后文件傳遞給link，而不會(huì)使用css解析器再解析一次，這就導(dǎo)致上面的代碼只有js生效，而css無(wú)效，如果把link標(biāo)簽放在前面，則js會(huì)失效。目前還沒(méi)找到很好的解決版本，雖然可以在第二次加載的時(shí)候在url后帶1個(gè)參數(shù)解決，但這樣又變成2次請(qǐng)求了。希望有知道的朋友指點(diǎn)下。