使用Flash、Javascript和JSP优化我的Web应用程序

Question

我有一个 Web 应用程序，我正在尝试加速它。它看起来像这样：

+------+
|      |
|      |
+------+

+------+
|      |
|      |
+------+

+------+
|      |
|      |
+------+

每个框都是包含Flash SWF和一些javascript的iFrame。SWF下载了一个第三方SWF来显示信息。我发现Web应用程序的加载时间为：

LoadTime = (4 seconds) * numberOfBoxes + (3 seconds) 

当我直接嵌入第三方swf文件时（不使用我们的swf或javascript），加载时间为：

LoadTime = (1 second) * numberOfBoxes + (2.5 seconds)

我正在寻找额外的3秒钟用在哪里，以便加速我们的Web应用程序。 我认为可能的原因是：

• 服务器端处理（JSP）
• 下载
• Javascript
• Flash
• 其他？

下载

下面是从Firebug中获取的下载图片。 我已经用文件类型替换了文件名。 第一次下载后，没有任何下载特别耗时。

然而，一个有趣的地方标记为红色。 红色区域是My SWF加载和加载两个gif文件以及Third Party SWF之间的3秒间隔。 我认为这个暂停是由客户端处理引起的（这是真的吗？）。

注意：图表中的红色条不是图示的一部分。我添加它们以突出显示 .net 面板上未发生任何事情的间隙。

我认为可以从中得出结论，我有一个客户端处理问题，这意味着 Flash 或 Javascript。问题1：这正确吗？

编辑：我将非并发下载时间总和：

• 当有 1 个 iframe 时，下载时间为 1.87 秒
• 当有 2 个 iframes 时，下载时间为 2.29 秒
• 当有 5 个 iframes 时，下载时间为 8.57 秒
• 当有 10 个 iframes 时，下载时间为 10.62 秒
• 当有 21 个 iframes 时，下载时间为 17.20 秒

Javascript

我使用 Firebug 中的分析器来分析 Javascript。以下是页面上有四个组件时的结果：

这意味着每个图表的javascript运行大约需要0.25秒。我认为这是合理的。

问题2：我是否正确地阅读了这些结果？

这样留下来的大约有3.5秒/图表的处理时间可供其他用途。

Flash

我在AS3代码中插入了一些trace语句。我们正在监听一个名为“done loading”的事件。我在第一个初始化方法和“done loading”方法中放了一条trace语句。在这两个trace语句之间，flash只使用了大约0.2秒/图表的时间。

问题3：有没有更好的方式来分析flash？可能是flash加载或类似的东西占用了额外的时间吗？

其他

我不确定除了以下这些事情外还有其他事情：

• 服务器端处理 (jsp)
• 下载
• Javascript
• Flash

问题4：有什么我忽略的可能会占用时间的东西吗？

下一步

我不确定我的下一步应该是什么。我知道有些东西需要大约1.5-3秒/每个图表，但我无法弄清它是什么。我怀疑它与我的swf有关。

问题5：我该如何找到那些丢失的时间？

更新：时间总结

我已经绘制了每个可能占用时间的事物的所有时间图表。

• X轴是正在使用的图表数量。
• Y轴是加载所有图表所需的时间。

最后一个图表可能是最重要的图表。蓝色点表示总加载时间（使用秒表测量）。红色点表示我已经考虑到的时间（Javascript、下载时间和Flash时间）。

更新: 浏览器之争

我正在针对IE和Firefox进行开发（如果其他浏览器也能正常工作那就更好了）。到目前为止，所有呈现的结果都是在运行Firebug的Firefox上展示的。只是出于好玩，我想尝试其他浏览器。我不认为这会让我更接近解决方案，但很有趣的是看到IE有多烂。

注意：在运行 Firefox 测试之前，我清除了 cookies 和缓存。但我没有对 IE 或 Chrome 进行此操作。

更新: Flash 加载

我一直在我的代码中添加 console.log 语句，试图夹在慢代码中。(结果被推送到 Firebug 控制台)。

我注意到一个让我感到可疑的事情是，在我的最后一个 JavaScript 日志被打印出来和我的第一个 Flash 日志被打印出来之间有 2.5 秒的间隔。

17:08:29.973 - Javascript code
Time difference: 2510 ms
17:08:32.483 - Flash- myComponent.init()

Flash需要为每个swf设置虚拟机吗？它会在客户端编译actionscript吗？

