2、利用HTTP缓存机制：Add an Expires or a Cache-Control Header
3、启用Apache Gzip压缩网页内容：Gzip Components
4、脚本和样式表放到独立的文件：Make JavaScript and CSS External
5、脚本和样式表精简：Minify JavaScript and CSS
6、避免在HTML中缩放图像：Don't Scale Images in HTML
一. 尽量减少HTTP请求
1. 合并小图片，减少加载网页发送得HTTP请求次数
CSS Satyr（CSS 塞特斯）是一款 CSS Sprites 的小工具。可以将多个小图片整合成一张图片，并生成相应的CSS调用代码。
生成后使用其中得定位CSS，如
背景图：
.xnie {background-image: url(nextAndPrev.jpg);}
每张小图得具体位置信息：
/* cls_1 : D:\MEworkspace\CfgWeb\WebContent\order\intellect\gallery\ad_next.png */
.cls_1 {background-position: -0px -0px; width: 30px; height: 30px; }
/* cls_2 : D:\MEworkspace\CfgWeb\WebContent\order\intellect\gallery\ad_prev.png */
.cls_2 {background-position: -34px -0px; width: 30px; height: 30px; }
/* cls_3 : D:\MEworkspace\CfgWeb\WebContent\order\intellect\gallery\ad_scroll_back.png */
.cls_3 {background-position: -68px -0px; width: 14px; height: 20px; }
/* cls_4 : D:\MEworkspace\CfgWeb\WebContent\order\intellect\gallery\ad_scroll_forward.png */
.cls_4 {background-position: -86px -0px; width: 14px; height: 20px; }
为避免换行，稍微改造下：
ul { display: inline-block; }
ul { *display: inline; *zoom: 1; }
li { display: inline-block; }
li { *display: inline; *zoom: 1; }
使用(以"放大镜","回收站")：
<img src="<%=request.getContextPath()%>/images/quote.gif" border="0" style="cursor: hand" onClick="selectMaterial()">
<img src="<%=request.getContextPath()%>/images/aiger.gif" border="0" style="cursor: hand" onClick="clearMaterial()">
<ul><li class="xnie quote" onclick="selectMaterial()" style="cursor: hand"></li> </ul>
<ul><li class="xnie aiger" onclick="clearMaterial()" style="cursor: hand"></li> </ul>
注意，当需要后续往已生成的图片里面追加图片时，只需将原来的生成的图片拖入，把新加入的图片放到后面排列，生成后的样式会把原来
生成的当成一个样式处理（原来生成的小图片相对位置没变，还用原来的样式即可），新增加的图片会单独生成css偏移量，把它们复制到
原来的生成的样式下即可。
2. 消除掉404错误
3. 消除不必要的Ajax请求，避免页面载入过程中就需要使用的东西再用ajax去请求调用，直接在转向页面前的action后台处理完返回给前台页面使用
如页面载入时，通过ajax去分别获取国家，省市的代码
如 配置主题下单orderEdit_body.jsp initFuel()中的
4. 避免直接在jsp页面写大量js代码，这些代码无法被缓存， 每次都得请求从服务器端返回， 因该把它们单独放入js文件，在jsp页面引入。
二. 开启Apache缓存机制
修改httpd.conf文件，如有有下面三行，去点前面的‘＃’，若没有，则新增（需确保
LoadModule cache_module modules/mod_cache.so
LoadModule disk_cache_module modules/mod_disk_cache.so
LoadModule mem_cache_module modules/mod_mem_cache.so
<IfModule mod_cache.c>
<IfModule mod_mem_cache.c>
CacheEnable mem /
MCacheSize 204800
MCacheMaxObjectCount 5000
MCacheMinObjectSize 1
MCacheMaxObjectSize 102400
</IfModule>
</IfModule>
设置 LogLevel debug
重启apache，删除浏览器临时文件，logs\error.log 中出现cache 字符说明配置缓存成功
更多详细配置请搜索apache缓存机制
三. 启用Apache Gzip压缩网页内容
利用Apache中的Gzip模块，我们可以使用Gzip压缩算法来对Apache服务器发布的网页内容进行压缩后再传输到客户端浏览器。这样经过压缩后实际上降低了网络传输的字节数，
最明显的好处就是可以加快网页加载的速度。
Web服务器处理HTTP压缩的过程如下：
1. Web服务器接收到浏览器的HTTP请求后，检查浏览器是否支持HTTP压缩（Accept-Encoding 信息）；
2. 如果浏览器支持HTTP压缩，Web服务器检查请求文件的后缀名；
3. 如果请求文件是HTML、CSS等静态文件，Web服务器到压缩缓冲目录中检查是否已经存在请求文件的最新压缩文件；
4. 如果请求文件的压缩文件不存在，Web服务器向浏览器返回未压缩的请求文件，并在压缩缓冲目录中存放请求文件的压缩文件；
5. 如果请求文件的最新压缩文件已经存在，则直接返回请求文件的压缩文件；
6. 如果请求文件是动态文件，Web服务器动态压缩内容并返回浏览器，压缩内容不存放到压缩缓存目录中。
Apache上利用Gzip压缩算法进行压缩的模块有两种：mod_gzip 和mod_deflate。要使用Gzip Web压缩，请首先确定你的服务器开启了对这两个组件之一的支持。在Linux服务器上，
现在已经有越来越多的空间商开放了对它们的支持，有的甚至是同时 支持这两个模块的。例如目前Godaddy、Bluehost及DreamHosts等空间商的服务器都已同时支持mod_gzip 和mod_deflate。
虽然使用Gzip同时也需要客户端浏览器的支持，不过不用担心，目前大部分浏览器都已经支持Gzip了，如IE、Mozilla Firefox、Opera、Chrome等。
通过查看HTTP头，我们可以快速判断使用的客户端浏览器是否支持接受gzip压缩。若发送的HTTP头中出现以下信息，则表明你的浏览器支持接受相应的gzip压缩：
Accept-Encoding: gzip 支持mod_gzip
Accept-Encoding: deflate 支持mod_deflate
Accept-Encoding: gzip,deflate 同时支持mod_gzip 和mod_deflate
如果apache开启了GZIP压缩，其返回的头里应该有
Content-Encoding: gzip
*** Apache开启Gzip压缩方法：
1. 修改httpd.conf , 找到下面两行，如果没有手动加上（确保modules文件夹下有这两个so文件）
LoadModule deflate_module modules/mod_deflate.so #开启Apache deflate压缩
LoadModule headers_module modules/mod_headers.so #告诉浏览器使用gzip压缩返回，否则浏览器不解压直接下载gzip包展示会出错，可能就是加上 Content-Encoding: gzip 说明
2. 修改httpd.conf ，加入压缩规则等描述，可加至最后
<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI .(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI .(?:pdf|mov|avi|mp3|mp4|rm)$ no-gzip dont-vary
AddOutputFilterByType DEFLATE text/*
AddOutputFilterByType DEFLATE application/ms* application/vnd* application/postscript application/javascript application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php application/x-httpd-fastphp
</IfModule>
3. 重新启动Apache 测试
压缩后页面大小降低90％左右
四. 脚本和样式表放到独立的文件
把原来的部分以JSP文件存储的JS文件， 改为JS文件 （处理其中的<%=request.getContextPath()%> )
JSP文件导致每次都加载，无法缓存.
五. 脚本和样式表精简：Minify
合并页面中得CSS，JAVASCRIPT文件请求
一般得JSP页面中都会链接许多外部JS文件和CSS，文件，浏览器在加载页面得过程中会对这些外部引入得JS和CSS文件单独发送HTTP请求（可用HTTP WATCH测试）在内网环境可能单个都很快，
但是在外网或者网络环境不好的情况下，这些请求所耗费的时间就会被放大很多倍，我们得目标就是把这些
分散得HTTP请求合并起来，减少因为网络情况不佳而产生得等待和响应时间。
以orderEdit_body.jsp 为例 ，18个js文件请求和三个CSS请求最终可以合并成2个HTTP请求。
益处：
1. 合并后请求JS文件的总大小会缩小 （minify会在apache端把请求的js文件列表合并压缩，包括去掉换行，空格等）
2. 网页发送HTTP请求的总数会大幅降低.
环境配置(具体可参考本人整理的环境配置说明)：
1. 本地需配置apache+tomcat环境。
2. apache配置minify (因为minify是php语言编写的，所以还要给apache配置支持php环境）
页面需改动
引入CSS原写法：
<link href="/CfgWeb/css/style.css" rel="stylesheet" type="text/css">
<span style="white-space:pre"></span><link href="/CfgWeb/css/autocomplete.css" rel="stylesheet" type="text/css">
<span style="white-space:pre"></span><link href="/CfgWeb/js/jquery/thickbox.css" rel="stylesheet" type="text/css">
引入CSS新写法：
<pre name="code" class="html"> <link href="/min/b=CfgWeb&f=/css/style.css,/css/autocomplete.css,/js/jquery/thickbox.css" rel="stylesheet" type="text/css">
引入CSS原写法：
<script language="javascript" src="<%=request.getContextPath()%>/js/calendar.js" charset="utf-8" type="text/javascript"></script>
<script language="Javascript" src="<%=request.getContextPath()%>/js/pcm_window.js" charset="utf-8" type="text/javascript"></script>
<script language="javascript" src="<%=request.getContextPath()%>/js/error.js" charset="utf-8" type="text/javascript"></script>
<script language="Javascript" src="<%=request.getContextPath()%>/js/orderConfig.js" charset="utf-8" type="text/javascript"></script>
<script language="Javascript" src="<%=request.getContextPath()%>/js/orderCfgPic.js" type="text/javascript" charset="utf-8"></script>
<script language="Javascript" src="<%=request.getContextPath()%>/js/orderConfigEdit.js" type="text/javascript" charset="utf-8"></script>
<script language="Javascript" src="<%=request.getContextPath()%>/js/orderCfgFourthEdit.js" type="text/javascript" charset="utf-8"></script>
<script language="Javascript" src="<%=request.getContextPath()%>/js/orderCfgComment.js" type="text/javascript" charset="utf-8"></script>
引入CSS新写法：
<script type="text/javascript"
src="/min/b=<%=request.getContextPath().substring(1,request.getContextPath().length()) %>&f=/js/calendar.js,/js/pcm_window.js,/js/error.js,/js/orderConfig.js,/js/orderCfgPic.js,/js/orderConfigEdit.js,/js/orderCfgFourthEdit.js,/js/orderCfgComment.js" charset="utf-8"></script>
***注意引入的JavaScript文件需统一UTF-8编码，如果目前不是，需要把它们转为UTF-8无BOM存储（可用notePad++), 修改编码后的js文件可能对原来有引用他们的jsp有影响，因此要把原来引入它的jsp页面
中的引入指定编码.
原写法：
<script language="javascript" src="<%=request.getContextPath()%>/js/calendar.js" type="text/javascript"></script>
新写法：
<script language="javascript" src="<%=request.getContextPath()%>/js/calendar.js" type="text/javascript" charset="utf-8"></script>
六. 避免在HTML中缩放图像
避免在HTML中缩放图像，缩放图象极大浪费网络流量，显示效果可能也会因为过渡挤压变的有锯齿现象，应该为每张可能显示小尺寸的图片生成缩略图，在需要显示小图片的时候直接使用
小图片显示。
以”智能选车（国内）“查询为例，用httpWatch监测客户端接受到的网络流量( listPicFam.jsp )。
生成缩略图(后台程序修改)：
1. 如在存放图片数据的表picture_data 中新增字段"THUMBNAIL_FILE"用于存储这张图片对应的缩略图的地址（缩略图通过程序写到服务器磁盘上）。
2. 在系统中新增图片的地方新增生成缩略图的功能，把生成的缩略图放到服务器硬盘上，并把缩略图地址信息写入数据库 ecc_oc.picture_data 的THUMBNAIL_FILE字段。
3. 如果有修改图片的功能，也需要加入生成缩略图的功能。
4. 创建一个批量生成缩略图的程序，用于为现有的图片生成缩略图。
上面的功能都已经有实现，并且经检验已经发布正式系统：
FileUploadNewDAO.java 创建缩略图的入口程序，它调用FileTool.java写入图片到服务器磁盘并把路径信息更新到图片数据库表。
ImageUtil.java 创建缩略图的工具类,它调用FileTool.java写入缩略图到磁盘
FileTool.java 操作文件及文件夹的工具类。
FileTypeTest.java 判断图片类型的工具类，读取图片二进制流信息头判断其图片类型。
示例程序：
PicAction.java doInput 创建图片的时候生成缩略图
PicAction.java doUpdate 修改图片的时候生成缩略图
PicAction.java processImages 批量处理现有的图片，为他们生成缩略图
FileTypeTest.java判断图片类型
FileUploadNewDAO.create() --------------------------------------> ImageUtil.saveImage()------->FileTool.mkdirs() 写入文件等
显示缩略图(前台页面修改)：
一般页面上显示图片都是通过一个统一的servlet来显示，如OC：
原写法：
<img height="85" width="158" alt="无图片" src="<%=request.getContextPath()%>/ShowPic?pic_id=<bean:write name="fam" property="picId"/>"/>
新写法：
<img height="85" width="158" alt="无图片" src="<%=request.getContextPath()%>/ShowPic?pic_id=<bean:write name="fam" property="picId"/>&showThumbnail=yes"/>
新写法多加了一个固定参数 showThumbnail=yes ，表示此处显示的是小图
***修改显示图片的servlet showImage.java ,在不影响原功能的基础上对其加以改造，判断其是否有缩略图（可通过判断THUMBNAIL_FILE字段是否为空，文件是否存在判断），如果有则返回缩略图
若没有则按原逻辑返回原图。