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 介绍