We Keep Coding

How to speed up application running time in IE7?

We did an application using rails(2.3.4), ruby(1.8.2), MySQL, JavaScript, jQuery. This is handling minimum 6000 records. We showing those records detail in table. In the beginning Mozilla taking 2m to load the whole page. We did the cache, eager loading, indexes. Now Mozilla taking 25s to load the whole page. But IE-7 taking 1m30s to load the page.
We don't know why IE-7 taking too much of time.
Any one can help us to detect the running time in IE-7 and tell your guidelines to improve performance in IE-7.
Any add-on is available in IE7 to see the AJAX request time taken as like Firebug add on.

Use partial loading. Don't try to load the 6000 records at once, load them in smaller segments, when needed. Even 5 second loading is too long, not to mention the 25 seconds or 1m 30s.
Oh and yeah, IE 7's JS engine just sucks.

From Table Rendering - IE Blog:
When Internet Explorer encounters a table it measures all the content
of the table before rendering so that it knows what the widths of the
columns are to render the content correctly. On the other hand Firefox
uses a different algorithm in that it renders the table contents
progressively before it has all been passed.
You can improve performance by setting the CSS rule table-layout: fixed. The renderer will then calculate the layout based on the first row of the table.

IE7 is slow, there's no real way of getting around that basic fact.
I'm going to answer your second question (about debugging tools for IE7) because I don't think I can give any useful advice on your main point about actually speeding up IE7.
Any add-on is available in IE7 to see the AJAX request time taken as like Firebug add on.
The first thing to try is IE8 or IE9. These browsers have a Developer Tools window (accessible via F12, just like Firebug). It isn't as good as Firebug, but it does do quite a bit, and it is a useful debugging tool. It also has a feature which allows you to switch the browser into IE7-compatibility mode. The idea is that you can test IE7 from the relative comforts of IE8 or IE9.
The down side is that it isn't actually IE7. It's just a pretend ID7, and not a particularly good one at that. It may or may not replicate the speed issues you're having with IE7, and it certainly has known bugs and quirks of its own which don't appear either in a real IE7 or in IE8 in normal mode.
But all that said, it might be good enough for you to run some tests and get some answers.
A second suggestion might be to try Firebug Lite. This is a cut-down version of Firebug which runs as a bookmarklet in any browser (but generally IE). It doesn't have all the features of the full version of Firebug, because there's only so much you can do without writing a browser plug-in, but it does do a surprising amount. If nothing else, it does give you the console functions, which can be a life saver for debugging.
I hope that helps.

'Firebug' for iPad

I have a site that uses javascript to launch a css overlay of a google map (see [link deleted because I can only have one at a time] and click the 'Enlarge' button under the map).
This doesn't work on the ipad. I believe it has something to do with this not being a link, but using the jquery live('click',.. approach. I need to fix this but I'm new to using the ipad and I don't even know how to step through the javascript to see what the problem is.
What kind of development tools are available for testing on the ipad?
Edit: My mistake. The link above works fine in the iPad - no problem bringing up the larger map. However the sister site http://lowes-realty.com/Stateline-Plaza_Enfield_CT-11.aspx is not working. What I need is a development system that will let me look at them both on the ipad (I really want to avoid emulating or spoofing).

Have you tried firebug lite?
http://getfirebug.com/firebuglite#Install
Have you tested this in google chrome? As google chrome is a webkit browser, you may be able to do the majority of your debugging in chrome, and iron out smaller issues on the iPad itself.
Edit:
Removed unnecessary comment about iPad.

