合并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确失效了，因为上面的代码等价于： 
<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="不会弹出" οnclick="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. JS、CSS合并带来的效率提升

    2019独角兽企业重金招聘Python工程师标准>>> JS合并的必要性分析 一.效率因素 一般来说,在一个WEB工程中,需要使用大量的JS,这些JS可能来自许多提供者. 而在页面访 ...

  2. vue-cli生成的spa项目js、css、fonts、images文件路径找不到

    js.css文件找不到 问题分析 run build 命令进行文件编译打包的时候,会将publicPath 加入文件引入路径中,vue-vli默认配置的publicPath='/',路径替换时生成的j ...

  3. html如何清理缓存图片,H5案例分享：js、css和图片等静态文件更新时如何避免浏览器缓存...

    在做web项目的中,我们不可避免的会引入一些css.js和图片等文件,但是更新文件后,却经常出现因浏览器缓存问题,导致即使更改了代码或者图片,但是在浏览器上访问的时候却没有发生变化,这是因为现在大多数 ...

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

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

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

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

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

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

  7. php 压缩js css文件,PHP实现动态压缩js与css文件的方法

    本文实例讲述了PHP实现动态压缩js与css文件的方法.分享给大家供大家参考,具体如下: 正式发布产品时,我们希望将项目里的js,css合并压缩,以减少http请求.防止轻易查看源代码. 使用 只需要 ...

  8. php 压缩html css,PHP实现动态压缩js与css文件的方法

    这篇文章主要介绍了关于PHP实现动态压缩js与css文件的方法,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 本文实例讲述了PHP实现动态压缩js与css文件的方法.分享给大家供大家参 ...

  9. js和css压缩工具

    封装的.net命令行的js,css含有自动修复功能的工具: js或css压缩,如果原文件是当前路径把home.exe.xml配置改成:<basePath>./</basePath&g ...

最新文章

  1. ie6下常见的bug 调整页面兼容性
  2. UA MATH564 概率论 样本均值的偏度与峰度
  3. 改变照片分辨率的软件_AI黑科技竟如此强大，模糊照片无损放大600%变得更清晰！...
  4. vue-cli3 环境设置
  5. 仿Gin搭建自己的web框架(七)
  6. java跨函数跳转_VS code 函数无法跨文件跳转到定义
  7. 解读SSL ***技术(二)
  8. Gnome即将满18岁，适用于Docker，Kali Linux 2.0的新工具以及更多新闻
  9. 从memcpy到memmove,内存函数拷贝与内存重叠问题（重点内容）
  10. powershell自动化操作AD域、Exchange邮箱系列（10）—获取Exchange邮箱用户配额并导出excel
  11. AcWing 885. 求组合数 I（递推式预处理）
  12. 【FIRST USE】第一次用git把代码上传到github
  13. 002.FTP配置项详解
  14. VM14 启动Ubutun16.04 黑屏，实用解决办法
  15. 74hc138译码器制作火灾报警器
  16. selenium反爬
  17. python上传数据到坚果云_坚果云功能
  18. swoole 点对点发送消息推送
  19. python牛顿迭代法求平方根_Newton迭代法求平方根
  20. MikTex中如何使用BibTeX添加参考文献

热门文章

  1. 为什么从事软件开发测试？
  2. 测试上路2年，你处于什么阶段了？不醒着拼，你连应届生都比不过...
  3. Android跟踪进度条,android快递跟踪进度条
  4. 用指针交换两个数_C语言100题集合026-使用指针交换两个数组中的最大值
  5. quicksearch连接oracle,dos命令下连接oracle数据库表
  6. Scale-Adaptive Neural Dense Features: Learning via Hierarchical Context Aggregation
  7. make though multi core
  8. 如何设置ubuntu的PATH环境变量
  9. 牛顿（Newton)插值及其MATLAB程序
  10. 编写一个Applet，画出20条水平的、随机颜色的平行线。要求线的长度相同，整条线段都要在可视区域内