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

Question

我的processingjs网页的加载时间变得非常多毛。我如何预处理JavaScript的编译？

这是可以接受的我的应用程序在第一次进入网页（也许保持结果在本地存储？），然后再用在后续加载汇编编译。

Answer 1

有两种方式由用户经历压低加载时间。首先是使用预编译的草图，这是比较容易的：GitHub库，甚至只是下载使用GitHub的下载按钮（https://github.com/processing-js/processing-js）主分支，然后寻找“./tools/processing-helper.html”文件。这是一个帮助页面，可让您将草图运行或编译到Processing.js使用的JavaScript源代码。您仍然需要将其与Processing一起运行，因为它与提供的API联系在一起，但您可以使用“API only”版本。就拿它生成的代码，在前面加上“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，然后收集表示处理草图的所有脚本/画布元素，然后使用超时加载它们像

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

这将保持缓慢加载你的草图，直到它用完。