I have a Flex 4.6 web game which displays 2 Lists with virtual layouts with 2 custom item renderers. The renderers consist mainly of BitmapImages displaying user avatars + few Labels.
The Lists are being updated often over TCP socket with gzipped JSON data. I merge that data into 2 ArrayCollections serving as dataProviders for the Lists. This seems to work well, the Lists do not flicker and are updated correctly (I’ve monitored debug traces a lot to get it right).
{
lobby: [
"OK252342810632",
"OK122471020773",
"DE54",
"DE6577",
"DE7981",
"OK225312168135",
"OK20629248715",
"DE7880",
],
games: [
{ 0: [] },
{ 9012: [
"VK48058967",
"MR14315189992643135976",
"OK10218913103",
] },
{ 9013: [
"OK305894249541",
"OK151358069597",
"OK515549948434",
] },
{ 9007: [
"OK366541092321",
"DE7062",
"OK122700338897",
] },
{ 8993: [
"OK78476527766",
"VK5692120"
] }
]
}
My problem is that the application gets sluggish very soon and for some users the plugin crashes and so the users complain a lot.
In the profiles I see this picture (memory jumps to 20 MB and stays there or sometimes jumps to 40MB etc.):
From profiler I can’t figure out – what is leaking the memory. On the top I see Vector.<*> Class – whatever that means.
I’ve tried so many things already to fix this issue:
-
Switched from native JSON.parse() back to com.brokenfunction.json.decodeJson() (because I thought maybe Adobe got it wrong)
- I delete the JSON object after I’ve parsed it:
private function handleTcpData(event:ProgressEvent):void {
// read ByteArray over socket, unzip it – works wellvar obj:Object = decodeJson(_bytes.toString()); // merge into 2 ArrayCollections, update GUI... works well? for (var key:String in obj) delete obj[key]; obj = null;}
-
I’ve switched ContentCache off – makes no difference
-
I’ve stopped using any temp. Objects like { id: “DE22” } and use the JSON Object directly
Does anybody please have a good advice?
I’ve read a lot of docs/blogs on AS3 garbage collection and the usual tips: set Object references to null, use weak event listeners, removeChild() does not free memory, etc. – but I don’t see how to apply this to my problem.
Below is my complete Lobby.mxml source code:
<?xml version="1.0" encoding="utf-8"?>
<s:Group
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:comps="*"
width="700" height="450">
<fx:Declarations>
<s:RadioButtonGroup id="_filter" change="handleRadio(event);" />
</fx:Declarations>
<fx:Metadata>
[Event(name="game", type="PrefEvent")]
</fx:Metadata>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.utils.ObjectUtil;
[Bindable]
private var _games:ArrayCollection = new ArrayCollection();
[Bindable]
private var _users:ArrayCollection = new ArrayCollection();
private function handleRadio(event:Event):void {
switch (_filter.selection) {
case _allBtn:
_games.filterFunction = null;
break;
case _vacBtn:
_games.filterFunction = vacantGame;
break;
case _fullBtn:
_games.filterFunction = fullGame;
break;
}
_games.refresh();
}
private function vacantGame(obj:Object):Boolean {
for (var id:String in obj) {
var players:Array = obj[id];
return players.length < 3;
}
return false;
}
private function fullGame(obj:Object):Boolean {
for (var id:String in obj) {
var players:Array = obj[id];
return players.length == 3;
}
return false;
}
// merge arrays of objects
private function mergeObjs(ac:ArrayCollection, array:Array):void {
var i:int;
var j:int;
var n:int;
var src:Array = ac.source;
// 1) remove items missing in data from _data
FOUND1:
for (i = src.length - 1; i >= 0; i--) {
for (j = array.length - 1; j >= 0; j--) {
if (ObjectUtil.compare(src[i], array[j]) == 0)
continue FOUND1;
}
n = ac.getItemIndex(src[i]);
if (Util.DEBUG)
trace('REMOVED OBJ ' + src[i] + ' filtered n=' + n + ' i=' + i);
// remove visible items
if (n > -1)
ac.removeItemAt(n);
// remove hidden (filtered) items
else
src.splice(i, 1);
}
// 3) add items appeared in data to _data
FOUND2:
for (j = 0; j < array.length; j++) {
for (i = 0; i < src.length; i++) {
if (ObjectUtil.compare(src[i], array[j]) == 0)
continue FOUND2;
}
if (Util.DEBUG)
trace('ADDED OBJ ' + array[j] + ' i=' + i);
//ac.addItemAt(array[j], i);
ac.addItem(array[j]);
}
}
// merge arrays of strings (the user ids)
private function mergeIds(ac:ArrayCollection, array:Array):void {
var i:int;
var j:int;
var n:int;
var src:Array = ac.source;
// 1) remove items missing in data from _data
FOUND1:
for (i = src.length - 1; i >= 0; i--) {
for (j = array.length - 1; j >= 0; j--) {
if (i == j)
continue FOUND1;
}
n = ac.getItemIndex(src[i]);
if (Util.DEBUG)
trace('REMOVED ID ' + src[i] + ' filtered n=' + n + ' i=' + i);
// remove visible items
if (n > -1)
ac.removeItemAt(n);
// remove hidden (filtered) items
else
src.splice(i, 1);
}
// 3) add items appeared in data to _data
FOUND2:
for (j = 0; j < array.length; j++) {
for (i = 0; i < src.length; i++) {
if (i == j)
continue FOUND2;
}
if (Util.DEBUG)
trace('ADDED ID ' + array[j] + ' i=' + i);
ac.addItem(array[j]);
}
}
public function update(games:Array, lobby:Array):void {
var vac:uint = 0;
var full:uint = 0;
for each (var game:Object in games) {
for (var id:String in game) {
var players:Array = game[id];
if (!players)
continue;
if (players.length < 3)
vac++;
else if (players.length == 3)
full++;
}
}
if (games)
mergeObjs(_games, games);
if (lobby)
mergeIds(_users, lobby);
_allBtn.label = 'All ' + _games.source.length;
_vacBtn.label = 'Vacant ' + vac;
_fullBtn.label = 'Full ' + full;
}
public function appendText(str:String):void {
_chat.appendText(str);
}
]]>
</fx:Script>
<s:VGroup width="100%" height="100%">
<s:HGroup width="100%" verticalAlign="baseline" paddingLeft="8" paddingRight="8">
<s:Label text="Игровые столы:" />
<s:RadioButton id="_allBtn" group="{_filter}" label="Все" selected="true" />
<s:RadioButton id="_vacBtn" group="{_filter}" label="Свободные" />
<s:RadioButton id="_fullBtn" group="{_filter}" label="Полные" />
<s:Spacer width="100%" />
<s:Label text="Игроки в лобби: {_users.length}" />
</s:HGroup>
<mx:HDividedBox width="100%" height="100%">
<s:List id="_gamesList" itemRenderer="Game" useVirtualLayout="true" dataProvider="{_games}" skinClass="PrefListSkin" width="100%" height="100%" minWidth="180">
<s:layout>
<s:TileLayout />
</s:layout>
</s:List>
<mx:VDividedBox width="180" height="100%" minWidth="180">
<s:List id="_usersList" itemRenderer="User" useVirtualLayout="true" dataProvider="{_users}" skinClass="PrefListSkin" width="100%" height="100%" minHeight="150">
<s:layout>
<s:TileLayout />
</s:layout>
</s:List>
<s:TextArea id="_chat" width="100%" height="100%" minHeight="40" editable="false" fontSize="14" color="#000000" horizontalScrollPolicy="off"/>
</mx:VDividedBox>
</mx:HDividedBox>
</s:VGroup>
</s:Group>
UPDATE:
I must add, that my problem (users complain about reproducable Flash plugin crashes) has started after I have switched from XML to JSON.
I have re-run the Profiler and why does it show 987 instances of the JSON.parseCore while there are only 400 users in the Lobby (and only few currently visible in the Lists with virtual layouts)?
Any ideas please, what could have changed when I went from XML to JSON? (I didn’t touch anyhting else). I was actually hoping for better performance, because I read about XML leaking memory in Flex sometimes…
Your code and features look very simple. I don’t think that memory leak is the case. Are you able to reproduce “sluggish” yourself?
I noticed that you have chat. If there will be a lot of text – application can work slow and crash at some moment. Be sure to limit chat to display only last 100 lines for example.
UPDATE:
Just visited your game and noticed that users have High Resolution Images as profile image. It could cause slowness as count grow.