Flash: Many identical SWFs on same Page

Summary

I am trying to make a web page that has multiple of the same SWF on it. I am having a problem with it being stupidly slow loading (download time is fine though). I have a 4x4 table in each cell there is a swf file embedded in an iframe. (Note: 4 X 4 table => 16 SWFS).

My AS3 code is very simple:

package
{
    import flash.display.Sprite;
    import flash.system.System;
    import flash.text.TextField;

    public class ActionscriptProject extends Sprite
    {
        public function ActionscriptProject()
        {
            var txt:TextField = new TextField();
            txt.x=0;
            txt.y=0;
            txt.width=5000;
            txt.height=5000;
            addChild(txt);
            txt.htmlText+="<font size='45'>"+System.totalMemory/1048576 + " MB"+"</font>";
        }
    }
}

I am loading it in an iframe using this html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Flash Testing</title>
</head>
<body>

<table border="1">
    <tr>
        <td>
            <iframe allowtransparency='true' scrolling='no' src='Flash/ActionscriptProject.html'></iframe>
        </td>
        <td>
            <iframe allowtransparency='true' scrolling='no' src='Flash/ActionscriptProject.html'></iframe>
        </td>
        <td>
            <iframe allowtransparency='true' scrolling='no' src='Flash/ActionscriptProject.html'></iframe>
        </td>
        <td>
            <iframe allowtransparency='true' scrolling='no' src='Flash/ActionscriptProject.html'></iframe>
        </td>
    </tr>
    <tr>
        ...
    </tr>
    <tr>
        ...
    </tr>
    <tr>
        ...
    </tr>
</table>    

</body>
</html>

