把JS和CSS合并到1个文件

最新推荐文章于 2024-04-02 21:16:13 发布

codeingant

最新推荐文章于 2024-04-02 21:16:13 发布

阅读量2.3k

点赞数

分类专栏：前端性能优化

前端性能优化专栏收录该内容

3 篇文章 0 订阅

订阅专栏

合并JS文件和CSS文件很多人都知道，也用过，目的是为了减少请求数。但有时候我们觉的把JS合并到1个文件，CSS又合并到另外1个文件也是浪费，我们如何能把CSS和JS一起合并进1个文件了？

这里需要使用1个常见的注释符<!-- 主要是利用css，js解析器对<!-- 进行不同的解析来实现JS和CSS合并的。

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="不会弹出" οnclick="showMsg('js');" />

</BODY>

运行上面的代码，会发现CSS是正常的，而JS确失效了，因为上面的代码等价于：

.d{color:red;}

</style>

// function showMsg(m){alert(m);}

</script>

利用这个特性，我们就可以实现把js和CSS合并到1个文件中：

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">

<head>

</head>

<body>

<div class='d'>颜色变成红色</div>

</body>

</html>

上面代码的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次请求了。希望有知道的朋友指点下。

转自：http://www.blogjava.net/BearRui/archive/2010/04/18/combin_css_js.html