合并css 合并图片 合并js
1:合并css
如:index.html 中的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/main.css">
//在index.html中只引入一个main.css文件,其他的css文件使用@import url('样式文件路径');引入到main.css文件头部
如:main.css文件中的代码
@import url(one.css);
@import url(tow.css);
</head>
<body>
<div id="box">hello</div>
合并css的优缺点:
1:
好处是，把多个样式表导入到一个样式表中，在页面里面只需要导入一个样式表即可,可以减少在页面中引入的外部css文件,减少http请求
缺点:
1 兼容性的差异。由于@import是CSS2.1提议的因而老的阅读器(ie5以下)不支持，@import只有在IE5以上的才力辨认。
2 应用dom控制样式时的差异。当应用javascript控制dom去转变样式的时间，只能应用link标签，由于@import不是dom可以控制的(经测试没发现问题)
<script src="js/1.js"></script>
</body>
</html>
--------------------------------------------------------------------合并js文件--------------------------------------------------
合并成一个文件下载，就不能充分利用浏览器多线程并行下载的好处了。
假设有100个JS文件，每个1M，如何下载更快？
1）合并成一个100M的文件让浏览器下载难道不会阻塞吗？
2）生成100个虚拟域名：static0.your.com~static99.your.com
浏览器会开大量线程同时下载，100个文件就能成功下载完成
可见，多域名下载的性能提升是远远高于减少请求的。性能优化时，应关注高优先级的优化项；低优先的优化手段需要配合高优先的。不是简单的说，压成一个文件就一定会快的——与其这样，还不如将所有（CSS+JS+Img）流直接写
到HTML，更快呢（但也完全放弃多线程下载）。
合并js文件的常用方法:
1; 使用require.js 模块化按需加载js文件;
2:使用js项目构建工具Grunt ||YCombo 介绍
