Question

我为Facebook编写了一款游戏应用程序。该应用程序不是AJAX优化，所以它进行了很多往返服务器。我发现每次应用程序在使用Firefox时都会点击服务器，CPU使用率会上升到100％（这在IE8中似乎不是问题）。由于应用程序可以每秒多次点击服务器，这导致我的应用程序在FF上慢慢爬行。

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

以下是我的应用的链接： Rails Across Europe Dev

或者，如果这不起作用： Rails Across Europe Live

感谢。

以下是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)

以下是一些可能可疑的代码：

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);
}

在屏幕上绘制的每个像素都会调用它。为轨道，城市标记和火车标记等对象绘制像素。

Answer 1

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

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

如果不知道这一点，很难提出任何改变。

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

Answer 2

您在重绘时更新了多少像素？您需要认真考虑整个算法 - 可能只重绘部分。

我只能提供一些低级优化建议：

不要使用setClassName 和 setStyle - 只需使用setStyle - 在大多数情况下都会更快。
将元素“map”存储为全局/成员变量 - 不要在每次调用PlotPixel时重新找到它。

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

2 个答案: