Question

我的processingjs网页的加载时间非常多了。如何预处理编译到javascript的处理？

我的应用程序可以在第一次进入网页时进行编译（可能将结果保存在本地存储中？），然后在后续加载时重复使用该编译。

Answer 1

有两种方法可以减少用户体验的加载时间。第一个是使用预编译的草图，这相对简单：github repo，甚至只需使用github的下载按钮（https://github.com/processing-js/processing-js）下载主分支，然后查找“./tools/processing-helper.html”文件。这是一个帮助页面，允许您运行或编译草图到Processing.js使用的JavaScript源代码。您仍然需要与Processing一起运行它，因为它与提供的API相关联，但您可以使用“仅API”版本。获取它生成的代码，在“var mySketch =”之前添加，然后在页面上执行此操作：

<script src="processing.api.js"></script>
<script>
function whenImGoodAndReady() {
  var mySketch = (function.....) // generated by Processing.js helper
  var myCanvas = document.getElementById('mycanvas');
  new Processing(myCanvas, mySketch);
}
</script>

当顾名思义你准备好这样做时，确保调用加载函数=）

如果您有任何最初在屏幕外的草图，则另一个是进行延迟加载。

在Processing.js的完整下载中有一个“延迟加载”扩展程序 - 您可以在页面上包含该扩展名，并且只有在查看草图时才会加载草图。这样你就不会陷入整个页面加载。

或者，您可以编写一个与延迟加载扩展相同的后台加载器：关闭Processing.init，然后收集代表Processing草图的所有脚本/画布元素，然后使用某些内容加载超时像

var sketchList = [];

function findSketches() {
  /* find all script/canvas elements */
  for(every of these elements) {
    sketchList.append({
      canvas: <a canvas element>,
      sourceCode: <the sketch code>
    });
  }
  // kickstart slowloading
  slowLoad();
}

function slowLoad() {
  if(sketchList.length>0) {
    var sketchData = sketchList.splice(0,1);
    try {
      new Processing(sketchData.canvas, sketchData.sourceCode);
      setTimeout(slowLoad, 15000); // load next sketch in 15 seconds
    } catch (e) { console.log(e); }
  }
}

这将使你的草图缓慢加载直到它用完为止。

如何预编译processingjs草图以加快加载时间？

1 个答案: