网页性能优化心得

页面性能优化的的几大注意要素
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之间。


以上1,2,3,6,8点在企业的中小型mis系统中都是 挺重要和相对容易实现的.
1.对js等文件的压缩,可以采用工具进行,见附件,压缩js时候请注意引用的顺序限制.
2.缓存控制 使用 filter 设置类似 response.setHeader("Cache-Control", "max-age=3600");  的代码,详细叙述如下:

<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>

PageCacheFilter 是我们的缓存控制过滤器,代码如下:

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;
	}

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

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