Javascript ‘Response Time’ measurement (latency)

Here’s another ‘fun’ trick. When you build complex web applications, performance metrics start to become an issue. Unfortunately, web tools for this are not typically available within the browser itself and ‘testers’ often rely of such non-technical solutions as stop-watch timing. Not only is this time consuming, but it is nearly impossible to reproduce as the ‘time’ includes the hand-eye coordination of the person using the watch.

In defense of the software itself, there are several Mozilla add-ons to help with this issue, but my solution is in your application code and as such can be enhanced to provide notification or logging with some additional work.

If you’ve ever used a 3270 Emulator (Mainframe “Green Screen”) you’re probably familiar with seeing this data as most 3270 clients expose it somewhere on the screen.

The trouble here is that there is no good API to do this, and no javascript variables are persisted across page loads. (cookies would be overkill). What we’re left with is the browser window-name itself, while it’s normally used when naming ‘popup’ windows and is not visible directly to the user, it provides a ‘safe’ place to store this transient data between pages.
When leaving a page we store the current time, to be sure that we can find the correct data in the window name we use unique prefix and suffix values and add the current name so that it can be restored later.

When the new page is loaded we have to compare the current time with the stored time, then we have to be sure to restore the window ‘name’ as can’t be sure about what other reason it may be named, and we don’t want to interfere.

NOTE: If you also have access to the server code (PHP or Servlet for example) or can wrap calls to external systems like databases, you can make this much more granular by including those times. In that case you could report total time, extract database time, then extract servlet time, then ‘deduce’ network latency itself! This goes a long way when troubleshooting vague user experiences when they indicate that the “site is slow” as you can now pinpoint the problem area(s) to focus on.

WARNING: For Mozilla/Firefox the default security settings prevent JavaScript from modifying the ‘window status’ used in the example code. In a real implementation you might consider using DHTML to insert the output somewhere else. Otherwise changing Mozilla Firefox 2.x’s settings is found at Tools, Options, Content Tab, Advanced JavaScript settings.

<html>
<head>
<script>
var build=’GiantGeek Example’; // you could put build label information here 🙂
var PRE=”MMSpre”;
var SUF=”MMSsuf”;

function xload(){
var tim=grvGetDuration();
build=build + tim;
grvWindowStatus(build);
}
function xclose(){
grvWindowStatus(”);
}
function xlinkObj(obj,url){ // this is for all valid links
grvSetTimeclean();
window.location.replace(uniqueUrl(url)); // ‘replace’ has side-effect of ‘restricting’ back-button, or ‘location’
return false;
}
function grvMillis(){
return new Date().getTime();
}
function grvSetTimeclean(){
var dummy=grvGetTimeclean(); // get any remainder (dupes?)
var x=grvGetName() + grvMms();
grvSetName(x);
}
function grvMms(){
return PRE + grvMillis() + SUF;
}
function grvGetDuration(){
var rc=”;
var old=grvGetTimeclean();
if(old!=”){
rc=” [” + (grvMillis() – old)/1000 + “]”;
}
return rc;
}
function grvGetTimeclean(){
var x=grvGetName();
var pre = x.indexOf(PRE);
var suf = x.indexOf(SUF);
var rc=”;
if((pre >= 0) && (suf > pre)){
rc=x.substring(pre+PRE.length,suf);
// get the garbage in the name (around mms)
var p=x.substring(0,pre);
//var s = x.substr(suf+SUF.length);
//assemble new name (without mms)!
grvSetName(p);
}
if(pre==0){
grvSetName(”);
}
return rc;
}
function grvGetName(){
var rc = window.name;
if(rc==undefined){rc=”};
return rc;
}
function grvSetName(x){
window.name=x;
}
function grvWindowStatus(txt){
window.defaultStatus=txt;
}
function uniqueUrl(x){ // this adds a timestamp to URLs
var mms = grvMillis();
var delim = “?”;
if(x.indexOf(“?”) >=0) { delim = “&”; }
return x + delim + ‘time=’ + mms;
}
</script>
</head>
<body onunload=”xclose();” onload=”xload();”>
</body>
</html>

Adding Support for ‘disabled’ OPTION tags in MSIE

This is a very annoying bug/oversight in MSIE (including the recently released MSIE7!).

For some reason, Microsoft didn’t implement the ‘disabled’ attribute on <option> tags.
All other modern (even the old Netscape 4.x) browsers support this, why would they not do the same.
This is probably for the same reason that all versions of MSIE (prior to MSIE7) left the rendering of the SELECT tag to the operating system itself, above the browser HTML.
Thankfully, you can still access the attribute on the DOM element with javascript!

