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

2019年7月29日 145次阅读

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

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

最佳答案 首先,尝试使用Firebug Profiler来确定Firefox中的问题所在,如果没有首次分析,就没有必要开始任何优化.

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

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

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

点赞