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

 </BODY>
  
运行上面的代码，会发现CSS是正常的，而JS确失效了，因为上面的代码等价于： 
  <style type="text/css">
   .d{color:red;}
  </style>
  <script>
    // 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">
  <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>

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

把JS和CSS合并到1个文件的更多相关文章

  1. Django加入JS，CSS，图片等外部文件的方法

    Django加入JS,CSS.图片等外部文件的方法 By 白熊花田(http://blog.csdn.net/whiterbear) 转载需注明出处,谢谢. 在使用Django搭建站点时,往往须要使用 ...

  2. ASP.NET下使用Combres对JS、CSS合并和压缩

    记录一下,如何简单快捷压缩js和css,通过合并来减少请求次数. 用到的网址: http://www.nuget.org/packages/combres/ https://github.com/bu ...

  3. Tengine的concat模块与js、css合并

    首先,先走出一个误区 ,下面是tengine-cn邮件列表里的一篇邮件原文:“看了这个例子就了解了,这个所谓的合并请求只是把所有的CSS或JAVASCRIPT请求合并,必须是同一个文件类型的.我开始想 ...

  4. Asp.net 程序优化js，css合并与压缩

    访问时将js和css压缩并且缓存在客户端,采用的是Yahoo.Yui.Compressor组件还完成的,从这里可下载 创建一个IHttpHandler来处理文件 ) }; )              ...

  5. PHP：如果正确加载js、css、images等静态文件

    日常中,我们想要把一些静态页面放在框架上或者是进行转移时,那么静态页面上的原url加载js.css.images都会失效,那么我们应该怎么进行修改捏? 现在仓鼠做个笔记哈 这里有几个注意项: 1.路径 ...

  6. Django调用JS、CSS、图片等静态文件

    zz 在下面的例子中,我们将media作为静态(CSS\JS\图片文件)文件的目录 方法一. 1.首先在settings.py文件中自定义参数 STATIC_PATH=’./media’ .(意为当前 ...

  7. Django配置静态文件（CSS\js)及Django调用JS、CSS、图片等静态文件

    1 新建一项目: root@python:django-admin.py startproject csstest root@python:cd csstest root@python:ls csst ...

  8. nginx js、css多个请求合并为一个请求(concat模块)

    模块介绍 mod_concat模块由淘宝开发,目前已经包含在tengine中,并且淘宝已经在使用这个nginx模块.不过塔暂时没有包含在nginx中.这个模块类似于apache中的modconcat. ...

  9. java Web程序使用wro4j合并、压缩js、css等静态资源

    在Web项目中,js.css合并压缩,不仅有利于减少Http请求数量.减少宽带资源占用,还能有效的管理各种js.css的引入,使整个项目更加有序.而对于访问用户来说,其更大的好处是增加了页面的打开速度 ...

随机推荐

  1. linu中解压不同后缀的文件

    1.*.tar 用 tar –xvf 解压 2.*.gz 用 gzip -d或者gunzip 解压 3.*.tar.gz和*.tgz 用 tar –xzf 解压 4.*.bz2 用 bzip2 -d或 ...

  2. 『编程题全队』Alpha 阶段冲刺博客Day1

    『编程题全队』Alpha 阶段冲刺博客Day1 一.Alpha 阶段全组总任务 二.各个成员在 Alpha 阶段认领的任务 三.明日各个成员的任务安排 孙志威:实现基本的网络连接, 完成燃尽图模块 孙 ...

  3. PHP中define和defined的区别

    PHP中define和defined的区别 对于初学者会混淆这两个函数 1.define用来定义一个常量,常量也是全局范围的.不用管作用域就可以在脚本的任何地方访问 常量.一个常量一旦被定义,就不能再 ...

  4. [转帖] CentOS7 与 CentOS6的对比

    来源网站: http://blog.51cto.com/fengery/1901349 centos6.x_centos7.x差异改进明细 感谢原作者 centos官方帮助文档:https://wik ...

  5. delphi手动创建dataset并插入值

    unit Unit1; interface uses  Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, Syste ...

  6. BZOJ5286 HNOI/AHOI2018转盘（分块/线段树）

    显然最优走法是先一直停在初始位置然后一次性走完一圈.将序列倍长后,相当于找一个长度为n的区间[l,l+n),使其中ti+l+n-1-i的最大值最小.容易发现ti-i>ti+n-(i+n),所以也 ...

  7. Joseph's Problem UVALive - 3521（等差数列的应用）

    题意:给定n, k,求出∑ni=1(k mod i) 思路:由于n和k都很大,直接暴力是行不通的,然后在纸上画了一些情况,就发现其实对于k/i相同的那些项是形成等差数列的,于是就可以把整个序列进行拆分 ...

  8. BZOJ 1007 水平可见直线 | 计算几何

    BZOJ 1007 水平可见直线 题面 平面直角坐标系上有一些直线,请求出在纵坐标无限大处能看到哪些直线. 题解 将所有直线按照斜率排序(平行的直线只保留最高的直线),维护一个栈,当当前直线与栈顶直线 ...

  9. 【poj3420】 Quad Tiling

    http://poj.org/problem?id=3420 (题目链接) 题意 给出$n*m$的网格,用$1*2$的方块覆盖有多少种方案. Solution 数据很大,不能直接搞了,我们矩乘一下.0 ...

  10. 《Linux内核设计与实现》第17章读书笔记

    第十七章  设备与模块 一.四种内核成分 设备类型:在所有 Unix 系统中为了统一普通设备的操作所采用的分类． 模块: Linux 内核中用于按需加载和卸载目标码的机制． 内核对象:内核数据结构中支 ...