Some time ago, when I first saw the Google Talk gadget is being released, I got this crazy idea of embedding the gadget in Yahoo Messenger as a plugin.

Once logged in, the gadget was displayed just fine as a plugin, but if the user was not logged in, he’d be taken to the google login page. So I started hacking and chopping and after half hour I finally got this version working. Click here to download the plugin.

After downloading it, unzip it into the C:\Program Files\Yahoo!\Messenger\Plugin\Test\ContentTab\ folder. UPDATE: after unzipping, rename the folder to test.plugin (thanks Tudor) The final path should look like: C:\Program Files\Yahoo!\Messenger\Plugin\Test\ContentTab\test.yplugin\.

Restart Yahoo Messenger, log-in and select Actions -> Load Test Plug-in, and the Google login page will show up in the plug-ins area. You can select the “remember me” box, so that after restart you will be automatically logged in.

The plugin is quite simple: it contains one simple HTML file with some Google styles, and the HTML code for the login page. On page load - a request is made to http://www.google.com/ig to check if the user is already logged in. This is achieved by parsing the response and checking for “Sign out” string - which means the user is logged in.

Surprisingly, from all the Google pages, the http://www.google.com/ig page was the only one (after 4 or 5 unsuccessful attempts) that could give me an indicator on whether the user is logged in or not.

In case user is logged in, the page is redirected to the URL containing the embeddable flash gadget for Google Talk: http://talkgadget.google.com/talkgadget/popout.

Unfortunately, the administrators of Yahoo Messenger plug-ins at http://gallery.yahoo.com/messenger have rejected the application so far, so in order to use it, every time you start Yahoo Messenger, you need to select “Load Test Plug-in” to load this plugin.

Here are some images with the plugin:

And here’s the code for the plugin:

    <!--