The problem ended up being that I had a javascript error that aborted the script before I ever got to the jQuery code. Once I fixed that, I was able to use jQuery without making any special modifications for the ipad - awesome! I did not have to do anything with the swipe or tap events (sweet!).
However I was not able to get any kind of javascript debugger; I had to work this one out for myself. As of Nov '09 firebug lite crashed the ipad for me and there don't seem to be any developer tools build for testing the ipad. I tried several sites that claimed to perform the same way the ipad does in your browser and not one of them held water.
I have no reason to believe that there is a good option for debugging a site on an ipad (yet).
Edit A Year Later... I'm still looking for a good way to develop on an iPad. I just got Adobe Shadow up and running - it's not actually a useful tool, but there is potential (http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow). Right now (3-29-12) the code inspector is essentially non-functional (cannot view inherited styles, can't view elements without expanding the DOM from the body element, no javascript debugging, and much more).
I know that sounds hopeless, but it has one thing going for it that nothing else I'm aware of does: Shadow works with all existing mobile devices and its code inspector is independent of device and browser. So although the inspector sucks spectacularly right now, once they build some functionality into it Shadow could be a good solution. From their site:
Shadow will be updated regularly to stay ahead of web standards, web
browser updates and support for new mobile devices entering the
market, while incorporating user feedback to provide the best
functionality and experience possible.
~ http://labs.adobe.com/technologies/shadow/

I think the problem is that on the iPhone / iPad there are no clicks events generated but instead touch events (swipe, tap).
You can use something like jQTouch (you can start reading here Getting started and then proceed to callback events hint: tap==click).
If you have more to adapt you can also look at (and wait for a stable release) of jQuery Mobile

weinre lets you remotely attach a WebKit inspector (the built-in Dev Tools you use on desktop browsers) to a page running on your mobile device (iPad/iPhone/iPod/Android/BlackBerry 6/webOS) over WiFi.
http://phonegap.github.com/weinre/images/weinre-demo.jpg
JavaScript debugging is limited to console.logs, but it's better than nothing.
If you have an ICS device, Chrome Mobile lets you remotely attach a full-featured Inspector (with full JS debugging/breakpoints) over USB. I've been thoroughly thrilled using this tool with my Galaxy Nexus.
(source: google.com)

Internet Explorer 8 in Windows XP

I have witnessed how Internet Explorer 8 (IE8) is in Windows XP and how it is in Windows Vista/7. Quite strangely, IE8 seems to be acting like IE7 for certain aspects of CSS and JavaScript (maybe for other elements too). Am I the one who is seeing things? Otherwise, if this is true why is this happening and what are the major differences in IE8 for Windows XP and IE8 for Windows Vista/7?

Make sure that your IE8 that's acting like IE7 hasn't been flipped into "Compatibility Mode". There's a switch on the UI that lets the user flip it into a "behave kind-of like IE7" setting. I just found this out today and it really pissed me off. (I knew that IE8 could do that, but I didn't know it was under user control!)
Here's a trick: take a page that you know should put it into IE8 standards mode, bring it up in your weird-acting browser, and then launch the developer tools and see what it says the page mode is at the top of that window.

The difference between IE8 on XP vs. Vista vs. Windows 7 should be minimal.
The majority of the differences are with the chrome (e.g. the styling of the scrollbars or the arrow on a drop down list).
That said, IE8 does have something called Compatibility Mode that when turned on, causes IE8 to render content as if it were IE7. It's the broken page icon at the right of the address bar. When depressed (grayish), it is turned on, and the site is rendering in "IE7 Mode".
Since you have to have at least 2 machines to have made the comparison in the original question, you may want to verify they are both viewing sites in the same mode.
Finally, the visual quality of the site may be different if one of the machines is setup with "Clear Type" turned on. (its a matter of personal taste, but essentially with it turned on, Windows attempts to anti-alias text to "smooth it out" at the sub-pixel level) This is both a Windows setting and an IE setting (both can be changed independently) you may want to confirm that both machines are setup the way you like.

Sorry, I am unsure how I can add comment yet, so I am doing this as an answer.
IE8 will render HTML with compatibility mode when it comes from the intranet zone.
I guess what I happen is that, in Vista/7 intranet mode is turn off by default. But it is on in XP. So the browsers could be running in IE8 mode in vista/7 but IE7 mode in XP.
See Controlling Default Rendering section in the following URL.
http://msdn.microsoft.com/en-us/library/cc288325%28VS.85%29.aspx
Also take a look at the Specifying Document Compatibility Modes section to see if you can force the page to run in IE8 mode, it might help to solve your problem.

