JavaScript StringBuffer

Eventually, you come to a point where the performance of JavaScript becomes an issue.  Most modern browsers have made significant improvements  in their javascript engines, unfortunately Microsoft has yet to do the same.  MSIE’s (at least up to and including MSIE8)  javascript performance lags far behind Mozilla/Firefox, Safari, Chrome and Opera.

String concatenation is extremely slow in MSIE,  but arrays are generally fast… as such it’s often beneficial to implement an object similar to the Java StringBuffer (or StringBuilder) for JavaScript.

The StringBuffer implementation… you can customize to make it more functional, but this is the core:

function StringBuffer(){
this.buffer = [];
}
StringBuffer.prototype.append = function append(string){
this.buffer.push(string);
return this;
};
StringBuffer.prototype.toString = function toString(){
return this.buffer.join(“”);
};

Example:

function example_slow(x1,x2,x3){
var rc = x1;
rc+=x2;
rc+=x3;
return rc;
}

function example_fast(x1,x2,x3){
var sb = new StringBuffer();
sb.append(x1);
sb.append(x2);
sb.append(x3);
return sb.toString();
}

References:

Cheers

Data URL’s (aka HTML Inline Images)

Here’s a useful trick for minimizing server HTTP connections, unfortunately it’s not universally supported so you will need to provide alternate methods for non-supporting browsers (such as MSIE).

This works by placing the content of the image into the URL itself, as such there’s no need to open up a new server connection and no extra caching at any tier.

<img src=”data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/ /ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7″ alt=”embedded folder icon” width=”16″ height=”14″ />

Yahoo! Exceptional Performance (for Web Applications)

I spend a LOT of time trying to optimize web applications to run and appear as fast as possible, one of the most valuable tools I have in my “bag of tricks” is the YSlow! plugin for Firefox.

It integrates in the browser and gives a near real-time scoring of the pages you visit and suggestions on how to improve them. While some of the suggestions are not practical (for example: use of a CDN) the bulk of them can be applied to your application code or server with a little bit of work.

The rules and scoring mechanisms are well documented at the following website:

The YSlow! plugin is available here:
http://developer.yahoo.com/yslow/

Happy… Faster Surfing!

Enabling the Apache2 – Tomcat5 mod_jk Connector

Often you want to use Apache HTTP for static content, yet use Tomcat for JSP and other Java type work.  This is a very common infrastructure for enterprise applications, particularly when using ‘pools’ of servers for performance, redundancy and security.  

In order to accomplish this, all connections need to be handled by the Apache webserver, which will delegate appropriate requests to Tomcat for it to process.