当我<embed>我的swf和主.mxml中的creationComplete事件之间会发生什么？

- sixtyfootersdude

---

这是我见过的写得最好的问题之一。不幸的是，我没有你要找的答案。 - theninjagreg

将网页组合在一起可不便宜，尤其是当你开始使用Flash和Jscript时。你的硬盘驱动器和CPU可能会发挥作用。请在各种设备上尝试测试。此外，获取第三方SWF涉及打开连接，这也需要时间。通常，在性能分析领域中，I/O（硬盘驱动器和网络）是罪魁祸首。 - code shogan

@sixtyfootersdude - 在您的SWF加载（红色区域）中，当您将鼠标悬停在上面时，Firebug应该会告诉您这2秒钟的详细信息（x代表DNS，y代表下载等...），您能与我们分享吗？其次，您能否建立一个公共版本的此网站，以便我们可以测试它（给我们一个链接）？ - Radu Maris

@Radu - 不好意思，NET面板的图示有点不够清晰。红色部分并不是原本的一部分。我只是圈出来以引起注意，因为空白缺口处没有任何活动。我已经更新了我的问题以反映这一点。 - sixtyfootersdude

@Radu：感谢您的回复。我无法提供链接，因为该页面目前隐藏在客户门户后面。速度问题不是由下载引起的。我包括下载截图只是为了显示每个应用程序下载之间存在巨大差距。我怀疑减速是由某种客户端处理引起的。（Flash或JS）。 - sixtyfootersdude

Answer 1

一些想法：

你能否消除中间人，也就是第三方swf？

第三方swf位于哪里？如果它在远程服务器上，你只需要下载一次，然后将其与其他文件放在本地服务器上。这可以消除下载时间。

你能否使用类似Flash反编译器的工具来反编译第三方swf的代码，并将代码直接放入你的swf中？（这可能违反规定）

如果不使用iframes而是直接将内容放入div中会发生什么？

- theninjagreg

Answer 2

作为另一种选择 - 尝试禁用Firebug。时间是否有所改变？

同样在Chrome中尝试 - 有和没有开发工具。

为了了解是从您的swf调用的jsp还是只是您的swf，您可以这样做：

• 提供一个空的模拟文件而不是您正常的swf，不进行任何调用
• 同时提供一个空文件而不是帧中的js

部分地执行此操作并检查差异。

还要尝试对所有发生的网络事件进行分析。也许您的SWF调用了第三方中的某些方法，然后再调用某些远程方法。在这里，我认为我们无法改进这一点。只有当第三方方法可以以某种方式缓存时才能改进。因此，在您的配置文件中，我们只看到文件的加载 - 我们看不到任何其他请求 - ajax或类似的请求。

- gaRex

---

请查看我的更新问题。已在Chrome和IE中进行测试。我认为这并没有给我带来任何新的见解，对吗？ - sixtyfootersdude

Answer 3

据我理解，嫌疑人有三种可能性。

1. Firebug分析器。尝试在其他浏览器上运行并查看所需时间。
2. 红色组件加载后需要花费时间，然后才能加载其他组件。
3. SWF文件通过您的服务器与其他应用程序创建连接，而不是直接连接。

- Kamahire

Answer 4

这些iframe是从服务器的HTML响应返回的吗？还是通过JavaScript动态添加到DOM中的？

等待DOM准备就绪，然后在页面加载后将iframes插入到DOM中，可以获得更好的性能。

我认为问题在于Flash在本地SWF下载第三方SWF时会阻止脚本执行。您可能需要使用ActionScript并发、非阻塞、异步下载第三方SWF。

- Teddy

Answer 5

我创建了一个helloWorld SWF并将其嵌入到网页中。

在我测试的浏览器上，SWF加载需要很长时间。当页面上只有一个SWF时，这是不可感知的（~3秒加载时间），但是当页面上有10个SWF时，就会有明显的暂停（~3秒/图表* 10图表= 30秒）。

这是我测试过的浏览器：

• IE 7-非常慢。加载16个“Hello World”应用程序需要约37秒
• IE 8-似乎大多数情况下都可以。仅测试了一小段时间
• Firefox 3.6.17-非常慢。像IE 7一样慢
• Chrome 12.0.742.91-快速

我在另一个问题中发布了我的helloworld应用程序。如果有人知道如何加速加载非常简单的SWF，则可以在此回答：

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

- sixtyfootersdude