What is the most stable modal dialog implementation across browsers to use from javascript for a web app?

I'm using a lot of JQuery in a web application that I am building for a client and I want to find an javascript implementation of a modal dialog that is reasonably stable across the following browser set.
IE 7+
FF 2+
Chrome and Safari
I've tried a couple of jQuery plugins but there always seems to be artifacts in one of these browsers.
--- Edit
jqModal seems to be more stable but I have an issue in IE7 where the dialog immediately disappears after popping up. I suspect a js event isn't being canceled or something. I'll have a bit more of a play.

I used jqModal few times and I'm very satisfied. It is pretty configurable yet very light weight.

Have you tried YUI? I'm not sure what the support is for Chrome but I've had good luck with it for IE and Firefox and allegedly it works with Safari.

We currently use BlockUI. It's awesome, in word. Can be styled via css (of course), blocks any element and seems stable, certainly in block IE and Firefox....
If you need a hand with it, post and I'll lend a hand...
http://www.malsup.com/jquery/block/

I went through a similar exercise, tried most of the plugins I could find. I used YUI for quite a while with good results; the only issue I ran into was resizing centered modals, which is quite an obscure use case.
I ended up with http://dev.iceburg.net/jquery/jqModal/ , I'm pretty happy with it.

What are the quickest and easiest ways to ensure existing web pages display well on mobile platforms?

The pages in question contain a lot of javascript and CSS. How well are these supported by mobile platforms generally?
Is there a browser emulator (or equivalent tool) to assist testing?

Opera has an option to view pages as through a mobile device. I've found it useful in the past.

I can tell you that Apple's Mobile Safari on the iPhone renders Stack Overflow perfectly, which I find rather amazing.
This is a site for programmers, not average users, so we accepted a lot of JavaScript dependencies.
I do wish more mobile devices had browsers as powerful as Mobile Safari. I hear good things about Opera Mini as well.

One example:
The standard BlackBerry browser on my BlackBerry 8130 (Pearl) seems to ignore both CSS and JavaScript when loading my home page.
I also installed Opera Mobile on this device, which renders the CSS but not my jQuery hover effects. It does understand some jQuery - for example, I have a form validation that does a show() of error messages if validation fails. That works in Opera, although without the animation effect.
The safest thing to do for mobile browsers is to design pages that degrade gracefully without JS or CSS. It's up to you whether that's worth the effort or not.
In a few years, hopefully the only rendering differences will be the screen size limits of the phones.

You can install Opera Mini on an emulator like the Java WTK and test mobile rendering on a PC. One drawback is that Opera Mini still works through a proxy, so debugging local files/sites won't work - you have to upload your site to a world-accessible server.
Just google it.

It depends entirely on the phone. If you want to support every single device out there, don't even bother with CSS or JavaScript since neither will work (or will do something completely non-standard) on 99% of devices. If you are only targeting high-end devices, like the iPhone or the latest Series 60 Nokias, you should be able to get away with limited JS and CSS.
Some browser emulators that I know of:
Openwave.
Nokia tools
There are many more manufacturers that simply do not have any tools at all (I dare you to try and find a developer site for LG) so you need to get access to the physical handsets if you want to be sure the site appears as it should.
DeviceAnywhere is a superb tool if you have the cash. It was extremely laggy the last time I used it about a year and a half ago. Plus it is pure Java so is a dog on any machine. But it is arguably the single best mobile development tool available and, believe you me, I've tried a lot.

BlackBerry devices with OS 4.5 or older will not handle Javascript or CSS very well, if at all. Devices with OS 4.6 and higher (Bold, Pearl Flip, Storm, etc..) come with a new rendering engine which has much better support for Javascript, DOM, and CSS. It's not perfect but it should render most pages quite well. You can download the BlackBerry simulator for these devices from their developer website and try it out. Since it runs the same code as on the actual device it's an excellent representation of what you can expect to see on-device.