<!–
        body,td,div,p,a,font,span {font-family: arial,sans-serif;}
        body {margin-top:2}.c {width:4; height: 4}
        body { background-color:#E8EEFA; }
        A:link {color:#0000cc; }
        A:visited { color:#551a8b; }
        A:active { color:#ff0000; }
        .form-noindent {background-color: #ffffff; border: #C3D9FF 1px solid}
        .gaia.le.lbl { font-family: Arial, Helvetica, sans-serif; font-size: smaller; }
        .gaia.le.fpwd { font-family: Arial, Helvetica, sans-serif; font-size: 70%; }
        .gaia.le.chusr { font-family: Arial, Helvetica, sans-serif; font-size: 70%; }
        .gaia.le.val { font-family: Arial, Helvetica, sans-serif; font-size: smaller; }
        .gaia.le.button { font-family: Arial, Helvetica, sans-serif; font-size: smaller; }
        .gaia.le.rem { font-family: Arial, Helvetica, sans-serif; font-size: smaller; }
        .gaia.captchahtml.desc { font-family: arial, sans-serif; font-size: smaller; }
        .gaia.captchahtml.cmt { font-family: arial, sans-serif; font-size: smaller; font-style: italic; }
        .body { margin-left: 3em;margin-right: 5em;font-family: arial,sans-serif; }
        div.errorbox-good {}
        div.errorbox-bad {}
        div.errormsg { color: red; font-size: smaller; font-family: arial,sans-serif;}
        font.errormsg { color: red; font-size: smaller; font-family: arial,sans-serif;}
        hr {border: 0;background-color:#DDDDDD;height: 1px;width: 100%;text-align: left;margin: 5px;}
         div.errormsg { color: red; font-size: smaller; font-family:arial,sans-serif; }
         font.errormsg { color: red; font-size: smaller; font-family:arial,sans-serif; }
        .gaia.le.lbl { font-family: Arial, Helvetica, sans-serif; font-size: smaller; }
        .gaia.le.fpwd { font-family: Arial, Helvetica, sans-serif; font-size: 70%; }
        .gaia.le.chusr { font-family: Arial, Helvetica, sans-serif; font-size: 70%; }
        .gaia.le.val { font-family: Arial, Helvetica, sans-serif; font-size: smaller; }
        .gaia.le.button { font-family: Arial, Helvetica, sans-serif; font-size: smaller; }
        .gaia.le.rem { font-family: Arial, Helvetica, sans-serif; font-size: smaller; }
        .gaia.captchahtml.desc { font-family: arial, sans-serif; font-size: smaller; }
        .gaia.captchahtml.cmt { font-family: arial, sans-serif; font-size: smaller; font-style: italic; }
    –>
-->
    <script type="text/javascript"><!--mce:0--></script>
<form id="gaia_loginform" action="https://www.google.com/accounts/ServiceLoginAuth" method="post">
<div class="loginBox">
<table id="gaia_table" style="display:none" border="0" cellspacing="0" align="center">
<tbody>
<tr>
<td colspan="2">
                        <span>
                                    <img src="https://www.google.com/accounts/google_transparent.gif" alt="Google" />
                                </span></td>
<td valign="middle">
                                    <span>
                    </span></td>
</tr>
<tr>
<td>
<div>
                            <span class="gaia le lbl">Email:</span></div></td>
<td>
<input id="continue" name="continue" type="hidden" value="http://talkgadget.google.com/talkgadget/popout" />
<input id="service" name="service" type="hidden" value="talk" />
<input id="skipvpage" name="skipvpage" type="hidden" value="true" />
<input name="GALX" type="hidden" value="aa3Jml3aMHk" />
<input id="Email" class="’gaia" name="Email" size="18" type="text" /></td>
</tr>
<tr>
<td></td>
<td align="left"></td>
</tr>
<tr>
<td align="right">
                        <span class="gaia le lbl"> Password: </span></td>
<td>
<input id="Passwd" name="Passwd" size="18" type="password" /></td>
</tr>
<tr>
<td></td>
<td align="left"></td>
</tr>
<tr>
<td align="right" valign="top">
<input id="PersistentCookie" checked="’checked’/" name="PersistentCookie" type="checkbox" value="yes" />
<input name="’rmShown’" type="hidden" value="1?/&gt;
                    &lt;/td&gt;
&lt;td&gt;
                        &lt;span class=" />Remember me on this computer.</td>
</tr>
<tr>
<td></td>
<td align="left">
<input class="gaia le button" name="signIn" type="submit" value="Sign in" /></td>
</tr>
</tbody></table>
</div>
</form>

Share/Save

While optimizing some HTML code, I recently came across the question: when rendering anchors, which of the href and onclick are rendered quicker by the browsers. To find out, I created two files, each one with 330.480 anchors, one only with onclick event: onclick=’vc(\’4280220\’)’ and another one only with hrefs: href=’javascript:vc(\’4280220\’)’.

The files have over 17 and 14 megs (the one with hrefs being larger due to more text). Here’s the beginning of each files:

• href:

 
<!--
.td {text-decoration:none;color:black;}
-->
 
        <a class="”td”" href="”javascript:vc(’4280220">-</a>
        <a class="”td”" href="”javascript:vc(’4280220">-</a>
        … 330.478 more

• onclick:

 
<!--
.td {text-decoration:none;color:black;}
-->
 
        <a class="td" onclick="vc(’4280220')">-</a>
        <a class="td" onclick="vc(’4280220')">-</a>
        … 330.478 more

The “td” class used is necessary since rendering the anchors with href results in underlining the text, thus consuming more CPU power for drawing the page, than the anchors with onclick which do not get underlined.

The environment on which the test was performed is a Windows XP SP2 machine with Multiple IEs for testing on both IE7 and IE6 as well as Firefox 2, Firefox 3, Chrome, Opera and Safari. The rendering time on one browser is not important (which is why I don’t mention hardware indicators), but the actual time comparison between all the browsers. Let’s see the results first:

With regards to the main purpose of this test: href vs onclick, it seems that for “small” HTML optimizations, the rendering times are about the same (keep in mind we’re talking about over 330.000 anchors - for several thousands, the difference is imperceptible).

If you however are a hardcore programmer who needs those extra seconds, Internet Explorer is the only one that renders href-s much quicker than onclick-s. All the other browsers render onclick-s faster than href-s. If your website will be accessed by a wide audience of users, given that IE has still the biggest share of the browser market, you may want to render your anchors using href-s.

Apart from the href-onclick comparison, there are some surprises in this graph. For example FF3, although much faster than FF2 or IE at rendering complex pages and javascript, performs the slowest of all browsers. Opera is the fastest browser, while Firefox 2 does almost the same job as Internet Explorer 7.

IE6 renders the page with href-s incredibly faster, but in the same time, it took more than 5.5 minutes to render the page with onclick event (I eventually killed the process after 5.5 minutes). This may be due to Multiple IEs, so the second result for IE6 is questionable.

And the newest kid in the block, Chrome behaves better than Firefox 3, but much slower than Firefox 2.

While this test may give a slight idea of how fast these browsers performs with this specific test case, it is not relevant for regular HTML pages filled with various elements (div-s, span-s, br-s, p-s, etc). For those pages, as probably everyone has noticed, FF3 renders the page much faster than IE7, or IE6 or FF2.

Blogged with Flock

Tags: href, onclick, IE6, IE7, FF3, FF2, Chrome, Opera, Safari

Share/Save