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