网站优化 更小的静态资源
网站优化 更小的静态资源
更小的静态资源(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__
执行结果如下
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格式图片,并且压缩优化它,使之最优
建议继续学习:
- windows下压缩包在linux解压乱码的解决办法 (阅读:4175)
- 启用memcached压缩注意事项 (阅读:4085)
- php的echo为什么这么慢 (阅读:4064)
- 使用系统命令实现文件的压缩与加密 (阅读:4033)
- MySQL从压缩文件恢复数据 (阅读:3703)
- 前端性能优化之Html压缩 (阅读:3688)
- mod_gzip:Apache的HTTP压缩优化 (阅读:3675)
- 项目中对模板和js,css文件进行压缩的处理类 (阅读:3623)
- 为什么不压缩 HTML (阅读:3481)
- 开源压缩算法Zopfli介绍 (阅读:3489)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:echo 来源: performance geeks
- 标签: 压缩 静态资源
- 发布时间:2013-06-02 20:22:17
- [46] 界面设计速成
- [43] 视觉调整-设计师 vs. 逻辑
- [43] Oracle MTS模式下 进程地址与会话信
- [42] IOS安全–浅谈关于IOS加固的几种方法
- [42] android 开发入门
- [39] 图书馆的世界纪录
- [38] 程序员技术练级攻略
- [38] 【社会化设计】自我(self)部分――欢迎区
- [38] 如何拿下简短的域名
- [34] 读书笔记-壹百度:百度十年千倍的29条法则