<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>engin aydogan &#187; flex</title>
	<atom:link href="http://engin.bzzzt.biz/tag/flex/feed/" rel="self" type="application/rss+xml" />
	<link>http://engin.bzzzt.biz</link>
	<description>&#039;s journal</description>
	<lastBuildDate>Thu, 02 Feb 2012 21:22:31 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>ExternalInterface performance on different browsers</title>
		<link>http://engin.bzzzt.biz/2010/04/15/externalinterface-performance-on-different-browsers/</link>
		<comments>http://engin.bzzzt.biz/2010/04/15/externalinterface-performance-on-different-browsers/#comments</comments>
		<pubDate>Thu, 15 Apr 2010 18:13:06 +0000</pubDate>
		<dc:creator>engin</dc:creator>
				<category><![CDATA[web]]></category>
		<category><![CDATA[chrome]]></category>
		<category><![CDATA[firefox]]></category>
		<category><![CDATA[flash]]></category>
		<category><![CDATA[flex]]></category>

		<guid isPermaLink="false">http://engin.bzzzt.biz/?p=192</guid>
		<description><![CDATA[ExternalInterface is the API provided by Flash to communicate with its hosting environment. For my case, it is the browsers hosting the Flash &#8220;movie&#8221;. I noticed different performance behavior on each browser. This is my attempt to measure performance penalty caused by each browser.
Here&#8217;s the  [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://engin.bzzzt.biz/wp-content/uploads/2010/04/flash_js_overhead.png"><img class="aligncenter size-full wp-image-204" title="flash_js_overhead" src="http://engin.bzzzt.biz/wp-content/uploads/2010/04/flash_js_overhead.png" alt="" width="800" height="400" /></a>ExternalInterface is the API provided by Flash to communicate with its hosting environment. For my case, it is the browsers hosting the Flash &#8220;movie&#8221;. I noticed different performance behavior on each browser. This is my attempt to measure performance penalty caused by each browser.</p>
<h3><span style="text-decoration: underline;">Here&#8217;s the software versions:</span></h3>
<p>Flash plugin version: 10,0,32,18</p>
<p>Chrome 4.1.249<br />
Firefox 3.6.3<br />
IE 8.0</p>
<h3><span style="text-decoration: underline;">How did I measure</span></h3>
<p>1. I call Been.FComm.send() function in Javascript and timestamp (T<sub>js1</sub>) it. This JS function calls the send() in the Flash.</p>
<p>2. In the Flash application I timestamp (T<sub>f1</sub>) send() function call.</p>
<p>3. In the Flash application I also timestamp (T<sub>f2</sub>) handleData() and call been_fcomm_handle JS function.</p>
<p>4. Then I timestamp (T<sub>js2</sub>) been_fcomm_handle() in Javascript.</p>
<p>Flash application is written in Flex. It sends a data over a TCP socket and reads the response back. As all functions, send() and handleData() functions in my application also has a debug() call &#8212; which includes a timestamp.</p>
<p>Here&#8217;s how I implemented measurement in Flash:</p>
<pre>private function debug(str:String):void
{
	var date:Date = new Date();
	output.appendText(date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds() + "." + date.getMilliseconds() + ": " + str);
}

private function handleData(event:ProgressEvent):void
{
	var data:String = m_socket.readUTF();
	debug("handleData"+data+"\n");
	ExternalInterface.call("been_fcomm_handle", data);
}

private function send (value:String):void
{
	debug("sending "+value+"\n");
	m_socket.writeUTF(value);
	m_socket.flush();
}</pre>
<p>So that I can measure how long Flash thinks it takes my server to give a response.</p>
<p>On the other hand, I also measure the timings in JS layer. Here&#8217;s the related code pieces &#8212; simplified to death to only contain relevant codes.</p>
<p>Here&#8217;s how I implemented measurement in Javascript:</p>
<pre>Been.Debug = new function() {
    this.info = function(m) {
        log(date.toLocaleTimeString() + "." + date.getUTCMilliseconds() + ": " + m);
    };
};

Been.FComm = new function() {
    this.handle = function(msg) {
        Been.Debug.info("Been.FComm.Handle: " + msg);
    }

    this.send = function(data) {
        Been.Debug.info("Been.FComm.send: " + data);
        Been.Utils.getFlashMovieObject("FlashComm").send(data);
    }
    /* rest of the implementation */
};</pre>
<h3><span style="text-decoration: underline;">Results</span></h3>
<p>Here are the results samples.</p>
<pre>Chrome

Avarage Flash request/response: 8.3ms
Avarage JS request/response: 161ms
Flash JS communication (marshaling) overhead: 161 - 8.3 = 152.7ms

Flash output
---------------------------------------------------------------------------------------
20:34:20.731: handleData{"Status":"FAILED","Error":"Internal server error.","ErrorNo":500}
20:34:20.719: sending {asf}
20:34:19.519: handleData{"Status":"FAILED","Error":"Internal server error.","ErrorNo":500}
20:34:19.513: sending {asf}
20:34:9.713: handleData{"Status":"FAILED","Error":"Internal server error.","ErrorNo":500}
20:34:9.706: sending {asf}

Javascript output
---------------------------------------------------------------------------------------
20:34:20.990: Been.FComm.Handle: {"Status":"FAILED","Error":"Internal server error.","ErrorNo":500}
20:34:20.720: Been.FComm.send: {asf}
20:34:19.710: Been.FComm.Handle: {"Status":"FAILED","Error":"Internal server error.","ErrorNo":500}
20:34:19.512: Been.FComm.send: {asf}
20:34:09.718: Been.FComm.Handle: {"Status":"FAILED","Error":"Internal server error.","ErrorNo":500}
20:34:09.702: Been.FComm.send: {asf}</pre>
<pre>Firefox

Avarage Flash request/response: 76ms
Avarage JS request/response: 77.6ms
Flash JS communication (marshaling) overhead: 77.6 - 76 = 1.6ms

Flash output
---------------------------------------------------------------------------------------
20:35:55.385: handleData{"Status":"FAILED","Error":"Internal server error.","ErrorNo":500}
20:35:55.276: sending {asf}
20:35:54.582: handleData{"Status":"FAILED","Error":"Internal server error.","ErrorNo":500}
20:35:54.506: sending {asf}
20:35:53.687: handleData{"Status":"FAILED","Error":"Internal server error.","ErrorNo":500}
20:35:53.644: sending {asf}

Javascript output
---------------------------------------------------------------------------------------
20:35:55.414: Been.FComm.Handle: {"Status":"FAILED","Error":"Internal server error.","ErrorNo":500}
20:35:55.303: Been.FComm.send: {asf}
20:35:54.610: Been.FComm.Handle: {"Status":"FAILED","Error":"Internal server error.","ErrorNo":500}
20:35:54.533: Been.FComm.send: {asf}
20:35:53.715: Been.FComm.Handle: {"Status":"FAILED","Error":"Internal server error.","ErrorNo":500}
20:35:53.670: Been.FComm.send: {asf}</pre>
<pre>IE

Avarage Flash request/response: 5.3ms
Avarage JS request/response: 7.6ms
Flash JS communication (marshaling) overhead:  7.6 - 5.3 = 1.3ms

Flash output
---------------------------------------------------------------------------------------
20:36:51.166: handleData{"Status":"FAILED","Error":"Internal server error.","ErrorNo":500}
20:36:51.162: sending {asf}
20:36:48.211: handleData{"Status":"FAILED","Error":"Internal server error.","ErrorNo":500}
20:36:48.207: sending {asf}
20:36:47.467: handleData{"Status":"FAILED","Error":"Internal server error.","ErrorNo":500}
20:36:47.459: sending {asf}

Javascript output
---------------------------------------------------------------------------------------
20:36:51.166: Been.FComm.Handle: {"Status":"FAILED","Error":"Internal server error.","ErrorNo":500}
20:36:51.161: Been.FComm.send: {asf}
20:36:48.211: Been.FComm.Handle: {"Status":"FAILED","Error":"Internal server error.","ErrorNo":500}
20:36:48.206: Been.FComm.send: {asf}
20:36:47.469: Been.FComm.Handle: {"Status":"FAILED","Error":"Internal server error.","ErrorNo":500}
20:36:47.456: Been.FComm.send: {asf}</pre>
<h3><span style="text-decoration: underline;">Summary</span></h3>
<table border="0">
<tbody>
<tr>
<td style="text-align: center;"><strong>Browser</strong></td>
<td style="text-align: center;"><strong>Flash &#8211; JS communication overhead (ms)</strong></td>
</tr>
<tr>
<td>Chrome</td>
<td style="text-align: center;">152.7</td>
</tr>
<tr>
<td>IE</td>
<td style="text-align: center;">1.3</td>
</tr>
<tr>
<td>FF</td>
<td style="text-align: center;">1.6</td>
</tr>
</tbody>
</table>
<p>It looks like Chrome suffers from the most significant overhead, while IE and FF could be considered on a par.</p>
]]></content:encoded>
			<wfw:commentRss>http://engin.bzzzt.biz/2010/04/15/externalinterface-performance-on-different-browsers/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

