网页前端优化-apache篇

以下配置内容放在 httpd.conf 配置文件最后即可,全局有效.

1.设置静态文件的有效期

ExpiresActive On

<FilesMatch “\.(gif|jpg|png|js|css)$”>
ExpiresDefault “access plus 10 years”
</FilesMatch>

参考:http://blog.haohtml.com/archives/3728

2.启用gzip压缩

DeflateBufferSize 8096
DeflateCompressionLevel 1
DeflateMemLevel 9
DeflateWindowSize 15

DeflateFilterNote Input instream
DeflateFilterNote Output outstream
DeflateFilterNote Ratio ratio
DeflateFilterNote ratio
LogFormat ‘”%r” %{outstream}n/%{instream}n (%{ratio}n%%)’ deflate
CustomLog logs/deflate.log deflate

<Location />
SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html text/css application/x-javascript text/plain text/xml
</Location>

参考:http://blog.haohtml.com/archives/3327,注意上面的日志路径要正确

Continue reading

X-Cache 和 X-Cache-Lookup headers 的解释

X-Cache: 表示你的 http request 是由 proxy server 回的 .
MISS 表 proxy无资料,代理动作, HIT 表 proxy 直接回应

X-Pad: 這個是800 年前的 netscape  bug 的因素才用的

想象你在一个标准的透明代理80端口下,并且你正在访问一个运行了内部网络缓存(这样,又是一个代理)的站点。如果你查看HTTP headers查找某些信息,你能够找到像这样的2行,规定domain.tld 代表那个本地网站,proxy.local 代表你的内部的透明代理。 Continue reading

HTTP 1.1 中Transfer-Encoding chunked编码

大多数的站点相应用户请求时发送的HTTP Headers中包含Content-Length头.此头信息定义在HTTP1.0协议RFC 1945 10.4章节中.该信息是用来告知用户代理,通常意义上就是浏览器,服务端发送的文档内容长度.浏览器接受到此信息后,接收完Content-Length中定义的长度字节后开始解析页面.如果服务端有部分数据延迟发送,那么浏览器就会白屏.这样导致比较糟糕的用户体验.

解决方法在HTTP1.1协议.RFC2616中14.41章节中定义的Transfer-Encoding:chunked的头信息.chunked编码定义在3.6.1中.根据此定义浏览器不需要等到内容字节全部下载完成,只要接收到一个chunked块就可解析页面.并且可以下载html中定义的页面内容,包括js,css,image等.采用chunked编码有两种选择,一种是设定Server的IO buffer长度让Server自动flush buffer中的内容,另一种是手动调用IO中的flush函数。 Continue reading

cookie-free域名提高网页效率-优化网站性能(yslow)

YSlow给如何提高网页效率和优化网站性能提供了22条建议,其中有一条是关于域名的:Use cookie-free domains。

使用 cookie-free domains 有什么好处呢?当用户浏览器发送一个静态文件,如图片image、CSS样式表文件时会同时发送同一个域名(或二级域名)下的cookies,但是网站服 务器对发送过来的cookies完全不予理会,因此这些没用的cookies白白浪费了网站带宽,影响网站加载速度和网页性能表现。YSlow建议为了解 决这个问题,就可以通过使用 cookie-free domains 的方法来做优化,从而提高网页效率。

使用二级域名作为cookie-free domains

通俗地说,所谓的 cookie-free domains 就是在浏览器发送静态内容的请求时不会发送cookies 的域名。YSlow提示可以申请注册一个二级域名专门用来储存这些静态图片、JS、静态CSS文件。 Continue reading

网页优化-apache中文件有效期的设置-yslow

前面我用已经启用了网页压缩功能,见http://blog.haohtml.com/index.php/archives/3723,下面我们来对网页元素有效期进行设置。

首先,启用LoadModule expires_module modules/mod_expires.so,只要在httpd.conf中把前面的#号去掉就可以了。然后在httpd.conf最后添加以下几行

ExpiresActive On
<FilesMatch “\.(gif|jpg|png|js|css)$”>
ExpiresDefault “access plus 10 years”
</FilesMatch>

重启apache,可以用firefox浏览器中的yslow插件查看最终效果,此时”add expires haders”项应该为A。表示配置成功.

meta http-equiv=”Cache-Control” content=”max-age=0″

Cache-Control头域
Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache- Control并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括no-cache、no-store、max-age、max- stale、min-fresh、only-if-cached,响应消息中的指令包括public、private、no-cache、 no-store、no-transform、must-revalidate、proxy-revalidate、max-age。各个消息中的指令含 义如下

Public指示响应可被任何缓存区缓存
Private指示对于单个用户的整个或部分响应消息,不能被共享缓存处理。这允许服务器 仅仅描述当用户的部分响应消息,此响应消息对于其他用户的请求无效
no-cache指示请求或响应消息不能缓存
no-store用于防止 重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。
max-age指示客户机可以接收生存期不大于指定时间(以秒为单 位)的响应
min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应
max-stale指示客户机可以接收超出超时 期间的响应消息。如果指定max-stale消息的值,那么客户机可以接收超出超时期指定值之内的响应消息。

HTTP头的Expires与Cache-control

Cache-control用于控制HTTP缓存(在HTTP/1.0中可能部分没实现,仅仅实现了 Pragma: no-cache)

数据包中的格式:

Cache-Control: cache-directive

cache-directive可以为以下:

request时用到:

| "no-cache"
| "no-store"
| "max-age" "=" delta-seconds
| "max-stale" [ "=" delta-seconds ]
| "min-fresh" "=" delta-seconds
| "no-transform"
| "only-if-cached"
| "cache-extension"

Continue reading