把JS和CSS合并到1个文件
合并JS文件和CSS文件很多人都知道,也用过,目的是为了减少请求数。但有时候我们觉的把JS合并到1个文件,CSS又合并到另外1个文件也是浪费,我们如何能把CSS和JS一起合并进1个文件了?
?
?? 1. CSS解析器 会忽略<!--符号,?? 2. JS解析器会把<!--当作注释符号,与// 注释相同。
看看下面的列子:???
?<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="不会弹出" onclick="showMsg('js');" />
?
??<!-- .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="不会弹出" onclick="showMsg('js');" />
?</body>
?
?上面代码的JS和CSS都能正常运行,虽然test.jscss被链接了2次,但因为缓存的原因,其实只会下载一次。?
????注:上面代码中chrome中运行有问题,这是因为chrome中下载同1个文件之后只解析一次,比如你先用<script 加载了test.jscss,chrome就会使用js解析器来解析test.jscss,而当你再用link加载test.jscss文件的时候,chrome会直接把用js解析器解析后文件传递给link,而不会使用css解析器再解析一次,这就导致上面的代码只有js生效,而css无效,如果把link标签放在前面,则js会失效。目前还没找到很好的解决版本,虽然可以在第二次加载的时候在url后带1个参数解决,但这样又变成2次请求了。希望有知道的朋友指点下。