Сбор мусора requestAnimationFrame

Я профилирую использование памяти следующим кодом, используя временную шкалу в Chrome Dev Tools v27.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv='content-type' content='text/html; charset=UTF-8' />
  <title>RAF</title>
</head>
  <body>
    <script type='text/javascript' charset='utf-8'>
      var frame = function() {
        window.webkitRequestAnimationFrame(frame);
      };
      window.webkitRequestAnimationFrame(frame);
    </script>
  </body>
</html>

Заметьте, это просто. Но в конце концов я вижу, что появляется шаблон зуба, который указывает на то, что сборщик мусора восстанавливает память.

Хронология Chrome Dev Tools

Создает ли raf объекты мусора по умолчанию? Есть ли способ избежать этого? Спасибо.


javascript memory-leaks optimization garbage-collection requestanimationframe
person Vince    schedule 29.06.2013    source источник
comment
Связанный. Похоже, в этой области больше потенциальных проблем. Я бы посоветовал, возможно, принять весь вывод этого инструмента мониторинга памяти с долей скептицизма? Честно говоря, я не совсем уверен, какой вывод из всего этого сделать. stackoverflow.com/questions/19395565/   -  person Steven Lu    schedule 16.10.2013
comment
Я собираюсь назначить награду за это, если кто-то еще захочет сделать то же самое :› уже думал, может ли это помочь, если две функции флип-флоп регистрируют друг друга.   -  person Manuel Arwed Schmidt    schedule 17.04.2014

Ответы (3)


arrow_upward
6
arrow_downward

введите здесь описание изображения

Я обнаружил следующее: если вы измените свою функцию RAF на две функции, похожие на «пинг-понг», вы получите намного меньше мусора. Вы не можете избежать первого начального «большого GC», но после этого вы видите только второстепенные GC размером около 50 КБ вместо 700 КБ-1 МБ GC. Код будет выглядеть так:

<script type='text/javascript' charset='utf-8'>
  window.frameA = function() {
    window.webkitRequestAnimationFrame(window.frameB);
  };
  window.frameB = function() {
    window.webkitRequestAnimationFrame(window.frameA);
  };
  window.webkitRequestAnimationFrame(window.frameA);
</script>

Я думаю, это лучшее, что вы можете сделать в Chrome. Я заметил, что в FF интервалы gc или память почти не меняются, поэтому, вероятно, это связано с отладкой хрома (более подробную информацию см. В связанном отчете об ошибках хрома выше). Тем не менее, я заметил улучшение в своей собственной игре при таком развертывании RAF — и, черт возьми, мне нужно иметь возможность отлаживать его без искусственных сборщиков мусора, которые не будут происходить на машинах обычных пользователей.

person Manuel Arwed Schmidt    schedule 17.04.2014
comment
Я потрясен, чтобы сказать, что это работает. Удивительная находка, я даже не могу представить, что заставило вас попробовать это. :) - person Jaruba; 27.01.2016
comment
Кевзеттлер: Это всегда был хак, который (будем надеяться) когда-нибудь устареет. Можете ли вы сказать нам, какую версию браузера вы тестировали? Вы все еще наблюдаете проблему gc в целом? Я отредактирую ответ соответственно. - person Manuel Arwed Schmidt; 17.03.2016

arrow_upward
5
arrow_downward

Я думаю, что у Chrome может быть проблема...

похожая ошибка уже описана здесь:

https://code.google.com/p/chromium/issues/detail?id=120186

person tszarzynski    schedule 07.08.2013

arrow_upward
3
arrow_downward

Это похоже на цикл удержания. Фрейм вызывает сам себя, поэтому удерживает счетчик и не освобождается. Также каждый раз, когда вы отслеживаете работающий код с помощью профилей, временной шкалы или стеков кучи, будут возникать некоторые побочные эффекты.

В любом случае, я бы не беспокоился об этом. Есть гораздо более серьезные проблемы, которые необходимо решить, если вы пытаетесь повысить производительность своего приложения или страницы. Пока JS завершается менее чем за 16 мс, никто ничего не заметит.

Самые большие проблемы с памятью/процессором: сетевые вызовы, распаковка файлов PNG/JPG, создание и уничтожение элементов DOM, обработка/анализ данных в нерабочем потоке, плохое использование текстур графического процессора и выделение большого количества данных, чтобы вызвать сборщик мусора долго собирать данные.

Мне удалось оптимизировать список прокрутки с 1 000 000 элементов для работы со скоростью 120 кадров в секунду в Chrome (https://github.com/puppybits/BackboneJS-PerfView). Инструменты производительности должны помочь вам найти самые большие проблемы, которые может увидеть пользователь, и вам не нужно беспокоиться о второстепенных вещах.

person puppybits    schedule 22.10.2013
comment
Привет! У вас есть идеи, как использовать эту идею для анимации rAF? - person thednp; 21.08.2015