如何在不降低帧速率的情况下实例化大型MovieClip EaselJS/CreateJS

Question

小小内容： 我已经在Flash Pro/Adob​​e Animate中创建了带有时间轴动画的详细MovieClip，并将其导出到了CreateJS/EaselJS库。当我在运行时对它进行实例化时，它需要比帧或“滴答”更长的时间才能完成此实例化，并且动画播放会在进入下一帧之前等待。这正在播放动画中造成呃逆。这是我的项目中出现的一个问题。如何在不简化MovieClip中的框架艺术的情况下克服这种呃逆？

代码：如果现在还不清楚，这就是我说的...

var instanceMC = new lib.bigMovieClip_mc(); // <-- LONG DELAY, OVER 1 TICK IN TIME 

stage.addChild(instanceMC); // <-- from here on it seems to run smoothly 
instanceMC.x = xPosition; 
instanceMC.y = yPosition; 
stage.update(); 

我的想法：

1. 如果异步实例是一个选项，这将很好地工作对于我的情况，但我无法弄清楚是否以及如何做到这一点。我发现它可以为SpriteSheetBuilder完成，这是一个类似但不同的情况（我不能使用SpriteSheetBuilder，因为我有嵌套的独立控制的影片剪辑）。
2. 我可以将MovieClip分解为更小的影片剪辑并独立实例化，然后将它们组合在一起。这有点烦人，但可行。如果我这样做了，我会想要听一个事件来完成每个实例化。这样的事件是否存在？我在文档中找不到一个。
3. LoadJS。我很不熟悉LoadJS。我检查了一下，它看起来像是用于管理下载，而不是其他初始化任务。但是，如果它可以向加载队列添加一系列大的实例（或者如果有类似的东西），并且在实例化过程中不阻碍时间线回放，那就很好。
4. 多个画布和阶段？如果我用自己的舞台添加第二个画布，那么我想每个舞台都会有独立的帧限制器，因此，通过在一个实例化我的MovieClip并在另一个中播放我的动画，我可以分离实例化和回放。在我的特殊情况下，应用程序的每个部分都是相当独立的，因此切换canvas的中间用法是有点可行的。我宁愿不处理将应用程序拆分为两部分，但它似乎是一种直接解决问题而不深入功能的直接方式。这在技术上甚至可能，还是我做了一个错误的假设？

帮助：您可以提出哪种方法可以解决我的问题（无论是否列出）？

Answer 1

首先，我希望有人比这更好的回答，我会很乐意改变选择的答案。

我已经在一定程度上研究了各种选项，并了解到这实际上是一个非常根深蒂固的问题。它与浏览器的单线程性质有关，UI更新使用相同的线程，必须等待。参见：here，here，here和here。

从头开始设计库（如CreateJS）尽可能地清除调用堆栈并利用回调队列可以避免在自己的操作（如MovieClip的实例化）期间锁定UI。 （实际上，这会暂停每帧复杂操作的代码。）这是处理这种野兽的最佳方法。据我所知，在CreateJS中，MovieClip的实例化没有这种支持，尽管在运行时构建Spritesheet有一个“异步”选项，当然，LoadJS也是异步运行的（但不支持到目前为止的代码执行据我所知）。据推测，我非常大的影片剪辑将被视为创作者预期用途的界限之外。

我的解决方案是在运行我的应用程序之前预载所有影片剪辑并显示预加载器。这不是一个理想的解决方案，因为它有很长的等待时间，但它比我的需求（即更少的劳动力）更好地工作。一个更好的办法可能会是我的问题的影片剪辑分解成更小的影片剪辑，将不能独立引起的问题，然后实例化它们像这样：

setTimeout(function(){ firstMovieClip = new lib.firstMovieClip(); },0); 
setTimeout(function(){ secondMovieClip = new lib.secondMovieClip(); },0); 
and so on.... 

这导致他们不能直接进入堆栈，但进入回调队列。这反过来又允许UI在这些较小的实例之间更新，因为堆栈清除。

值得一提的是，还有一些选项可以在Web工作人员的浏览器中运行其他线程。它不适合我的目的，因为这些网络工作者中的对象不能移动到用户界面。这对于一个简单结果的复杂计算（如数字）来说是一个很好的解决方案。