页面性能优化

压缩JS，CSS，图片
合并图片
使用gzip
减少请求数
缓存
CSS放顶部，JS放底部
减少cookie
使用CDN
尽量少使用iframe

压缩JS，CSS
        YUICompressor 使用Google Closure压缩JS和CSS

        YUICompressor使用方法：

引用

语法: java -jar yuicompressor-x.y.z.jar [options] [input file]

    通用参数：
        -h, –help 显示帮助信息
        –type 指定输入文件的文件类型
        –charset 指定读取输入文件使用的编码
        –line-break
        在指定的列后插入一个 line-bread 符号
        -v, –verbose 显示info和warn级别的信息
        -o 指定输出文件。默认输出是控制台。

    JavaScript专用参数：
        –nomunge 只压缩, 不对局部变量进行混淆。
        –preserve-semi 保留所有的分号。
        –disable-optimizations 禁止优化。

引用

使用示例：java -jar yuicompressor-2.4.2.jar -o d:/temp/hello_min.js hello.js

压缩图片
        图片是网站流量的杀手。图片压缩的方法有：有损压缩，格式转换，大小改变。
        目前使用较多的是：ImageMagick

使用gzip
        现代浏览器，大部分支持gzip解压缩，gzip压缩能减少70%左右的流量。
        在ubuntu中，apache2默认是开启gzip压缩的，ubuntu apache2使用gzip配置方法：

mods-enabled/deflate.conf文件

引用

# these are known to be safe with MSIE 6
AddOutputFilterByType DEFLATE text/html text/plain text/xml
# everything else may cause problems with MSIE 6
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/x-javascript application/javascript application/ecmascript
AddOutputFilterByType DEFLATE application/rss+xml

mods-enabled/deflate.load文件

引用

LoadModule deflate_module /usr/lib/apache2/modules/mod_deflate.so

减少请求数
        IE6并发请求数是2个，IE8，Chrome和Firefox等并发请求数是4-8个。
        合并JS文件，合并CSS文本，将多个小图合并成大图，能有效的减少浏览器请求，达到加快浏览器响应速度。

CSS放顶部，JS放底部
        一个很好的习惯是CSS放在顶部，使页面样式能在页面尽可能早的显示。
        JS放在底部可以在页面样式显示后，才进行JS的装载和执行，优先用户看到界面，提升用户体验

减少cookie
        图片和JS文件使用不同域名，不同域名请求默认不带cookie，能有效的减少cookie在HTTP请求间的传输量。
        比如html页面为：http://www.ingchat.com/demo.html，页面中的图片链接（或者图片链接）可以使用为http://www.gtingchat.com/demo.png，图片请求将不带cookie

使用CDN技术
        CDN技术

评论

1 楼 矢风快乐 2013-05-19  

非常不错啊，真的很给力啊。