首页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

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