IT技术博客大学习 共学习 共进步

网站优化 更小的静态资源

performance geeks 2013-06-02 20:22:17 浏览 2,983 次

网站优化 更小的静态资源

更小的静态资源(js、css、png、gif),意味着更少的网络传送时间。构建的时候,可以把这些静态资源进行压缩优化(不像gzip/deflate压缩),使之更小化。有很多相应的开源工具帮助你完成这项工作。

javascript

  • Google Closure Compiler

  • UglifyJS

  • YUI Compressor

  • ShrinkSafe

  • 其它,比如JSMIN

Node.js、jQuery1.5开始使用UglifyJS,UglifyJS压缩比YUI Compressor更小、比Google Closure Compiler更安全。尽管如此,但UglifyJS需要部署NodeJS环境,所以我们还是选择使用Google Closure Compiler

style(css)

  • CSSTidy

  • YUI Compressor

  • Yslow/Google Page Speed

CSSTidy和YUI Compressor都很棒,我们还是选择老牌的YUI Compressor,因为我们更熟悉它,它也能够满足我们的需求。

png8/gif图片

  • Optipng

  • AdvanceCOMP(advpng、advdef)

  • ImageMagic(mogrify、identify、convert)

  • Pngcrush

  • Pngout

  • gifsicle

  • jpegtran

任何大一点的网站页面都会使用到不少图片,压缩优化图片很有必要。选择什么样的图片格式,决定了怎么去压缩图片。一般而言,只要是非动画图片,我们推荐png8,即便是颜色很少的小图片(尽管这样的图片gif有更高压缩性,但应该使用css sprites)。Pngout没有开放源码,仅能在Window NT平台使用,所以我们并不考滤使它。Pngcrush虽然很好用,但是optipng、advpng以及advdef结合使用能把图片压缩得更小,所以我们选择optipng、advpng以及advdef压缩优化PNG图片。 Optipng压缩优化图片、而advdef则优化压缩算法。

构建脚本

发布产品的时候,我们希望构建前端资源,包括压缩优化、合并等等。构建应该尽量满足:
1.整个过程是自动的,不需要人工介入
2.所有的操作都是安全的
3.免费的命令行工具

我们这里应用bash写了一个简版的部署脚本,能够简单地应付中小型网站静态资源发布。

#!/bin/sh#filename:build.shIN_FILE="/var/www.imgwell.com/themes/ocean/misc"OUT_FILE="/var/www.imgwell.com/misc"EXCLUDE_FILES="jquery.min.js LAB.min.js"GOOGLE_COMPILER="/opt/build/bin/compiler.jar"YUI_COMPRESSOR="/opt/build/bin/yuicompressor-2.4.6.jar"OPTIPNG="/usr/local/bin/optipng -quiet -o3 "ADVPNG="/usr/local/bin/advpng -q -z -4 "ADVDEF="/usr/local/bin/advdef -q -z -4 "
 
 
function mt_ver_code(){localMATRIX="23456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz"localLENGTH=12
    while["${n:=1}"-le"$LENGTH"]; dolocalPASS="$PASS${MATRIX:$(($RANDOM%${#MATRIX})):1}"let n+=1
    doneecho-n${PASS}}
 
function mt_file_ext(){localFILE=`basename--"$1"`echo-n"${FILE##*.}"}
 
function mt_file_size(){if[-f"$1"]; thenecho-n`ls-l--"$1"|awk'{print $5}'`elseecho-n 0
    fi}
 
function mt_has_exclude(){if[-z"$EXCLUDE_FILES"]; thenecho-n 0
        return 0
    fiecho"$EXCLUDE_FILES"|grep-q-w--"${1}"if[$?-eq 0 ]; thenecho-n"1"elseecho-n"0"fi}
 
function mt_google_compile(){
    java -jar"$GOOGLE_COMPILER"--js $1 --js_output_file $2
}
 
function mt_yui_compressor(){
    java -jar"$YUI_COMPRESSOR" $1 -o $2 --charset utf-8
}
 
function mt_png_opti(){[-f"`echo ${OPTIPNG} |awk '{print $1}'`"]&&${OPTIPNG}"${1}"[-f"`echo ${ADVPNG} |awk '{print $1}'`"]&&${ADVPNG}"${1}"[-f"`echo ${ADVDEF} |awk '{print $1}'`"]&&${ADVDEF}"${1}"}
 
