improving browser reflow (rendering) performance

Subject: improving browser reflow (rendering) performance

• note: originally emailed 02/14/2012 and sanitized for public consumption
• sidenote: posting here so i can lead people here whenever they ask me about this stuff...

---

[Boss],

To answer the question on why the android tablet was performing worse than the iPad, I took out the transparent animated images during the ‘spin’ to ‘fix’ the issue.  (This is probably why iPad didn’t support animated PNGs in the first place.)

To understand why the rendering was bad and how to improve on 2D performance for the browser games we’re doing, last night I got a crash course about browser “reflow” behavior.

In a nutshell: I was wondering if there was a way to stop the browser from re-drawing the page every time one element was being change.

There is no ‘double buffering’ for the browser, but there is something close to it (DocumentFragment).  Meaning, that I would have to update/animate everything that is dynamic manually in the render/game loop.   The payoff is a (2-3x) performance improvement.

• http://ejohn.org/blog/dom-documentfragments/

I am going to restructure the current games to take advantage of this.  [XYZ] was re-rendering the pages 3 times an update using the animated PNGs and [ZYX] rotation.

---

The following are resources to learn more about this:

Here is an nice example of how a browser draws stuff to the page:

• http://ajaxian.com/archives/when-does-javascript-trigger-reflows-and-rendering

Here’s some information on what the rendering path looks like on your typical browsers (in a easy to read format)

• http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/

If you want to know more (warning: VERY INDEPTH) about how browsers work:

• http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

[ data data data ]

Subject: [ data data data ]

• note: originally emailed 02/06/2012 and sanitized for public consumption
• sidenote: posting here so i can lead people here whenever they ask me about this stuff...

---

From: XXX
the "need" for convenience

I have learned a very important lesson about that phrase when a friend of mine told me this:

"Me and computers are like a plugged in electric toaster in a bath tub full of water.  I am willing to pay extra for the added convenience of having something that just works.”

---

Authenticity… trustworthy… 'to be treated as humans'

There will always still be the need for anonymity, especially if you’re a parent with children trying to keep them safe from the crazies.

---

I'm beginning to see a resurgent desire for simple, straightforward, lasting, superior items.

Beginning?  This has always been the bane of internet browsing forever -- terse and obtrusive $#!t plastered all over the website.  How many web sites have you been to that was just too cluttered to use in the past 10 years -- flash heavy, ads spaces everywhere, pop up windows, "join/create a profile" overlays...

I don’t surf web sites anymore.  I find them on RSS feeds or when they are mentioned on podcasts.

I always use ‘adblock plus’ on my browser.


I absolutely agree that simpler, cleaner and streamlined web sites are the future -- to bad marketing will do everything they can to screw that up.  I almost shed a tear when 'mobile' sites started showing up -- a simpler, cleaner and streamlined version of their desktop counter-part.  Too bad many of them are a little 'too simple/vague'.


I don't know how many scripts I have to auto download web pages for me; snip the areas of interest I want; and collate all of the relevant data on a single page.  Too many web sites now want you to click through so many links to get the overall data, and most of them with extremely s.l.o.o.o.o.o.o.w response times.

---

Will we ever have so much information online that people stop asking each other for recommendations (i.e. will we ever make an information filter that is as personal and reliable as another human)?

I have learned a funny thing from another friend of mine:

If there are no ads, who will tell me what to buy next?

Now, you have to ask yourselves; are advertisers just as 'reliable' as another person?  I mean, they are done by people.  They are put up on TV, radio, print, whatever that are run by people.

Many 'humans' use them as a 'source' for [ finding out more / talking about it ]. It would seem to me that information online is just the same.  A source to springboard off of to find out more information about it if it interests you.

I always like to say:

Having too much information is better than not having enough.

---

I would like to close by also saying this; sometimes, information overload is perceived that way only because 'humans' are also very visual creatures.

You can look at a ton of data (i.e. 'read' it) if you like to watch paint dry.

Or you can 'watch' the data if it's been converted into a more palpable format.  Visualization (in computer graphics) is one of those exciting areas where art and design is merged in with the terse and bland 'data tables'.  One famous example of this is the visualization of flight path data.

• http://users.design.ucla.edu/~akoblin/work/faa/
• http://www.aaronkoblin.com/work/flightpatterns/

Some good books on this topic:

• http://books.google.com/books?id=Mp_R-vs00EoC&printsec=frontcover#v=onepage&q&f=false
• Designing Data Visualizations: Representing Informational Relationships

• http://books.google.com/books?id=CB9XRIv9oigC&printsec=frontcover#v=onepage&q&f=false
• Visualize This: The FlowingData Guide to Design, Visualization, and Statistics

I know there are more, I just don’t remember the titles to them off hand.

[But,] here’s something cool I just ran into:

http://www.blendernation.com/2012/02/08/blender-movie-winner-in-2011-science-visualization-challenge/

Social Gaming

Subject: Social Gaming

• note: originally emailed 02/02/2012 and sanitized for public consumption
• sidenote: posting here so i can lead people here whenever they ask me about this stuff...

---

I haven’t done any FB apps, but I just ‘made’ a FB app following some dirt simple instructions.

You can see it here:

• http://apps.facebook.com/nickshin_test_app/

The ‘app’ is actually hosted outside of Facebook:

• You can right click on (on the very right edge of the flash content and scroll bar, if you can) and see that it’s just an <iframe> (what Facebook is calling the canvas) pointing to the source of that asset.
• You should see it open to: (or if you are having trouble getting the right click menu button to show the browser menu instead of the flash menu)
• http://nickshin.com/fb/app/

So, getting stuff to show up on Facebook is easy.  The power comes when you want to do things like inviting/playing with friends, integrate with Facebook’s credit (payment system) and other features that tie into their API’s.

For example, to look yourself up on Facebook’s API system:

• http://graph.facebook.com/nickeyshin
• Replace ‘nickeyshin’ with your Facebook username

And using code facebook has provide at:

• https://github.com/facebook/php-sdk/

You can, for example, fetch all of your friends:

<?php
require 'facebook-php-sdk/src/facebook.php';

$facebook = new Facebook(array(
    'appId' => 'YOUR_APP_ID',
    'secret' => 'YOUR_APP_SECRET'
));

$me = $facebook->api('/me/friends');
/*
 * access all the information of friends
 * $me has the JSON detail of all the facebook friends of the current user
 */

foreach($me['data'] as $frns) {
    $id = $frns['id']; /* make the echo statement a little easier to read */
    $name = $frns['name']; /* make the echo statement a little easier to read */
    echo "<img src="https://graph.facebook.com/$id/picture" title="$name" />";
?>

There are much more terse ways to do this.  They are all found on Facebook’s developers docs:

• http://developers.facebook.com/docs/advancedtopics/

The following is where I got the dirt simple instructions from:

• http://devlup.com/programming/php/how-to-create-facebook-application-using-php-and-graph-api/1589/

So, to answer the original questions:

• To Build FB games:
• You can use whatever flash, unity or plain ol HTML assets you have.

• To scale FB games:
• FB punted on this and makes the developers host the content.
• So, you will need servers for the (static) pages.
• You will need more servers if you want to do things outside of the FB infrastructure.
• Like what? May be like a [super awesome] mechanism that FB’s systems doesn’t provide.

That’s all I got for a few of hours of research…