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

six*_*ude 24 javascript flash optimization

我有一个网络应用程序,我正在努力加快.它看起来像这样:

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

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

+------+
|      |
|      |
+------+
Run Code Online (Sandbox Code Playgroud)

每个框都是一个包含Flash SWF和一些javascript的iFrame.SWF下载用于显示信息的第三方SWF.我发现webapp的加载时间是:

LoadTime = (4 seconds) * numberOfBoxes + (3 seconds) 
Run Code Online (Sandbox Code Playgroud)

当我直接嵌入第三方swf(没有我们的swf或javascript)时,加载时间是:

LoadTime = (1 second) * numberOfBoxes + (2.5 seconds)
Run Code Online (Sandbox Code Playgroud)

我试图找到额外3秒的使用位置,以便我可以加快我们的webapp.我认为候选人是:

  • 服务器端处理(jsp)
  • 下载
  • 使用Javascript
  • 其他?

下载

下面是从firebug下载的下载图像.我已经用它们的类型替换了文件名.第一次下载,所有下载都没有.

然而,一个感兴趣的地方用红色标记.红色区域在My SWF加载时和加载两个gif文件之后的间隔为3秒Third Party SWF.我认为这个暂停是由客户端上的处理引起的(这是真的吗?).

在此输入图像描述

注意:图表中的红色条不是图表的一部分.我添加它们以突出显示.net面板上没有任何内容发生的间隙.

我认为我可以从中得出结论,我有一个客户端处理问题,暗示Flash或Javascript. 问题1:这是正确的吗?

编辑:我添加了非并发下载总时间:

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

使用Javascript

我在firebug中使用了profiler来分析javascript.以下是页面上有四个组件的结果:

在此输入图像描述

这意味着javascript运行大约.25秒/图表.这对我来说似乎很合理.

问题2:我是否正确阅读了这些结果?

这留下了大约3.5秒/处理其他内容的图表.

我在AS3代码中插入了一些trace语句.我们正在听一个名为"完成加载"的事件.我在第一个初始化方法和"完成加载"方法中添加了一个跟踪.闪存仅在这两个跟踪语句之间消耗.2秒/图表.

问题3:有没有更好的方法来配置闪存?可能是闪存加载或类似的东西正在耗费额外的时间?

其他

我不确定是否还有其他事情:

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

问题4:我有什么遗失可能会占用时间吗?

下一步

我不确定我的下一步应该是什么.我知道有些事情需要大约1.5 - 3秒/图表,但我无法弄清楚它是什么.我怀疑这与我的瑞士法郎有关.

问题5:我该如何找到错过的时间?

更新:时间摘要

对于每件可能需要时间的事情,我都画了所有的时间.

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

最后一张图可能是最重要的图.蓝点是总加载时间(使用秒表测量).红点是我考虑的时间量(Javascript,下载时间和闪光时间).

在此输入图像描述

更新:浏览器大战

我的目标是IE和Firefox(如果其他浏览器工作,这是一个很好的奖励).到目前为止,所有结果都是火狐运行的Firefox.只是为了好玩,我想我会在其他浏览器中尝试.我不认为这让我更接近解决方案,但有趣的是看到IE糟透了.

在此输入图像描述

注意:在运行Firefox测试之前,我清除了cookie和缓存.我没有为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()
Run Code Online (Sandbox Code Playgroud)

闪存是否需要为每个swf设置虚拟机?它是否在客户端上编译动作脚本?

<embed>我的SWF和creationComplete我的主赛事之间发生了什么.mxml

six*_*ude 0

我创建了一个 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 - 快速

我已经在另一个问题中发布了我的 hello world 应用程序。如果有人知道如何加快加载一个非常简单的 swf,您可以在这里回答:

Flash:同一页面上有许多相同的 SWF