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. 执行，对抓取的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内容，分别另存为
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放到同一个目录里
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_shop_cmp.css >> homepage_set.css cat homepage_inline_cmp.css >> homepage_set.css |
根据原先p_w_picpaths上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 >> |
8. 打开测试页面和正式页面进行CSS元素对比，对于有差别的地方，可能需要对CSS元素的加载顺序进行调整，来满足首页样式的需求，可以用chrome的页面分析
比如在测试页面 有问题的地方，点击审查元素，查看有问题的class名称
由于做过重新排列组合，实际提取顺序会有变化如下，造成测试页面显示异常
对比之前从正式页面抓取的CSS顺序进行调整，位置如下，页面就可以显示正常