Web 2.0 网站架构、优化 数据库架构
标签类目:google

Google推出apache加速模块mod_pagespeed

大多人浏览网页如果超过3秒打不开就会离开,Google为此推出了一款apache加速模块,可以有效将网页加载速度提高50%.
网页提速的问题是一个复杂多样的问题,有很多解决方法,往往关系到网站系统程序,服务器硬件,网络传输速度等方面,而Google这款加速模块简单的解决了许多复情况的问题:

•如果你的网站采用apache构建服务器,不需要对网站CMS系统进行处理即可应用
•加速模块可以自行对网络传输的html字节优化及对图象,css进入压缩优化传输
•智能缓存是一大亮点,它可以自动智能缓存,加速下载
下面介绍一下所有特点功能

优化缓存
•缓存扩展
•压缩处理CSS
•优化javascript最大限度的减少重复请求
•自动缓存CSS
•JavaScript内嵌技术
有效载荷尺寸最小化
•压缩空白
•合并头信息
•附加属性
•内建核心Javascript
•优化图像下载
•跳地非法字符
•重写优化CSS

http://code.google.com/speed/page-speed/docs/module.html

css&Js 压缩命令行工具

各有优缺点,混搭着用。同时,也可以编进Ant里。
- q% d  x0 }0 a压缩:
9 h( c; h! A) q6 _% ]$ nYUICompressor, r! f4 A: z4 L! o# {! x! b
支持JS和CSS
* `0 z5 _+ O7 s. ?8 E’ T4 L下载http://yuilibrary.com/downloads/#yuicompressor$ Q2 X! x” j0 R, _
文档:http://developer.yahoo.com/yui/compressor/
- c: e’ l) ]; I8 X7 O快速上手:
9 |; t1 `! g” c: V+ [. o, \java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js –charset utf-8


E) I' e9 F0 a4 B1 NClosure  Compiler4 d$ i5 m% ^- R  X! \( `
不支持CSS文件压缩
: m4 X. U+ H0 Q% C6 w下载:compiler.jar) M8 g+ V& ~' m2 _2 V+ ?
文档:http://code.google.com/closure/compiler/docs/overview.html& j. ?: e, T5 z& M# r0 ?
要求:JRE 1.64 l" @2 |4 N( [* Q
快速上手:
4 |( E3 t$ D8 A1 [java -jar compiler.jar –js myfile.js –js_output_file myfile-min.js2 c# H* {6 z$ z/ K5 A( ~/ P
相关介绍:http://hikejun.com/blog/?p=476支 持多个文件合并:
1 O" O$ b* c3 r. Pjava -jar compiler.jar –js myfile-1.js –js myfile-2.js –js_output_file myfile-min.js
4 A, k: b) {" \合并:( W4 q: J' y- T+ G. ?

Combiner1 x+ J. D2 b: \+ p# p
下载:http://github.com/nzakas/combiner/downloads
0 i$ e4 e: k7 w- I0 o- H文档:http://www.nczonline.net/blog/2009/09/22/introducing-combiner-a-javascriptcss-concatenation-tool/
9 o7 u3 a) N9 U快速上手:, \( J8 U6 S0 I: {9 A
java -jar combiner-0.0.1.jar -v -o myfile.js *.js
3 ^5 u! k4 R! G: K4 Ijava -jar combiner-0.0.1.jar -v -o myfile.js myfile-1.js myfile-2.js
2 P- U& a  H% ^8 G5 [+ j图片无损优化:
) V- E; X! f% e+ i5 g

Smusher7 \6 k7 v& X) {% k
调用smush.it 或 punypng 接口。
& L/ G* A2 n7 ]) h; u+ U文档:http://github.com/grosser/smusher
% A$ y’ S$ |: H要求:ruby + rubygems* B- p$ V8 E4 I* |) i# C* E: F
快速上手:, x0 g7 T% l# I” t! B, R% }: ?) y
smusher imgs/*.*
P8 j5 z6 a; k* r) O. msmusher imgs/*.* –service PunyPng- t& F% t5 C& |5 U
Mac下安装:- r4 M9 q8 V” K: V0 X  {. ]& E
第一次安装smusher失败,缺东西需要先装xcode(OS安装盘2上有),再装行了。
. ?” ]6 |- q2 h’ }, r另注意punypng区分大小写 smusher macosxlogo.png –service PunyPng/ \9 }* J1 h’ J5 |
dataURI:
+ x$ J8 q/ _5 c7 t

CSSEmbed
/ l/ }: _’ c$ U4 r” ^4 Y’ \CSS中的图片转成 dataURI。(我不建议所有图片全部dataURI转换)9 H1 Z! v” M9 Q5 A/ I  c
下载:http://github.com/nzakas/cssembed/downloads/& |0 h  w5 P’ ~7 {
文档:http://www.nczonline.net/blog/2009/11/03/automatic-data-uri-embedding-in-css-files/
C4 h, ~9 w4 U1 n& R7 s快速上手:
3 g9 S/ |  l$ _java -jar cssembed-x.y.z.jar -o styles_new.css styles.css7 L9 n# ~9 r  ]. E, y! ^

dataURI
; P0 @1 b$ [! e! Y( @+ _本地或远程的图片转成 dataURI。3 Z9 Y5 o9 m* ^- D  }/ m. O8 i
下载:http://github.com/nzakas/datauri/downloads/
8 u* l8 M. E4 t! E2 u0 i$ b快速上手:
6 }$ g8 ]. n) \! @4 T3 A& ijava -jar datauri-x.y.z.jar -o output.txt image.png/ X; T9 b2 |1 e; g2 A8 K# t! l
检查工具:
+ D’ w* |1 W6 E7 B0 c

WARI
) B6 {) v1 n; }0 @扫描js/css文件中的冗余,和没用 的图片。试了一下没用的css和图片找的比较准,javascript绑定的方法都算没用不准。这东西最大的好处是整站的找 RT @umutm: Web Application Resource Inspector – WARI – http://wari.konem.net/8 s9 G* |  R0 q( I, m# E
下载/文档:http://wari.konem.net/6 ^/ n: D7 }3 ]4 F0 N6 P; w4 h
要求:JRE 1.6
/ }# a2 R! S” w% ]0 W6 O) u% l快速上 手:java -jar ~/Library/wari/wari.jar 弹出一个图形化界面。其实这不算命令行工具,这工具还是有点用的
+ P+ F3 f9 j+ V+ W6 E

Rhino +  JSLint
$ p2 s( ~- \” [: s0 g+ E” G8 kJavascript/html代码品质检查工具。
; x+ |% H! \’ F& G; T$ g: ^介绍:http://www.JSLint.com/rhino/index.html用 法:java -jar rhino/js.jar rhino/fulljslint.js my_js_file.js4 Z# u, l# e2 W6 y
JRE 1.6 (Soylatte16-1.0.2 ) :  http://hikejun.com/download/soylatte16-i386-1.0.2.tar.bz2

返回顶部