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

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM