为什么我的应用程序最大化了Firefox中的CPU使用率？

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.

我为Facebook写了一个游戏应用程序。该应用程序不是AJAX优化的，所以它进行了很多往返服务器。我发现每次应用程序在使用Firefox时都会点击服务器，CPU使用率会上升到100％（这在IE8中似乎不是问题）。由于应用程序可以每秒多次访问服务器，这导致我的应用程序在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).

我被告知使用AJAX编写我的应用程序，但我不太了解AJAX这样做。如果有人可以提供一些解释如何编写基于AJAX的应用程序的资源（请记住，我不能使用任何JS框架，因为它们与Facebook JS不兼容），我将不胜感激。我几乎不确定JS对于这样的应用程序会是什么样子（我知道JS for AJAX，但我不知道如何在JS中实现整个应用程序，因为它不是我的主要语言 - 我主要是后端开发人员）。

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

这是我的应用程序的链接：Rails Across Europe Dev

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

或者，如果这不起作用：Rails穿越欧洲直播

Thanks.

谢谢。

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

以下是Firebug探查器结果（抱歉格式化）：

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.

对于在屏幕上绘制的每个像素调用此方法。为诸如轨道，城市标记和火车标记之类的对象绘制像素。

2 个解决方案

#1

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

首先，尝试使用Firebug Profiler来确定Firefox中的问题所在，没有首次分析就没有必要开始任何优化。

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

您使用什么类型的Ajax请求以及您发送的数据格式是什么？

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.

一个常见的性能问题是在浏览器中解析XML是最慢的方法之一 - 您最好使用JSON。

#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.
不要使用setClassName和setStyle - 只需使用setStyle - 在大多数情况下它更快。
Store the element 'map' as a global/member variable - don't re-find it on every call to PlotPixel.
将元素“map”存储为全局/成员变量 - 不要在每次调用PlotPixel时重新找到它。

#1