如何加快web 页面的访问速度

浏览数：27 / 时间：2015年06月09日

1. 尽量减少HTTP请求

80%的时间是花在 images, stylesheets, scripts, Flash
等等的请求上。
那么最好的提升网站速度的方式就是简化你的设计。

. 简化你页面上的元素
. 尽可能的用css代替图片
. 合并多个样式表放入一个
. 减少scripts脚本，并把他们放在页面底部

2. 减少server响应时间

(1) chrome 页面速度检查插件 pagespeed

(2) 在线检测

(3) 使用 YSlow 检测

3. 启用压缩

可以考虑使用 gzip 压缩传输 90%的浏览器支持gzip
如 yahoo 减少下载时间 70%

apache：使用 mod_deflate
nginx：使用 HttpGzipMoudle
iis：使用 Configure HTTP Compression

(1) apache
英文网
http://httpd.apache.org/docs/current/mod/mod_deflate.html
中文网
http://apache.chinahtml.com/mod/mod_deflate.html

添加格式：
AddOutputFilterByType DEFLATE text/html text/plain text/xml
详细使用
请参考：http://blog.csdn.net/wujiangwei567/article/details/40660471

(2)nginx
官方文档：
http://wiki.nginx.org/HttpGzipModule
详细配置示例：
http://blog.chinaunix.net/uid-20622737-id-3464367.html

http://www.jb51.net/article/48995.htm
注意该模块是内置的，不需要编译

    gzip on;
    gzip_min_length 1k;
    gzip_buffers 16 64k;
    gzip_http_version 1.1;
    gzip_comp_level 6;
    gzip_types text/plain application/x-javascript text/css application/xml;
    gzip_vary on;

(3)iis

https://technet.microsoft.com/en-us/library/cc753681%28v=ws.10%29.aspx

4. 开启浏览器缓存

方式一：Last-Modified 上一次修改时间

Last-modified: Fri, 16 Mar 2007 04:00:25 GMT File Contents (could be an image, HTML, CSS, Javascript...)
浏览器在请求的时候，会自动比较上一次修改
时间是否更新，如果未更新，则304启用缓存文件

方式二：ETag 验证签名

ETag: ead145f File Contents (could be an image, HTML, CSS, Javascript...)

如果服务器时间本来就是错的怎么办，签名是唯一证明每一个
文件的唯一标识
如果文件被修改了，ETag会自动更改

方式三：Expires 设置过期时间

Expires: Tue, 20 Mar 2007 04:00:25 GMT File Contents (could be an image, HTML, CSS, Javascript...)
设置缓存失效时间，

方式四：Max-Age 最大生存周期

如何设置：
apache：

开启 mod_headers 和 mod_expires 模块

配置过期头

ExpiresActive On
ExpiresDefault A0

# 1 YEAR - doesn't change often
<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$">
ExpiresDefault A31536000
</FilesMatch>

# 1 WEEK - possible to be changed, unlikely
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
ExpiresDefault A604800
</FilesMatch>

# 3 HOUR - core content, changes quickly
<FilesMatch "\.(txt|xml|js|css)$">
ExpiresDefault A10800
</FilesMatch>

配置最大生存周期头

# 1 YEAR
<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$">
Header set Cache-Control "max-age=31536000, public"
</FilesMatch>

# 1 WEEK
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>

# 3 HOUR
<FilesMatch "\.(txt|xml|js|css)$">
Header set Cache-Control "max-age=10800"
</FilesMatch>

# NEVER CACHE - notice the extra directives
<FilesMatch "\.(html|htm|php|cgi|pl)$">
Header set Cache-Control "max-age=0, private, no-store, no-cache, must-revalidate"
</FilesMatch>