网页性能优化心得

[b]页面性能优化的的几大注意要素[/b]
1.尽可能的减少页面的请求数,通过firebug可以发现大部分页面加载时间都消耗在请求等待的时间上,而不是在数据下载上,所以尽量压缩合并您项目中的js,css等文件吧;再提一点
就是一般我们都会在页面上引入类似于header.jsp的页面,用来存储公用的js等,但是请注意如果滥用的话,是会增加请求数目的,所以请移除某些重复引用的文件.
2.缓存控制一定得加上,如果不加控制的话,一般浏览器默认缓存时间大概为10分钟左右,所以你必须得控制缓存的过期时间,一般来说,给'js,css,以及图片'加上缓存控制就可以了.
3.一般mis系统,能使用数据库操作工具,比如hibernate,ibatis等得缓存机制的一定得使用,这样在大数据量操作的时候,能够加快客户端加载时间,提高客户体验.
4.使用重定向会消耗一定的等待时间.所以请尽量避免使用.
5.网页中请尽量使用get方式提交数据,其中包括ajax请求(post请求有两个过程,1发送请求headers,2发送请求数据,根据http规范,get请求只会发送一个tcp包).--------这一段话来自yahoo)
6.独立js,css,这样做的好处就是我们可以使这些文件置于缓存状态.这样做看上去是增加的请求的次数,但是由于第一次请求之后该部分数据已经被缓存,
所以第二次就无需再请求后端,减少了网络带宽的开销.
7.图片类的静态文件能够使用另外的服务器进行域分离的话,那是最好的了.减轻了服务器的压力.
8.优化浏览器的加载策略.使用css在页面顶部加载,js在页面底部加载.这样做原因很简单:1) css如果不放在顶部加载,ie等浏览器会中止内容的有序呈现。
浏览器中止呈现是为了避免样式改变引起的页面元素重绘。2)js如果不在底部加载,那么当页面加载js的时候,带来的问题就是它阻止了页面的平行下载。
HTTP/1.1 规范建议，浏览器每个主机名的并行下载内容不超过两个。如果你的图片放在多个主机名上，你可以在每个并行下载中同时下载2个以上的文件。
但是当下载脚本时，浏览器就不会同时下载其它文件了，即便是主机名不相同。这对于图片,影响类网站影响较大.
9.最后就是 减少 减少DNS查找 ,DNS耗费的时间是相当可观的，因此同一页面的域名数量最好控制在2~4之间。


[b]以上1,2,3,6,8点在企业的中小型mis系统中都是 挺重要和相对容易实现的.[/b]
1.对js等文件的压缩,可以采用工具进行,见附件,压缩js时候请注意引用的顺序限制.
2.缓存控制 使用 filter 设置类似 [b]response.setHeader("Cache-Control", "max-age=3600");[/b] 的代码,详细叙述如下:
[code]
<filter>
<filter-name>cacheFilter</filter-name>
<filter-class>PageCacheFilter</filter-class>
<init-param>
<param-name>js</param-name>
<param-value>36000</param-value>
</init-param>
<init-param>
<param-name>gif</param-name>
<param-value>36000</param-value>
</init-param>
<init-param>
<param-name>jpg</param-name>
<param-value>36000</param-value>
</init-param>
<init-param>
<param-name>css</param-name>
<param-value>36000</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>cacheFilter</filter-name>
<url-pattern>*.js</url-pattern>
</filter-mapping>
<filter-mapping>
<filter-name>cacheFilter</filter-name>
<url-pattern>*.gif</url-pattern>
</filter-mapping>
<filter-mapping>
<filter-name>cacheFilter</filter-name>
<url-pattern>*.jpg</url-pattern>
</filter-mapping>
<filter-mapping>
<filter-name>cacheFilter</filter-name>
<url-pattern>*.css</url-pattern>
</filter-mapping>
[/code]
PageCacheFilter 是我们的缓存控制过滤器,代码如下:
[code]
import java.io.*;
import java.util.*;
import javax.servlet.*;
import javax.servlet.http.*;

/**
* @author liubj
*/

public class PageCacheFilter implements Filter {
private FilterConfig config = null;
private static HashMap expiresMap = new HashMap();

public void init(FilterConfig filterConfig) {
this.config = filterConfig;
expiresMap.clear();
Enumeration names = config.getInitParameterNames();
while (names.hasMoreElements()) {
try {
String name = (String) names.nextElement();
String value = config.getInitParameter(name);
if(isNumeric(value)){
Integer expire = Integer.valueOf(value);
expiresMap.put(name, expire);
}
} catch (Exception ex) {
ex.printStackTrace();
}
}
}

public void doFilter(ServletRequest request, ServletResponse response,
FilterChain chain) throws IOException, ServletException {
HttpServletRequest req = (HttpServletRequest) request;
HttpServletResponse res = (HttpServletResponse) response;

String uri = req.getRequestURI();
String ext = null;
int dot = uri.lastIndexOf(".");
if (dot != -1) {
ext = uri.substring(dot + 1);
}

setResponseHeader(res, uri, ext);
chain.doFilter(request, response);
}

public void destroy() {
}

protected FilterConfig getFilterConfig() {
return (config);
}

private void setResponseHeader(HttpServletResponse response, String uri,
String ext) {
if (ext != null && ext.length() > 0) {
Integer expires = (Integer) expiresMap.get(ext);
if (expires != null) {
if (expires.intValue() > 0) {
response.setHeader("Cache-Control", "max-age="
+ expires.intValue()); // HTTP 1.1
}
}
}
}

private static boolean isNumeric(String str) {
for (int i = str.length(); --i >= 0;) {
if (!Character.isDigit(str.charAt(i))) {
return false;
}
}
return true;
}

[/code]
3.独立js,css 以及 js,css的位置排放,则需要我们有良好的习惯既可以.
4.对于大数据量,我们要及时做好服务器段数据的缓存工作,利用orm框架的缓存机制.

还有其他针对页面缓存的机制,比如 ehcache 的 webFilter等,大家可以探索一下!