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

 

 

posted on 2017-06-16 17:00  熊熊之火  阅读(1770)  评论(0编辑  收藏

导航