合并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次请求了。
希望有知道的朋友指点下。
分享到:
相关推荐
技术点:1、使用htmlparser解析html文件,得到html代码里的js、css、img链接 2、将相对路径的链接转变成绝对路径,并读取资源 3、将css和js合并到html 4、将图片转换成base64编码,写入标签的src
用于将项目中的多个js或者多个css文件自动合并成为1个,减少网络请求次数,从而达到网站性能优化的目的
3.合并和压缩js.bat 根据source将js进行合并到in目录,并输出到out目录 4.合并压缩css.bat 根据source将css进行合并到in目录,并输出到out目录 5.合并js.bat 只将source下数据合并到in目录 6.合并js.bat 只将in下...
演示asp.net mvc4下通过BundleConfig对js和css进行压缩和并,提高网页响应速度,优化网站
"tmp_css_json_dir": "D:\\projects\\github_project\\merge_js_css\\examples\\json\\css", //css合并中间过程文件目录 "html_dir_path": "D:\\projects\\github_project\\merge_js_css\\examples\\html" \\待...
JS和CSS合并压缩工具 SpeedJSCSS ,在一个页面中,每一个外部JS及CSS文件都会导致一个额外的HTTP请求。所以,如何合理的合并JS文件...
CJ Loader插件包含了 PHP Minify(一个php开源项目,用于合并和压缩 CSS和JS文件),让zencart网站中的经过它优化压缩后的CSS和JS文件,缓存在浏览者的浏览器中一定时间(我看了默认配置是一年)。 2.提升开发速度 CJ ...
此课程讲解grunt 实现对JS和CSS文件内容进行压缩处理。 Grunt 是一种自动化任务处理工具,它就是一个工具框架,有很多插件扩展它的功能。一般用于: ① 压缩文件 ② 合并文件 ③ 简单语法检查
事实上,业界有很有名气的js,css合并压缩开源程序:minify。 但悲剧的 minify 在 php5.3 , php 5.4 环境下无法使用,于是逼的我只好自己丰衣足食。 minify 比较重量级,很臃肿。它采用了将合并文件写入硬盘的方式...
Brewer.js 是一个工具用于简化管理 CSS 和 JS 源文件,主要功能有: 编译 coffee-script (or iced) 源码到 javascript 编译 LESS 或 Stylus 文件到 CSS 将多个 JS 或者 CSS 文件合并到单一文件并可进行压缩...
以下这篇文章给我们介绍的通过php javascript程序实现了对多个css、多个js文件进行自动合并、压缩是最好的解决方案。比如:你的网站引用了a.css和b.css两个css文件,php javascrip程序则将a.css和b.css自动合并、...
Bundle是ASP.NET 4.5中的一个新特性,可 用来将js和css进行压缩(多个文件可以打包成一个文件,也可以说是合并多个文件),并且可以区分调试和非调试,在调试时不进行压缩,以原始方式显示出来,以方便查找问题。...
C#开发的JS、CSS压缩工具,项目中的引用全部依赖一个XML配置文件,也是根据这个区压缩。压缩、合并后,以md5命名,这样也改变了客户端缓存。未改变的同一个组文件,md5值不会改变,客户端也无需重新下载。我把这个做...
js,css压缩文件实例,还可以合并js哦
用于CSS和JS的压缩,混淆,经测试可以减小Js或CSS文件一半的体积。经过淘宝封装,直接点击install.cmd安装,然后在JS或CSS上右键点击即可使用
在Web项目的开发中,js,css文件会随着项目的开发变得越来越多,越来越大,这就给给性能方面带来一些问题,如,页面引入的的js,css越多的话,那么对就增加了http请求数,解决该问题的一个好的方法就是合并js,css文件....
Munee可以自动编译LESS、SCSS和CoffeeScript,并且可以把CSS JS文件合并成一个单一的请求,此外,还可以对这些CSS-JS文件进行精缩,让其拥有更好的性能表现。该库还可以轻易地与任何代码集成。
Munee是一个集图片尺寸...Munee可以自动编译LESS、SCSS和CoffeeScript,并且可以把CSS+JS文件合并成一个单一的请求,此外,还可以对这些CSS-JS文件进行精缩,让其拥有更好的性能表现。该库还可以轻易地与任何代码集成。
我们如何组合多个CSS文件,同时使用NAnt进行自动构建时,还可以最小化CSS和JavaScript