私のprocessingjsWebページの読み込み時間はかなり毛むくじゃらになっています。処理のコンパイルをjavascriptにプリキャッシュするにはどうすればよいですか?
私のアプリケーションが最初にWebページに入ったときにコンパイルし(おそらく結果をローカルストアに保持しますか?)、その後のロードでコンパイルを再利用することは許容されます。
私のprocessingjsWebページの読み込み時間はかなり毛むくじゃらになっています。処理のコンパイルをjavascriptにプリキャッシュするにはどうすればよいですか?
私のアプリケーションが最初にWebページに入ったときにコンパイルし(おそらく結果をローカルストアに保持しますか?)、その後のロードでコンパイルを再利用することは許容されます。
ユーザーが経験するように、ロード時間を短縮する方法は2つあります。1つ目は、プリコンパイルされたスケッチを使用することです。これは比較的簡単です。githubリポジトリ、またはgithubのダウンロードボタン(https://github.com/processing-js/processing-js)を使用してマスターブランチをダウンロードし、「 ./tools/processing-helper.html"ファイル。これは、Processing.jsが使用するJavaScriptソースへのスケッチを実行またはコンパイルできるヘルパーページです。提供されているAPIに関連付けられているため、Processingと一緒にこれを実行する必要がありますが、そのために「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関数を呼び出してください=)
もう1つは、最初は画面外にあるスケッチがある場合に、レイトロードを実行することです。
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); }
}
}
これにより、スケッチがなくなるまでスケッチの読み込みが遅くなります。