技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> 系统架构 --> 网站优化 更小的静态资源

网站优化 更小的静态资源

浏览:2464次  出处信息

网站优化 更小的静态资源

更小的静态资源(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解压乱码的解决办法    (阅读:4167)
  2. 启用memcached压缩注意事项    (阅读:4080)
  3. php的echo为什么这么慢    (阅读:4054)
  4. 使用系统命令实现文件的压缩与加密    (阅读:4024)
  5. MySQL从压缩文件恢复数据    (阅读:3694)
  6. 前端性能优化之Html压缩    (阅读:3677)
  7. mod_gzip:Apache的HTTP压缩优化    (阅读:3662)
  8. 项目中对模板和js,css文件进行压缩的处理类    (阅读:3611)
  9. 为什么不压缩 HTML    (阅读:3474)
  10. 开源压缩算法Zopfli介绍    (阅读:3482)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1