Here’s a simple setup to get you started:

  • First you need to get the connector appropriate to your installation:

    http://tomcat.apache.org/connectors-doc/

  • Next make sure the connector file is in the /conf folder of your Apache installation.

    NOTE: I prefer to use this path and leave the version name to make maintenance and backups easier.

  • Add the following line to httpd.conf

    LoadModule jk_module conf/mod_jk-1.2.26-httpd-2.2.4.so

  • Now, add the following to http.conf

    <IfModule jk_module>
    Include “c:/TOMCATPATH/conf/auto/mod_jk.conf”
    JkWorkersFile conf/workers.properties
    JkLogFile “c:/LOGSPATH/tomcat55_mod_jk.log”
    </IfModule>

  • Add the c:/APACHEPATH/conf/workers.properties file with the following (minimal) contents:

    worker.list=ajp13
    worker.ajp13.port=8009
    worker.ajp13.host=localhost
    worker.ajp13.type=ajp13

  • Finally, restart both Apache and Tomcat
  • The following file should have been created in c:/TOMCATPATH/conf/auto/mod_jk.conf

    ########## Auto generated on …some datetime… ##########

    <IfModule !mod_jk.c>
      LoadModule jk_module “C:/APACHEPATH/conf/mod_jk-1.2.26-httpd-2.2.4.so”
    </IfModule>

    JkWorkersFile “C:/TOMCATPATH/conf/jk/workers.properties”
    JkLogFile “c:/LOGSPATH/mod_jk.log”

    JkLogLevel emerg

    <VirtualHost localhost>
        ServerName localhost

        JkMount /webdav ajp13
        JkMount /webdav/* ajp13

        JkMount /servlets-examples ajp13
        JkMount /servlets-examples/* ajp13

        JkMount /jsp-examples ajp13
        JkMount /jsp-examples/* ajp13

        JkMount /balancer ajp13
        JkMount /balancer/* ajp13

        JkMount /host-manager ajp13
        JkMount /host-manager/* ajp13

        JkMount /tomcat-docs ajp13
        JkMount /tomcat-docs/* ajp13

        JkMount /manager ajp13
        JkMount /manager/* ajp13
    </VirtualHost>

If all went well, you should be able to access  your Tomcat server webapps on the regular HTTP port used by your Apache installation.

Cheers!

JSON – JavaScript Object Notation

Here’s another simple way to optimize code and network traffic. XML… by it’s very definition is wasteful as it exchanges size for readability. JSON is a different approach that maintains readability as well as reduces the size to a minimum. This method can be used in any client-server environment, not just between a browser and server.

JSON (JavaScript Object Notation) is a lightweight data-interchange format that is easy for humans to and machines to read/parse and write/generate. JSON is a text format that is completely language independent but uses conventions that are familiar to most programmers familiar with OO languages.

JSON is built on two structures:

  • A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array.
  • An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.

Key Concepts:

  • An object is an unordered set of name/value pairs. An object begins with { (left brace) and ends with } (right brace). Each name is followed by : (colon) and the name/value pairs are separated by , (comma).
  • An array is an ordered collection of values. An array begins with [ (left bracket) and ends with ] (right bracket). Values are separated by , (comma).
  • A value can be a string in double quotes, or a number, or true or false or null, or an object or an array. These structures can be nested.
  • A string is a collection of zero or more Unicode characters, wrapped in double quotes, using backslash escapes. A character is represented as a single character string. A string is very much like a C or Java string.
  • A number is very much like a C or Java number, except that the octal and hexadecimal formats are not used.

REFERENCES:

Cheers!

Improving network performance with server side HTTP Compression

I spend a lot of my time tweaking the performance of web applications, in addition to optimizing code it’s also necessary to verify that your server settings are also optimized for network performance to reduce bandwidth usage and thus client response times.

NOTE: This is a tradeoff between CPU and network performance, it works by compressing the content on the server just before it is sent over the wire…. when the client receives it, it then also spends some of it’s resources to decompress the content.

The Apache HTTP server provided mod_deflate (for 2.x) or mod_gzip (for 1.3).

Here’s a quick start as well as a few references:

In httpd.conf:

1. Uncomment the module:

LoadModule deflate_module modules/mod_deflate.so

2. Add the following (modify if required):

<IfModule deflate_module>
#AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript
AddOutputFilterByType DEFLATE text/*
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
#AddOutputFilterByType DEFLATE application/x-javascript

<Location />
# Insert filter
SetOutputFilter DEFLATE

# Netscape 4.x has some problems…
BrowserMatch ^Mozilla/4 gzip-only-text/html

# Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4\.0[678] no-gzip

# MSIE masquerades as Netscape, but it is fine
# BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

# NOTE: Due to a bug in mod_setenvif up to Apache 2.0.48
# the above regex won’t work. You can use the following
# workaround to get the desired effect:
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

# Don’t compress images or ZIP/GZ/7Z
SetEnvIfNoCase Request_URI \
\.(?:gif|jpe?g|png|zip|7z|gz)$ no-gzip dont-vary

# Make sure proxies don’t deliver the wrong content
Header append Vary User-Agent env=!dont-vary
</Location>
</IfModule>

REFERENCES:

Cheers!

Enerjy plugin for Eclipse IDE

I’ve previously written on the benefits of static analysis of java code with the use of PMD and FindBugs.  I was recently turned on to a new tool that performs similar testing of code within the Eclipse IDE.

When I first found this tool it was free, since that time it’s come out of beta and is now a little costly, but it may still be worth it due to the functionality it provides.

The premise of this tool is a little different than other ones, while it covers much of the same need, it also performs many tests that I would previously use CheckStyle to do.  This only provides them at runtime and in a common manner within the IDE.

REFERENCES:

Cheers! 

OpenDNS

I’ve used EveryDNS (free service) for years to host my DNS services.    Recently I found that they now offer public DNS service for lookups as OpenDNS.   While I still run my own private DNS server for caching and various private addresses.  I now do a simple forward lookup to their servers to gain the extra services they provide… notably Phishing  and typo protection.

Setup is very simple for most users, and even a non-technical person should have no problems following their installation instructions for a single computer/device or an entire network.
Happy networking!!!

Proxy Auto-config

There comes a need for many organizations (or individuals) to establish proxy servers on their network. This is usually done for reasons of security or network topology. While the use of proxy servers simpifies some aspects of networking, it comes at the cost of maintaining the browser configuration of every network device (usually browsers). Netscape provided a mechanism to automate much of this problem by allowing the browser to retrieve the proxy configuration from a centrally managed server.

The proxy autoconfig file is written in JavaScript, it should be a separate file that has the proper filename extension and MIME type when provided from a webserver.

The file must define the function:

function FindProxyForURL(url, host)
{
...
}

1. FILENAME EXTENSION:
.pac

2. MIME TYPE:
application/x-ns-proxy-autoconfig

3. REFERENCES:

4. ApacheHTTP config.

Add the following to the httpd.conf file:

Redirect permanent /wpad.dat {yourdomain}/proxy.pac
AddType application/x-ns-proxy-autoconfig .pac

5. EXAMPLE:

/* 'proxy.pac' - This is the main function called by any browser */
function FindProxyForURL(url, host)
{

if (isPlainHostName(host) || // No Proxy for Non FQDN names
shExpMatch(host, “*.localnet”) || // No Proxy for internal network
shExpMatch(host, “127.0.0.1”) || // No Proxy for LocalHost
shExpMatch(host, “localhost”) || // No Proxy for LocalHost
shExpMatch(host, “mailhost”) || // No Proxy for MailHost
dnsDomainIs(host, “giantgeek.com”) || // No Proxy
return “DIRECT”;

else {
return “PROXY proxy.giantgeek.com:8080; PROXY proxy.giantgeek.com:8090; PROXY proxy2.giantgeek.com:8080”;

} //End else

} // End function FindProxyForUrl

NOTE: Also see my ‘WPAD’ blog entry.