CODEWITHSUNDEEP
jqueryajaxcoldfusioncompressiongzip
frequent
frequent

Reputation: 28483

how to gzip-compress large Ajax responses (HTML only) in Coldfusion?

I'm running Coldfusion8 and jquery/jquery-mobile on the front-end.

I'm playing around with an Ajax powered search engine trying to find the best tradeoff between data-volume and client-side processing time.

Currently my AJAX search returns 40k of (JQM-enhanced markup), which avoids any client-side enhancement. This way I'm getting by without the page stalling for about 2-3 seconds, while JQM enhances all elements in the search results.

What I'm curious is whether I can gzip Ajax responses sent from Coldfusion. If I check the header of my search right now, I'm having this:

    RESPONSE-header
    Connection  Keep-Alive
    Content-Type    text/html; charset=UTF-8
    Date    Sat, 01 Sep 2012 08:47:07 GMT
    Keep-Alive  timeout=5, max=95
    Server  Apache/2.2.21 (Win32) mod_ssl/2.2.21 ...
    Transfer-Encoding   chunked

    REQUEST-header
    Accept  */*
    Accept-Encoding gzip, deflate
    Accept-Language de-de,de;q=0.8,en-us;q=0.5,en;q=0.3
    Connection  keep-alive
    Cookie  CFID=   ; CFTOKEN=   ; resolution=1143
    Host    www.host.com
    Referer http://www.host.com/dev/users/index.cfm

So, my request would accept gzip, deflate, but I'm getting back chunked.

I'm generating the AJAX response in a cfsavecontent (called compressedHTML) and run this to eliminate whitespace 

<cfrscipt>
compressedHTML = reReplace(renderedResults, "\>\s+\<", "> <", "ALL");    
compressedHTML = reReplace(compressedHTML, "\s{2,}", chr(13), "ALL");
compressedHTML = reReplace(compressedHTML, "\s{2,}", chr(09), "ALL");
</cfscript>

before sending the compressedHTML in a response object like this:

 {"SUCCESS":true,"DATA":  compressedHTML  }

Question
If I know I'm sending back HTML in my data object via Ajax, is there a way to gzip the response server-side before returning it vs sending chunked? If this is at all possible? If so, can I do this inside my response object or would I have to send back "pure" HTML?

Thanks!

EDIT:
Found this on setting a 'web.config' for dynamic compression - doesn't seem to work

EDIT2: Found thi snippet and am playing with it, although I'm not sure this will work.

<cfscript>
compressedHTML = reReplace(renderedResults, "\>\s+\<", "> <", "ALL");
compressedHTML = reReplace(compressedHTML, "\s{2,}", chr(13), "ALL");
compressedHTML = reReplace(compressedHTML, "\s{2,}", chr(09), "ALL");

if ( cgi.HTTP_ACCEPT_ENCODING contains "gzip" AND not showRaw ){
    cfheader name="Content-Encoding" value="gzip";

    bos = createObject("java","java.io.ByteArrayOutputStream").init();
    gzipStream = createObject("java","java.util.zip.GZIPOutputStream");
    gzipStream.init(bos);
    gzipStream.write(compressedHTML.getBytes("utf-8"));
    gzipStream.close();
    bos.flush();
    bos.close();
    encoder = createObject("java","sun.misc.
    outStr= encoder.encode(bos.toByteArray());

    compressedHTML = toString(bos.toByteArray());
    } 
</cfscript>

Probably need to try this on the response object and not the compressedTHML variable

Upvotes: 1

Views: 4571

Answers (1)

frequent
frequent

Reputation: 28483

Ok. Got it to work.

I'm using this from the CFLib like so:

<cfscript>
    // remove whitespace
    compressedHTML = reReplace(renderedResults, "\>\s+\<", "> <", "ALL");
    compressedHTML = reReplace(compressedHTML, "\s{2,}", chr(13), "ALL");
    compressedHTML = reReplace(compressedHTML, "\s{2,}", chr(09), "ALL");
    // gzip
    compressedHTML = gzip(compressedHTML);
</cfscript>
<!--- modify header --->
<cfheader name="Content-Encoding" value="gzip">
<cfheader name="Content-Length" value="#len(compressedHTML)#" >
<!--- return cfcontent with reset="no", so I'm not disrupting the Ajax request --->
<cfcontent reset="no" variable="#compressedHTML#" />
<cfreturn  />

You also need to make sure to set the return variables for the function which contains the above to binary and the Ajax request must use returntype="html". At least that's how I got it to work.

Seems to work nice and my Ajax requests went from 50-60k enhanced markup down to 1-2k. Nice on mobile :-)

EDIT:
If you are having problems with special characters not being displayed correctly, try setting

 <cfheader name="Content-Type" value="text/html; charset=ISO-8859-1">

before returning cfcontent. I don't know if this is better than UTF-8, but it work for German äöüß, which I was mising in my Ajax response.

Upvotes: 3

Related Questions