[Web] p5.js 스케치 성능 최적화 방법으로 프레임레이트 높이기

최적화 방법 리스트

• p5.min.js 를 p5.js로 변경
• 코드에서 익명 함수를 쓰지 말 것
• 아래 코드 한 줄 추가 : 예기치 않은 인수 입력을 경고하지 않음

p5.disableFriendlyErrors = true;

 

• p5 메소드보다 빠른 자바스크립트 네이티브 코드를 활용

Chrome, running methods 10000000x times:

	p5.random took:     	283.88ms
	Math.random took: 	190.01ms

	p5.sin took:            481.14ms
	Math.sin took:          338.33ms

	p5.min took:        	781.41ms
	Math.min took:    	538.15ms

p5 Editor, running methods 10000000x times:

	p5.random took:     	2430.28ms
	Math.random took: 	85.56ms

	p5.sin took:        	2337.90ms
	Math.sin took:    	265.94ms

	p5.min took:        	8335.63ms
	Math.min took:    	5308.00ms

 

• 최대한 압축된 이미지를 사용
• DOM 요소 검색을 최소화
• 이미지는 미리 초기화
• float 사용 최소화
• stroke 사용 최소화
• 맥 chrome에서 성능이 저하되니 스케치의 크기는 800*800 이하 권장
• 중첩 루프는 사용을 자제
• 제곱근 사용 자제

 

병목 탐색 (프로파일링)

let start = millis();
let fps = frameRate();

fill(255);
stroke(0);
text("FPS: " + fps.toFixed(2), 10, height - 10);

// Do the stuff that you want to time
random(0, 100);

let end = millis();
let elapsed = end - start;
console.log("This took: " + elapsed + "ms.")