0

我的 processingjs 网页的加载时间越来越长。如何将处理的编译预缓存到 javascript？

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

4

1 回答 1

2

根据用户的经验，有两种方法可以缩短加载时间。第一种是使用预编译的草图，这比较容易：github repo，或者甚至只是使用github的下载按钮（https://github.com/processing-js/processing-js）下载master分支，然后寻找“ ./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>

顾名思义，只要确保在您准备好这样做时调用 load 函数 =)

另一种是后期加载，如果您有任何最初不在屏幕上的草图。

Processing.js 的完整下载中有一个“延迟加载”扩展 - 你可以将它包含在你的页面上，它只会在草图出现时加载它们。这样你就不会拖住整个页面的加载。

或者，您可以编写一个后台加载器，它与延迟加载扩展执行相同的操作：关闭 Processing.init，而是收集所有代表处理草图的脚本/画布元素，然后使用类似的方法在超时时加载它们

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); }
  }
}

这将继续缓慢加载您的草图，直到它用完为止。

于 2012-10-05T02:20:54.193 回答