Flash：同一页面上有许多相同的 SWF答案

【问题标题】：Flash: Many identical SWFs on same PageFlash：同一页面上有许多相同的 SWF
【发布时间】：2011-06-07 19:58:37
【问题描述】：

总结

我正在尝试制作一个包含多个相同 SWF 的网页。我遇到了加载缓慢的问题（尽管下载时间很好）。我在每个单元格中有一个 4x4 表格，并且 iframe 中嵌入了一个 swf 文件。 （注：4 X 4 表 => 16 SWFS）.

我的AS3代码很简单：

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>";
        }
    }
}

我正在使用这个 html 将它加载到 iframe 中：

<!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>

注意：ActionscriptProject.html 只是 Flash Builder 使用应用程序创建的标准 html。但应 The_asMan 的要求，我将其包括在此处：

<!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>

浏览器

在 Chrome 中没有问题。所有应用程序的加载速度都非常快（我估计在 3 秒内）。

在 IE 8 中问题很小。

在 IE 7 和 Firefox 3.6.17 中，页面需要很长时间才能加载。我没有在其他浏览器中测试过。
在 Firefox 中，页面加载大约需要 34 秒。

调试信息 (Firefox)

System.totalMemory 总共报告说 swf 为我们提供了约 42 MB 的组合内存。

这是 Firebug 中“网络”选项卡的屏幕截图：

Full Size Image

问题

有没有一种将多个相同的 swf 嵌入网页的好方法？
为什么 IE 和 Firefox 如此糟糕？我怀疑这与 IE 和 Firefox 都只有一个线程来运行插件（Flash）这一事实有关。
我有一个用 AS2 编写的类似应用程序（不是我写的，我只有 swf 文件）。它要复杂得多，但在 IE 和 FF 中加载速度要快几个数量级。 AS3 固定浏览器而 AS2 没有固定浏览器是否有原因？
如何在不固定浏览器的情况下将多个 AS3 swf 嵌入 FF 和 IE 7？
有没有办法让应用程序更轻量级？

【问题讨论】：

您是否有理由将 swfs iframe'ing 到您的页面中？我不确定它的性能行为，但我知道对象和嵌入标签利用浏览器缓存
@Ben，没有 iframe 的行为是相似的。我把它放在 iframe 中是因为 a) 我们的最终产品使用的是 iframe。 b) 更容易理解，因为 html 更简单 c) 性能差异很小或没有。
发布您的嵌入代码。你在使用反缓存技巧吗？
你为什么要设置txt.width=5000和txt.height=5000？这可能会导致巨大的性能问题。
可能是 System.totalMemory 调用。我认为这报告了所有正在运行的闪存播放器/空中实例的内存使用情况。有 16 个单独的实例可能会发生一些奇怪的事情。

标签： flash actionscript-3 internet-explorer firefox

【解决方案1】：

您是否尝试过构建一个容器 swf，它自己会加载其他 swf？这可能会更快，因为这样 Firefox 就不必一遍又一遍地处理初始化 swf 的开销。创建一个加载一堆其他电影并将它们以网格排列的空白电影是相当简单的。

【讨论】：

希望这样做，但我们的框架要求 16 个独立的东西。要做到这一点需要数周的时间。
一年后再加一个，因为我认为这是除了重写 JS 之外唯一可能的解决方案。

【解决方案2】：

探索空白 swf x 16 的加载时间。与此相比如何？如果它与您的 16 个 swf 显着不同，那么您的 swf 必须进行一些繁重的初始化，如果是这样，请尽量避免这种情况。

Flash 播放器确实需要一些时间来加载，其中 16 个比一个要长得多；如果您需要多个播放器，您可以通过在页面加载后将它们加载到 DOM 中来获得更好的用户体验。

正如其他人所说，Flash 播放器在设计时并没有考虑到这种用途，最好避免这种事情。

【讨论】：

我曾尝试使用 javascript 一次将它们加载到页面中。这根本没有加快时间。
您是否尝试过仅加载 blank swfs 来比较时间？您的问题可能与 swf 本身有些低效有关，对于 1 来说并不明显，但对于 16 来说更是如此。
您所说的 SWF 是指只有一个 sprite 或 txt 框让您知道它何时加载的东西？如果不是，您如何建议它何时完成加载？
是的，需要执行 ExternalInterface.call 才能让 js 知道它实际上已经开始了。

【解决方案3】：

也许您可以使用 JavaScript 错开加载 SWF。让 JavaScript 一次构建您的 HTML，一个或两个 SWF/TD，中间间隔一小段时间。这可能会给浏览器一个思考的机会。

【讨论】：

这是我尝试的第一件事。对加载时间没有影响。

【解决方案4】：

你能改变你的框架的 CSS 吗？那么 15 个容器设置了“display:none”，另一个手动设置了高度和宽度来填充它们的空间？您可以在不需要的部分上进行一些 jquery 调用 *.hide()。

这样，你的第一个 td 是唯一一个带有 flash 的，并且包含一些代码来隐藏其他 td。

【讨论】：

【解决方案5】：

您是否尝试过将 Flash/ActionscriptProject.html 放在子域中？（要使其正常工作，您需要修改主机文件）。这通常有助于异步加载操作。

如果您将加载的 html 中的脚本标记放在正文的底部，或者在很短的延迟后调用它会怎样？这样，HTML 将被加载，并且会被 FF 和 IE7 视为“已加载”。

【讨论】：