javascript - 在不阻塞的情况下执行密集型 javascript 的最佳方法是什么？

Question

所以，我正在使用 webgl 加载一个 3d 模型，并有一些代码在显示它之前对其执行一些操作。

问题是这需要几秒钟的时间，并且完全阻止用户在此期间做任何事情。在此期间您甚至无法滚动，这已经够糟糕了。我听说 javascript 中没有多线程这样的东西，但我需要一些方法让它不阻塞主线程。

我什至尝试了一种设置，将它加载到 iframe 中并使用 window.postMessage 和 message 事件监听器，但框架的域似乎使用相同的线程它的javascript也是如此，所以没有用。还有其他人有处理 CPU 密集型代码的解决方案，这样用户就不会被阻止做任何事情吗？

Answer 1

至少目前确实没有一个简单的答案

1. 网络 worker

   Web worker 在另一个线程中运行 JavaScript。不幸的是，他们被允许做的事情非常有限。通常，您所能做的就是来回传递消息。 WebWorker 不能接触 DOM，它不能做 WebGL 或制作 Canvas(目前)。目前您真正能做的就是联网以及将字符串和/或类型化数组传入和传出 WebWorker。

   如果您正在做的事情需要花费大量时间，那么可以通过 JSON 字符串和/或类型化数组传回主线程，这可能适合您。

2. 状态机

   在 JavaScript 中处理这个问题的一种常见方法是让您的加载器在多个状态下执行操作，这样您就可以这样调用它

   function doALittleMoreWork() {
      ...
      if (theresStillMoreWorkToDo) {
        setTimeout(doALittleMoreWork, 16);
      } 
   }
   

   或者类似的东西。 doALittleMoreWork 完成一部分工作，然后记住足够的状态，以便再次调用时它可以从中断处继续。 O3D loader worked 是这样的.

3. 您可以尝试使用 ES6 generators .

   生成器有效地让您 super 轻松地创建状态机。浏览器尚不支持 ES6，但现在有一些库可以让您使用此功能，例如 Google Traceur

   事实上，如果你写一个像这样的简单生成器

   function *foo() {
       console.log("do first thing");
       yield 1;
       console.log("do 2nd thing");
       yield 2;
       console.log("do 3rd thing");
       yield 3;
       console.log("do 4th thing");
       yield 4;
       console.log("do 5th thing");
       yield 5;
   }
   

   然后你通过 traceur 运行它 you'll see how it turns it into a state machine for you就像上面的 #2。