Рафаэль: постепенное замедление анимации с простой бесконечной анимацией

Этот вопрос похож по духу на этот другой вопрос, заданный два года назад: Почему частота кадров Рафаэля замедляется по этому коду?

Я использую Raphael 2.1.0 в Chromium 25 следующим образом:

<html>
<head>
  <title>Drawfun</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <script src="raphael.js"></script>
  <script>
    var paper = Raphael(10, 50, 320, 200);
    var anim = Raphael.animation({transform: "R360"}, 500).repeat(Infinity);

    var rect = paper.rect(50, 40, 10, 20);
    rect.attr("fill", "#f00");
    rect.attr("stroke", "#fff");
    rect.animate(anim);
  </script>
</body> 
</html>

Первоначально прямоугольник вращается плавно, как и следовало ожидать. Через минуту или две вращение работает на ~ 15 FPS. Через пять или восемь минут анимация работает на ~ 5 FPS.

Профили Chrome CPU показывают, что по мере того, как анимация становится более прерывистой, script тратит все меньше и меньше времени на (program) и все больше времени в repush и eve.listeners.

Диспетчер задач Chrome не указывает на утечку памяти в пуле JS-памяти или в Chrome, но показывает, что с течением времени страница потребляет все больше и больше CPU.

При запуске этой страницы в последней версии Firefox анимация становится очень изменчивой, намного быстрее. Эти результаты были проверены в Linux и Windows, поэтому это не проблема ОС:).

Есть ли у кого-нибудь представление о том, что может быть неправильно с моим кодом или внутренними компонентами Рафаэля?

Ответ 1

Хорошо, я знаю, что это не совсем тот ответ, который кто-то хочет услышать (и это спорный вопрос), но из-за взгляда Рафаэля и чтения комментариев выше, я не могу помочь подумайте, что это проблема сбора мусора, и это причина различных результатов для всех браузеров. С быстрым взглядом на источник Рафаэля, похоже, что несколько бит объявляется или реализуется в процессе анимации кадра на основе кадра. Я знаю, что, по крайней мере, в двигателе Chrome V8, каждый var объявляется в отслеживаемом методе и помещается в кучу, задержка в сокращении частоты кадров только дополнительно указывает на то, что сборщик мусора пинает в высокий режим, чтобы высвободить куски объявленные вары, которые больше не используются. Я бы поставил хорошие деньги, что если бы вы переместили много объявлений в Raphael script в более высокий объем (возможно, даже глобальный, gasp!!), Особенно во время анимационных последовательностей, вы найдете очень улучшенную фреймворк- в течение script.

Я столкнулся с этой проблемой в пользовательской реализации адаптации к webgl, в основном я делал команды webgl без включенного webgl. Растеризатор конвейера, который я построил, имел очень похожую проблему, как это, в основном, он рисовал бы фреймы, начинающиеся с 68 кадров в секунду, но к концу теста будет снижаться до 13 кадров в секунду или ниже и при использовании 98% процессора. Только после того, как я очистил каждую декларацию, которая создала новые выделения памяти из области конвейера (и сделала еще несколько исследований, ускоряющих трюки, связанные с переменными поисками), я наконец смог продолжить работу и создать хорошо написанный растеризатор, который может накачивать примерно 3-5 МБ/с пикселей на экран одновременно, сохраняя скорость 50-60 кадров в секунду.

Опять же, не уверен, что это ответ, который вам нужен или нужен, но я думаю, что он правильный.:( К сожалению, я не мог больше помочь. Удачи:)