CSS優化目的:提取首頁index.html中使用的css元素，來對首頁的CSS進行優化，如果CSS文件有改動需要手動重新生成
1. 利用simplehtmldom工具從index.html裏抓取class元素的名稱
|
<?php include('simple_html_dom.php'); $html = file_get_html('index.html'); foreach($html->find('[class]') as $element) { echo $element->class; echo "\n"; } ?> |
2. 執行get_classname.sh，對抓取的class name 進行格式處理和去重複,生成uniq_classname
get_classname.sh
|
#!/bin/bash php getclass.php > class.html cat class.html|sort|uniq |sort -n|awk '{print $1}' > classname cat class.html|sort|uniq |sort -n|awk '{print $2}' >> classname cat class.html|sort|uniq |sort -n|awk '{print $3}' >> classname cat classname|sort|uniq |sort -n > uniq_classname |
3. 利用firebug,取出index.html中的沒有壓縮的CSS內容，分別另存爲border.css cxhd.css
Index.css inline.css lang.css shop.css framework.css
4. 用以下在線壓縮CSS的網站對以上CSS文件進行格式化處理，參數如截圖所示，最後生成壓縮好的各個文件border_cmp.css cxhd_cmp.css Index_cmp.css inline_cmp.css lang_cmp.css shop_cmp.css framework_cmp.css, 然後和之前生成的uniq_classname放到同一個目錄裏
http://www.lonniebest.com/FormatCSS/
5. 先把uniq_classname按照以下格式放到classname文件中
|
awk 'BEGIN{FS="\n";ORS=" "} {print $1}' uniq_classname > classname |
6. 利用filtercss.sh來過濾掉首頁不需要使用的css內容，對7個css文件分別處理，生成格式爲homepage_***_cmp.css的新文件，
./filtercss.sh {shop|index|framework|border|cxhd|inline|lang}
不一定7個全部生成當前版本生成5個文件homepage_border_cmp.css homepage_border_cmp.css homepage_border_cmp.css homepage_inline_cmp.css homepage_inline_cmp.css
filtercss.sh
|
#!/bin/bash if [ "$1" == "shop" -o "$1" == "index" -o "$1" == "framework" -o "$1" == "border" -o "$1" == "cxhd" -o "$1" == "inline" -o "$1" == "lang" ];then css=$1_cmp.css selector=$1_selector #create selector cat $css |awk '{print $1}'|awk -F"{" '{print $1}'|sort |uniq > $selector rm -f new_$css classname=`cat classname` for i in $classname do A=`sed -n "/^.$i,*$/p" $selector|grep $i >/dev/null 2>&1;echo $?` if [ "$A" -eq 0 ];then echo $i sed -n "/.$i.*{/p" $css >> new_$css fi done if [ -e new_$css ];then cat new_$css |sort|uniq > homepage_$css sed -n '/^\./!p' $css >> homepage_$css else echo "No Selector Found!!" fi else echo "Wrong Parameter!! {shop|index|framework|border|cxhd|inline|lang}" fi |
7. 分二步進行CSS合併，根據原先www上CSS的加載順序先生成homepage_set.css
|
cat homepage_framework_cmp.css > homepage_set.css cat homepage_shop_cmp.css >> homepage_set.css cat homepage_inline_cmp.css >> homepage_set.css |
根據原先images上CSS的加載順序先生成homepage_all.css
|
cat homepage_border_cmp.css > homepage_all.css cat homepage_index_cmp.css >> homepage_all.css |
對homepage_all.css中帶圖片的url進行多主機名處理，保證主機名均勻分佈
multihosts.sh
|
#!/bin/bash cssfile="homepage_all.css" rephost="images.laiyifen.com" num=`cat -n $cssfile |grep "$rephost"|wc -l` for ((i=1;i<=$num;i++)) do A=$[$RANDOM%4] row=`cat -n $cssfile |grep "$rephost"|head -$i|tail -1|awk '{print $1}'|bc` if [ "$A" -eq 0 ];then sed -i ""$row"s#$rephost#images1.laiyifen.com#" $cssfile elif [ "$A" -eq 1 ];then sed -i ""$row"s#$rephost#images2.laiyifen.com#" $cssfile elif [ "$A" -eq 2 ];then sed -i ""$row"s#$rephost#images3.laiyifen.com#" $cssfile elif [ "$A" -eq 3 ];then sed -i ""$row"s#$rephost#images4.laiyifen.com#" $cssfile else echo error!! fi done |
最好合併成一個all_in_one.css
|
cat homepage_set.css > all_in_one.css cat homepage_all.css >> all_in_one.css |
8. 打開測試頁面和正式頁面進行CSS元素對比，對於有差別的地方，可能需要對CSS元素的加載順序進行調整，來滿足首頁樣式的需求，可以用chrome的頁面分析
比如在測試頁面 有問題的地方，點擊審查元素，查看有問題的class名稱
由於做過重新排列組合，實際提取順序會有變化如下，造成測試頁面顯示異常
對比之前從正式頁面抓取的CSS順序進行調整，位置如下，頁面就可以顯示正常
