Why is my app maxing out CPU usage in Firefox?

Question

I have written a game app for Facebook. The app is not AJAX optimized, so it makes a lot of round trips to the server. I have discovered that every time the app hits the server while using Firefox, the CPU usage goes up to 100% (this does not appear to be a problem in IE8). Since the app can hit the server several times a second, this is causing my app to slow to a crawl on FF.

I was told to write my app using AJAX, but I don't know enough about AJAX to do that. I would appreciate it if someone could provide some links to resources that explain how to write an AJAX-based app (bear in mind that I cannot use any of the JS frameworks because they are incompatible with Facebook JS). I am mostly unsure of what the JS would look like for such an app (I know the JS for AJAX, but I don't know how to implement an entire app in JS since it is not my primary language -- I'm primarily a backend developer).

Here is the link to my app: Rails Across Europe Dev

Or if that doesn't work: Rails Across Europe Live

Thanks.

Here are the Firebug profiler results (sorry about the formatting):

insertBefore()  2067 25.21% 557.4ms 579.268ms 0.28ms 0.027ms 6.08ms awi4qxh2.js (line 70)
set_style() 7332 13.58% 300.243ms 327.795ms 0.045ms 0.028ms 3.594ms awi4qxh2.js (line 100)
getScrollLeft() 1 4.37% 96.679ms 96.683ms 96.683ms 96.683ms 96.683ms awi4qxh2.js (line 138)
setLocation()   2063 4.12% 91.078ms 418.88ms 0.203ms 0.143ms 6.142ms awi4qxh2.js (line 35)
getSrc()    109 3.63% 80.191ms 93.877ms 0.861ms 0.627ms 18.045ms awi4qxh2.js (line 112)
to_array    2154 2.99% 66.045ms 66.045ms 0.031ms 0.005ms 0.268ms dtem5ozr.js (line 41)
get_data()  2064 2.8% 61.985ms 267.492ms 0.13ms 0.093ms 6.067ms awi4qxh2.js (line 56)
getStyle()  7332 2.69% 59.513ms 413.755ms 0.056ms 0.039ms 3.61ms awi4qxh2.js (line 102)
a85572859349_PlotPixel  1778 2.57% 56.846ms 1399.973ms 0.787ms 0.554ms 7.141ms fbml_sta...letype=js (line 73)
fbjs_dom    2068 2.25% 49.681ms 49.681ms 0.024ms 0.017ms 2.019ms awi4qxh2.js (line 53)
render()    13638 2.2% 48.719ms 48.719ms 0.004ms 0.002ms 0.061ms awi4qxh2.js (line 58)
inform()    89 1.99% 44.034ms 215.767ms 2.424ms 0.02ms 75.099ms 3o16hflk.js (line 42)

getRootElement()    1889 1.94% 42.983ms 68.351ms 0.036ms 0.03ms 0.67ms awi4qxh2.js (line 33)
get()   3955 1.77% 39.252ms 39.252ms 0.01ms 0.007ms 0.077ms awi4qxh2.js (line 320)
get_instance()  3952 1.69% 37.4ms 304.892ms 0.077ms 0.003ms 6.082ms awi4qxh2.js (line 60)
set_interval()  9567 1.69% 37.279ms 37.279ms 0.004ms 0.003ms 2.162ms awi4qxh2.js (line 30)
tryElement()    2203 1.68% 37.201ms 46.728ms 0.021ms 0.007ms 5.858ms dtem5ozr.js (line 397)
getTabIndex()   1 1.54% 34.119ms 34.123ms 34.123ms 34.123ms 34.123ms awi4qxh2.js (line 140)
getClassName()  1889 1.48% 32.773ms 40.625ms 0.022ms 0.017ms 0.091ms awi4qxh2.js (line 116)
_setMaxWidth()  3 1.48% 32.741ms 37.038ms 12.346ms 1.635ms 32.996ms bhqza800.js (line 614)

Here is some code that might be suspect:

function PlotPixel(x, y, c) {
    var pixel = document.createElement('div');
    pixel.setClassName('Ink');
    pixel.setStyle('borderTopColor', c);
    pixel.setStyle('backgroundColor', c);
    pixel.setStyle('left', x + 'px');
    pixel.setStyle('top', y + 'px');
    var parentObj = document.getElementById('map');
    parentObj.appendChild(pixel);
}

This gets called for every pixel plotted on the screen. Pixels are plotted for objects such as track, city markers and train markers.

Answer 1

Firstly, try the Firebug Profiler to pinpoint where the problem is in Firefox, there is no point beginning any optimizations without first profiling.

What type of Ajax request are you using and what data format are you sending in?

Its hard to suggest any changes without knowing this.

One common performance problem is that parsing XML in browsers is one of the slowest methods - you may be better off using JSON.

Answer 2

How many pixels do you update on redraw? You need to seriously think about your whole algorithm - maybe only redraw sections.

I can only help with a few low-level optimization recommendations:

• Don't use setClassName and setStyle - just use setStyle - its faster for most cases.
• Store the element 'map' as a global/member variable - don't re-find it on every call to PlotPixel.