로드 시간을 단축하기 위해 processingjs 스케치를 사전 컴파일하는 방법은 무엇입니까?

Question

내 processingjs 웹 페이지의로드 시간이 꽤 털이 많습니다. 어떻게 javascript 처리 컴파일을 미리 캐시 할 수 있습니까?

웹 페이지에 처음 입력했을 때 컴파일 한 다음 (로컬 저장소에 결과를 저장하는 등) 내 응용 프로그램에서 컴파일 한 다음 후속로드에서 컴파일을 다시 사용할 수 있습니다.

Answer 1

사용자가 경험 한대로로드 시간을 줄이는 데는 두 가지 방법이 있습니다. 첫 번째는 사전 컴파일 된 스케치를 사용하는 것입니다. github repo 또는 심지어 github의 다운로드 버튼 (https://github.com/processing-js/processing-js)을 사용하여 마스터 브랜치를 다운로드 한 다음 "./tools/processing-helper.html"파일을 찾으십시오. 이것은 Processing.js에서 사용하는 JavaScript 소스로 스케치를 실행하거나 컴파일 할 수있게 해주는 도우미 페이지입니다. 이 API는 제공된 API와 연결되어 있으므로 Processing과 함께 실행해야하지만 API 전용 버전을 사용할 수 있습니다. 는 IT가 생성하는 코드 앞에 추가 "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); } 
    } 
} 

이렇게하면 스케치가 완전히 소모 될 때까지 속도가 느려지 게됩니다.