首頁CSS優化小結

 CSS優化目的:提取首頁index.html中使用的css元素，來對首頁的CSS進行優化，若是CSS文件有改動須要手動從新生成

 

1.         利用simplehtmldom工具從index.html裏抓取class元素的名稱

getclass.php

<?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

     根據原先p_w_picpaths上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="p_w_picpaths.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#p_w_picpaths1.laiyifen.com#" $cssfile elif [ "$A" -eq 1 ];then sed -i ""$row"s#$rephost#p_w_picpaths2.laiyifen.com#" $cssfile elif [ "$A" -eq 2 ];then sed -i ""$row"s#$rephost#p_w_picpaths3.laiyifen.com#" $cssfile elif [ "$A" -eq 3 ];then sed -i ""$row"s#$rephost#p_w_picpaths4.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順序進行調整，位置以下，頁面就能夠顯示正常