合并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>
分享到:
相关推荐
"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文件自动合并成为1个,减少网络请求次数,从而达到网站性能优化的目的
1.目录source:需要压缩的源文件 2.目录apache-ant-1.8.1:使用ant和yui需要处理的包 3.合并和压缩js.bat 根据source将js进行合并到in目录,并输出到out目录 ...6.合并js.bat 只将in下数据合压缩处理到out目录
演示asp.net mvc4下通过BundleConfig对js和css进行压缩和并,提高网页响应速度,优化网站
技术点:1、使用htmlparser解析html文件,得到html代码里的js、css、img链接 2、将相对路径的链接转变成绝对路径,并读取资源 3、将css和js合并到html 4、将图片转换成base64编码,写入标签的src
3.仿制js,css文件冲突和重复加载 如,zencart网站的下载安全的其他插件中,如果有两个都带有 同一个 javascript 文件(例如:jQuery),那么它将会被加载两次, 不过要使得这个功能生效的话,那么开发者必须都使用CJ Loader...
JS和CSS合并压缩工具 SpeedJSCSS ,在一个页面中,每一个外部JS及CSS文件都会导致一个额外的HTTP请求。所以,如何合理的合并JS文件...
js,css压缩文件实例,还可以合并js哦
用于CSS和JS的压缩,混淆,经测试可以减小Js或CSS文件一半的体积。经过淘宝封装,直接点击install.cmd安装,然后在JS或CSS上右键点击即可使用
此课程讲解grunt 实现对JS和CSS文件内容进行压缩处理。 Grunt 是一种自动化任务处理工具,它就是一个工具框架,有很多插件扩展它的功能。一般用于: ① 压缩文件 ② 合并文件 ③ 简单语法检查
现在大量网站为了追求用户体验,使用了大量使用CSS和JS文件。 而网页加载的时间大部分是消耗在资源请求部分。通过 Chrome自带调试工具,或者 Firebug 可观察到: 资源加载的等待时间经常占到总时间的 50%以上。 再...
相信你阅读过大量关于编写css时应该注意的一些细节来控制css文件的大小,比如:全局样式、继承样式、缩写...比如:你的网站引用了a.css和b.css两个css文件,php javascrip程序则将a.css和b.css自动合并、压缩成c.css文
在Web项目的开发中,js,css文件会随着项目的开发变得越来越多,越来越大,这就给给性能方面带来一些问题,如,页面引入的的js,css越多的话,那么对就增加了http请求数,解决该问题的一个好的方法就是合并js,css文件....
压缩 JavaScript 和 CSS,是为减少文件大小,节省流量开销;合并 JavaScript 和 CSS,是为了减少请求数量,减轻服务器压力。而这些枯燥又没有技术含量的工作,我们以前通常会手动处理,费时又费力。其实这些工作可以...
自己根据yui和ant写的一个bat工具,用来压缩和合并js文件或css文件。 目前只能在windows下使用
将多个 JS 或者 CSS 文件合并到单一文件并可进行压缩处理,同时确保其正确的顺序 监控目录的改动 使用方法: $ brewer watch Info Watching project /path/to/current/working/directory Compiled coffee/...
递归处理css文件中的@import,自动合并为一个css文件。 Features 支持 css样式文件 支持 @import 递归处理 支持线上的import url 自动下载再合并 Usage var gulp = require('gulp'); var coimport = require('./...
Bundle是ASP.NET 4.5中的一个新特性,可 用来将js和css进行压缩(多个文件可以打包成一个文件,也可以说是合并多个文件),并且可以区分调试和非调试,在调试时不进行压缩,以原始方式显示出来,以方便查找问题。...
任务1:将src目录下的所有zepto及插件合并,并压缩。 --src/ ajax.js assets.js callbacks.js data.js deferred.js detect.js event.js form.js fx.js fx_methods.js gesture.js ie.js ios3.js ...