如何預編譯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); } 
    } 
} 

這將保持緩慢加載你的草圖，直到它用完。