传送门:前端的高性能

http://www.ibm.com/developerworks/cn/java/j-lo-javawebhiperf1/index.html

其中,图像的base64编码方法如下:

public static String getPicBASE64(String picPath) {
    String content = null;
    try {
        FileInputStream fis = new FileInputStream(picPath);
        byte[] bytes = new byte[fis.available()];
        fis.read(bytes);
        content = new sun.misc.BASE64Encoder().encode(bytes); // 具体的编码方法
        fis.close();
    } catch (Exception e) {
        e.printStackTrace();
    }
    return content;
}

使用上面的方法取得图片编码后的字符串以后,使用方法,示例如下:

 <img src="data:image/png;base64,
 iVBORw0KGgoAAAANSUhEUgAAAeQAAAB8BAMAAABKwt5QAAAAA3NCSVQICAjb4U/gAAAAGFBMVEX/
 ……(省略了大部分编码)… BJRU5ErkJggg==" alt="" />

它适用的情况是浏览器连接服务器的时间 > 图片下载时间,也就是发起连接的代价要大于图片下载,那么这个时候将图片编码为 BASE64 字符串,就可以避免连接的建立,提高效率。

开启Gzip压缩,如果碰上自己无法配置服务器的情况,可以自己写代码压缩。 如自定义Filter:

// 监视对 gzipCategory 文件夹的请求
@WebFilter(urlPatterns = { "/gzipCategory/*" })
public class GZIPFilter implements Filter {

    @Override
    public void doFilter(ServletRequest request, ServletResponse response,
    FilterChain chain) throws IOException, ServletException {
        String parameter = request.getParameter("gzip");
        // 判断是否包含了 Accept-Encoding 请求头部
        HttpServletRequest s = (HttpServletRequest)request;
        String header = s.getHeader("Accept-Encoding");
        //"1".equals(parameter) 只是为了控制,如果传入 gzip=1,才执行压缩,目的是测试用
        if ("1".equals(parameter) && header != null && header.toLowerCase().contains("gzip")) {
            HttpServletResponse resp = (HttpServletResponse) response;
            final ByteArrayOutputStream buffer = new ByteArrayOutputStream();

            HttpServletResponseWrapper hsrw = new HttpServletResponseWrapper(
            resp) {

                @Override
                public PrintWriter getWriter() throws IOException {
                    return new PrintWriter(new OutputStreamWriter(buffer,
                    getCharacterEncoding()));
                }

                @Override
                public ServletOutputStream getOutputStream() throws IOException {
                    return new ServletOutputStream() {

                        @Override
                        public void write(int b) throws IOException {
                            buffer.write(b);
                        }
                    };
                }

            };

            chain.doFilter(request, hsrw);
            byte[] gzipData = gzip(buffer.toByteArray());
            resp.addHeader("Content-Encoding", "gzip");
            resp.setContentLength(gzipData.length);
            ServletOutputStream output = response.getOutputStream();
            output.write(gzipData);
            output.flush();
            } else {
            chain.doFilter(request, response);
        }
    }
    // 用 GZIP 压缩字节数组
    private byte[] gzip(byte[] data) {
        ByteArrayOutputStream byteOutput = new ByteArrayOutputStream(10240);
        GZIPOutputStream output = null;
        try {
            output = new GZIPOutputStream(byteOutput);
            output.write(data);
            } catch (IOException e) {
            } finally {
            try {
                output.close();
                } catch (IOException e) {
            }
        }
        return byteOutput.toByteArray();
    }
    ……
}

 

http://cssor.com/front-end-performance-2.html

参与评论

电子邮件地址不会被公开。 必填项已用*标注

*

全部分类
Books(4)code(7)database(6)html&css(24)java(11)JavaScript(49)jQuery(24)linux(20)python(1)React(1)share(1)soft(4)solution(53)thinking(17)vim(9)WordPress(8)前端优化(12)拓展(33)服务器(33)移动开发(4)自然(22)