I wrote a game application for Facebook. The application is not optimized by AJAX, so it makes many round trips to the server. I found that every time the application gets to the server when using Firefox, the processor load reaches 100% (this does not seem to be a problem in IE8). Since the application can hit the server several times per second, this leads to the fact that my application slows down the scan for FF.
I was told to write my application using AJAX, but I don't know enough about AJAX to do this. I would appreciate if someone could provide some links to resources that explain how to write an AJAX-based application (remember that I cannot use any of the JS frameworks because they are incompatible with Facebook JS) . I'm basically not sure what JS will look like for such an application (I know JS for AJAX, but I do not know how to implement the whole application in JS, since this is not my main language - I am primarily a backend developer).
Here is the link to my app:
Rails Dev Europe
Or if that doesn't work:
Rails across Europe
Thanks.
Here are the Firebug profiling results (sorry for 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 suspicious code:
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);
}
, . , , .