Note: ActionscriptProject.html is just the standard html that Flash Builder creates with the application. But at the request of The_asMan I am including it here:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
    <!-- 
    Smart developers always View Source. 

    This application was built using Adobe Flex, an open source framework
    for building rich Internet applications that get delivered via the
    Flash Player or to desktops via Adobe AIR. 

    Learn more about Flex at http://flex.org 
    // -->
    <head>
        <title></title>         
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <!-- Include CSS to eliminate any default margins/padding and set the height of the html element and 
             the body element to 100%, because Firefox, or any Gecko based browser, interprets percentage as 
             the percentage of the height of its parent container, which has to be set explicitly.  Initially, 
             don't display flashContent div so it won't show if JavaScript disabled.
        -->
        <style type="text/css" media="screen"> 
            html, body  { height:100%; }
            body { margin:0; padding:0; overflow:auto; text-align:center; 
                   background-color: #ffffff; }   
            #flashContent { display:none; }
        </style>

        <!-- Enable Browser History by replacing useBrowserHistory tokens with two hyphens -->
        <!-- BEGIN Browser History required section -->
        <link rel="stylesheet" type="text/css" href="history/history.css" />
        <script type="text/javascript" src="history/history.js"></script>
        <!-- END Browser History required section -->  

        <script type="text/javascript" src="swfobject.js"></script>
        <script type="text/javascript">
            <!-- For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection. --> 
            var swfVersionStr = "10.0.0";
            <!-- To use express install, set to playerProductInstall.swf, otherwise the empty string. -->
            var xiSwfUrlStr = "playerProductInstall.swf";
            var flashvars = {};
            var params = {};
            params.quality = "high";
            params.bgcolor = "#ffffff";
            params.allowscriptaccess = "sameDomain";
            params.allowfullscreen = "true";
            var attributes = {};
            attributes.id = "ActionscriptProject";
            attributes.name = "ActionscriptProject";
            attributes.align = "middle";
            swfobject.embedSWF(
                "ActionscriptProject.swf", "flashContent", 
                "100%", "100%", 
                swfVersionStr, xiSwfUrlStr, 
                flashvars, params, attributes);
            <!-- JavaScript enabled so display the flashContent div in case it is not replaced with a swf object. -->
            swfobject.createCSS("#flashContent", "display:block;text-align:left;");
        </script>
    </head>
    <body>
        <!-- SWFObject's dynamic embed method replaces this alternative HTML content with Flash content when enough 
             JavaScript and Flash plug-in support is available. The div is initially hidden so that it doesn't show
             when JavaScript is disabled.
        -->
        <div id="flashContent">
            <p>
                To view this page ensure that Adobe Flash Player version 
                10.0.0 or greater is installed. 
            </p>
            <script type="text/javascript"> 
                var pageHost = ((document.location.protocol == "https:") ? "https://" : "http://"); 
                document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='" 
                                + pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" ); 
            </script> 
        </div>

        <noscript>
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="ActionscriptProject">
                <param name="movie" value="ActionscriptProject.swf" />
                <param name="quality" value="high" />
                <param name="bgcolor" value="#ffffff" />
                <param name="allowScriptAccess" value="sameDomain" />
                <param name="allowFullScreen" value="true" />
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="ActionscriptProject.swf" width="100%" height="100%">
                    <param name="quality" value="high" />
                    <param name="bgcolor" value="#ffffff" />
                    <param name="allowScriptAccess" value="sameDomain" />
                    <param name="allowFullScreen" value="true" />
                <!--<![endif]-->
                <!--[if gte IE 6]>-->
                    <p> 
                        Either scripts and active content are not permitted to run or Adobe Flash Player version
                        10.0.0 or greater is not installed.
                    </p>
                <!--<![endif]-->
                    <a href="http://www.adobe.com/go/getflashplayer">
                        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash Player" />
                    </a>
                <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
            </object>
        </noscript>     
   </body>
</html>

Browsers

In Chrome there is no problem. All of the apps load very quickly (I would estimate within 3 seconds).

In IE 8 the problem is minimal.

In IE 7 and Firefox 3.6.17 the page takes a very long time to load. I have not tested in other browsers.
In Firefox the page takes about 34 seconds to load.

Debug Info (Firefox)

In total System.totalMemory reports that the swfs us a combined memory of ~42 MB.

Here is a screen shot of the Net tab in Firebug:

Full Size Image

Questions

Is there a good way to embed multiple identical swfs into a web page?
Why are IE and Firefox struggling so poorly? I suspect it has to do with the fact that both IE and Firefox each only have one thread to run plugins (Flash) in.
I have a similar app written in AS2 (not written by me, I just have the swf file). It is much more complex but it loads orders of magnitude faster in IE and FF. Is there a reason that AS3 pins the browser when AS2 does not?
How can I embed multiple AS3 swfs into FF & IE 7 without pinning the browser?
Is there a way to make an application that is more light weight?

回答1:

Have you tried building a container swf that itself loads the other swfs? That may be faster, because then Firefox doesn't have to deal with the overhead of initializing a swf over and over. It is fairly simple to create a blank movie that loads a bunch of other movies and places them in a grid arrangement.

回答2:

Explore the loading time for a blank swf x 16. How does this compare? if it is significantly different from 16 of your swf then your swf must be doing some heavy initialization, if so, try and avoid this.

Flash players do take a moment to load though and 16 of them take a lot longer than one; if you need multiple players, you may achieve a better user experience by loading them into the DOM after the page has loaded.

As others have said, the Flash player wasn't really designed with this kind of use in mind, and its better to avoid this sort of thing.

回答3:

Maybe you could stagger the loading of the SWFs with JavaScript. Have JavaScript build your HTML, one or two SWFs/TDs at a time with a small amount of time inbetween. This might give the browser a chance to think.

回答4:

Could you change the CSS of your framework? So that 15 containers have a "display:none" set and the other one has manually set height and width to fill their space? You hack around have some jquery call *.hide() on the unneeded parts.

In this way your first td is the only one with flash, and contains some code to hide the other tds.

回答5:

Have you tried placing Flash/ActionscriptProject.html in a subdomain? (To get this to work, you'll need to modify your hosts file). That often helps with async loading operations.

What if you put that script tag from the loaded html at the bottom of the body or have it called after a very brief delay? This way, the HTML will load and it will be considered "loaded" by FF and IE7.