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顺序进行调整，位置如下，页面就可以显示正常