My solution has evolved over time, here’s the current release code.

To emulate this behavior in MSIE, you’ve got several different challenges to overcome.

  1. You must ‘persist’ the current value of the SELECT so that you can ‘restore’ it when the user chooses a disabled field, I do this during the onload event.
  2. When the ‘onchange’ event for the SELECT tag is invoked, the currently selected OPTION’s attributes must be read and checked.
  3. If the selected OPTION is ‘disabled’, then the previous value must be restored.
  • As this solution only stores one value per SELECT, the ‘multiple’ SELECT is not currently supported.
  • In the future I’ll probably do some ‘event injection’ so that the HTML itself is cleaner. Problem is that in more complex solutions like ‘dependent dropdowns’ this becomes tricky.
  • The [if IE] ‘comment’ is critical as it is conditional logic supported only in MSIE and simplifies what was previously done via various ‘browser-sniffing’ tricks.
  • The example code in this example excludes the CDATA escapes and several tags required for valid XHTML for brevity.
  • FYI, the example also contains the MSIE background-image cache fix discussed in a previous post.

<!DOCTYPE >
<html>
<head>
<script type=”text/javascript”>
var isMSIE=false;
<!–[if IE]>
<script type=”text/javascript”>
isMSIE=true;
</script>
<script src=”/js/grv-msie-hacks.js” type=”text/javascript”></script>
<![endif]–>

<script type=”text/javascript”>
function xload(){
if(isMSIE){
grvMsieInitHacks();
}
}
function xchange(obj){
// note: javascript emulation of <option disabled…> (for MSIE)
if(isMSIE){
grvMsieSelectFix_restore(obj);
}
}
</script>
</head>

<body onload=”xload();”>

<form action=”#” method=”GET”>
<select name=”s” id=”s” size=”1″ onchange=”xchange(this);”>
<option value=”n1″>Normal1</option>
<option value=”di” disabled=”disabled”>Dis</option>
<option value=”n1″>Normal2</option>
</select>
</form>
</body>
</html>

JavaScript file (grv-msie-hacks.js):

/*
* Code library to add several ‘broken’ features in MSIE 6 and 7
* @version $Id: $
*/
function grvMsieInitHacks(){
grvMsieCacheFix();
grvMsieSelectFix_init()
}
function grvMsieCacheFix(){
try{
document.execCommand(“BackgroundImageCache”,false,true);
}catch(e)
{}
}
/* Added new functions to support <option disabled…> emulation
*
* First part, necessary for <body onLoad…>
* builds array of all initial selections for <select>s on page (for LT or EQ MSIE7)
* WAS: disabledOptionEmulation();
*/
function grvMsieSelectFix_init() {
if (document.getElementsByTagName) {
var allSelects = document.getElementsByTagName(“select”); // build array of all <select> tags
if (allSelects.length > 0) { // if array has values…
window.allSelectsCurrentIndex = new Array(); // new array to hold initial selections
for (var i=0, individualSelect; individualSelect = allSelects[i]; i++) { // crawl through all <select> tags
individualSelect.onfocus = function(){ window.allSelectsCurrentIndex[this.id] = this.selectedIndex; } // fill array with selectedIndex values
}
}
}
}

/* companion code for grvMsieSelectFix_init()
* resets <option> selection if disabled to last good selection (for LT or EQ MSIE7)
* WAS: restoreSelection(inOptionChoice)
*/
function grvMsieSelectFix_restore(inOptionChoice) {
if (inOptionChoice.options[inOptionChoice.selectedIndex].disabled){
// if new choice is disabled…
inOptionChoice.selectedIndex = window.allSelectsCurrentIndex[inOptionChoice.id]; // deny selection, revert back to last ‘known good’ choice (typically, the initial selection at page load)
} else { // if new choice isn’t disabled…
window.allSelectsCurrentIndex[inOptionChoice.id] = inOptionChoice.selectedIndex; // update array so last ‘known good’ choice is now the latest user selection
}
}

Hopefully, Microsoft will get around to fixing this correctly some day… maybe for MSIE8!

Private Caching/Relay DNS Server

Since I’ve run a few small websites (like this one) out of my home for years, I’ve found it useful to run a DNS server inside of my firewall. Not only does this make it easier to maintain the websites, but it allows me to lock down security and increase performance of many of my applications.