function __main__(){[-d"$IN_FILE"]||exit 1
    localVER_CODE=`mt_ver_code`localFILE_STATUS="!"mkdir-p"${OUT_FILE}/${VER_CODE}"
 
    for f in`ls-1"$IN_FILE"`; doif[-d"${IN_FILE}/${f}"] ; thencontinuefi
 
        localHAS_EXCLUDE=`mt_has_exclude "${f}"`localFILE_SRC_SIZE=`mt_file_size "${IN_FILE}/${f}"`
 
        if["`mt_file_ext "${f}"`" = "js"-a"$HAS_EXCLUDE" = "0"]; then
            mt_google_compile "${IN_FILE}/${f}""${OUT_FILE}/${VER_CODE}/${f}"FILE_STATUS="G"elif["`mt_file_ext "${f}"`" = "css"-a"$HAS_EXCLUDE" = "0"]; then
            mt_yui_compressor "${IN_FILE}/${f}""${OUT_FILE}/${VER_CODE}/${f}"FILE_STATUS="Y"elif["`mt_file_ext "${f}"`" = "png"-a"$HAS_EXCLUDE" = "0"]; thencp"${IN_FILE}/${f}""${OUT_FILE}/${VER_CODE}"[-f"${OUT_FILE}/${VER_CODE}/${f}"]&&{
                mt_png_opti "${OUT_FILE}/${VER_CODE}/${f}"FILE_STATUS='O'}elsecp"${IN_FILE}/${f}""${OUT_FILE}/${VER_CODE}"if[$?-eq 0 ]; thenFILE_STATUS="-"elseFILE_STATUS="D"fifi
 
        localFILE_DST_SIZE=`mt_file_size "${OUT_FILE}/${VER_CODE}/${f}"`echo"${FILE_STATUS}${HAS_EXCLUDE}${f}${FILE_SRC_SIZE}/${FILE_DST_SIZE}"doneecho"===========/"$VER_CODE"\=========="}
 
__main__

执行结果如下

[root@www-avatar misc]# ./build.sh
O 0 6N9FQPpTHCy.png 820/258
Y 0 base.css 40171/35530
O 0 FSEB6oLTK3I.png 10362/10362
- 0 GsNJNwuI-UM.gif 522/522
O 0 heart.png 921/807
O 0 IJYgcESal33.png 5771/5771
O 0 _IKHHfAgFQe.png 2635/2302
G 0 jquery.elastic.js 4988/1665
- 1 jquery.min.js 85260/85260
G 0 jquery.ui.dialog.js 10074/5274
G 0 jquery.ui.pview.js 4565/2878
- 1 LAB.min.js 5537/5537
O 0 lFahQXTaTNO.png 90/90
G 0 mutfa.js 36958/21777
O 0 nCItFQafRu8.png 452/288
O 0 p13yZ069LVL.png 792/219
- 0 plupload.flash.swf 18537/18537
G 0 plupload.full.js 48277/46682
Y 0 position.css 7737/7440
O 0 star.png 3292/283
G 0 stars.js 6333/2622
Y 0 ui_plugin.css 12794/12079
G 0 up.js 6230/3991
- 0 uVR6w3wRHEJ.gif 54/54
O 0 WSQ2wnhSG-F.png 245/229
- 0 _ZWZupdaAgS.gif 827/827
===========/ LruQcmx4Zi84 \==========

总结

1.UglifyJS压缩比YUI Compressor更小,比Google Closure Compiler更安全。不想冒险,还是应该选择UglifyJS。若想最小化,可以选择Google Closure Compiler
2.YUI Compressor压缩css文件。但CSSTidy也很不错
3.optipng -o3 *.png |advpng -z -4 *.png |advdef -z -4 *.png 将最大化压缩优化png图片
4.网页尽量使用png格式图片,并且压缩优化它,使之最优

建议继续学习

  1. windows下压缩包在linux解压乱码的解决办法 (阅读 5,304)
  2. php的echo为什么这么慢 (阅读 5,223)
  3. 使用系统命令实现文件的压缩与加密 (阅读 5,185)
  4. 启用memcached压缩注意事项 (阅读 5,124)
  5. Android设计中的.9.png (阅读 4,904)
  6. MySQL从压缩文件恢复数据 (阅读 4,682)
  7. 前端性能优化之Html压缩 (阅读 4,644)
  8. 项目中对模板和js,css文件进行压缩的处理类 (阅读 4,523)
  9. 开源压缩算法Zopfli介绍 (阅读 4,463)
  10. mod_gzip:Apache的HTTP压缩优化 (阅读 4,383)