Почему мое приложение максимально использует процессор в Firefox? - PullRequest
4 голосов
/ 01 октября 2009

Я написал игровое приложение для Facebook. Приложение не оптимизировано для AJAX, поэтому оно совершает множество обращений к серверу. Я обнаружил, что каждый раз, когда приложение подключается к серверу во время использования Firefox, загрузка ЦП возрастает до 100% (в IE8 это не проблема). Поскольку приложение может выходить на сервер несколько раз в секунду, это приводит к замедлению работы моего приложения на FF.

Мне сказали написать свое приложение, используя AJAX, но я недостаточно знаю об AJAX, чтобы сделать это. Я был бы признателен, если бы кто-то мог предоставить некоторые ссылки на ресурсы, объясняющие, как написать приложение на основе AJAX (имейте в виду, что я не могу использовать какие-либо фреймворки JS, потому что они несовместимы с Facebook JS). Я в основном не уверен, как будет выглядеть JS для такого приложения (я знаю JS для AJAX, но я не знаю, как реализовать целое приложение в JS, так как это не мой основной язык - я в первую очередь бэкэнд-разработчик).

Вот ссылка на мое приложение: Рельсы по всей Европе Dev

Или, если это не сработает: Рельсы по всей Европе 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);
}

Это вызывается для каждого пикселя, нанесенного на экран. Пиксели наносятся на такие объекты, как дорожки, городские маркеры и железнодорожные маркеры.

Ответы [ 2 ]

2 голосов
/ 01 октября 2009

Во-первых, попробуйте Firebug Profiler, чтобы точно определить, где проблема в Firefox, нет смысла начинать какие-либо оптимизации без первого профилирования.

Какой тип Ajax-запроса вы используете и в каком формате данных отправляете?

Трудно предложить какие-либо изменения, не зная об этом.

Одной из распространенных проблем с производительностью является то, что синтаксический анализ XML в браузерах является одним из самых медленных методов - вам может быть лучше использовать JSON.

0 голосов
/ 01 октября 2009

Сколько пикселей вы обновляете при перерисовке? Вам нужно серьезно подумать над всем вашим алгоритмом - может быть, только перерисовать разделы.

Я могу помочь только с несколькими рекомендациями по оптимизации низкого уровня:

  • Не используйте setClassName и setStyle - просто используйте setStyle - это быстрее в большинстве случаев.
  • Сохраните элемент 'map' как глобальную переменную / переменную-член - не ищите его повторно при каждом вызове PlotPixel.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...