[javascript] requestAnimationFrame

Reflow와 Repaint

• 수정된 렌더 트리를 다시 렌더링하는 과정에서 발생하는 것
• 웹 애플리케이션의 성능을 떨어뜨리는 주된 요인

Reflow

• 모든 엘리먼트의 위치와 길이 등을 다시 계산하는 것으로 문서의 일부 혹은 전체를 다시 렌더링한다.
• 단일 엘리먼트 하나를 변경해도, 하위 엘리먼트나 상위 엘리먼트 등에 영향을 미칠 수 있다.

Repaint

• 레이아웃에는 영향을 주지 않지만, 가시성에는 영향을 주는 엘리먼트가 변경되면 발생한다.
• “브라우저가 DOM 트리에 있는 다른 모든 노드의 가시성을 확인해야 하므로 리페인트는 비용이 많이 든다.”고 한다.

requestAnimationFrame

• 브라우저에 그리는 일 외 다른 일이 발생할 때 계산하는 과정이 오래 걸릴 수 있는데 계산 과정이 끝날 때까지 기다리지 않고 계속 명령을 하면 과부하로 버벅댈 수 있다.
• 수행하기 원하는 애니메이션을 알리고 다음 페인팅이 진행되기 전에 그리는데 최적화될 때까지 기다린 뒤 준비가 됐을 때 그려준다.
• 기본적으로 반복되는 메서드는 아니지만 반복 할 함수 안에서 호출하여 반복시켜준다.
• 1초에 60회의 속도를 목표로 한다.
• 브라우저 랜더링에 최적화 된 시점에 실행

원 이동시키기

      const canvas = document.querySelector(".canvas");
      const context = canvas.getContext("2d");
      let xPos = 10;
      let count = 0;

      function draw() {
        if (count % 30 === 0) {
          // 초당 60회 반복을 목표로 하기 때문에 
          // 0.5초 간격으로 실행하는 것이다. 
          //setInterval로 500간격으로 실행하는 것과 같다
        context.clearRect(0, 0, canvas.width,canvas.height); 		 
        //그린것을 지우고 새로 그린다.
        //(0,0)에서 캔버스 크기만큼 다 지운다.
        // 지우지 않으면 그린 흔적이 남아서 선으로 연결됨
        context.beginPath();
        context.arc(xPos, 150, 10, 0, Math.PI * 2, false);
        context.fill();
        xPos += 2;
  		}
        count++;
        requestAnimationFrame(draw);
      }

	//setInterval(draw, 500);

      draw();

참고 : https://wonism.github.io/reflow-repaint/