I run a the following services that use DNS:

  • Apache JAMES – mail server that does lookups to send email and filter inbound SPAM.
  • Analog – web server log analysis.
  • Apache HTTPD – web server, used to host websites, private domains used for internal purposes.

To make things more efficient, I currently have my DNS setup to forward all requests to OpenDNS, allowing for ‘adult’ website filters and analysis of DNS activity.

Some open-source/free DNS servers that I recommend:

Cheers!

Decompiling Java code

Occasionally, there comes a need to “look under the hood” of the code in a JAR file. While java is a compiled language, it isn’t quite machine code, but rather exists in a psuedo-code form to be used by the Java Virtual Machine’s JIT (Just in Time) compiler.

A lot can be learned from looking at other source code, unfortunately when using decompiled code you don’t get the original variable names or javadoc, but you can often better understand the API’s and performance issues in particular code.

I’m personally fond of DJ Decompiler, but I list several here for your use:

Cheers!

Java Code Coverage

In my “day job” I do lot’s of code reviews. I’m a big fan of Agile Programming and JUnits, recently I was introduced to the world of code coverage tools available (for free!) to Java developers.

IMHO, here’s the three front-runners.

Personally I prefer the Eclipse integration provided by ECLEMMA, but I agree that no one tool is ever ‘best’ for all scenarios.

Some background on this topic if you are interested in learning more:

Happy coding.

Microsoft Virtual PC

I happened to spend most of this week in an IBM class using VMWare for the training environment (Windows XP Pro hosted on a Windows 2000 machine). This got me wondering about the free systems offered by many providers.

Here’s a few quick thoughts on Microsoft‘s offering, which admittedly seems pretty good.

Their product overview shows that you can run most (all?) previous Microsoft Operating System’s (MS-DOS, Windows 95/98/Me/2000/XP/Vista… etc. ), even IBM’s OS/2 all on a single host machine with enough resources. Minimum usage per VM appears to be about 64MB RAM and 500MB disk space for the older OS’s, newer versions obviously requiring significantly more resources.

Since I’ve got most of these old OS installation disks in storage, I’ll give this a try and see how well it works. This may make for some interesting testing lab scenarios.

References:

MSIE Launch Browser Windows in a Separate Process…

This is often troublesome. and occasionally occurs in newer versions of MSIE. This option in MSIE4 and later specifies whether a new process is created for each instance of Internet Explorer that you start. With this setting disabled, all instances of Internet Explorer and Windows Explorer that you start are run in the same process. When you enable this setting, you can prevent one instance of Internet Explorer or Windows Explorer from effecting other instances if it stops responding (hangs); however, if you enable this setting, additional resources are consumed and Internet Explorer’s performance may be affected.

Generally, this option is available on the Internet Control Panel, Advanced tab, but sometimes it isn’t visible. If this is the case, a simple registry change can manually control it.

WARNING: this is a registry change, so please be careful!

  • HKEY_LOCAL_MACHINE/software/microsoft/windows/currentversion/explorer/BrowseNewProcess
  • HKEY_CURRENT_USER/software/microsoft/windows/currentversion/explorer/BrowseNewProcess

BrowseNewProcess = Yes

References:

Cheers.

Mozilla networking configuration

Here’s another, albeit awkward configuration change for Mozilla Firefox for networking.

Enter about:config in the URL of the browser and manipulate the following,  I’ve shown the defaults in parethesis to aid in reverting them if you encounter problems.

network.http.pipelining=true (def:false)
network.http.proxy.pipelining (def:false – only required if you use proxies that support)
network.http.pipelining.maxrequests=8 (def:4, max is 8)

References:

Cheers!

WOT – Website reputation

Previously I discussed the McAfee SiteAdvisor plugin. Another similar project is WOT.

The differences with it are as follows:

  1. Instead of a centralized service, WOT is democratic. As such, the result is based on the feedback of any user that takes the time to rate a given website.
  2. WOT is available for Firefox and MSIE.

Since this coexists well within the browser, there’s no reason you can’t use both!

References:

Happy surfing!

Business Jargon – aka Office speak for the cubicle constrained!

I saw this article today and realized just how much of this language has become my own…. I really need to just “get a life” 🙂

http://dumblittleman.blogspot.com/2007/01/business-jargon-dictionary.html

For more, see the following:

Like acronyms…. see these:

Personally, i’m into Demotivators….

Now get back to your cubicle and code, you hippie!