Performance - Revision history

Bablakeluke: /* Go event based - avoid spamming your UI in Update */

2018-03-21T18:51:39Z

‎Go event based - avoid spamming your UI in Update

Bablakeluke at 18:49, 21 March 2018

2018-03-21T18:49:56Z

Bablakeluke: /* Table Chaos */

2018-03-13T23:34:59Z

‎Table Chaos

Bablakeluke: /* Table Chaos */

2018-03-13T23:32:21Z

‎Table Chaos

Bablakeluke: /* Set textContent rather than innerHTML */

2017-05-01T18:17:55Z

‎Set textContent rather than innerHTML

Bablakeluke: /* Memory Usage */

2017-05-01T18:11:47Z

‎Memory Usage

Bablakeluke at 18:08, 1 May 2017

2017-05-01T18:08:20Z

151.229.136.200: /* Canvas */

2017-03-27T05:55:35Z

‎Canvas

151.229.136.200 at 01:14, 27 March 2017

2017-03-27T01:14:55Z

151.229.136.200: /* Canvas */

2017-03-27T01:09:23Z

‎Canvas

@@ Line 80: / Line 80: @@
 </syntaxhighlight>
-PowerUI ships with a very powerful and extendible [Event Flow|standards compliant event system] - use this to your advantage. Selecting an NPC could fire off an NPC selection event, which some other class controlling your UI responds to:
+PowerUI ships with a very powerful and extendible [[Event Flow|standards compliant event system]] - use this to your advantage. Selecting an NPC could fire off an NPC selection event, which some other class controlling your UI responds to:
 <syntaxhighlight lang="csharp">
@@ Line 101: / Line 101: @@
 </syntaxhighlight>
 == Reflow ==

← Older revision		Revision as of 18:49, 21 March 2018
Line 37:		Line 37:

	</syntaxhighlight>		</syntaxhighlight>
		+
		+	== Go event based - avoid spamming your UI in Update ==
		+
		+	Although it's ok to update your UI in the Update loop, for example for a timer, try being more event based for the greatest performance. For example, let's say you pop up some info when the user clicks on an NPC. Rather than spamming some 'SelectedNpc' field, update the UI when they're actually clicked on:
		+
		+	'''A common Unity anti-pattern - don't do this!''':
		+
		+	<syntaxhighlight lang="csharp">
		+
		+	void Update() {
		+	// Bad!
		+	var headsUp = UI.document.getElementById("npc-heads-up-info");
		+
		+	if (SelectedNpc != null) {
		+	// Spamspamspamspamspam
		+	headsUp.innerHTML = SelectedNpc.HtmlDetails;
		+	} else {
		+	headsUp.innerHTML = "";
		+	}
		+	}
		+
		+	</syntaxhighlight>
		+
		+	Instead, set that innerHTML when you set SelectedNpc:
		+
		+	<syntaxhighlight lang="csharp">
		+
		+	void SelectedAnNpc(Npc npc) {
		+	// Much better!
		+	SelectedNpc = npc;
		+
		+	// Update the UI:
		+	var headsUp = UI.document.getElementById("npc-heads-up-info");
		+
		+	if (SelectedNpc != null) {
		+	headsUp.innerHTML = SelectedNpc.HtmlDetails;
		+	} else {
		+	headsUp.innerHTML = "";
		+	}
		+	}
		+
		+	</syntaxhighlight>
		+
		+	PowerUI ships with a very powerful and extendible [Event Flow\|standards compliant event system] - use this to your advantage. Selecting an NPC could fire off an NPC selection event, which some other class controlling your UI responds to:
		+
		+	<syntaxhighlight lang="csharp">
		+
		+	void SelectedAnNpc(Npc npc) {
		+	// Much better!
		+	SelectedNpc = npc;
		+
		+	// Fire off an event which anything can subscribe to with a standard event listener on the document:
		+	NpcEvent e = new NpcEvent("selected");
		+	e.npc = npc;
		+	UI.document.dispatchEvent(e);
		+	}
		+
		+	// .. somewhere else ..
		+
		+	UI.document.addEventListener("npcselected", delegate(NpcEvent e){
		+	// Update the UI here, using e.npc instead.
		+	});
		+
		+	</syntaxhighlight>
		+

	== Reflow ==		== Reflow ==

@@ Line 60: / Line 60: @@
 == Table Chaos ==
-Tables cause multiple passes over potentially thousands of elements. The modern reason for using a table today is for vertical alignment - most other layouts can be easily done with other less intense techniques. If it's vertical align that you're really after then use the custom vertical-align values on any element:
+'''PowerUI doesn't support tables with no defined widths.''' Tables cause multiple passes over potentially thousands of elements. The modern reason for using a table today is for vertical alignment - most other layouts can be easily done with other far less intense techniques. If it's vertical align that you're really after then use the custom vertical-align values on any element:
 <syntaxhighlight lang="css">
@@ Line 69: / Line 69: @@
 </syntaxhighlight>
