Javascript 为什么我的应用程序在Firefox中的CPU使用率达到最高？

我为Facebook写了一个游戏应用程序。该应用程序没有经过AJAX优化，因此它需要多次往返服务器。我发现，在使用Firefox时，每次应用程序点击服务器时，CPU使用率都会上升到100%（这在IE8中似乎不是问题）。由于该应用程序每秒可以命中服务器几次，这导致我的应用程序在FF上缓慢爬行

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

以下是指向我的应用程序的链接：

或者如果这不起作用：

谢谢

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

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

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

---

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

首先，请尝试Firebug探查器，以查明Firefox中的问题所在，如果不首先进行分析，就没有必要开始任何优化

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

在不知道这一点的情况下，很难提出任何改变

---

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

重画时更新多少像素？你需要认真考虑你的整个算法——也许只是重新绘制部分

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

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

---

如果没有Facebook帐户，就无法查看链接（因为我是反社会的，所以我没有Facebook帐户）。你能把它镜像到别处吗？对不起，这个应用程序使用FBJS，需要Facebook。你的Ajax请求是同步的还是异步的？如果可能的话，试着把它们变成后者。如果您不确定，请发布代码。大多数应用程序不使用Ajax。很少的Ajax调用似乎对CPU使用没有太大影响。这主要是对服务器的往返调用（尽管我开始怀疑这与之后刷新页面有更多关系），我在我的原始帖子中包含了探查器统计数据。我正在使用Facebook的FBJS Ajax.post（）请求使用JSON。

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