WEB前端优化CSS,JS,图片

做网站优化的运维都知道，为了提高网站的访问速度，一般会开启Apache/Nginx gzip功能，将文件压缩，但是这个压缩与我要说的压缩不在一个层面。网上也提供一些在线css、js文件压缩功能。今天介绍一款linux工具来实现这个功能
安装JAVA
YUI Compressor由java开发，所有我们必须先有java环境。一般系统都会自带java，如果没带，那么

yum安装一个openjava
# yum install java
确认是否安装成功
[root@iZ288zwmtk4Z vhost]# java -version
java version "1.7.0_85"
OpenJDK Runtime Environment (rhel-2.6.1.3.el6_7-x86_64 u85-b01)
OpenJDK 64-Bit Server VM (build 24.85-b03, mixed mode)

下载安装YUI Compressor

# mkdir -p /usr/share/java
# wget https://github.com/yui/yuicompressor/releases/download/v2.4.8/yuicompressor-2.4.8.jar 
创建脚本yui
# cat /usr/bin/yui
#!/bin/sh
java -jar /usr/share/java/yuicompressor-2.4.8.jar "$@"
给yui执行权限
# chmod +x /usr/bin/yui

yui压缩js、css

压缩css命令
# yui style.css -o style-mini.css  #两者文件相同也是可以的 yui style.css -o style.css
压缩js文件命令
# yui jquery.js -o jquery-mini.js #两者文件名相同也是可以的 yui jquery.js -o jquery.js

如果觉得每次都要去压缩文件很麻烦，我推荐你使用Google的pagespeed插件，能够自动压缩文件、优化代码以及合并css、js等等，功能非常强大

为什么要优化图片
想象一下，如果TTLSA每篇文章图片都是1M，一篇文章有10个图片，你看一篇文章是一种什么体验。不仅仅体验差，TTLSA的CDN流量也是蹭蹭蹭的往上涨，涨的是流量，掉的是钱。一个图片100k和1MB的现实的效果差不多，为什么不用100K呢
如何优化图片
有如下几种方法
    1.打开大图，QQ截屏然后保存下来
    2.ngx_pagespeed插件，自动化优化图片质量/尺寸
    3.firework、ps等工具导出图片
    4.jpegoptim、pngcrush
介绍下第四种在linux下压缩图片，并且图片质量不会太差，而且可以写脚本批量压缩图片。
jpegotim压缩图片
安装jpegotim
如果你有epel yum源，使用如下命令即可

# yum install jpegoptim

压缩图片命令

# jpegoptim ttlsa.jpg 
ttlsa.jpg 1425x823 24bit N JFIF  [OK] 1074449 --> 853514 bytes (20.56%), optimized.

可以看到ttlsa.jpg自动被压缩了20.56%。
再压缩一次

# jpegoptim ttlsa.jpg 
ttlsa.jpg 1425x823 24bit N JFIF  [OK] 853514 --> 853514 bytes (0.00%), skipped.

图片已经被压缩过了，所以提示跳过，不需要在被压缩。
提供一个批量压缩的脚本
for i in /data/site/image.ttlsa.com/images/*.jpg; do jpegoptim $i; done
pngcrush优化PNG图片

项目地址：http://pmt.sourceforge.net/pngcrush/
# wget http://downloads.sourceforge.net/project/pmt/pngcrush/1.7.88/pngcrush-1.7.88.tar.gz
# tar -xzvf pngcrush-1.7.88.tar.gz
# cd pngcrush-1.7.88
# make
# cp pngcrush /usr/bin
pngcrush使用语法
usage: pngcrush [options except for -e -d] infile.png outfile.png
       pngcrush -e ext [other options] file.png ...
       pngcrush -d dir/ [other options] file.png ...
       pngcrush -ow [other options] file.png [tempfile.png]
       pngcrush -n -v file.png ...
options:
         -bail (bail out of trial when size exceeds best size found
    -bit_depth depth (deprecated)
      -blacken (zero samples underlying fully-transparent pixels)
        -brute (use brute-force: try 148 different methods)
........更多内容请自己看帮助......

pngcrush简单命令

pngcrush -brute -e "myimage_compressed.png" myimage.png
.........省略.....
   Best pngcrush method        = 123 (ws 15 fm 4 zl 9 zs 1) =    124820
     for output to ttlsattlsa_new.png
     (1.63% critical chunk reduction)
     (1.63% filesize reduction)
   CPU time decoding 1.560, encoding 7.640, other 0.030, total 9.230 sec.

批量优化PNG图片

pngcrush -brute -d "/data/site/image.ttlsa.com/images" *.png

本文出自 “孜孜不倦的学习着...” 博客，请务必保留此出处http://jonyisme.blog.51cto.com/3690784/1761559

原文：http://jonyisme.blog.51cto.com/3690784/1761559