-On a similar line, tables with no defined column widths are outright evil. The number of elements scanned to guess how wide a column probably should be can go exponential very quickly and after all of that, it often doesn't look great anyway. As a result, '''PowerUI doesn't support tables with no defined widths''' - you must give all your table columns and the table itself some kind of width value.
+On a similar line, tables with no defined column widths are outright evil. The number of elements scanned to guess how wide a column probably should be can go exponential very quickly and, after all of that, it often doesn't look great anyway. As we're making UIs which reflow very frequently, PowerUI requires you to give all your table columns and the table itself some kind of width value. This way PowerUI has unusually fast tables - making them suitable for heavy reflow - but they're still slow compared to almost anything else.
 * '''Power tip #4: Use techniques other than table whenever appropriate, and make use of table-middle.'''

@@ Line 68: / Line 68: @@
 </syntaxhighlight>
 * '''Power tip #4: Use techniques other than table whenever appropriate, and make use of table-middle.'''
 == Memory Usage ==

← Older revision		Revision as of 18:17, 1 May 2017
Line 266:		Line 266:

	If you know your text contains no HTML then setting to textContent will cause virtually everything to get recycled. Setting innerHTML is fast anyway but textContent does almost nothing.		If you know your text contains no HTML then setting to textContent will cause virtually everything to get recycled. Setting innerHTML is fast anyway but textContent does almost nothing.
		+
		+	You can also get another small boost if the new text you're setting is the same length as the old text - this takes advantage of a health counter optimisation:
		+
		+	<syntaxhighlight lang="csharp">
		+
		+	myElement.textContent = "1";
		+	myElement.textContent = "14"; // 1 character longer
		+
		+	// Using 01 would make a (tiny) saving:
		+	myElement.textContent = "01";
		+	myElement.textContent = "14";
		+
		+	</syntaxhighlight>

	== Disabling Unicode Bidirectionality ==		== Disabling Unicode Bidirectionality ==

@@ Line 74: / Line 74: @@
 == Memory Usage ==
-PowerUI is conservative about its memory usage, but if your targeting really low memory devices, turning off [[Image_Atlasing|image atlasing]] may be wise. Turning it off exchanges GPU/rendering time for lower memory and CPU use, which can be vital for pulling off a stunning UI on a device with little memory available.
+PowerUI is conservative about its memory usage, but if you're targeting really low memory devices, turning off [[Image_Atlasing|image atlasing]] may be wise. Turning it off exchanges GPU/rendering time for lower memory and CPU use, which can be vital for pulling off a stunning UI on a device with little memory available.
 * '''Power tip #5: Turn off image atlasing for very low memory devices. See UI.RenderMode for doing that.'''

@@ Line 4: / Line 4: @@
 However, PowerUI is vulnerable to being exposed to some very performance draining web techniques (and there are many of them!) so this is intended to be a short guide to understanding how web engines work and what you can do to avoid some common pitfalls.
 == Reflow ==
@@ Line 20: / Line 53: @@
 * '''Power tip #3: Animate transforms (scale, rotate, translate) rather than positions (top, left, right etc) if possible.'''
 == Table Chaos ==
@@ Line 217: / Line 254: @@
 </syntaxhighlight>

@@ Line 48: / Line 48: @@
 If you're drawing to a canvas, there's some nice savings you can be making. These savings are particularly noticeable if you're drawing repeatedly, such as in Update.
 === Cache your paths ===
 Whenever you call context.arcTo, context.lineTo etc, PowerUI internally builds up a representation of your path. When you then next call context.beginPath or context.clear, that representation is destroyed. If you're drawing the same path over and over, it would be a great idea to save this internal representation rather than constantly rebuilding it to take some pressure off garbage collection. To cache your paths you could either simply never call context.clear or context.beginPath and access Context.Path to move the nodes around like this:
 <syntaxhighlight lang="csharp">
@@ Line 84: / Line 120: @@
          Context.lineTo(100,10);
          Context.closePath();
      }else{
@@ Line 172: / Line 217: @@
 </syntaxhighlight>

← Older revision		Revision as of 01:14, 27 March 2017
Line 40:		Line 40:

	* '''Power tip #5: Turn off image atlasing for very low memory devices. See UI.RenderMode for doing that.'''		* '''Power tip #5: Turn off image atlasing for very low memory devices. See UI.RenderMode for doing that.'''
		+
		+	== Multithreading ==
		+
		+	Virtually all of PowerUI is multithreading friendly - anything that directly calls a Unity method like the geolocation web API isn't. Presently the cookie cache (loading or setting cookies) is the only known PowerUI API which avoidably causes threading issues. Use PowerUI API's directly from network threads, or spin up threads specifically for doing heavier UI work to make significant performance gains on multi-core architectures.

	== Canvas ==		== Canvas ==

← Older revision		Revision as of 01:09, 27 March 2017
Line 195:		Line 195:

	</syntaxhighlight>		</syntaxhighlight>
		+
		+	=== Multithreading canvas ===
		+
		+	Like most PowerUI API's, canvas is multithreading friendly. You could build those paths on some separate timer thread if you wanted to, for example.