windows下安装js,css压缩工具

在使用此文件前,需要安装java的JDK才可以,安装教程请参考:

下载工具到本好,解压到一个目录里,执行一下里面的install.bat批处理文件就可以了,这样会在右键添加一个快捷菜单的.以后要压缩什么文件的话,选中右键点击就OK了.如果上面的jdk环境没有设置,会提示未设置JAVA_HOME环境的.

点击下载压缩工具

安装jdk参考教程:http://blog.haohtml.com/archives/3558

网页前端优化-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

HTTP Caching 优化网站

HTTP Caching 用好了,可以极大的减小服务器负载和减少网络带宽。十分有必要深入了解下 http 的 caching 协议。

先来看下请求/响应过程:

http 请求/响应http 请求/响应

1、用 Last-Modified 头

在第一次请求的响应头返回 Last-Modified 内容,时间格式如:Wed, 22 Jul 2009 07:08:07 GMT。是零时区的 GMT 时间,servlet 中可以用 response.addDateHeader("Last-Modified", date.getTime()); 加入响应头。 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

配置ETags--网站速度优化技巧法则13 - [网站速度优化]

法则13 配置ETags

实体标签(ETags是用于确定浏览器缓存中元素 与Web 服务器中的元素是否相匹配的机制(实体是“元素”的另外一个称谓:如图片、脚本、样式 表等),它提供 了last-modified 时间灵活的元素验证机制。每一个ETag,都唯一的字符串,用于标识特定版本的元素,它需被包括在引号中。Web 服务器在响应信息头中用Etag来标识元素,如:

HTTP/1.1 200 OK

Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT

ETag: "10c24bc-4ab-457e1c1f"

Content-Length: 12195

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。表示配置成功.

网页减肥-apache中启用gzip压缩

先启用 LoadModule deflate_module modules/mod_deflate.so,只需要把前面的#去掉就可以了。

然后在httpd.conf最下面添加以下行:

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>

然后重启apache,即可。可以用firefox的插件yslow来查看效果,此时会看到"Compress components with gzip"项的等级为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

YSlow 使用指南_最新2.0使用指南中文版

YSlow分析网页,并提出如何提高其性能的基础上一套规则,高性能的网页。我搜索一下”Yslow使用说明“,发现都是旧版本Yslow的使用介 绍。于是翻译了一下yahoo官方关于新版Yslow的的使用帮助,希望给初次使用Yslow的朋友一些帮助。

注:英文不是很好,对着翻译软件翻译的,有不对的地方,大家指正。 Continue reading